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 UpdateBanner from "../Header/UpdateBanner";
|
||||||
|
import "./AboutUs.css";
|
||||||
|
|
||||||
export default function AboutsUs() {
|
export default function AboutsUs() {
|
||||||
let subteam_info = [
|
let subteam_info = [
|
||||||
@ -124,6 +125,21 @@ export default function AboutsUs() {
|
|||||||
lead_des: "I am a third year mechanical engineering major.",
|
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 (
|
return (
|
||||||
<>
|
<>
|
||||||
<UpdateBanner
|
<UpdateBanner
|
||||||
@ -134,104 +150,107 @@ export default function AboutsUs() {
|
|||||||
/>
|
/>
|
||||||
<div id="About">
|
<div id="About">
|
||||||
<div>
|
<div>
|
||||||
<h3>ABOUT US</h3>
|
<div id="intro">
|
||||||
<p>
|
<h3>ABOUT US</h3>
|
||||||
UCalgary Baja is a competitive group of talented and determined
|
<p>
|
||||||
engineering students striving to expand their horizons, earn
|
UCalgary Baja is a competitive group of talented and determined
|
||||||
experience, and network with leading companies in their respective
|
engineering students striving to expand their horizons, earn
|
||||||
fields. Our team comprises 6 subteams: Drivetrain, Logistics,
|
experience, and network with leading companies in their respective
|
||||||
Suspension, Chassis and Ergonomics, Steering, and Electrical and
|
fields. Our team comprises 6 subteams: Drivetrain, Logistics,
|
||||||
Testing. Each subteam is mentored by one of our talented leads.
|
Suspension, Chassis and Ergonomics, Steering, and Electrical and
|
||||||
</p>
|
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
|
<p>
|
||||||
part of our team. This year, we recruited 17 new members onto the
|
In their first year on UCalgary Baja, junior members are a vital
|
||||||
team during our recruitment process. This big addition allows the
|
part of our team. This year, we recruited 17 new members onto the
|
||||||
team to provide an enhanced educational experience for more students
|
team during our recruitment process. This big addition allows the
|
||||||
than ever before. Adding junior members allows us to complete bigger
|
team to provide an enhanced educational experience for more
|
||||||
projects and increase the amount of in-house fabrication we can do,
|
students than ever before. Adding junior members allows us to
|
||||||
reducing our reliance on outside sponsors and contractors.
|
complete bigger projects and increase the amount of in-house
|
||||||
</p>
|
fabrication we can do, reducing our reliance on outside sponsors
|
||||||
|
and contractors.
|
||||||
|
</p>
|
||||||
|
|
||||||
<p>
|
<p>
|
||||||
We at UCalgary Baja foster an environment of personal growth and try
|
We at UCalgary Baja foster an environment of personal growth and
|
||||||
our best to ensure that new members are included in all aspects of
|
try our best to ensure that new members are included in all
|
||||||
the team. Each new member takes the lead on a junior project, which
|
aspects of the team. Each new member takes the lead on a junior
|
||||||
includes designing, testing, and manufacturing a crucial part of the
|
project, which includes designing, testing, and manufacturing a
|
||||||
build. This sets us apart from other teams who do not necessarily
|
crucial part of the build. This sets us apart from other teams who
|
||||||
give out design work to new members.
|
do not necessarily give out design work to new members.
|
||||||
</p>
|
</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>
|
<p>
|
||||||
Our team is composed of 48 bold engineering students who wish to
|
This past year, a junior member learned how to use a four-axis CNC
|
||||||
expand their skills, test their limits, and challenge their
|
machine to make a custom u-joint that performed admirably in
|
||||||
abilities.
|
competition. We aim to provide a fulfilling experience to new
|
||||||
</p>
|
members that will complement their in-class education and
|
||||||
</div>
|
encourage them to develop into capable engineers and proven
|
||||||
<div>
|
leaders with the skills and knowledge that employers need and
|
||||||
<h5>GROWTH</h5>
|
want. We strive to bridge the gap between education and
|
||||||
<h6>200%</h6>
|
application by providing experience in a fun and memorable way.
|
||||||
<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>
|
</p>
|
||||||
</div>
|
</div>
|
||||||
</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>
|
<div>
|
||||||
<h3>Which Sub Team Will You Choose?</h3>
|
<h3>Which Sub Team Will You Choose?</h3>
|
||||||
<p>Take a Closer Look at Our Sub Teams</p>
|
<p>Take a Closer Look at Our Sub Teams</p>
|
||||||
@ -243,7 +262,7 @@ export default function AboutsUs() {
|
|||||||
<div key={subteam_index}>
|
<div key={subteam_index}>
|
||||||
{subteam_index % 2 !== 0 ? (
|
{subteam_index % 2 !== 0 ? (
|
||||||
<>
|
<>
|
||||||
<div className={"About" + (subteam_index % 2)}>
|
<div>
|
||||||
<img
|
<img
|
||||||
src={subteam.subteam_pic}
|
src={subteam.subteam_pic}
|
||||||
alt={subteam.subteam_pic_alt}
|
alt={subteam.subteam_pic_alt}
|
||||||
@ -273,7 +292,7 @@ export default function AboutsUs() {
|
|||||||
})}
|
})}
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div>
|
<div id="leadership">
|
||||||
<div>
|
<div>
|
||||||
<h4>Our Leads</h4>
|
<h4>Our Leads</h4>
|
||||||
<p>
|
<p>
|
||||||
@ -298,21 +317,30 @@ export default function AboutsUs() {
|
|||||||
);
|
);
|
||||||
})}
|
})}
|
||||||
</div>
|
</div>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
<div>
|
<div>
|
||||||
<div>
|
<h4>Meet the Rest of the Team</h4>
|
||||||
<h4>Meet the Rest of the Team</h4>
|
<p>
|
||||||
<p>
|
This is the rest of our amazing Baja team, each of the following
|
||||||
This is the rest of our amazing Baja team, each of the following
|
members are part of different subteams, mentored by our leads
|
||||||
members are part of different subteams, mentored by our leads
|
above. They are all enthusiastic, hard working, and dedicated
|
||||||
above. They are all enthusiastic, hard working, and dedicated
|
members of our team.
|
||||||
members of our team.
|
</p>
|
||||||
</p>
|
</div>
|
||||||
</div>
|
<div>
|
||||||
<div>
|
{Object.values(member_info).map((info) => {
|
||||||
<img alt="test" />
|
return (
|
||||||
<p>Name</p>
|
<div key={info}>
|
||||||
<p>Subteam on</p>
|
<img
|
||||||
</div>
|
src="https://picsum.photos/200/200"
|
||||||
|
alt="test"
|
||||||
|
/>
|
||||||
|
<p>Name: {info}</p>
|
||||||
|
<p>Subteam on</p>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
})}
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
Loading…
x
Reference in New Issue
Block a user