mirror of
https://github.com/UofCBaja/BajaUofCWebsite.git
synced 2025-06-16 05:44:17 -06:00
feat(about): final missing html as a temporary, css for about us, subteams finished, leadership almost finished, todo rest of team
This commit is contained in:
parent
9db8483861
commit
75c05cf265
195
src/AboutUs/AboutUs.css
Normal file
195
src/AboutUs/AboutUs.css
Normal file
@ -0,0 +1,195 @@
|
||||
#About {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
#About h3 {
|
||||
font-size: 100px;
|
||||
margin: 0px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
#About #intro {
|
||||
display: flex;
|
||||
flex-flow: column wrap;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
padding: 2svh 2svw;
|
||||
|
||||
background-color: black;
|
||||
color: white;
|
||||
}
|
||||
|
||||
#About #intro p {
|
||||
max-width: 70svw;
|
||||
}
|
||||
|
||||
#club-stats {
|
||||
display: flex;
|
||||
flex-flow: row nowrap;
|
||||
/* max-width: 60svw; */
|
||||
/* margin-left: auto; */
|
||||
/* margin-right: auto; */
|
||||
column-gap: 2svw;
|
||||
row-gap: 2svh;
|
||||
align-items: center;
|
||||
margin: 2svh 2svw;
|
||||
}
|
||||
|
||||
#club-stats div p {
|
||||
width: 20svw;
|
||||
padding: 0px;
|
||||
margin: 0px;
|
||||
}
|
||||
|
||||
#club-stats div {
|
||||
display: flex;
|
||||
flex-flow: row wrap;
|
||||
column-gap: 2svw;
|
||||
row-gap: 1svh;
|
||||
justify-content: space-evenly;
|
||||
}
|
||||
|
||||
#club-stats div div {
|
||||
display: flex;
|
||||
flex-flow: column nowrap;
|
||||
justify-content: flex-start;
|
||||
}
|
||||
|
||||
#club-stats h4 {
|
||||
/* align-self: center; */
|
||||
font-size: x-large;
|
||||
text-wrap: nowrap;
|
||||
height: 100%;
|
||||
margin: 0px;
|
||||
align-self: flex-start;
|
||||
margin-top: 10svh;
|
||||
}
|
||||
|
||||
#club-stats h5 {
|
||||
font-size: larger;
|
||||
text-wrap: nowrap;
|
||||
margin: 0px;
|
||||
}
|
||||
|
||||
#club-stats h6 {
|
||||
font-size: 40px;
|
||||
font-weight: normal;
|
||||
text-wrap: nowrap;
|
||||
margin: 0px;
|
||||
}
|
||||
|
||||
#about-subteams > div:nth-child(1) {
|
||||
background-image: url(https://static.wixstatic.com/media/6ee8da_04610849156f4ec5b7bca0b8aebcf8db~mv2.jpg/v1/fill/w_2474,h_600,fp_0.50_0.40,q_85,usm_0.66_1.00_0.01,enc_avif,quality_auto/6ee8da_04610849156f4ec5b7bca0b8aebcf8db~mv2.jpg);
|
||||
background-repeat: no-repeat;
|
||||
background-size: cover;
|
||||
background-position: center;
|
||||
font-size: 30px;
|
||||
padding: 8svh 0svw;
|
||||
margin-bottom: 4svh;
|
||||
}
|
||||
|
||||
#about-subteams > div:nth-child(1) h3 {
|
||||
font-size: 50px;
|
||||
}
|
||||
|
||||
#about-subteams {
|
||||
background-color: black;
|
||||
color: white;
|
||||
}
|
||||
|
||||
#about-subteams div {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
text-align: center;
|
||||
row-gap: 4svh;
|
||||
}
|
||||
|
||||
#about-subteams div div {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
justify-content: center;
|
||||
text-align: start;
|
||||
row-gap: 2svh;
|
||||
}
|
||||
|
||||
#about-subteams div div div {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
max-width: 50svw;
|
||||
padding: 0svh 1svw;
|
||||
}
|
||||
|
||||
#about-subteams h4 {
|
||||
font-size: 40px;
|
||||
font-weight: normal;
|
||||
margin: 0px;
|
||||
padding: 0px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
#about-subteams p {
|
||||
padding: 0px;
|
||||
margin: 0px;
|
||||
}
|
||||
|
||||
#about-subteams img {
|
||||
height: 30svh;
|
||||
}
|
||||
|
||||
#leadership {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
/* align-items: center; */
|
||||
/* justify-content: flex-start; */
|
||||
align-items: flex-start;
|
||||
padding: 2svh 2svw;
|
||||
background-color: whitesmoke;
|
||||
}
|
||||
|
||||
#leadership h4 {
|
||||
font-size: 40px;
|
||||
margin: 0px;
|
||||
}
|
||||
|
||||
#leadership h5 {
|
||||
font-size: 28px;
|
||||
margin: 0px;
|
||||
}
|
||||
|
||||
#leadership h6 {
|
||||
font-size: 20px;
|
||||
margin: 0px;
|
||||
font-weight: normal;
|
||||
}
|
||||
|
||||
#leadership > div:nth-child(1) {
|
||||
/* font-size: 30px; */
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
max-width: 30svw;
|
||||
margin: 0px;
|
||||
margin-top: 8svh;
|
||||
padding-right: 2svw;
|
||||
}
|
||||
|
||||
#leadership div {
|
||||
display: flex;
|
||||
flex-flow: row wrap;
|
||||
column-gap: 2svw;
|
||||
row-gap: 2svh;
|
||||
}
|
||||
|
||||
#leadership div div {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
column-gap: 0svh;
|
||||
}
|
||||
|
||||
#leadership div div p {
|
||||
max-width: 20svw;
|
||||
}
|
||||
@ -1,4 +1,5 @@
|
||||
import UpdateBanner from "../Header/UpdateBanner";
|
||||
import "./AboutUs.css";
|
||||
|
||||
export default function AboutsUs() {
|
||||
let subteam_info = [
|
||||
@ -124,6 +125,21 @@ export default function AboutsUs() {
|
||||
lead_des: "I am a third year mechanical engineering major.",
|
||||
},
|
||||
];
|
||||
|
||||
let member_info = [
|
||||
"temp1",
|
||||
"temp2",
|
||||
"temp3",
|
||||
"temp4",
|
||||
"temp5",
|
||||
"temp6",
|
||||
"temp7",
|
||||
"temp8",
|
||||
"temp9",
|
||||
"temp10",
|
||||
"temp11",
|
||||
"temp12",
|
||||
];
|
||||
return (
|
||||
<>
|
||||
<UpdateBanner
|
||||
@ -134,104 +150,107 @@ export default function AboutsUs() {
|
||||
/>
|
||||
<div id="About">
|
||||
<div>
|
||||
<h3>ABOUT US</h3>
|
||||
<p>
|
||||
UCalgary Baja is a competitive group of talented and determined
|
||||
engineering students striving to expand their horizons, earn
|
||||
experience, and network with leading companies in their respective
|
||||
fields. Our team comprises 6 subteams: Drivetrain, Logistics,
|
||||
Suspension, Chassis and Ergonomics, Steering, and Electrical and
|
||||
Testing. Each subteam is mentored by one of our talented leads.
|
||||
</p>
|
||||
<p>
|
||||
In their first year on UCalgary Baja, junior members are a vital
|
||||
part of our team. This year, we recruited 17 new members onto the
|
||||
team during our recruitment process. This big addition allows the
|
||||
team to provide an enhanced educational experience for more students
|
||||
than ever before. Adding junior members allows us to complete bigger
|
||||
projects and increase the amount of in-house fabrication we can do,
|
||||
reducing our reliance on outside sponsors and contractors.
|
||||
</p>
|
||||
<div id="intro">
|
||||
<h3>ABOUT US</h3>
|
||||
<p>
|
||||
UCalgary Baja is a competitive group of talented and determined
|
||||
engineering students striving to expand their horizons, earn
|
||||
experience, and network with leading companies in their respective
|
||||
fields. Our team comprises 6 subteams: Drivetrain, Logistics,
|
||||
Suspension, Chassis and Ergonomics, Steering, and Electrical and
|
||||
Testing. Each subteam is mentored by one of our talented leads.
|
||||
</p>
|
||||
<p>
|
||||
In their first year on UCalgary Baja, junior members are a vital
|
||||
part of our team. This year, we recruited 17 new members onto the
|
||||
team during our recruitment process. This big addition allows the
|
||||
team to provide an enhanced educational experience for more
|
||||
students than ever before. Adding junior members allows us to
|
||||
complete bigger projects and increase the amount of in-house
|
||||
fabrication we can do, reducing our reliance on outside sponsors
|
||||
and contractors.
|
||||
</p>
|
||||
|
||||
<p>
|
||||
We at UCalgary Baja foster an environment of personal growth and try
|
||||
our best to ensure that new members are included in all aspects of
|
||||
the team. Each new member takes the lead on a junior project, which
|
||||
includes designing, testing, and manufacturing a crucial part of the
|
||||
build. This sets us apart from other teams who do not necessarily
|
||||
give out design work to new members.
|
||||
</p>
|
||||
<p>
|
||||
We at UCalgary Baja foster an environment of personal growth and
|
||||
try our best to ensure that new members are included in all
|
||||
aspects of the team. Each new member takes the lead on a junior
|
||||
project, which includes designing, testing, and manufacturing a
|
||||
crucial part of the build. This sets us apart from other teams who
|
||||
do not necessarily give out design work to new members.
|
||||
</p>
|
||||
|
||||
<p>
|
||||
This past year, a junior member learned how to use a four-axis CNC
|
||||
machine to make a custom u-joint that performed admirably in
|
||||
competition. We aim to provide a fulfilling experience to new
|
||||
members that will complement their in-class education and encourage
|
||||
them to develop into capable engineers and proven leaders with the
|
||||
skills and knowledge that employers need and want. We strive to
|
||||
bridge the gap between education and application by providing
|
||||
experience in a fun and memorable way.
|
||||
</p>
|
||||
</div>
|
||||
<div>
|
||||
<div>
|
||||
<h4>THE NUMBERS</h4>
|
||||
</div>
|
||||
<div>
|
||||
<h5>STUDENTS</h5>
|
||||
<h6>48</h6>
|
||||
<p>
|
||||
Our team is composed of 48 bold engineering students who wish to
|
||||
expand their skills, test their limits, and challenge their
|
||||
abilities.
|
||||
</p>
|
||||
</div>
|
||||
<div>
|
||||
<h5>GROWTH</h5>
|
||||
<h6>200%</h6>
|
||||
<p>
|
||||
Our team is exploding this year with over double the size compared
|
||||
to last year.
|
||||
</p>
|
||||
</div>
|
||||
<div>
|
||||
<h5>SUBTEAMS</h5>
|
||||
<h6>8</h6>
|
||||
<p>
|
||||
We have 7 subteams on our team. This encourages students to pick a
|
||||
segment in the group they strive in, or challenge themselves to
|
||||
learn something new.
|
||||
</p>
|
||||
</div>
|
||||
<div>
|
||||
<h5>FOUNDED</h5>
|
||||
<h6>1990</h6>
|
||||
<p>
|
||||
Out team has stood the test of time. Founded in 1990, we have
|
||||
years of experience helping others who love a challenge find a
|
||||
place to spread their wings and test how far they can go.
|
||||
</p>
|
||||
</div>
|
||||
<div>
|
||||
<h5>SCHOOL YEARS</h5>
|
||||
<h6>4</h6>
|
||||
<p>
|
||||
On average, our team members spend 4 years with us, being able to
|
||||
experience everything our team has to offer, from competitions to
|
||||
manufacturing and the logistics of operation.
|
||||
</p>
|
||||
</div>
|
||||
<div>
|
||||
<h5>COMPETITION RANKING</h5>
|
||||
<h6>Top 30</h6>
|
||||
<p>
|
||||
Our team is one of the leading BAJA SAE teams in Canada, each year
|
||||
we strive to reach newer heights and higher rankings, joining us
|
||||
on the adventure of a lifetime!
|
||||
This past year, a junior member learned how to use a four-axis CNC
|
||||
machine to make a custom u-joint that performed admirably in
|
||||
competition. We aim to provide a fulfilling experience to new
|
||||
members that will complement their in-class education and
|
||||
encourage them to develop into capable engineers and proven
|
||||
leaders with the skills and knowledge that employers need and
|
||||
want. We strive to bridge the gap between education and
|
||||
application by providing experience in a fun and memorable way.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<div id="club-stats">
|
||||
<h4>THE NUMBERS</h4>
|
||||
<div>
|
||||
<div>
|
||||
<h5>STUDENTS</h5>
|
||||
<h6>48</h6>
|
||||
<p>
|
||||
Our team is composed of 48 bold engineering students who wish to
|
||||
expand their skills, test their limits, and challenge their
|
||||
abilities.
|
||||
</p>
|
||||
</div>
|
||||
<div>
|
||||
<h5>GROWTH</h5>
|
||||
<h6>200%</h6>
|
||||
<p>
|
||||
Our team is exploding this year with over double the size
|
||||
compared to last year.
|
||||
</p>
|
||||
</div>
|
||||
<div>
|
||||
<h5>SUBTEAMS</h5>
|
||||
<h6>8</h6>
|
||||
<p>
|
||||
We have 7 subteams on our team. This encourages students to pick
|
||||
a segment in the group they strive in, or challenge themselves
|
||||
to learn something new.
|
||||
</p>
|
||||
</div>
|
||||
<div>
|
||||
<h5>FOUNDED</h5>
|
||||
<h6>1990</h6>
|
||||
<p>
|
||||
Out team has stood the test of time. Founded in 1990, we have
|
||||
years of experience helping others who love a challenge find a
|
||||
place to spread their wings and test how far they can go.
|
||||
</p>
|
||||
</div>
|
||||
<div>
|
||||
<h5>SCHOOL YEARS</h5>
|
||||
<h6>4</h6>
|
||||
<p>
|
||||
On average, our team members spend 4 years with us, being able
|
||||
to experience everything our team has to offer, from
|
||||
competitions to manufacturing and the logistics of operation.
|
||||
</p>
|
||||
</div>
|
||||
<div>
|
||||
<h5>COMPETITION RANKING</h5>
|
||||
<h6>Top 30</h6>
|
||||
<p>
|
||||
Our team is one of the leading BAJA SAE teams in Canada, each
|
||||
year we strive to reach newer heights and higher rankings,
|
||||
joining us on the adventure of a lifetime!
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div id="about-subteams">
|
||||
<div>
|
||||
<h3>Which Sub Team Will You Choose?</h3>
|
||||
<p>Take a Closer Look at Our Sub Teams</p>
|
||||
@ -243,7 +262,7 @@ export default function AboutsUs() {
|
||||
<div key={subteam_index}>
|
||||
{subteam_index % 2 !== 0 ? (
|
||||
<>
|
||||
<div className={"About" + (subteam_index % 2)}>
|
||||
<div>
|
||||
<img
|
||||
src={subteam.subteam_pic}
|
||||
alt={subteam.subteam_pic_alt}
|
||||
@ -273,7 +292,7 @@ export default function AboutsUs() {
|
||||
})}
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<div id="leadership">
|
||||
<div>
|
||||
<h4>Our Leads</h4>
|
||||
<p>
|
||||
@ -298,21 +317,30 @@ export default function AboutsUs() {
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<div>
|
||||
<div>
|
||||
<h4>Meet the Rest of the Team</h4>
|
||||
<p>
|
||||
This is the rest of our amazing Baja team, each of the following
|
||||
members are part of different subteams, mentored by our leads
|
||||
above. They are all enthusiastic, hard working, and dedicated
|
||||
members of our team.
|
||||
</p>
|
||||
</div>
|
||||
<div>
|
||||
<img alt="test" />
|
||||
<p>Name</p>
|
||||
<p>Subteam on</p>
|
||||
</div>
|
||||
<h4>Meet the Rest of the Team</h4>
|
||||
<p>
|
||||
This is the rest of our amazing Baja team, each of the following
|
||||
members are part of different subteams, mentored by our leads
|
||||
above. They are all enthusiastic, hard working, and dedicated
|
||||
members of our team.
|
||||
</p>
|
||||
</div>
|
||||
<div>
|
||||
{Object.values(member_info).map((info) => {
|
||||
return (
|
||||
<div key={info}>
|
||||
<img
|
||||
src="https://picsum.photos/200/200"
|
||||
alt="test"
|
||||
/>
|
||||
<p>Name: {info}</p>
|
||||
<p>Subteam on</p>
|
||||
</div>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user