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

feat(about): final missing html as a temporary, css for about us, subteams finished, leadership almost finished, todo rest of team

Browse Source
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
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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;
}

96
src/AboutUs/AboutUs.js
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,6 +150,7 @@ export default function AboutsUs() {
/> />
<div id="About"> <div id="About">
<div> <div>
<div id="intro">
<h3>ABOUT US</h3> <h3>ABOUT US</h3>
<p> <p>
UCalgary Baja is a competitive group of talented and determined UCalgary Baja is a competitive group of talented and determined
@ -147,36 +164,37 @@ export default function AboutsUs() {
In their first year on UCalgary Baja, junior members are a vital 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 part of our team. This year, we recruited 17 new members onto the
team during our recruitment process. This big addition allows the team during our recruitment process. This big addition allows the
team to provide an enhanced educational experience for more students team to provide an enhanced educational experience for more
than ever before. Adding junior members allows us to complete bigger students than ever before. Adding junior members allows us to
projects and increase the amount of in-house fabrication we can do, complete bigger projects and increase the amount of in-house
reducing our reliance on outside sponsors and contractors. fabrication we can do, reducing our reliance on outside sponsors
and contractors.
</p> </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> <p>
This past year, a junior member learned how to use a four-axis CNC 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 machine to make a custom u-joint that performed admirably in
competition. We aim to provide a fulfilling experience to new competition. We aim to provide a fulfilling experience to new
members that will complement their in-class education and encourage members that will complement their in-class education and
them to develop into capable engineers and proven leaders with the encourage them to develop into capable engineers and proven
skills and knowledge that employers need and want. We strive to leaders with the skills and knowledge that employers need and
bridge the gap between education and application by providing want. We strive to bridge the gap between education and
experience in a fun and memorable way. application by providing experience in a fun and memorable way.
</p> </p>
</div> </div>
<div>
<div>
<h4>THE NUMBERS</h4>
</div> </div>
<div id="club-stats">
<h4>THE NUMBERS</h4>
<div>
<div> <div>
<h5>STUDENTS</h5> <h5>STUDENTS</h5>
<h6>48</h6> <h6>48</h6>
@ -190,17 +208,17 @@ export default function AboutsUs() {
<h5>GROWTH</h5> <h5>GROWTH</h5>
<h6>200%</h6> <h6>200%</h6>
<p> <p>
Our team is exploding this year with over double the size compared Our team is exploding this year with over double the size
to last year. compared to last year.
</p> </p>
</div> </div>
<div> <div>
<h5>SUBTEAMS</h5> <h5>SUBTEAMS</h5>
<h6>8</h6> <h6>8</h6>
<p> <p>
We have 7 subteams on our team. This encourages students to pick a We have 7 subteams on our team. This encourages students to pick
segment in the group they strive in, or challenge themselves to a segment in the group they strive in, or challenge themselves
learn something new. to learn something new.
</p> </p>
</div> </div>
<div> <div>
@ -216,22 +234,23 @@ export default function AboutsUs() {
<h5>SCHOOL YEARS</h5> <h5>SCHOOL YEARS</h5>
<h6>4</h6> <h6>4</h6>
<p> <p>
On average, our team members spend 4 years with us, being able to On average, our team members spend 4 years with us, being able
experience everything our team has to offer, from competitions to to experience everything our team has to offer, from
manufacturing and the logistics of operation. competitions to manufacturing and the logistics of operation.
</p> </p>
</div> </div>
<div> <div>
<h5>COMPETITION RANKING</h5> <h5>COMPETITION RANKING</h5>
<h6>Top 30</h6> <h6>Top 30</h6>
<p> <p>
Our team is one of the leading BAJA SAE teams in Canada, each year Our team is one of the leading BAJA SAE teams in Canada, each
we strive to reach newer heights and higher rankings, joining us year we strive to reach newer heights and higher rankings,
on the adventure of a lifetime! joining us on the adventure of a lifetime!
</p> </p>
</div> </div>
</div> </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,6 +317,7 @@ 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>
@ -309,10 +329,18 @@ export default function AboutsUs() {
</p> </p>
</div> </div>
<div> <div>
<img alt="test" /> {Object.values(member_info).map((info) => {
<p>Name</p> return (
<div key={info}>
<img
src="https://picsum.photos/200/200"
alt="test"
/>
<p>Name: {info}</p>
<p>Subteam on</p> <p>Subteam on</p>
</div> </div>
);
})}
</div> </div>
</div> </div>
</div> </div>