+
{isTimeUppercase ? datum.time.toUpperCase() : datum.time}
+
{datum.time}
{datum.text}
diff --git a/components/Title.tsx b/components/Title.tsx
new file mode 100644
index 0000000..d9fbf7e
--- /dev/null
+++ b/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 (
+
+
{children.join(" - ")}
+
+ );
+}
diff --git a/pages/academics.tsx b/pages/academics.tsx
index d1cfc18..2ef5ebc 100644
--- a/pages/academics.tsx
+++ b/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 (
+
Academics
@@ -452,7 +454,7 @@ export default function Academics() {
+ />
);
}
diff --git a/pages/contributors.tsx b/pages/contributors.tsx
index 6a4f57e..a81d63b 100644
--- a/pages/contributors.tsx
+++ b/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 (
+
Contributors
+ Co-op
+ />
);
}
diff --git a/pages/demographics.tsx b/pages/demographics.tsx
index c07fddc..339ad9e 100644
--- a/pages/demographics.tsx
+++ b/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 (
+
Demographics
-
+
);
}
diff --git a/pages/friends.tsx b/pages/friends.tsx
index 72afdf3..e94c942 100644
--- a/pages/friends.tsx
+++ b/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 (
+
Friends
+ />
);
}
diff --git a/pages/frontpage.module.css b/pages/frontpage.module.css
new file mode 100644
index 0000000..1b2c080
--- /dev/null
+++ b/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;
+}
\ No newline at end of file
diff --git a/pages/index.tsx b/pages/index.tsx
index 58dda94..50a4749 100644
--- a/pages/index.tsx
+++ b/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 (
-
- Click here to visit the playground
-
- Click here to visit a sample page
-
+ <>
+
+
+
Home
+
+
+
+
+
+
UW Computer Science 2022
+
Class Profile
+
Welcome to UW Computer Science 2022 Class Profile.
+
+
+
+
+
+
+
+
+
+ Preface
+
+ 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.
+
+
+ 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!
+
+
+ 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{" "}
+
+
+ UW Computer Science Club
+
+ {" "}
+ so please check us out if you enjoy what you see! All of the graphs,
+ and designs on this website were built by us!
+
+
+
+
+ >
);
}
diff --git a/pages/intimacy-and-drugs.tsx b/pages/intimacy-and-drugs.tsx
index a1022bb..eefcbc2 100644
--- a/pages/intimacy-and-drugs.tsx
+++ b/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 (
+
Intimacy and Drugs
+ />
);
}
diff --git a/pages/lifestyle-and-interests.tsx b/pages/lifestyle-and-interests.tsx
index 4e2556f..3627924 100644
--- a/pages/lifestyle-and-interests.tsx
+++ b/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 (
+
Lifestyle and Interests
+ />
);
}
diff --git a/pages/mental-health.tsx b/pages/mental-health.tsx
index 8564dba..66a6c65 100644
--- a/pages/mental-health.tsx
+++ b/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 (
+
Mental Health
+ />
);
}
diff --git a/pages/miscellaneous.tsx b/pages/miscellaneous.tsx
index e4fd436..78d96e0 100644
--- a/pages/miscellaneous.tsx
+++ b/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 (
+
Miscellaneous
+ />
);
}
diff --git a/pages/personal.tsx b/pages/personal.tsx
index 13b41e9..4b18fb1 100644
--- a/pages/personal.tsx
+++ b/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 (
+
Personal
+ />
);
}
diff --git a/pages/post-grad.tsx b/pages/post-grad.tsx
index 0d55723..ef9b43a 100644
--- a/pages/post-grad.tsx
+++ b/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 (
+
Post-grad
+ />
);
}
diff --git a/public/images/frontPageTitle.png b/public/images/frontPageTitle.png
new file mode 100644
index 0000000..cdf1e4d
Binary files /dev/null and b/public/images/frontPageTitle.png differ