Merge branch 'main' of https://git.csclub.uwaterloo.ca/www/www-new into feat/meet-the-team-page
commit
201401a5c6
@ -0,0 +1,7 @@ |
||||
.bubble { |
||||
padding: calc(36rem / 16) 0; |
||||
} |
||||
|
||||
.bubble:nth-child(odd) { |
||||
background-color: var(--blue-1-20); |
||||
} |
||||
@ -0,0 +1,11 @@ |
||||
import React from "react"; |
||||
import { DefaultLayout } from "./DefaultLayout"; |
||||
import styles from "./Bubble.module.css"; |
||||
|
||||
export default function Bubble(props: { children: React.ReactNode }) { |
||||
return ( |
||||
<div className={styles.bubble}> |
||||
<DefaultLayout>{props.children}</DefaultLayout> |
||||
</div> |
||||
); |
||||
} |
||||
@ -0,0 +1,6 @@ |
||||
.defaultLayout { |
||||
margin: 0 auto; |
||||
max-width: calc(800rem / 16); |
||||
padding: 0 calc(20rem / 16); |
||||
padding-bottom: calc(20rem / 16); |
||||
} |
||||
@ -0,0 +1,6 @@ |
||||
import React from "react"; |
||||
import styles from "./DefaultLayout.module.css"; |
||||
|
||||
export function DefaultLayout(props: { children: React.ReactNode }) { |
||||
return <div className={styles.defaultLayout}>{props.children}</div>; |
||||
} |
||||
@ -0,0 +1,89 @@ |
||||
import Bubble from "./../../components/Bubble"; |
||||
|
||||
<Bubble> |
||||
|
||||
CS Club is working towards bridging the gap between each and every CS student, |
||||
to support their undergraduate experience and to provide a community that |
||||
students can belong to and identify with. With hundreds of CS students joining |
||||
Waterloo every year, CS Club aims to run events that encourage students to |
||||
connect and socialize, to increase technical and academic interest with |
||||
workshops and talks, and to provide a safe environment for academic learning and |
||||
growth. |
||||
|
||||
</Bubble> |
||||
|
||||
<Bubble> |
||||
|
||||
## Our <span>Vision</span> |
||||
|
||||
1. Academic: Promoting the knowledge and interest of Computer Science, as well |
||||
as supporting students throughout their academic experiences. |
||||
|
||||
2. Career: Providing career guidance and resources to help students gain |
||||
experience and knowledge for their own job search. |
||||
|
||||
3. Community: Encouraging interpersonal relationships through community building |
||||
and social events for all computing students. |
||||
|
||||
</Bubble> |
||||
|
||||
<Bubble> |
||||
|
||||
## Our <span>Story</span> |
||||
|
||||
We are students ourselves, coming from all computing backgrounds — |
||||
Computer Science, Software Engineering, CFM, Mechatronics Engineering, and more. |
||||
CS Club was born from an unfulfilled need; we felt that although there are so |
||||
many students at UW that are interested in CS, there wasn't a proper support |
||||
network in place. We lacked the cohorts provided to engineers, and we felt |
||||
disconnected from one another. |
||||
|
||||
By recreating what CS Club means for our community, we're passionate about |
||||
helping students redefine their university experience here at Waterloo. |
||||
|
||||
</Bubble> |
||||
|
||||
<Bubble> |
||||
|
||||
## Our <span>Mission</span> |
||||
|
||||
The CS Club team is devoted to providing you with all the resources you could |
||||
need as a student. We want to create a community that members can call home, to |
||||
make it a place where you can reach out for career advice, for academic help, or |
||||
even just to socialize. To fulfil this mission, we'll be running events and |
||||
initiatives throughout the term, so please check out our [Events](/events/current) |
||||
page to stay updated! |
||||
|
||||
</Bubble> |
||||
|
||||
<Bubble> |
||||
|
||||
## Our <span>Office</span> |
||||
|
||||
The CS Club office is located at room **MC 3036/3037**, in the Math & Computer |
||||
Building of the University of Waterloo. |
||||
|
||||
- An office favorite is our $0.50 pop for members. We have a fridge in the |
||||
office which is stocked with many different kinds of pop. |
||||
- We have lots of informative books, 5 computer terminals, and an array of |
||||
knowledgeable people to talk to. |
||||
|
||||
Come visit us on campus in our office! Meet new members and find out what's new |
||||
in the club. |
||||
|
||||
<address> |
||||
|
||||
Computer Science Club <br /> |
||||
Math & Computer 3036/3037 <br /> |
||||
University of Waterloo <br /> |
||||
200 University Avenue West <br /> |
||||
Waterloo, ON N2L 3G1 <br /> |
||||
Canada |
||||
|
||||
Our office phone number is [(519) 888-4567 x33870](tel:+15198884567,33870) |
||||
|
||||
</address> |
||||
|
||||
</Bubble> |
||||
|
||||
|
||||
@ -1 +0,0 @@ |
||||
# About Us page |
||||
@ -0,0 +1,102 @@ |
||||
.title { |
||||
color: var(--purple-2); |
||||
font-size: calc(48rem / 16); |
||||
height: calc(80rem / 16); |
||||
margin-top: auto; |
||||
padding-left: calc(20rem / 16); |
||||
} |
||||
|
||||
.content { |
||||
color: black; |
||||
background-color: white; |
||||
} |
||||
|
||||
.content h2 { |
||||
color: var(--purple-2); |
||||
font-weight: 600; |
||||
} |
||||
|
||||
.content span { |
||||
color: var(--blue-2); |
||||
} |
||||
|
||||
.titleContainer { |
||||
display: flex; |
||||
flex-direction: row; |
||||
justify-content: space-between; |
||||
align-items: flex-start; |
||||
max-width: calc(800rem / 16); |
||||
margin: 0 auto; |
||||
overflow-y: clip; |
||||
overflow-x: clip; |
||||
height: calc(200rem / 16); |
||||
} |
||||
|
||||
.codey { |
||||
transform: rotate(1.91deg); |
||||
z-index: -1; |
||||
height: calc(400rem / 16); |
||||
} |
||||
|
||||
/*for temp mailing list components*/ |
||||
.mailingList { |
||||
margin: calc(4rem / 16) auto; |
||||
max-width: calc(806rem / 16); |
||||
} |
||||
|
||||
.mailingList form > * { |
||||
margin: calc(0.5rem / 16) auto; |
||||
} |
||||
|
||||
.mailingList form input { |
||||
border-radius: calc(16rem / 16); |
||||
padding: calc(8rem / 16) 0; |
||||
} |
||||
|
||||
.mailingList form input[type="text"] { |
||||
/*temporary hard coding of font*/ |
||||
font-family: Poppins; |
||||
font-style: normal; |
||||
padding: 0 calc(8rem / 16); |
||||
} |
||||
|
||||
.mailingList h2 { |
||||
color: var(--blue-2); |
||||
} |
||||
/*for temp mailing list components*/ |
||||
|
||||
@media only screen and (max-width: calc(768rem / 16)) { |
||||
.titleContainer { |
||||
display: flex; |
||||
flex-direction: column; |
||||
align-items: center; |
||||
max-width: calc(800rem / 16); |
||||
margin: 0 auto; |
||||
overflow-y: clip; |
||||
height: calc(130rem / 16); |
||||
} |
||||
|
||||
.title { |
||||
font-size: calc(24rem / 16); |
||||
font-weight: 600; |
||||
padding-left: calc(0rem / 16); |
||||
} |
||||
|
||||
.content h2 { |
||||
font-size: calc(24rem / 16); |
||||
} |
||||
|
||||
.content ul { |
||||
padding-left: calc(20rem / 16); |
||||
} |
||||
|
||||
.content ol { |
||||
padding-left: calc(16rem / 16); |
||||
} |
||||
|
||||
.codey { |
||||
width: calc(140.21rem / 16); |
||||
height: calc(124.65rem / 16); |
||||
padding-left: calc(30rem / 16); |
||||
} |
||||
} |
||||
@ -0,0 +1,43 @@ |
||||
import React from "react"; |
||||
import { Image } from "../../components/Image"; |
||||
import Content from "../../content/about/index.mdx"; |
||||
import styles from "./index.module.css"; |
||||
import { Button } from "../../components/Button"; |
||||
import { SocialLinks } from "../../components/SocialLinks"; |
||||
|
||||
export default function AboutUs() { |
||||
return ( |
||||
<> |
||||
<div className={styles.titleContainer}> |
||||
<h1 className={styles.title}>About Us!</h1> |
||||
<Image src="/about/codey.svg" className={styles.codey} /> |
||||
</div> |
||||
<div className={styles.content}> |
||||
<Content /> |
||||
</div> |
||||
<div className={styles.mailingList}> |
||||
<h2>Connect with us!</h2> |
||||
<p> |
||||
Drop by any of our social media outlets to learn more about us, keep |
||||
up-to-date with our upcoming events, or to chat with our members! |
||||
</p> |
||||
<SocialLinks color="gradient" size="big" /> |
||||
<p>Send feedback through our Feedback Form </p> |
||||
<h2>Join our Mailing List!</h2> |
||||
<form action=""> |
||||
<div> |
||||
<input type="text" placeholder="Full Name*" required /> |
||||
</div> |
||||
<div> |
||||
<input type="text" placeholder="Email*" required /> |
||||
</div> |
||||
<Button>Subscribe</Button> |
||||
</form> |
||||
</div> |
||||
</> |
||||
); |
||||
} |
||||
|
||||
AboutUs.Layout = function AboutUsLayout(props: { children: React.ReactNode }) { |
||||
return <div>{props.children}</div>; |
||||
}; |
||||
|
After Width: | Height: | Size: 6.7 KiB |
|
After Width: | Height: | Size: 189 B |
Loading…
Reference in new issue