Ucalgary_Baja/BajaUofCWebsite
4
0
Fork 0
mirror of https://github.com/UofCBaja/BajaUofCWebsite.git synced 2025-06-16 05:44:17 -06:00
Code Issues Packages Projects Releases Wiki Activity

Merge branch 'dev' into homePage

Browse Source
This commit is contained in:
darkicewolf50 2025-05-31 14:55:12 -06:00
commit 7397e4edcc
11 changed files with 191 additions and 90 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
public/index.html
View File

@ -33,7 +33,7 @@
work correctly both with client-side routing and a non-root public URL. work correctly both with client-side routing and a non-root public URL.
Learn how to configure a non-root public URL by running `npm run build`. Learn how to configure a non-root public URL by running `npm run build`.
--> -->
<title>Schulich Off-Road</title> <title>UCalgary Baja</title>
</head> </head>
<body> <body>
<noscript>You need to enable JavaScript to run this app.</noscript> <noscript>You need to enable JavaScript to run this app.</noscript>

4
src/Footer/Ender.css
View File

@ -31,3 +31,7 @@
list-style-type: none; list-style-type: none;
padding-right: 2%; padding-right: 2%;
} }
#ender a img {
height: 7svh;
}

46
src/Footer/Ender.js
View File

@ -1,4 +1,8 @@
import "./Ender.css"; import "./Ender.css";
import linkedInLogo from "./InBug-White.png";
import instagramLogo from "./instagram-white-icon.png";
import emailLogo from "./email-white.png";
import authors from "./humans.txt";
/** /**
* @param {null} null - requires onthing * @param {null} null - requires onthing
* @returns {JSX.Element} Page - HTML tags and JS functionality * @returns {JSX.Element} Page - HTML tags and JS functionality
@ -6,23 +10,55 @@ import "./Ender.css";
* @author Brock <darkicewolf50@gmail.com> * @author Brock <darkicewolf50@gmail.com>
* @todo add who helped developed the site and finalize css * @todo add who helped developed the site and finalize css
*/ */
const Ender = () => { export default function Ender() {
const date = new Date();
return ( return (
<footer id="ender"> <footer id="ender">
<div> <div>
<p>&#169; 2023 by Schulich Off-Road </p> <p>&#169; {date.getFullYear()} UCalgary Baja </p>
<p <p
onClick={() => window.open("https://www.morphgenix.com/", "_blank")} onClick={() => window.open("https://www.morphgenix.com/", "_blank")}
id="pointerCursor"> id="pointerCursor">
Partnered with Morphgenix Partnered with Morphgenix
</p> </p>
</div> </div>
<div>
<a href="https://www.linkedin.com/company/schulich-off-road/">
<img
src={linkedInLogo}
alt="Linkedin Logo"
/>
</a>
<a href="https://www.instagram.com/uofcbaja/">
<img
src={instagramLogo}
alt="Intragram Logo"
/>
</a>
<a href={authors}>
<img
src="https://humanstxt.org/img/oficial-logos/humanstxt-transparent-1ink.png"
alt="humans txt"
/>
</a>
<a href="mailto:uofcbaja@gmail.com?subject=Lets start something great">
<img
src={emailLogo}
alt="email us logo"
/>
</a>
<a href="https://www.facebook.com/schulich.offroad/">
<img
src="https://img.icons8.com/ios-filled/50/FFFFFF/facebook--v1.png"
alt="Facebook Logo"
/>
</a>
</div>
<ul className="hidden"> <ul className="hidden">
<li>Developed by:</li> <li>Developed by:</li>
<li>Brock</li> <li>Brock</li>
</ul> </ul>
</footer> </footer>
); );
}; }
export default Ender;

BIN
src/Footer/InBug-White.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 10 KiB

BIN
src/Footer/email-white.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 9.0 KiB

27
src/Footer/humans.txt Normal file
View File

@ -0,0 +1,27 @@
/* TEAM */
Lead:Brock
Contact: hello [at] humanstxt.org
Github: darkicewolf50
UI developer: Maria Macias
Twitter: @maria_ux
One eyed illustrator: Carlos Mañas
Twitter: @oneeyedman
Standard Man: Abel Cabans
Twitter: @abelcabans
Web designer: Abel Sutilo
Twitter: @abelsutilo
From:Sevilla, Andalucia, Spain
/* THANKS */
/* SITE */
Last update:2025/02/04
Language: English
Doctype:HTML5
IDE: VSCode

BIN
src/Footer/instagram-white-icon.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 19 KiB

113
src/Header/Header.css
View File

@ -4,10 +4,16 @@ header {
margin: 1%; margin: 1%;
margin-top: 1svh; margin-top: 1svh;
padding-right: 0.5svw; padding-right: 0.5svw;
/* width: 100%; */
align-items: center; align-items: center;
justify-content: space-between; justify-content: space-between;
background-color: antiquewhite; background-color: #1f1f1f;
/* position: absolute; */
z-index: 1;
top: 0;
left: 0;
right: 0;
} }
header a { header a {
@ -38,37 +44,43 @@ header div {
#logo { #logo {
height: 10svh; height: 10svh;
/* width: 10svw; */
padding: 0.15rem; padding: 0.15rem;
margin-left: 3svw;
} }
/* naviagation section */ /* naviagation section */
/* determines spacing and total amount of page it takes up*/ nav ul {
nav { display: flex;
width: 50%; flex-direction: row;
justify-content: space-between;
list-style: none;
margin: 0px;
padding: 0px;
column-gap: 2svw;
} }
nav a { nav a {
text-decoration: none; text-decoration: none;
color: inherit; color: inherit;
cursor: pointer; cursor: pointer;
} background-color: #1f1f1f;
color: whitesmoke;
nav a li { font-size: larger;
background-color: white;
padding: 0.5rem; /* border-left: solid 2px white; */
/* border-left: solid 2px gray; */
} }
/* removes first divider */ /* removes first divider */
/* can be removed if no borders from above */ /* can be removed if no borders from above */
#FirstNav { nav a:first-child {
border-left: none; border-left: none;
} }
nav a li:hover { nav a li:hover {
background-color: gray; color: #a80029;
} }
nav ul { nav ul {
display: flex; display: flex;
flex-direction: row; flex-direction: row;
@ -79,8 +91,13 @@ nav ul {
z-index: 1; z-index: 1;
} }
creates dwon downs
/* */ /* correct colour of links in dark mode */
.darkmode nav a li::hover {
filter: hue-rotate(180deg);
}
/* creates drop downs */
/* makes it so that the tags look the same whist having removing browser error */ /* makes it so that the tags look the same whist having removing browser error */
.DropDownHeader { .DropDownHeader {
display: inline-block; display: inline-block;
@ -120,12 +137,49 @@ creates dwon downs
width: 100%; width: 100%;
display: flex; display: flex;
/* bebug border, use margin to advantage, may cause error later */ position: relative;
/* border-bottom: solid 1px black; */ z-index: 0;
top: 0;
left: 0;
background-repeat: no-repeat;
background-size: cover;
background-position: center;
/* -webkit-mask-image: linear-gradient(
to bottom,
black var(--fade-starts-at-bottom),
transparent
);
mask-image: linear-gradient(
to bottom,
black var(--fade-starts-at-bottom),
transparent
); */
} }
#BannerHeader img { #BannerHeader::after {
content: "";
position: absolute; position: absolute;
inset: 0;
background: linear-gradient(
to bottom,
rgba(0, 0, 0, 0) var(--fade-starts-at-bottom, 70%),
whitesmoke 100%
);
pointer-events: none;
z-index: 1;
}
:root {
--fade-starts-at-bottom: 90%;
--fade-starts-at-top: 96%;
--banner-text-background: rgba(31, 31, 31, 0.8);
--banner-text-padding: 2svh 2svw;
--banner-text-rounding: 1rem;
}
/* #BannerHeader img {
position: relative;
height: 100svh; height: 100svh;
width: inherit; width: inherit;
top: 0; top: 0;
@ -133,36 +187,41 @@ creates dwon downs
background-size: cover; background-size: cover;
background-position: center; background-position: center;
z-index: -1; z-index: -2;
} } */
/* used to postiion title and sub title */ /* used to postiion title and sub title */
#BannerHeader div { #BannerHeader div {
margin-top: 15%; margin-top: 40svh;
padding-left: 60svw;
} }
#BannerHeader h1 { #BannerHeader h1 {
display: flex; display: flex;
width: fit-content; width: fit-content;
margin: 0px;
margin-left: 3svw; font-size: 80px; /* todo make larger */
font-size: xx-large;
font-weight: normal; font-weight: normal;
background-color: white; color: white;
background-color: var(--banner-text-background);
padding: var(--banner-text-padding);
border-radius: var(--banner-text-rounding);
font-weight: bolder;
} }
#BannerHeader h2 { #BannerHeader h2 {
display: flex; display: flex;
width: fit-content; width: fit-content;
margin-left: 3svw;
font-size: xx-large; font-size: xx-large;
font-weight: normal; font-weight: normal;
background-color: white; color: white;
background-color: var(--banner-text-background);
padding: var(--banner-text-padding);
border-radius: var(--banner-text-rounding);
} }
/* for dark mode */ /* for dark mode */

74
src/Header/Header.js
View File

@ -3,7 +3,7 @@ import lightDark from "./light-dark.webp";
import { Outlet, Link } from "react-router-dom"; import { Outlet, Link } from "react-router-dom";
import "./Header.css"; import "./Header.css";
import Ender from "../Footer/Ender"; import Ender from "../Footer/Ender";
import { useEffect, useState } from "react"; import { useState } from "react";
/** /**
* @param {null} nothing - Takes in nothing * @param {null} nothing - Takes in nothing
@ -17,11 +17,7 @@ export default function Header() {
titleText: "UCalgary Baja", titleText: "UCalgary Baja",
subtitleText: "Hello", subtitleText: "Hello",
imgUrl: "https://picsum.photos/200", imgUrl: "https://picsum.photos/200",
imgAlt: "Lorem picsum", headerPostion: "absolute",
});
useEffect(() => {
HeaderBannerHeight();
}); });
/** /**
@ -53,36 +49,15 @@ export default function Header() {
} }
}); });
/**
* @param {null} nothing - This takes in nothing
* @returns {null} nothing - This returns nothing
* @description This makes it so that the banner will always be 100% of the page at the top
* @author Brock <darkicewolf50@gmail.com>
*/
const HeaderBannerHeight = () => {
if (bannerInfo.titleText === "" && bannerInfo.imgUrl === "") {
// return early to avoid error when no banner is desired
return;
}
const headerTop = document.getElementsByTagName("header")[0];
const headerTopStyle = getComputedStyle(headerTop);
const headerTopInnerHeight = headerTop.offsetHeight;
// 2 is used to align bottom of div with img
const headerTopMarginTop = parseFloat(headerTopStyle.marginTop) * 2;
const headerTopMarginHeight = parseFloat(headerTopStyle.marginBottom);
const headerTopTotalHeight =
headerTopInnerHeight + headerTopMarginHeight + headerTopMarginTop;
const HomeBannerTop = document.getElementById("BannerHeader");
// 1svh is to gget the div close enough to the image
HomeBannerTop.style.height = `calc(100svh + -${headerTopTotalHeight}px)`;
};
return ( return (
<> <>
<header> <header
style={{
position:
bannerInfo.titleText === "" && bannerInfo.imgUrl === ""
? "relative"
: "absolute",
}}>
<Link to={"/"}> <Link to={"/"}>
<img <img
id="logo" id="logo"
@ -93,19 +68,19 @@ export default function Header() {
<nav> <nav>
<ul> <ul>
<Link to={"/"}> <Link to={"/"}>
<li id="FirstNav">Home</li> <li id="FirstNav">HOME</li>
</Link>
<Link to={"/About"}>
<li>ABOUT</li>
</Link>
<Link to={"/Vehicles"}>
<li>OUR VEHICLES</li>
</Link> </Link>
<Link to={"/"}> <Link to={"/"}>
<li>About</li> <li>HISTORY</li>
</Link>
<Link to={"/Teams"}>
<li>Team</li>
</Link>
<Link to={"/"}>
<li>History</li>
</Link> </Link>
<Link to={"/OurSponsors"}> <Link to={"/OurSponsors"}>
<li>Sponsors</li> <li>SPONSORS</li>
</Link> </Link>
{/* <Link to={"/OurSponsors"}> {/* <Link to={"/OurSponsors"}>
<li>Become a Sponsor</li> <li>Become a Sponsor</li>
@ -141,7 +116,7 @@ export default function Header() {
</ul> </ul>
</li> */} </li> */}
<Link to={"/"}> <Link to={"/"}>
<li>Contact Us</li> <li>CONTACT US</li>
</Link> </Link>
</ul> </ul>
</nav> </nav>
@ -158,17 +133,16 @@ export default function Header() {
{bannerInfo.titleText === "" && bannerInfo.imgUrl === "" ? ( {bannerInfo.titleText === "" && bannerInfo.imgUrl === "" ? (
<></> <></>
) : ( ) : (
<div id="BannerHeader"> <>
<img <div
id="BannerBackgound" id="BannerHeader"
src={bannerInfo.imgUrl} style={{ backgroundImage: `url(${bannerInfo.imgUrl})` }}>
alt={bannerInfo.imgAlt}
/>
<div> <div>
<h1>{bannerInfo.titleText}</h1> <h1>{bannerInfo.titleText}</h1>
<h2>{bannerInfo.subtitleText}</h2> <h2>{bannerInfo.subtitleText}</h2>
</div> </div>
</div> </div>
</>
)} )}
<Outlet context={{ bannerInfo, setBannerInfo }} /> <Outlet context={{ bannerInfo, setBannerInfo }} />

6
src/Home/Home.jsx
View File

@ -13,9 +13,9 @@ export default function Home() {
<> <>
<UpdateBanner <UpdateBanner
updatedTitleText="UCalgary Baja" updatedTitleText="UCalgary Baja"
updatedSubtitleText="Catchphase goes here" updatedSubtitleText=""
updatedImgUrl="https://picsum.photos/200" updatedImgUrl="https://res.cloudinary.com/dpgrgsh7g/image/upload/v1748720160/Home_Baja_2025_soty4k.jpg"
updatetdImgAlt="cool shot of driver in car, replace later" updatetdImgAlt="Lorem Picsum"
/> />
<div className="HomePageLayout"> <div className="HomePageLayout">
<div> <div>

1
src/index.js
View File

@ -12,6 +12,7 @@ import Gallery from "./Gallery/Gallery";
import "./index.css"; import "./index.css";
import MockPage from "./MockDB/MockPage"; import MockPage from "./MockDB/MockPage";
import Home from "./Home/Home"; import Home from "./Home/Home";
import Home from "./Home/Home";
const root = ReactDOM.createRoot(document.getElementById("root")); const root = ReactDOM.createRoot(document.getElementById("root"));
root.render( root.render(