Add front page (Closes #44) (#68)

https://j285he-front-page-csc-class-profile-staging-snedadah.k8s.csclub.cloud/
Co-authored-by: Jared He <66887902+jaredjhe@users.noreply.github.com>
Co-authored-by: e26chiu <e26chiu@csc.uwaterloo.ca>
Co-authored-by: shahanneda <shahan.neda@gmail.com>
Co-authored-by: Shahan Nedadahandeh <snedadah@csclub.uwaterloo.ca>
Reviewed-on: #68
Reviewed-by: Mark Chiu <e26chiu@csclub.uwaterloo.ca>
Co-authored-by: Jared He <j285he@csclub.uwaterloo.ca>
Co-committed-by: Jared He <j285he@csclub.uwaterloo.ca>

components/About.module.css

@@ -57,3 +57,9 @@
   bottom: 0;
   right: 0;
 }
+
+@media screen and (max-width: 900px) {
+  .about {
+    flex-direction: column;
+  }
+}

components/About.tsx

@@ -4,7 +4,7 @@ import styles from "./About.module.css";
 
 export function About() {
   return (
-    <div className={styles.aboutWrapper}>
+    <div className={styles.aboutWrapper} id="about">
       <AngleDecoration isBottom={false} />
       <section className={styles.about}>
         <aside>
@@ -17,8 +17,8 @@ export function About() {
             Offered from the Faculty of Mathematics as most commonly a co-op
             program, students usually attend 8 school and 6 co-op terms in their
             degree. However, CS is very flexible, as many students historically
-            have dropped co-ops, taking terms off, and messing with their
-            schedule to fit their desires.
+            have dropped co-ops, taken terms off, and messed with their schedule
+            to fit their desires.
           </p>
           <h4>Computing and Financial Management</h4>
           <p>

components/CenterWrapper.module.css

@@ -1,7 +1,15 @@
 .textbox {
+  display: flex;
+  flex-direction: column;
   width: 80%;
   padding: calc(80rem / 16);
   background-color: var(--secondary-background);
   border-radius: calc(20rem / 16);
-  margin: 0 auto;
+  align-self: center;
 }
+
+@media screen and (max-width: 900px) {
+  .textbox {
+    align-items: center;
+  }
+}

components/Sections.module.css

@@ -11,7 +11,7 @@
 }
 
 .separator {
-  flex: 1;
+  flex: 2;
   background-color: var(--label);
   height: calc(1rem / 16);
   width: 100%;
@@ -57,4 +57,14 @@
 .nav li .linkName {
   margin: 0;
   display: inline;
+}
+
+@media screen and (max-width: 900px) {
+  .sections {
+    flex-direction: column;
+  }
+
+  .sections h1 {
+    text-align: left;
+  }
 }

components/Sections.tsx

@@ -6,12 +6,23 @@ import styles from "./Sections.module.css";
 interface SectionsProps {
   /* Whether to display the "Sections" title and separator that appears on the left. */
   showHeader?: boolean;
+  /* Width of the entire Sections, in px. */
+  width?: number;
   data: PageRoutes;
+  className?: string;
 }
 
-export function Sections({ data, showHeader = true }: SectionsProps) {
+export function Sections({
+  data,
+  showHeader = true,
+  className,
+}: SectionsProps) {
   return (
-    <section className={styles.sections}>
+    <section
+      className={
+        className ? `${className} ${styles.sections}` : `${styles.sections}`
+      }
+    >
       {showHeader ? (
         <>
           <h1>Sections</h1>

components/Timeline.module.css

@@ -22,7 +22,7 @@
   width: 100%;
   display: flex;
   flex-direction: row;
-  justify-content: center;
+  justify-content: flex-end;
 }
 
 .time {
@@ -34,7 +34,7 @@
   word-wrap: break-word;
 }
 
-.circle {
+.outerCircle {
   background-color: var(--secondary-accent);
   box-shadow: calc(0rem / 16) calc(0rem / 16) calc(30rem / 16) var(--secondary-accent);
   display: flex;
@@ -72,4 +72,21 @@
 .timelineSection:hover .text {
   border: calc(2rem / 16) solid var(--secondary-accent-light);
   box-shadow: calc(0rem / 16) calc(0rem / 16) calc(20rem / 16) var(--secondary-accent);
+}
+
+.timelineSection .timeText {
+  display: none;
+}
+
+@media screen and (max-width: 900px) {
+  .timelineSection .time {
+    display: none;
+  }
+
+  .timelineSection .timeText {
+    display: block;
+    font-size: calc(26rem / 16);
+    color: var(--secondary-accent);
+    margin-bottom: calc(8rem /16)
+  }
 }

components/Timeline.tsx

@@ -17,8 +17,6 @@ interface TimelineProps {
   outerCircleWidth?: number;
   /** Width of the inner circles on the timeline, in pixels. */
   innerCircleWidth?: number;
-  /** Width of time label, in pixels. */
-  timeWidth?: number;
   /** Width of text label, in pixels. */
   textWidth?: number;
   /** Distance between the time label AND the text label to middle line, in pixels. */
@@ -32,14 +30,12 @@ export function Timeline({
   lineWidth = 5,
   outerCircleWidth = 30,
   innerCircleWidth = 15,
-  timeWidth = 200,
-  textWidth = 300,
+  textWidth = 500,
   gap = 50,
   className,
 }: TimelineProps) {
   const largerMiddleElement =
     outerCircleWidth > lineWidth ? outerCircleWidth : lineWidth;
-  const width = timeWidth + gap + largerMiddleElement + gap + textWidth;
   if (innerCircleWidth > outerCircleWidth) {
     throw new Error(
       `<Timeline /> - innerCircleWidth (${innerCircleWidth}) is larger than outerCircleWidth (${outerCircleWidth})`
@@ -51,13 +47,12 @@ export function Timeline({
       className={
         className ? `${className} ${styles.wrapper}` : `${styles.wrapper}`
       }
-      style={{ width: width }}
     >
       <div
         className={styles.line}
         style={{
           width: lineWidth,
-          left: width / 2 - lineWidth / 2,
+          right: textWidth + gap + largerMiddleElement / 2 - lineWidth / 2,
         }}
       />
       <div className={styles.timelineSections}>
@@ -65,11 +60,9 @@ export function Timeline({
           <TimelineSection
             key={datum.time}
             datum={datum}
-            width={width}
             isTimeUppercase={isTimeUppercase}
             outerCircleWidth={outerCircleWidth}
             innerCircleWidth={innerCircleWidth}
-            timeWidth={timeWidth}
             textWidth={textWidth}
             gap={gap}
           />
@@ -81,42 +74,33 @@ export function Timeline({
 
 interface TimelineSectionProps {
   datum: TimelineData;
-  width: number;
   isTimeUppercase: boolean;
   outerCircleWidth: number;
   innerCircleWidth: number;
-  timeWidth: number;
   textWidth: number;
   gap: number;
 }
 
 function TimelineSection({
   datum,
-  width,
   isTimeUppercase,
   outerCircleWidth,
   innerCircleWidth,
-  timeWidth,
   textWidth,
   gap,
 }: TimelineSectionProps) {
   return (
     <div className={styles.timelineSection} style={{ gap: gap }}>
-      <div
-        className={styles.time}
-        style={{
-          width: timeWidth,
-          marginLeft: (width - 2 * gap - outerCircleWidth) / 2 - timeWidth,
-        }}
-      >
+      <div className={styles.time}>
         {isTimeUppercase ? datum.time.toUpperCase() : datum.time}
       </div>
       <div
-        className={styles.circle}
+        className={styles.outerCircle}
         style={{
           width: outerCircleWidth,
           height: outerCircleWidth,
           borderRadius: outerCircleWidth,
+          flex: `0 0 calc(${outerCircleWidth}rem / 16)`,
         }}
       >
         <div
@@ -132,9 +116,10 @@ function TimelineSection({
         className={styles.text}
         style={{
           width: textWidth,
-          marginRight: (width - 2 * gap - outerCircleWidth) / 2 - textWidth,
+          flex: `0 0 calc(${textWidth}rem / 16)`,
         }}
       >
+        <div className={styles.timeText}>{datum.time}</div>
         {datum.text}
       </div>
     </div>

components/Title.tsx

@@ -0,0 +1,19 @@
+import Head from "next/head";
+import React from "react";
+
+interface Props {
+  children: string | string[];
+}
+
+export function Title(props: Props) {
+  const children =
+    typeof props.children === "string" ? [props.children] : props.children;
+
+  children.push("2022 CS Class Profile");
+
+  return (
+    <Head>
+      <title>{children.join(" - ")}</title>
+    </Head>
+  );
+}

pages/academics.tsx

@@ -60,6 +60,7 @@ import {
   StackedBarGraphHorizontal,
   StackedBarGraphVertical,
 } from "@/components/StackedBarGraph";
+import { Title } from "@/components/Title";
 import { WordCloud } from "@/components/WordCloud";
 
 import styles from "./samplePage.module.css";
@@ -71,6 +72,7 @@ export default function Academics() {
   return (
     <div className={styles.page}>
       <Header />
+      <Title>Academics</Title>
       <SectionHeader title="Academics" />
 
       <SectionWrapper title="Programming" />
@@ -452,7 +454,7 @@ export default function Academics() {
       <BottomNav
         leftPage={pageRoutes.demographics}
         rightPage={pageRoutes.coop}
-      ></BottomNav>
+      />
     </div>
   );
 }

pages/contributors.tsx

@@ -6,6 +6,7 @@ import { BottomNav } from "@/components/BottomNav";
 import { CenterWrapper } from "@/components/CenterWrapper";
 import { Header } from "@/components/Header";
 import { SectionHeader } from "@/components/SectionHeader";
+import { Title } from "@/components/Title";
 
 import styles from "./samplePage.module.css";
 
@@ -38,6 +39,7 @@ export default function Contributors() {
   return (
     <div className={styles.page}>
       <Header />
+      <Title>Contributors</Title>
       <SectionHeader
         title="Contributors"
         subtitle="Huge thanks to all CSC members who have contributed to creating the first ever uWaterloo CS class profile!"

pages/coop.tsx

@@ -35,6 +35,7 @@ import {
   StackedBarGraphHorizontal,
   StackedBarGraphVertical,
 } from "@/components/StackedBarGraph";
+import { Title } from "@/components/Title";
 
 import { WordCloud } from "../components/WordCloud";
 
@@ -54,6 +55,7 @@ export default function CoopPage() {
   return (
     <div className={styles.page}>
       <Header />
+      <Title>Co-op</Title>
       <SectionHeader
         title="Co-op"
         subtitle="Explore careers, gain experience and earn money through UWaterloo's co-op program!"
@@ -305,7 +307,7 @@ export default function CoopPage() {
       <BottomNav
         leftPage={pageRoutes.academics}
         rightPage={pageRoutes.lifestyleAndInterests}
-      ></BottomNav>
+      />
     </div>
   );
 }

pages/demographics.tsx

@@ -30,6 +30,7 @@ import { ComponentWrapper } from "@/components/ComponentWrapper";
 import { Header } from "@/components/Header";
 import { PieChart } from "@/components/PieChart";
 import { SectionHeader } from "@/components/SectionHeader";
+import { Title } from "@/components/Title";
 import { WordCloud } from "@/components/WordCloud";
 
 import styles from "./samplePage.module.css";
@@ -41,6 +42,7 @@ export default function Demographics() {
   return (
     <div className={styles.page}>
       <Header />
+      <Title>Demographics</Title>
       <SectionHeader
         title="Demographics"
         subtitle="An insight into the demographics of UW’s CS programs"
@@ -170,7 +172,7 @@ export default function Demographics() {
         />
       </ComponentWrapper>
 
-      <BottomNav rightPage={pageRoutes.academics}></BottomNav>
+      <BottomNav leftPage={pageRoutes.home} rightPage={pageRoutes.academics} />
     </div>
   );
 }

pages/friends.tsx

@@ -35,6 +35,7 @@ import { ComponentWrapper } from "@/components/ComponentWrapper";
 import { Header } from "@/components/Header";
 import { PieChart } from "@/components/PieChart";
 import { SectionHeader } from "@/components/SectionHeader";
+import { Title } from "@/components/Title";
 import { WordCloud } from "@/components/WordCloud";
 
 import styles from "./samplePage.module.css";
@@ -46,6 +47,7 @@ export default function Demographics() {
   return (
     <div className={styles.page}>
       <Header />
+      <Title>Friends</Title>
       <SectionHeader
         title="Friends"
         subtitle="The friends you make in university are friends you’ll have for life."
@@ -230,7 +232,7 @@ export default function Demographics() {
       <BottomNav
         leftPage={pageRoutes.postGrad}
         rightPage={pageRoutes.miscellaneous}
-      ></BottomNav>
+      />
     </div>
   );
 }

pages/frontpage.module.css

@@ -0,0 +1,150 @@
+.main {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}
+
+.main > * {
+  margin-bottom: calc(65rem / 16);
+}
+
+.title {
+  position: relative;
+  width: 80vw;
+  height: 90vh;
+}
+
+.titleImage {
+  position: absolute;
+  top: 10vh;
+  margin: auto;
+  max-width: 800px;
+}
+
+.titleImage img {
+  max-width: 100%;
+  height: auto;
+}
+
+.blurb {
+  position: absolute;
+  bottom: 10vh;
+  right: 10vw;
+  width: fit-content;
+  height: fit-content;
+  padding: calc(30rem / 16);
+  background-color: var(--translucent-accent);
+  border: calc(2rem / 16) solid var(--primary-text);
+  box-shadow: 0 calc(1rem / 16) calc(10rem / 16) var(--primary-accent);
+  border-radius: calc(50rem / 16);
+  z-index: 1;
+}
+
+.blurb h1 {
+  margin-top: 0;
+}
+
+.classYear {
+  color: var(--primary-text);
+}
+
+.classProfile {
+  color: var(--primary-heading)
+}
+
+.blurb h3 {
+  color: var(--primary-accent-light);
+}
+
+.decoratorSolid {
+  position: absolute;
+  top: 2vh;
+  right: 13vw;
+  width: 16vw;
+  height: 24vh;
+  background-color: var(--primary-accent-lighter);
+  opacity: 50%;
+  border-radius: calc(50rem / 16);
+}
+
+.decoratorDots {
+  position: absolute;
+  top: 40vh;
+  right: 0.8vw;
+  width: 11vw;
+  height: 36vh;
+  background-image: radial-gradient(var(--link) 35%, transparent 35%);
+  background-position: 0 0;
+  background-size: calc(25rem / 16) calc(25rem / 16);
+  z-index: -1;
+}
+
+.viewButton {
+  background: none;
+  display: flex;
+  border: none;
+  font-size: calc(30rem / 16);
+  color: var(--primary-accent-light);
+  font-weight: 700;
+  position: relative;
+  cursor: pointer;
+  padding: 0;
+  transition: color 0.5s ease-out;
+}
+
+.viewButton:hover {
+  color: var(--label);
+}
+
+.viewButton:after {
+  content: '';
+  position: absolute;
+  width: 100%;
+  height: calc(2rem / 16);
+  bottom: 0px;
+  background-color: var(--primary-accent-lighter);
+  cursor: pointer;
+  transition: background-color 0.5s ease-out;
+}
+
+.viewButton:hover:after {
+  background-color: var(--primary-accent-light);
+}
+
+
+@media screen and (max-width: 700px) {
+  .decoratorDots {
+    display: none;
+  }
+
+  .decoratorSolid {
+    display: none;
+  }
+
+  .titleImage {
+    top: 2vh;
+  }
+
+  .blurb {
+    right: 0;
+    top: 30vh;
+    margin: 0.5rem 0;
+  }
+
+  .blurb h1 {
+    font-size: calc(38rem / 16);
+  }
+
+  .blurb h3 {
+    font-size: calc(25rem / 16);
+  }
+
+  .viewButton {
+    font-size: calc(25rem / 16);
+  }
+}
+
+.homeSectionsStyles {
+  width: 70vw;
+  max-width: 1000px;
+}

pages/index.tsx

@@ -1,12 +1,79 @@
-import Link from "next/link";
+import { pageRoutes } from "data/routes";
 import React from "react";
 
+import { About } from "@/components/About";
+import { CenterWrapper } from "@/components/CenterWrapper";
+import { Header } from "@/components/Header";
+import { Sections } from "@/components/Sections";
+import { Title } from "@/components/Title";
+
+import styles from "./frontpage.module.css";
+
 export default function Home() {
   return (
-    <p>
-      Click <Link href="/playground">here</Link> to visit the playground
-      <br />
-      Click <Link href="/samplePage">here</Link> to visit a sample page
-    </p>
+    <>
+      <Header />
+      <div className={styles.main}>
+        <Title>Home</Title>
+        <div className={styles.title}>
+          <div className={styles.titleImage}>
+            <img
+              src="/images/frontPageTitle.png"
+              alt="A picture of the University of Waterloo campus"
+            />
+          </div>
+          <div className={styles.blurb}>
+            <h1 className={styles.classYear}>UW Computer Science 2022</h1>
+            <h1 className={styles.classProfile}>Class Profile</h1>
+            <h3>Welcome to UW Computer Science 2022 Class Profile.</h3>
+            <a href="#about">
+              <button className={styles.viewButton}>View</button>
+            </a>
+          </div>
+          <div className={styles.decoratorSolid} />
+          <div className={styles.decoratorDots} />
+        </div>
+        <About />
+        <CenterWrapper>
+          <h1>Preface</h1>
+          <p>
+            The CS Class Profile consists of data relevant to CS, CFM, and
+            CS/BBA students. These were combined with the knowledge that
+            students in these programs tend to have similar experiences, as many
+            of the same CS required courses are shared. In the standard co-op
+            offering, CS and CFM take 4 years and 2 semesters to complete, while
+            CS/BBA can take up to a full 5 years.
+          </p>
+          <p>
+            Computer Science (and the others) is known to be a very prestigious
+            program, and is very well known in Canada as well as across the
+            world. For prospective students or anyone who is interested in
+            learning more about what the students are like, this CS Class
+            Profile will attempt to answer some of your questions, and you may
+            even learn a thing or two you didn’t expect!
+          </p>
+          <p>
+            The survey questions were approved by the Institutional Analysis &
+            Planning, where all University of Waterloo stakeholders that are
+            interested in conducting a non-academic research survey involving a
+            large portion of the UWaterloo population are reviewed and approved.
+            The entirety of the survey creation, data processing, and the
+            creation of this website was done by the{" "}
+            <b>
+              <a
+                href="https://csclub.uwaterloo.ca"
+                target="_blank"
+                rel="noreferrer"
+              >
+                UW Computer Science Club
+              </a>
+            </b>{" "}
+            so please check us out if you enjoy what you see! All of the graphs,
+            and designs on this website were built by us!
+          </p>
+        </CenterWrapper>
+        <Sections data={pageRoutes} className={styles.homeSectionsStyles} />
+      </div>
+    </>
   );
 }

pages/intimacy-and-drugs.tsx

@@ -35,6 +35,7 @@ import { Header } from "@/components/Header";
 import { PieChart } from "@/components/PieChart";
 import { QuotationCarousel } from "@/components/QuotationCarousel";
 import { SectionHeader } from "@/components/SectionHeader";
+import { Title } from "@/components/Title";
 
 import { Color } from "../utils/Color";
 
@@ -47,6 +48,7 @@ export default function Demographics() {
   return (
     <div className={styles.page}>
       <Header />
+      <Title>Intimacy and Drugs</Title>
       <SectionHeader
         title="Intimacy and Drugs"
         subtitle="What have people tried/already done during university?👀"
@@ -216,7 +218,7 @@ export default function Demographics() {
       <BottomNav
         leftPage={pageRoutes.lifestyleAndInterests}
         rightPage={pageRoutes.postGrad}
-      ></BottomNav>
+      />
     </div>
   );
 }

pages/lifestyle-and-interests.tsx

@@ -36,6 +36,7 @@ import { ComponentWrapper } from "@/components/ComponentWrapper";
 import { Header } from "@/components/Header";
 import { PieChart } from "@/components/PieChart";
 import { SectionHeader } from "@/components/SectionHeader";
+import { Title } from "@/components/Title";
 import { WordCloud } from "@/components/WordCloud";
 
 import styles from "./samplePage.module.css";
@@ -47,6 +48,7 @@ export default function Demographics() {
   return (
     <div className={styles.page}>
       <Header />
+      <Title>Lifestyle and Interests</Title>
       <SectionHeader
         title="Lifestyle and Interests"
         subtitle="What do CS people do in their free time?"
@@ -253,7 +255,7 @@ export default function Demographics() {
       <BottomNav
         leftPage={pageRoutes.coop}
         rightPage={pageRoutes.intimacyAndDrugs}
-      ></BottomNav>
+      />
     </div>
   );
 }

pages/mental-health.tsx

@@ -39,6 +39,7 @@ import { Header } from "@/components/Header";
 import { PieChart } from "@/components/PieChart";
 import { QuotationCarousel } from "@/components/QuotationCarousel";
 import { SectionHeader } from "@/components/SectionHeader";
+import { Title } from "@/components/Title";
 
 import styles from "./samplePage.module.css";
 
@@ -49,6 +50,7 @@ export default function Demographics() {
   return (
     <div className={styles.page}>
       <Header />
+      <Title>Mental Health</Title>
       <SectionHeader title="Mental Health" />
 
       <ComponentWrapper
@@ -318,7 +320,7 @@ export default function Demographics() {
       <BottomNav
         leftPage={pageRoutes.miscellaneous}
         rightPage={pageRoutes.personal}
-      ></BottomNav>
+      />
     </div>
   );
 }

pages/miscellaneous.tsx

@@ -18,6 +18,7 @@ import { ComponentWrapper } from "@/components/ComponentWrapper";
 import { Header } from "@/components/Header";
 import { PieChart } from "@/components/PieChart";
 import { SectionHeader } from "@/components/SectionHeader";
+import { Title } from "@/components/Title";
 import { WordCloud } from "@/components/WordCloud";
 
 import styles from "./samplePage.module.css";
@@ -29,6 +30,7 @@ export default function Demographics() {
   return (
     <div className={styles.page}>
       <Header />
+      <Title>Miscellaneous</Title>
       <SectionHeader title="Miscellaneous" subtitle="" />
 
       <ComponentWrapper
@@ -122,7 +124,7 @@ export default function Demographics() {
       <BottomNav
         leftPage={pageRoutes.friends}
         rightPage={pageRoutes.mentalHealth}
-      ></BottomNav>
+      />
     </div>
   );
 }

pages/personal.tsx

@@ -7,6 +7,7 @@ import { ComponentWrapper } from "@/components/ComponentWrapper";
 import { Header } from "@/components/Header";
 import { QuotationCarousel } from "@/components/QuotationCarousel";
 import { SectionHeader } from "@/components/SectionHeader";
+import { Title } from "@/components/Title";
 
 import styles from "./samplePage.module.css";
 
@@ -14,6 +15,7 @@ export default function Personal() {
   return (
     <div className={styles.page}>
       <Header />
+      <Title>Personal</Title>
       <SectionHeader title="Personal" subtitle="Life lessons from students" />
 
       <ComponentWrapper
@@ -104,7 +106,7 @@ export default function Personal() {
       <BottomNav
         leftPage={pageRoutes.mentalHealth}
         rightPage={pageRoutes.contributors}
-      ></BottomNav>
+      />
     </div>
   );
 }

pages/post-grad.tsx

@@ -18,6 +18,7 @@ import { ComponentWrapper } from "@/components/ComponentWrapper";
 import { Header } from "@/components/Header";
 import { PieChart } from "@/components/PieChart";
 import { SectionHeader } from "@/components/SectionHeader";
+import { Title } from "@/components/Title";
 import { WordCloud } from "@/components/WordCloud";
 
 import styles from "./samplePage.module.css";
@@ -29,6 +30,7 @@ export default function Demographics() {
   return (
     <div className={styles.page}>
       <Header />
+      <Title>Post-grad</Title>
       <SectionHeader
         title="Post-grad"
         subtitle="Further Computer Science Academic Journey"
@@ -137,7 +139,7 @@ export default function Demographics() {
       <BottomNav
         leftPage={pageRoutes.intimacyAndDrugs}
         rightPage={pageRoutes.friends}
-      ></BottomNav>
+      />
     </div>
   );
 }