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

feat(newSite): history about us and contact us started

Browse Source
This commit is contained in:
darkicewolf50
2025-06-28 15:59:44 -06:00
parent 42712746eb
commit bef3b1ce95
12 changed files with 659 additions and 334 deletions
Download Patch File Download Diff File Expand all files Collapse all files

8
src/AboutUs/AboutUs.css
View File

@ -8,6 +8,7 @@
background-color: #1f1f1f;
color: white;
font-size: larger;
}
#AboutUs h2 {
@ -19,8 +20,6 @@
}
#AboutUs #AboutEvents {
width: 70svw;
justify-content: flex-start;
align-items: flex-start;
padding: 2svh 2svw;
@ -34,7 +33,6 @@
flex-flow: row wrap;
justify-content: center;
column-gap: 2svw;
padding: 2svh 2svw;
}
@ -48,7 +46,7 @@
flex-direction: column;
justify-content: flex-start;
padding: 0svh 1svw;
max-width: 30svw;
max-width: 700px;
}
#about-competitions {
@ -63,6 +61,8 @@
#about-competitions ol {
margin: 0px;
padding: 0px;
display: flex;
flex-flow: row wrap;
}
#about-competitions li {

83
src/AboutUs/AboutUs.js
View File

@ -24,29 +24,20 @@ const AboutsUs = () => {
<div>
<h2>Our Mission</h2>
<p>
Schulich Off-Road is a student organization responsible for
designing, building, and racing an off-road vehicle in the Baja
SAE intercollegiate competition organized by the Society of
Automotive Engineers (SAE) every year. Schulich Off-Road's cars
are tough, dependable, competitive, and extremely fun to drive.
UCalgary Baja is a student organization that allows students to
design, build, and race an off-road vehicle to participate in the
Baja SAE competition organized by the Society of Automotive
Engineers (SAE) every year.
</p>
<p>
Schulich Off-road is a team consisting of talented and determined
competitive individuals in engineering who strive to expand their
horizons, earn experience, and network with leading companies in
their respective fields. Our members achieve this by being a part
of one of our 6 sub-teams: Drivetrain, Logistics and Software,
Suspension, Chassis and Ergonomics, Steering, and Electrical and
Testing.
</p>
<p>
More info about the club, expanding on what was on the home page.
We have students learn because we build so and so and incorporate
all these skills.
{/* this is very temporary and bad */}
<br />
<br />
to be removed later
We're dedicated to giving members hands-on experience working on
the car, which allows them to both learn new skills and
techniques, such as using Solidworks, Ansys, machining, and
welding, as well as utilizing knowledge learned from classrooms.
This is done with practical projects, allowing students to build
skills and knowledge that employers are looking for. We strive to
bridge the gap between education and application, making learning
effective and memorable.
</p>
</div>
@ -62,13 +53,34 @@ const AboutsUs = () => {
/>
<div>
<h2>The Competition</h2>
<p>what the competition is about</p>
<p>
Every year, we take our car to the United States to compete
against other teams from all across the globe. Teams from
universities design, build, and race these all-terrain vehicles
that are capable of going through a series of rough courses, as
well as discuss their findings, such as cost reports and design
choices, all in a series of dynamic and static events. We also get
the chance to connect with engineering students from around the
world, trading advice and making new friends, and network with
sponsors to explore future job opportunities.
</p>
</div>
</div>
<div id="about-competitions">
<div>
<h2>Static Events</h2>
<ol>
<p>
Static events are where the whole team steps away from building
the car and takes a look at the professional and analytical aspect
of the team. The business presentation, cost event, and technical
inspection are all events that are equally important as the actual
car, as this is where we show real-world understanding of
engineering, manufacturing, and business decisions. It's not only
about making the car, it's also about demonstrating a clear
understanding behind design rationale, cost efficiency, and
marketability within a competitive industry.
</p>
{/* <ol>
<li>
<h3>SALES PRESENTATION</h3>
<h3>Business Team</h3>
@ -99,14 +111,25 @@ const AboutsUs = () => {
etc.)
</p>
</li>
</ol>
</ol> */}
</div>
<div>
<h2>Dynamic Events</h2>
<ul>
<p>
Dynamic events are where the car is actually put to the test, with
different events each made to test a certain aspect of the car.
Acceleration, sled pull, hill climb and maneuverability are all
events that show how our vehicle does against other teams. After
all these events, the finale comes in the form of the endurance
event, a four-hour race filled with jumps, pits, and other
obstacles, and teams compete to see how many laps the cars can
make. It combines all the factors from previous events, on top of
the reliability of our car.
</p>
{/* <ul>
<li>
<h3>BRAKE INSPECTION</h3>
<p>The cars is tested tyo see if all four wheels stop</p>
<p>The cars is tested to see if all four wheels stop</p>
</li>
<li>
<h3>ACCELERATION</h3>
@ -149,14 +172,10 @@ const AboutsUs = () => {
hosts.
</p>
</li>
</ul>
HILL CLIMB / SLED PULL - The car's torque is tested by pulling
another variable load, or by idk checking if it can drive up a hill?
</ul> */}
</div>
</div>
<article>
<p>Slight info about our car but also link that leads to history</p>
</article>
<div id="AboutJoin">
<p>
Intersted in joining?{" "}

111
src/Contact/Contact.css Normal file
View File

@ -0,0 +1,111 @@
#Contact a {
text-decoration: none;
color: inherit;
}
#Contact ul {
list-style-type: none;
padding: 0px;
margin: 0px;
}
#Contact img {
width: 100px;
height: 100px;
}
#Contact h1,
#Contact h4,
#Contact p {
margin: 1svh 0svw;
}
#Contact div {
display: flex;
flex-direction: row;
align-items: flex-start;
row-gap: 2svh;
}
#Contact div:nth-child(1) {
flex-direction: row;
column-gap: 2svw;
/* justify-content: center; */
align-items: center;
background: black;
color: white;
padding: 2svh 0svw;
}
#Contact div:nth-child(1) div:first-child {
flex-direction: row;
margin-left: 4svw;
}
#Contact div:nth-child(1) div:last-child {
flex-direction: column;
margin: 0px;
margin-left: auto;
margin-right: 16svw;
font-size: 30px;
}
#Contact div:nth-child(1) div:last-child h1 {
margin: 0px;
font-size: 40px;
width: inherit;
}
#Contact div:nth-child(1) img {
width: 300px;
height: 80svh;
}
#Contact div:nth-child(2) div {
flex-direction: column;
font-size: 30px;
font-weight: bold;
margin: 0px;
padding: 0svh 2svw;
}
#Contact div:nth-child(2) h1 {
text-wrap: nowrap;
align-self: flex-start;
margin-left: 2svw;
margin-right: 2svw;
font-size: 60px;
}
#Contact div:nth-child(2) {
margin: 0svh 0svw;
justify-content: flex-start;
height: 40svh;
}
#Contact div:last-child {
margin: 4svh 0svw;
justify-content: space-evenly;
}
#Contact #ContactUs {
display: flex;
flex-flow: row wrap;
align-items: center;
}
#Contact #ContactUs div {
display: flex;
flex-direction: column;
max-width: 450px;
min-width: 300px;
height: auto;
padding: 1svh 1svw;
background-color: rgba(0, 0, 0, 0.8);
color: white;
border-radius: 1rem;
justify-content: space-between;
align-items: flex-start;
margin: 0px;
row-gap: 0px;
}

69
src/Contact/Contact.jsx Normal file
View File

@ -0,0 +1,69 @@
import UpdateBanner from "../Header/UpdateBanner";
import "./Contact.css";
export default function Contact() {
return (
<div id="Contact">
{/* <UpdateBanner
updatedTitleText=""
updatedSubtitleText=""
updatedImgUrl=""
updatedImgAlt="Lorem Picsum"
updatedHeaderBackgroundColour="black"
/> */}
<UpdateBanner
updatedTitleText="Contact Us"
updatedSubtitleText=""
updatedImgUrl="https://picsum.photos/200"
/>
<div>
<div>
<img
src="https://static.wixstatic.com/media/5824fc_7b1be3e69c074f669945ecdbd23ce4ce~mv2.jpg/v1/fill/w_482,h_1068,fp_0.38_0.50,q_85,usm_0.66_1.00_0.01,enc_avif,quality_auto/_MG_1822_edited.jpg"
alt="Team members bending a tube"
/>
<img
src="https://static.wixstatic.com/media/5824fc_b83d649723274d5aa1455380f96e35c3~mv2.jpg/v1/fill/w_482,h_1068,al_c,q_85,usm_0.66_1.00_0.01,enc_avif,quality_auto/20240203_155632.jpg"
alt="Team member filing"
/>
<img
src="https://static.wixstatic.com/media/5824fc_065658fda1d94a7b8b620a7ce43a503d~mv2.jpg/v1/fill/w_482,h_1068,al_c,q_85,usm_0.66_1.00_0.01,enc_avif,quality_auto/_MG_1830_edited.jpg"
alt="Team member welding"
/>
</div>
<div>
<h1>Hours of Operation</h1>
<a href="mailto:uofcbaja@gmail.com">
<h4>Send us an email.</h4>
<h4>uofcbaja@gmail.com</h4>
</a>
<ul>
<li>Wednesday: 6pm - 8pm</li>
<li>Saturday: 10am - 4pm</li>
</ul>
</div>
</div>
<div id="ContactUs">
<div>
<h2>Get in Touch</h2>
<p>
Please feel free to reach out about questions, opporunities or just
want to connect. Feel free to either fill out this form or contact
me through one of the many of the platforms below
</p>
</div>
<div>
<label>Name</label>
<input data-dioxus-id="360" />
<label>Email</label>
<input data-dioxus-id="361" />
<label>Message</label>
<textarea data-dioxus-id="362"></textarea>
<p></p>
<button data-dioxus-id="363">Submit</button>
</div>
</div>
</div>
);
}

2
src/Header/Header.js
View File

@ -115,7 +115,7 @@ export default function Header() {
</Link>
</ul>
</li> */}
<Link to={"/"}>
<Link to={"/Contact"}>
<li>CONTACT US</li>
</Link>
</ul>

23
src/History/History.css
View File

@ -5,6 +5,7 @@
row-gap: 4svh;
background-color: black;
color: white;
font-size: larger;
}
#History div {
@ -43,7 +44,7 @@
#History table {
border-collapse: collapse;
width: auto;
margin: 2svh auto;
margin: 0svh auto;
}
#History table tbody {
@ -55,9 +56,10 @@
}
#History tr td {
width: 300px;
height: 300px;
width: 400px;
height: 400px;
vertical-align: middle;
justify-content: center;
}
#History tr td img {
@ -70,10 +72,9 @@
#History .HistoryCompInfo {
display: block;
text-align: center;
height: auto;
height: fit-content;
width: inherit;
padding: 12svh 0svw;
padding: 4svh 0svw;
border: 1px solid white;
border-radius: 1rem;
@ -83,13 +84,13 @@
--historyPaddingFromMiddle: 4svw;
}
#History table tr td:first-child {
/* #History table tr td:first-child {
padding-right: var(--historyPaddingFromMiddle);
}
} */
#History table tr td:nth-child(3) {
/* #History table tr td:nth-child(3) {
padding-left: var(--historyPaddingFromMiddle);
}
} */
#History .HistoryCompInfo h2,
#History .HistoryCompInfo h4 {
@ -119,7 +120,7 @@
#History .symbol {
position: relative;
width: 40px;
width: 10px;
text-align: center;
}

51
src/History/History.jsx
View File

@ -4,6 +4,9 @@ import "./History.css";
import { Link } from "react-router-dom";
import React from "react";
/*
* @todo move join to top
*/
export default function History() {
let historyTimeLineInfo = [
{
@ -16,7 +19,35 @@ export default function History() {
},
{
year: "2023-2024",
competitionCarImg: "https://picsum.photos/200",
competitionCarImg:
"https://static.wixstatic.com/media/5824fc_128f7d18ed2f44c6883cc5b86cc1b2c2~mv2.jpg/v1/fill/w_732,h_675,al_c,q_85,usm_0.66_1.00_0.01,enc_avif,quality_auto/IMG_20230504_084347041.jpg",
competitions: [
{ location: "California", placement: "26th" },
{ location: "Williamsport", placement: "65th" },
],
},
{
year: "2323",
competitionCarImg:
"https://static.wixstatic.com/media/5824fc_7a03429a7efb4ca2978176a9e9f7d9e3~mv2.jpg/v1/fill/w_732,h_675,al_c,q_85,usm_0.66_1.00_0.01,enc_avif,quality_auto/MVIMG_20190615_145709_edited.jpg",
competitions: [
{ location: "California", placement: "26th" },
{ location: "Williamsport", placement: "65th" },
],
},
{
year: "1234",
competitionCarImg:
"https://static.wixstatic.com/media/5824fc_b2388960e7d44459abe5db3499b8ecc0~mv2.jpg/v1/fill/w_732,h_675,fp_0.50_0.36,q_85,usm_0.66_1.00_0.01,enc_avif,quality_auto/7.jpg",
competitions: [
{ location: "California", placement: "26th" },
{ location: "Williamsport", placement: "65th" },
],
},
{
year: "54y67",
competitionCarImg:
"https://static.wixstatic.com/media/5824fc_7ee01b6e4cdf416c8affff42cc19637e~mv2.jpg/v1/fill/w_732,h_675,al_c,q_85,usm_0.66_1.00_0.01,enc_avif,quality_auto/IMG_0430.jpg",
competitions: [
{ location: "California", placement: "26th" },
{ location: "Williamsport", placement: "65th" },
@ -48,6 +79,15 @@ export default function History() {
<col />
</colgroup> */}
<tbody>
<tr>
<td></td>
<td
className="symbol"
id="HistoryJoin">
<div>Where You Join!</div>
</td>
<td></td>
</tr>
{historyTimeLineInfo.map((yearInfo, index) => {
return (
<tr key={index}>
@ -93,15 +133,6 @@ export default function History() {
</tr>
);
})}
<tr>
<td></td>
<td
className="symbol"
id="HistoryJoin">
<div>Where You Join!</div>
</td>
<td></td>
</tr>
</tbody>
</table>
</div>

0
src/Teams/Team.css Normal file
View File

64
src/Teams/Team.jsx Normal file
View File

@ -0,0 +1,64 @@
import "./Team.css";
import UpdateBanner from "../Header/UpdateBanner";
export default function Team() {
let listofLeads = [
{
urlPhotoLink:
"https://static.wixstatic.com/media/5824fc_1c487c2b3eac4ef6ac53a6d75b6867e1~mv2.jpg/v1/fill/w_420,h_497,fp_0.51_0.47,q_80,usm_0.66_1.00_0.01,enc_avif,quality_auto/Baja-14_edited.jpg",
name: "Joshua Gall",
descriptionOfLead:
"I am in my final of mechanical engineering. This is my fifth and final year on the team!",
subteam: "Team Captain",
},
];
return (
<>
<UpdateBanner
updatedTitleText="The Team"
updatedSubtitleText=""
updatedImgUrl="https://picsum.photos/200"
/>
<div id="team">
<div>
<h5>Interested in joining?</h5>
<p>blurb about how you can develop your skills yada yada</p>
<a href="mailto:uofcbaja@gamil.com">Contact Us</a>
</div>
<div>
<h2>Meet the Team</h2>
<div>
<div>
<h4>Team Leads</h4>
<p>
These are our team leads for the 2024 season. Team leads put in
a lot of extra hours coordinating, mentoring, and helping their
junior subteam members learn new design and manufacturing
methods.
</p>
</div>
<div></div>
</div>
</div>
</div>
</>
);
}
function TeamIndividual(
urlPhotoLink = "https://picsum.photos/200/200",
name = "Bob",
descriptionOfLead = "",
subteam = "Temp Team"
) {
return (
<div className="teamInd">
<img
src={url_photo_link}
alt={name + "'s headshot"}
/>
<h6>{subteam}</h6>
<p>{descriptionofLead}</p>
</div>
);
}

6
src/index.js
View File

@ -13,6 +13,7 @@ import "./index.css";
import MockPage from "./MockDB/MockPage";
import Home from "./Home/Home";
import History from "./History/History";
import Contact from "./Contact/Contact";
const root = ReactDOM.createRoot(document.getElementById("root"));
root.render(
@ -46,8 +47,11 @@ root.render(
path="/MockPage"
element={<MockPage />}></Route>
<Route
path="History"
path="/History"
element={<History />}></Route>
<Route
path="/Contact"
element={<Contact />}></Route>
</Route>
</Routes>
</BrowserRouter>