From f670247ec5893e91fb297ce3427f86ef0681a7f8 Mon Sep 17 00:00:00 2001 From: Aditya Thakral Date: Sun, 18 Jul 2021 03:37:48 -0400 Subject: [PATCH] About Us page (#70) Fixes #7 Co-authored-by: Linna Luo Reviewed-on: https://git.csclub.uwaterloo.ca/www/www-new/pulls/70 Reviewed-by: Aditya Thakral Co-authored-by: Aditya Thakral Co-committed-by: Aditya Thakral --- components/Bubble.module.css | 7 ++ components/Bubble.tsx | 11 +++ components/DefaultLayout.module.css | 6 ++ components/DefaultLayout.tsx | 6 ++ content/about/index.mdx | 89 +++++++++++++++++++++ content/{ => about}/our-supporters.mdx | 0 pages/_app.module.css | 7 -- pages/_app.tsx | 5 +- pages/about/index.mdx | 1 - pages/about/index.module.css | 102 +++++++++++++++++++++++++ pages/about/index.tsx | 43 +++++++++++ pages/about/our-supporters.tsx | 2 +- public/about/codey.svg | 38 +++++++++ public/about/hotdog.svg | 3 + 14 files changed, 307 insertions(+), 13 deletions(-) create mode 100644 components/Bubble.module.css create mode 100644 components/Bubble.tsx create mode 100644 components/DefaultLayout.module.css create mode 100644 components/DefaultLayout.tsx create mode 100644 content/about/index.mdx rename content/{ => about}/our-supporters.mdx (100%) delete mode 100644 pages/about/index.mdx create mode 100644 pages/about/index.module.css create mode 100644 pages/about/index.tsx create mode 100644 public/about/codey.svg create mode 100644 public/about/hotdog.svg diff --git a/components/Bubble.module.css b/components/Bubble.module.css new file mode 100644 index 00000000..3e0fc144 --- /dev/null +++ b/components/Bubble.module.css @@ -0,0 +1,7 @@ +.bubble { + padding: calc(36rem / 16) 0; +} + +.bubble:nth-child(odd) { + background-color: var(--blue-1-20); +} diff --git a/components/Bubble.tsx b/components/Bubble.tsx new file mode 100644 index 00000000..39d7094b --- /dev/null +++ b/components/Bubble.tsx @@ -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 ( +
+ {props.children} +
+ ); +} diff --git a/components/DefaultLayout.module.css b/components/DefaultLayout.module.css new file mode 100644 index 00000000..31cadd0b --- /dev/null +++ b/components/DefaultLayout.module.css @@ -0,0 +1,6 @@ +.defaultLayout { + margin: 0 auto; + max-width: calc(800rem / 16); + padding: 0 calc(20rem / 16); + padding-bottom: calc(20rem / 16); +} diff --git a/components/DefaultLayout.tsx b/components/DefaultLayout.tsx new file mode 100644 index 00000000..1cc4fb4f --- /dev/null +++ b/components/DefaultLayout.tsx @@ -0,0 +1,6 @@ +import React from "react"; +import styles from "./DefaultLayout.module.css"; + +export function DefaultLayout(props: { children: React.ReactNode }) { + return
{props.children}
; +} diff --git a/content/about/index.mdx b/content/about/index.mdx new file mode 100644 index 00000000..2c592309 --- /dev/null +++ b/content/about/index.mdx @@ -0,0 +1,89 @@ +import Bubble from "./../../components/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. + + + + + +## Our Vision + +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. + + + + + +## Our Story + +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. + + + + + +## Our Mission + +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! + + + + + +## Our Office + +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. + +
+ +Computer Science Club
+Math & Computer 3036/3037
+University of Waterloo
+200 University Avenue West
+Waterloo, ON N2L 3G1
+Canada + +Our office phone number is [(519) 888-4567 x33870](tel:+15198884567,33870) + +
+ + + + diff --git a/content/our-supporters.mdx b/content/about/our-supporters.mdx similarity index 100% rename from content/our-supporters.mdx rename to content/about/our-supporters.mdx diff --git a/pages/_app.module.css b/pages/_app.module.css index c545d6e9..a9bb4d65 100644 --- a/pages/_app.module.css +++ b/pages/_app.module.css @@ -10,10 +10,3 @@ .contentContainer { flex-grow: 1; } - -.defaultLayout { - margin: 0 auto; - max-width: calc(800rem / 16); - padding: 0 calc(20rem / 16); - padding-bottom: calc(20rem / 16); -} diff --git a/pages/_app.tsx b/pages/_app.tsx index f897db09..4d14cc39 100644 --- a/pages/_app.tsx +++ b/pages/_app.tsx @@ -6,6 +6,7 @@ import { ThemeProvider } from "../components/theme"; import { Navbar } from "../components/Navbar"; import { Footer } from "../components/Footer"; import { Link } from "../components/Link"; +import { DefaultLayout } from "../components/DefaultLayout"; import styles from "./_app.module.css"; import "./_app.css"; @@ -32,10 +33,6 @@ export default function App({ Component, pageProps }: AppProps): JSX.Element { ); } -function DefaultLayout(props: { children: React.ReactNode }) { - return
{props.children}
; -} - type PageComponent = NextComponentType< NextPageContext, unknown, diff --git a/pages/about/index.mdx b/pages/about/index.mdx deleted file mode 100644 index abfeb232..00000000 --- a/pages/about/index.mdx +++ /dev/null @@ -1 +0,0 @@ -# About Us page diff --git a/pages/about/index.module.css b/pages/about/index.module.css new file mode 100644 index 00000000..cedde708 --- /dev/null +++ b/pages/about/index.module.css @@ -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); + } +} diff --git a/pages/about/index.tsx b/pages/about/index.tsx new file mode 100644 index 00000000..2cb13ffd --- /dev/null +++ b/pages/about/index.tsx @@ -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 ( + <> +
+

About Us!

+ +
+
+ +
+
+

Connect with us!

+

+ 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! +

+ +

Send feedback through our Feedback Form

+

Join our Mailing List!

+
+
+ +
+
+ +
+ +
+
+ + ); +} + +AboutUs.Layout = function AboutUsLayout(props: { children: React.ReactNode }) { + return
{props.children}
; +}; diff --git a/pages/about/our-supporters.tsx b/pages/about/our-supporters.tsx index e6a13c06..68925bd6 100644 --- a/pages/about/our-supporters.tsx +++ b/pages/about/our-supporters.tsx @@ -1,6 +1,6 @@ import React from "react"; import { Image } from "../../components/Image"; -import Content from "../../content/our-supporters.mdx"; +import Content from "../../content/about/our-supporters.mdx"; import styles from "./our-supporters.module.css"; export default function OurSupporters() { diff --git a/public/about/codey.svg b/public/about/codey.svg new file mode 100644 index 00000000..7eb4dd58 --- /dev/null +++ b/public/about/codey.svg @@ -0,0 +1,38 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/public/about/hotdog.svg b/public/about/hotdog.svg new file mode 100644 index 00000000..af6ce194 --- /dev/null +++ b/public/about/hotdog.svg @@ -0,0 +1,3 @@ + + +