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:
darkicewolf50 2025-05-24 12:12:11 -06:00
parent 9db8483861
commit 75c05cf265
2 changed files with 331 additions and 108 deletions

195
src/AboutUs/AboutUs.css Normal file
View 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;
}

View File

@ -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>