mirror of
https://github.com/UofCBaja/BajaUofCWebsite.git
synced 2025-07-12 14:17:13 -06:00
feat(newSite): history about us and contact us started
This commit is contained in:
@ -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 {
|
||||
|
@ -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
111
src/Contact/Contact.css
Normal 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
69
src/Contact/Contact.jsx
Normal 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>
|
||||
);
|
||||
}
|
@ -115,7 +115,7 @@ export default function Header() {
|
||||
</Link>
|
||||
</ul>
|
||||
</li> */}
|
||||
<Link to={"/"}>
|
||||
<Link to={"/Contact"}>
|
||||
<li>CONTACT US</li>
|
||||
</Link>
|
||||
</ul>
|
||||
|
@ -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;
|
||||
}
|
||||
|
||||
|
@ -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
0
src/Teams/Team.css
Normal file
64
src/Teams/Team.jsx
Normal file
64
src/Teams/Team.jsx
Normal 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>
|
||||
);
|
||||
}
|
@ -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>
|
||||
|
Reference in New Issue
Block a user