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>
This commit is contained in:
parent
85535414c3
commit
9a60c6b779
|
@ -57,3 +57,9 @@
|
||||||
bottom: 0;
|
bottom: 0;
|
||||||
right: 0;
|
right: 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@media screen and (max-width: 900px) {
|
||||||
|
.about {
|
||||||
|
flex-direction: column;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
|
@ -4,7 +4,7 @@ import styles from "./About.module.css";
|
||||||
|
|
||||||
export function About() {
|
export function About() {
|
||||||
return (
|
return (
|
||||||
<div className={styles.aboutWrapper}>
|
<div className={styles.aboutWrapper} id="about">
|
||||||
<AngleDecoration isBottom={false} />
|
<AngleDecoration isBottom={false} />
|
||||||
<section className={styles.about}>
|
<section className={styles.about}>
|
||||||
<aside>
|
<aside>
|
||||||
|
@ -17,8 +17,8 @@ export function About() {
|
||||||
Offered from the Faculty of Mathematics as most commonly a co-op
|
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
|
program, students usually attend 8 school and 6 co-op terms in their
|
||||||
degree. However, CS is very flexible, as many students historically
|
degree. However, CS is very flexible, as many students historically
|
||||||
have dropped co-ops, taking terms off, and messing with their
|
have dropped co-ops, taken terms off, and messed with their schedule
|
||||||
schedule to fit their desires.
|
to fit their desires.
|
||||||
</p>
|
</p>
|
||||||
<h4>Computing and Financial Management</h4>
|
<h4>Computing and Financial Management</h4>
|
||||||
<p>
|
<p>
|
||||||
|
|
|
@ -1,7 +1,15 @@
|
||||||
.textbox {
|
.textbox {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
width: 80%;
|
width: 80%;
|
||||||
padding: calc(80rem / 16);
|
padding: calc(80rem / 16);
|
||||||
background-color: var(--secondary-background);
|
background-color: var(--secondary-background);
|
||||||
border-radius: calc(20rem / 16);
|
border-radius: calc(20rem / 16);
|
||||||
margin: 0 auto;
|
align-self: center;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@media screen and (max-width: 900px) {
|
||||||
|
.textbox {
|
||||||
|
align-items: center;
|
||||||
|
}
|
||||||
|
}
|
|
@ -11,7 +11,7 @@
|
||||||
}
|
}
|
||||||
|
|
||||||
.separator {
|
.separator {
|
||||||
flex: 1;
|
flex: 2;
|
||||||
background-color: var(--label);
|
background-color: var(--label);
|
||||||
height: calc(1rem / 16);
|
height: calc(1rem / 16);
|
||||||
width: 100%;
|
width: 100%;
|
||||||
|
@ -57,4 +57,14 @@
|
||||||
.nav li .linkName {
|
.nav li .linkName {
|
||||||
margin: 0;
|
margin: 0;
|
||||||
display: inline;
|
display: inline;
|
||||||
|
}
|
||||||
|
|
||||||
|
@media screen and (max-width: 900px) {
|
||||||
|
.sections {
|
||||||
|
flex-direction: column;
|
||||||
|
}
|
||||||
|
|
||||||
|
.sections h1 {
|
||||||
|
text-align: left;
|
||||||
|
}
|
||||||
}
|
}
|
|
@ -6,12 +6,23 @@ import styles from "./Sections.module.css";
|
||||||
interface SectionsProps {
|
interface SectionsProps {
|
||||||
/* Whether to display the "Sections" title and separator that appears on the left. */
|
/* Whether to display the "Sections" title and separator that appears on the left. */
|
||||||
showHeader?: boolean;
|
showHeader?: boolean;
|
||||||
|
/* Width of the entire Sections, in px. */
|
||||||
|
width?: number;
|
||||||
data: PageRoutes;
|
data: PageRoutes;
|
||||||
|
className?: string;
|
||||||
}
|
}
|
||||||
|
|
||||||
export function Sections({ data, showHeader = true }: SectionsProps) {
|
export function Sections({
|
||||||
|
data,
|
||||||
|
showHeader = true,
|
||||||
|
className,
|
||||||
|
}: SectionsProps) {
|
||||||
return (
|
return (
|
||||||
<section className={styles.sections}>
|
<section
|
||||||
|
className={
|
||||||
|
className ? `${className} ${styles.sections}` : `${styles.sections}`
|
||||||
|
}
|
||||||
|
>
|
||||||
{showHeader ? (
|
{showHeader ? (
|
||||||
<>
|
<>
|
||||||
<h1>Sections</h1>
|
<h1>Sections</h1>
|
||||||
|
|
|
@ -22,7 +22,7 @@
|
||||||
width: 100%;
|
width: 100%;
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-direction: row;
|
flex-direction: row;
|
||||||
justify-content: center;
|
justify-content: flex-end;
|
||||||
}
|
}
|
||||||
|
|
||||||
.time {
|
.time {
|
||||||
|
@ -34,7 +34,7 @@
|
||||||
word-wrap: break-word;
|
word-wrap: break-word;
|
||||||
}
|
}
|
||||||
|
|
||||||
.circle {
|
.outerCircle {
|
||||||
background-color: var(--secondary-accent);
|
background-color: var(--secondary-accent);
|
||||||
box-shadow: calc(0rem / 16) calc(0rem / 16) calc(30rem / 16) var(--secondary-accent);
|
box-shadow: calc(0rem / 16) calc(0rem / 16) calc(30rem / 16) var(--secondary-accent);
|
||||||
display: flex;
|
display: flex;
|
||||||
|
@ -72,4 +72,21 @@
|
||||||
.timelineSection:hover .text {
|
.timelineSection:hover .text {
|
||||||
border: calc(2rem / 16) solid var(--secondary-accent-light);
|
border: calc(2rem / 16) solid var(--secondary-accent-light);
|
||||||
box-shadow: calc(0rem / 16) calc(0rem / 16) calc(20rem / 16) var(--secondary-accent);
|
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)
|
||||||
|
}
|
||||||
}
|
}
|
|
@ -17,8 +17,6 @@ interface TimelineProps {
|
||||||
outerCircleWidth?: number;
|
outerCircleWidth?: number;
|
||||||
/** Width of the inner circles on the timeline, in pixels. */
|
/** Width of the inner circles on the timeline, in pixels. */
|
||||||
innerCircleWidth?: number;
|
innerCircleWidth?: number;
|
||||||
/** Width of time label, in pixels. */
|
|
||||||
timeWidth?: number;
|
|
||||||
/** Width of text label, in pixels. */
|
/** Width of text label, in pixels. */
|
||||||
textWidth?: number;
|
textWidth?: number;
|
||||||
/** Distance between the time label AND the text label to middle line, in pixels. */
|
/** Distance between the time label AND the text label to middle line, in pixels. */
|
||||||
|
@ -32,14 +30,12 @@ export function Timeline({
|
||||||
lineWidth = 5,
|
lineWidth = 5,
|
||||||
outerCircleWidth = 30,
|
outerCircleWidth = 30,
|
||||||
innerCircleWidth = 15,
|
innerCircleWidth = 15,
|
||||||
timeWidth = 200,
|
textWidth = 500,
|
||||||
textWidth = 300,
|
|
||||||
gap = 50,
|
gap = 50,
|
||||||
className,
|
className,
|
||||||
}: TimelineProps) {
|
}: TimelineProps) {
|
||||||
const largerMiddleElement =
|
const largerMiddleElement =
|
||||||
outerCircleWidth > lineWidth ? outerCircleWidth : lineWidth;
|
outerCircleWidth > lineWidth ? outerCircleWidth : lineWidth;
|
||||||
const width = timeWidth + gap + largerMiddleElement + gap + textWidth;
|
|
||||||
if (innerCircleWidth > outerCircleWidth) {
|
if (innerCircleWidth > outerCircleWidth) {
|
||||||
throw new Error(
|
throw new Error(
|
||||||
`<Timeline /> - innerCircleWidth (${innerCircleWidth}) is larger than outerCircleWidth (${outerCircleWidth})`
|
`<Timeline /> - innerCircleWidth (${innerCircleWidth}) is larger than outerCircleWidth (${outerCircleWidth})`
|
||||||
|
@ -51,13 +47,12 @@ export function Timeline({
|
||||||
className={
|
className={
|
||||||
className ? `${className} ${styles.wrapper}` : `${styles.wrapper}`
|
className ? `${className} ${styles.wrapper}` : `${styles.wrapper}`
|
||||||
}
|
}
|
||||||
style={{ width: width }}
|
|
||||||
>
|
>
|
||||||
<div
|
<div
|
||||||
className={styles.line}
|
className={styles.line}
|
||||||
style={{
|
style={{
|
||||||
width: lineWidth,
|
width: lineWidth,
|
||||||
left: width / 2 - lineWidth / 2,
|
right: textWidth + gap + largerMiddleElement / 2 - lineWidth / 2,
|
||||||
}}
|
}}
|
||||||
/>
|
/>
|
||||||
<div className={styles.timelineSections}>
|
<div className={styles.timelineSections}>
|
||||||
|
@ -65,11 +60,9 @@ export function Timeline({
|
||||||
<TimelineSection
|
<TimelineSection
|
||||||
key={datum.time}
|
key={datum.time}
|
||||||
datum={datum}
|
datum={datum}
|
||||||
width={width}
|
|
||||||
isTimeUppercase={isTimeUppercase}
|
isTimeUppercase={isTimeUppercase}
|
||||||
outerCircleWidth={outerCircleWidth}
|
outerCircleWidth={outerCircleWidth}
|
||||||
innerCircleWidth={innerCircleWidth}
|
innerCircleWidth={innerCircleWidth}
|
||||||
timeWidth={timeWidth}
|
|
||||||
textWidth={textWidth}
|
textWidth={textWidth}
|
||||||
gap={gap}
|
gap={gap}
|
||||||
/>
|
/>
|
||||||
|
@ -81,42 +74,33 @@ export function Timeline({
|
||||||
|
|
||||||
interface TimelineSectionProps {
|
interface TimelineSectionProps {
|
||||||
datum: TimelineData;
|
datum: TimelineData;
|
||||||
width: number;
|
|
||||||
isTimeUppercase: boolean;
|
isTimeUppercase: boolean;
|
||||||
outerCircleWidth: number;
|
outerCircleWidth: number;
|
||||||
innerCircleWidth: number;
|
innerCircleWidth: number;
|
||||||
timeWidth: number;
|
|
||||||
textWidth: number;
|
textWidth: number;
|
||||||
gap: number;
|
gap: number;
|
||||||
}
|
}
|
||||||
|
|
||||||
function TimelineSection({
|
function TimelineSection({
|
||||||
datum,
|
datum,
|
||||||
width,
|
|
||||||
isTimeUppercase,
|
isTimeUppercase,
|
||||||
outerCircleWidth,
|
outerCircleWidth,
|
||||||
innerCircleWidth,
|
innerCircleWidth,
|
||||||
timeWidth,
|
|
||||||
textWidth,
|
textWidth,
|
||||||
gap,
|
gap,
|
||||||
}: TimelineSectionProps) {
|
}: TimelineSectionProps) {
|
||||||
return (
|
return (
|
||||||
<div className={styles.timelineSection} style={{ gap: gap }}>
|
<div className={styles.timelineSection} style={{ gap: gap }}>
|
||||||
<div
|
<div className={styles.time}>
|
||||||
className={styles.time}
|
|
||||||
style={{
|
|
||||||
width: timeWidth,
|
|
||||||
marginLeft: (width - 2 * gap - outerCircleWidth) / 2 - timeWidth,
|
|
||||||
}}
|
|
||||||
>
|
|
||||||
{isTimeUppercase ? datum.time.toUpperCase() : datum.time}
|
{isTimeUppercase ? datum.time.toUpperCase() : datum.time}
|
||||||
</div>
|
</div>
|
||||||
<div
|
<div
|
||||||
className={styles.circle}
|
className={styles.outerCircle}
|
||||||
style={{
|
style={{
|
||||||
width: outerCircleWidth,
|
width: outerCircleWidth,
|
||||||
height: outerCircleWidth,
|
height: outerCircleWidth,
|
||||||
borderRadius: outerCircleWidth,
|
borderRadius: outerCircleWidth,
|
||||||
|
flex: `0 0 calc(${outerCircleWidth}rem / 16)`,
|
||||||
}}
|
}}
|
||||||
>
|
>
|
||||||
<div
|
<div
|
||||||
|
@ -132,9 +116,10 @@ function TimelineSection({
|
||||||
className={styles.text}
|
className={styles.text}
|
||||||
style={{
|
style={{
|
||||||
width: textWidth,
|
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}
|
{datum.text}
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
|
@ -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>
|
||||||
|
);
|
||||||
|
}
|
|
@ -60,6 +60,7 @@ import {
|
||||||
StackedBarGraphHorizontal,
|
StackedBarGraphHorizontal,
|
||||||
StackedBarGraphVertical,
|
StackedBarGraphVertical,
|
||||||
} from "@/components/StackedBarGraph";
|
} from "@/components/StackedBarGraph";
|
||||||
|
import { Title } from "@/components/Title";
|
||||||
import { WordCloud } from "@/components/WordCloud";
|
import { WordCloud } from "@/components/WordCloud";
|
||||||
|
|
||||||
import styles from "./samplePage.module.css";
|
import styles from "./samplePage.module.css";
|
||||||
|
@ -71,6 +72,7 @@ export default function Academics() {
|
||||||
return (
|
return (
|
||||||
<div className={styles.page}>
|
<div className={styles.page}>
|
||||||
<Header />
|
<Header />
|
||||||
|
<Title>Academics</Title>
|
||||||
<SectionHeader title="Academics" />
|
<SectionHeader title="Academics" />
|
||||||
|
|
||||||
<SectionWrapper title="Programming" />
|
<SectionWrapper title="Programming" />
|
||||||
|
@ -452,7 +454,7 @@ export default function Academics() {
|
||||||
<BottomNav
|
<BottomNav
|
||||||
leftPage={pageRoutes.demographics}
|
leftPage={pageRoutes.demographics}
|
||||||
rightPage={pageRoutes.coop}
|
rightPage={pageRoutes.coop}
|
||||||
></BottomNav>
|
/>
|
||||||
</div>
|
</div>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|
|
@ -6,6 +6,7 @@ import { BottomNav } from "@/components/BottomNav";
|
||||||
import { CenterWrapper } from "@/components/CenterWrapper";
|
import { CenterWrapper } from "@/components/CenterWrapper";
|
||||||
import { Header } from "@/components/Header";
|
import { Header } from "@/components/Header";
|
||||||
import { SectionHeader } from "@/components/SectionHeader";
|
import { SectionHeader } from "@/components/SectionHeader";
|
||||||
|
import { Title } from "@/components/Title";
|
||||||
|
|
||||||
import styles from "./samplePage.module.css";
|
import styles from "./samplePage.module.css";
|
||||||
|
|
||||||
|
@ -38,6 +39,7 @@ export default function Contributors() {
|
||||||
return (
|
return (
|
||||||
<div className={styles.page}>
|
<div className={styles.page}>
|
||||||
<Header />
|
<Header />
|
||||||
|
<Title>Contributors</Title>
|
||||||
<SectionHeader
|
<SectionHeader
|
||||||
title="Contributors"
|
title="Contributors"
|
||||||
subtitle="Huge thanks to all CSC members who have contributed to creating the first ever uWaterloo CS class profile!"
|
subtitle="Huge thanks to all CSC members who have contributed to creating the first ever uWaterloo CS class profile!"
|
||||||
|
|
|
@ -35,6 +35,7 @@ import {
|
||||||
StackedBarGraphHorizontal,
|
StackedBarGraphHorizontal,
|
||||||
StackedBarGraphVertical,
|
StackedBarGraphVertical,
|
||||||
} from "@/components/StackedBarGraph";
|
} from "@/components/StackedBarGraph";
|
||||||
|
import { Title } from "@/components/Title";
|
||||||
|
|
||||||
import { WordCloud } from "../components/WordCloud";
|
import { WordCloud } from "../components/WordCloud";
|
||||||
|
|
||||||
|
@ -54,6 +55,7 @@ export default function CoopPage() {
|
||||||
return (
|
return (
|
||||||
<div className={styles.page}>
|
<div className={styles.page}>
|
||||||
<Header />
|
<Header />
|
||||||
|
<Title>Co-op</Title>
|
||||||
<SectionHeader
|
<SectionHeader
|
||||||
title="Co-op"
|
title="Co-op"
|
||||||
subtitle="Explore careers, gain experience and earn money through UWaterloo's co-op program!"
|
subtitle="Explore careers, gain experience and earn money through UWaterloo's co-op program!"
|
||||||
|
@ -305,7 +307,7 @@ export default function CoopPage() {
|
||||||
<BottomNav
|
<BottomNav
|
||||||
leftPage={pageRoutes.academics}
|
leftPage={pageRoutes.academics}
|
||||||
rightPage={pageRoutes.lifestyleAndInterests}
|
rightPage={pageRoutes.lifestyleAndInterests}
|
||||||
></BottomNav>
|
/>
|
||||||
</div>
|
</div>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|
|
@ -30,6 +30,7 @@ import { ComponentWrapper } from "@/components/ComponentWrapper";
|
||||||
import { Header } from "@/components/Header";
|
import { Header } from "@/components/Header";
|
||||||
import { PieChart } from "@/components/PieChart";
|
import { PieChart } from "@/components/PieChart";
|
||||||
import { SectionHeader } from "@/components/SectionHeader";
|
import { SectionHeader } from "@/components/SectionHeader";
|
||||||
|
import { Title } from "@/components/Title";
|
||||||
import { WordCloud } from "@/components/WordCloud";
|
import { WordCloud } from "@/components/WordCloud";
|
||||||
|
|
||||||
import styles from "./samplePage.module.css";
|
import styles from "./samplePage.module.css";
|
||||||
|
@ -41,6 +42,7 @@ export default function Demographics() {
|
||||||
return (
|
return (
|
||||||
<div className={styles.page}>
|
<div className={styles.page}>
|
||||||
<Header />
|
<Header />
|
||||||
|
<Title>Demographics</Title>
|
||||||
<SectionHeader
|
<SectionHeader
|
||||||
title="Demographics"
|
title="Demographics"
|
||||||
subtitle="An insight into the demographics of UW’s CS programs"
|
subtitle="An insight into the demographics of UW’s CS programs"
|
||||||
|
@ -170,7 +172,7 @@ export default function Demographics() {
|
||||||
/>
|
/>
|
||||||
</ComponentWrapper>
|
</ComponentWrapper>
|
||||||
|
|
||||||
<BottomNav rightPage={pageRoutes.academics}></BottomNav>
|
<BottomNav leftPage={pageRoutes.home} rightPage={pageRoutes.academics} />
|
||||||
</div>
|
</div>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|
|
@ -35,6 +35,7 @@ import { ComponentWrapper } from "@/components/ComponentWrapper";
|
||||||
import { Header } from "@/components/Header";
|
import { Header } from "@/components/Header";
|
||||||
import { PieChart } from "@/components/PieChart";
|
import { PieChart } from "@/components/PieChart";
|
||||||
import { SectionHeader } from "@/components/SectionHeader";
|
import { SectionHeader } from "@/components/SectionHeader";
|
||||||
|
import { Title } from "@/components/Title";
|
||||||
import { WordCloud } from "@/components/WordCloud";
|
import { WordCloud } from "@/components/WordCloud";
|
||||||
|
|
||||||
import styles from "./samplePage.module.css";
|
import styles from "./samplePage.module.css";
|
||||||
|
@ -46,6 +47,7 @@ export default function Demographics() {
|
||||||
return (
|
return (
|
||||||
<div className={styles.page}>
|
<div className={styles.page}>
|
||||||
<Header />
|
<Header />
|
||||||
|
<Title>Friends</Title>
|
||||||
<SectionHeader
|
<SectionHeader
|
||||||
title="Friends"
|
title="Friends"
|
||||||
subtitle="The friends you make in university are friends you’ll have for life."
|
subtitle="The friends you make in university are friends you’ll have for life."
|
||||||
|
@ -230,7 +232,7 @@ export default function Demographics() {
|
||||||
<BottomNav
|
<BottomNav
|
||||||
leftPage={pageRoutes.postGrad}
|
leftPage={pageRoutes.postGrad}
|
||||||
rightPage={pageRoutes.miscellaneous}
|
rightPage={pageRoutes.miscellaneous}
|
||||||
></BottomNav>
|
/>
|
||||||
</div>
|
</div>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|
|
@ -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;
|
||||||
|
}
|
|
@ -1,12 +1,79 @@
|
||||||
import Link from "next/link";
|
import { pageRoutes } from "data/routes";
|
||||||
import React from "react";
|
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() {
|
export default function Home() {
|
||||||
return (
|
return (
|
||||||
<p>
|
<>
|
||||||
Click <Link href="/playground">here</Link> to visit the playground
|
<Header />
|
||||||
<br />
|
<div className={styles.main}>
|
||||||
Click <Link href="/samplePage">here</Link> to visit a sample page
|
<Title>Home</Title>
|
||||||
</p>
|
<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>
|
||||||
|
</>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|
|
@ -35,6 +35,7 @@ import { Header } from "@/components/Header";
|
||||||
import { PieChart } from "@/components/PieChart";
|
import { PieChart } from "@/components/PieChart";
|
||||||
import { QuotationCarousel } from "@/components/QuotationCarousel";
|
import { QuotationCarousel } from "@/components/QuotationCarousel";
|
||||||
import { SectionHeader } from "@/components/SectionHeader";
|
import { SectionHeader } from "@/components/SectionHeader";
|
||||||
|
import { Title } from "@/components/Title";
|
||||||
|
|
||||||
import { Color } from "../utils/Color";
|
import { Color } from "../utils/Color";
|
||||||
|
|
||||||
|
@ -47,6 +48,7 @@ export default function Demographics() {
|
||||||
return (
|
return (
|
||||||
<div className={styles.page}>
|
<div className={styles.page}>
|
||||||
<Header />
|
<Header />
|
||||||
|
<Title>Intimacy and Drugs</Title>
|
||||||
<SectionHeader
|
<SectionHeader
|
||||||
title="Intimacy and Drugs"
|
title="Intimacy and Drugs"
|
||||||
subtitle="What have people tried/already done during university?👀"
|
subtitle="What have people tried/already done during university?👀"
|
||||||
|
@ -216,7 +218,7 @@ export default function Demographics() {
|
||||||
<BottomNav
|
<BottomNav
|
||||||
leftPage={pageRoutes.lifestyleAndInterests}
|
leftPage={pageRoutes.lifestyleAndInterests}
|
||||||
rightPage={pageRoutes.postGrad}
|
rightPage={pageRoutes.postGrad}
|
||||||
></BottomNav>
|
/>
|
||||||
</div>
|
</div>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|
|
@ -36,6 +36,7 @@ import { ComponentWrapper } from "@/components/ComponentWrapper";
|
||||||
import { Header } from "@/components/Header";
|
import { Header } from "@/components/Header";
|
||||||
import { PieChart } from "@/components/PieChart";
|
import { PieChart } from "@/components/PieChart";
|
||||||
import { SectionHeader } from "@/components/SectionHeader";
|
import { SectionHeader } from "@/components/SectionHeader";
|
||||||
|
import { Title } from "@/components/Title";
|
||||||
import { WordCloud } from "@/components/WordCloud";
|
import { WordCloud } from "@/components/WordCloud";
|
||||||
|
|
||||||
import styles from "./samplePage.module.css";
|
import styles from "./samplePage.module.css";
|
||||||
|
@ -47,6 +48,7 @@ export default function Demographics() {
|
||||||
return (
|
return (
|
||||||
<div className={styles.page}>
|
<div className={styles.page}>
|
||||||
<Header />
|
<Header />
|
||||||
|
<Title>Lifestyle and Interests</Title>
|
||||||
<SectionHeader
|
<SectionHeader
|
||||||
title="Lifestyle and Interests"
|
title="Lifestyle and Interests"
|
||||||
subtitle="What do CS people do in their free time?"
|
subtitle="What do CS people do in their free time?"
|
||||||
|
@ -253,7 +255,7 @@ export default function Demographics() {
|
||||||
<BottomNav
|
<BottomNav
|
||||||
leftPage={pageRoutes.coop}
|
leftPage={pageRoutes.coop}
|
||||||
rightPage={pageRoutes.intimacyAndDrugs}
|
rightPage={pageRoutes.intimacyAndDrugs}
|
||||||
></BottomNav>
|
/>
|
||||||
</div>
|
</div>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|
|
@ -39,6 +39,7 @@ import { Header } from "@/components/Header";
|
||||||
import { PieChart } from "@/components/PieChart";
|
import { PieChart } from "@/components/PieChart";
|
||||||
import { QuotationCarousel } from "@/components/QuotationCarousel";
|
import { QuotationCarousel } from "@/components/QuotationCarousel";
|
||||||
import { SectionHeader } from "@/components/SectionHeader";
|
import { SectionHeader } from "@/components/SectionHeader";
|
||||||
|
import { Title } from "@/components/Title";
|
||||||
|
|
||||||
import styles from "./samplePage.module.css";
|
import styles from "./samplePage.module.css";
|
||||||
|
|
||||||
|
@ -49,6 +50,7 @@ export default function Demographics() {
|
||||||
return (
|
return (
|
||||||
<div className={styles.page}>
|
<div className={styles.page}>
|
||||||
<Header />
|
<Header />
|
||||||
|
<Title>Mental Health</Title>
|
||||||
<SectionHeader title="Mental Health" />
|
<SectionHeader title="Mental Health" />
|
||||||
|
|
||||||
<ComponentWrapper
|
<ComponentWrapper
|
||||||
|
@ -318,7 +320,7 @@ export default function Demographics() {
|
||||||
<BottomNav
|
<BottomNav
|
||||||
leftPage={pageRoutes.miscellaneous}
|
leftPage={pageRoutes.miscellaneous}
|
||||||
rightPage={pageRoutes.personal}
|
rightPage={pageRoutes.personal}
|
||||||
></BottomNav>
|
/>
|
||||||
</div>
|
</div>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|
|
@ -18,6 +18,7 @@ import { ComponentWrapper } from "@/components/ComponentWrapper";
|
||||||
import { Header } from "@/components/Header";
|
import { Header } from "@/components/Header";
|
||||||
import { PieChart } from "@/components/PieChart";
|
import { PieChart } from "@/components/PieChart";
|
||||||
import { SectionHeader } from "@/components/SectionHeader";
|
import { SectionHeader } from "@/components/SectionHeader";
|
||||||
|
import { Title } from "@/components/Title";
|
||||||
import { WordCloud } from "@/components/WordCloud";
|
import { WordCloud } from "@/components/WordCloud";
|
||||||
|
|
||||||
import styles from "./samplePage.module.css";
|
import styles from "./samplePage.module.css";
|
||||||
|
@ -29,6 +30,7 @@ export default function Demographics() {
|
||||||
return (
|
return (
|
||||||
<div className={styles.page}>
|
<div className={styles.page}>
|
||||||
<Header />
|
<Header />
|
||||||
|
<Title>Miscellaneous</Title>
|
||||||
<SectionHeader title="Miscellaneous" subtitle="" />
|
<SectionHeader title="Miscellaneous" subtitle="" />
|
||||||
|
|
||||||
<ComponentWrapper
|
<ComponentWrapper
|
||||||
|
@ -122,7 +124,7 @@ export default function Demographics() {
|
||||||
<BottomNav
|
<BottomNav
|
||||||
leftPage={pageRoutes.friends}
|
leftPage={pageRoutes.friends}
|
||||||
rightPage={pageRoutes.mentalHealth}
|
rightPage={pageRoutes.mentalHealth}
|
||||||
></BottomNav>
|
/>
|
||||||
</div>
|
</div>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|
|
@ -7,6 +7,7 @@ import { ComponentWrapper } from "@/components/ComponentWrapper";
|
||||||
import { Header } from "@/components/Header";
|
import { Header } from "@/components/Header";
|
||||||
import { QuotationCarousel } from "@/components/QuotationCarousel";
|
import { QuotationCarousel } from "@/components/QuotationCarousel";
|
||||||
import { SectionHeader } from "@/components/SectionHeader";
|
import { SectionHeader } from "@/components/SectionHeader";
|
||||||
|
import { Title } from "@/components/Title";
|
||||||
|
|
||||||
import styles from "./samplePage.module.css";
|
import styles from "./samplePage.module.css";
|
||||||
|
|
||||||
|
@ -14,6 +15,7 @@ export default function Personal() {
|
||||||
return (
|
return (
|
||||||
<div className={styles.page}>
|
<div className={styles.page}>
|
||||||
<Header />
|
<Header />
|
||||||
|
<Title>Personal</Title>
|
||||||
<SectionHeader title="Personal" subtitle="Life lessons from students" />
|
<SectionHeader title="Personal" subtitle="Life lessons from students" />
|
||||||
|
|
||||||
<ComponentWrapper
|
<ComponentWrapper
|
||||||
|
@ -104,7 +106,7 @@ export default function Personal() {
|
||||||
<BottomNav
|
<BottomNav
|
||||||
leftPage={pageRoutes.mentalHealth}
|
leftPage={pageRoutes.mentalHealth}
|
||||||
rightPage={pageRoutes.contributors}
|
rightPage={pageRoutes.contributors}
|
||||||
></BottomNav>
|
/>
|
||||||
</div>
|
</div>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|
|
@ -18,6 +18,7 @@ import { ComponentWrapper } from "@/components/ComponentWrapper";
|
||||||
import { Header } from "@/components/Header";
|
import { Header } from "@/components/Header";
|
||||||
import { PieChart } from "@/components/PieChart";
|
import { PieChart } from "@/components/PieChart";
|
||||||
import { SectionHeader } from "@/components/SectionHeader";
|
import { SectionHeader } from "@/components/SectionHeader";
|
||||||
|
import { Title } from "@/components/Title";
|
||||||
import { WordCloud } from "@/components/WordCloud";
|
import { WordCloud } from "@/components/WordCloud";
|
||||||
|
|
||||||
import styles from "./samplePage.module.css";
|
import styles from "./samplePage.module.css";
|
||||||
|
@ -29,6 +30,7 @@ export default function Demographics() {
|
||||||
return (
|
return (
|
||||||
<div className={styles.page}>
|
<div className={styles.page}>
|
||||||
<Header />
|
<Header />
|
||||||
|
<Title>Post-grad</Title>
|
||||||
<SectionHeader
|
<SectionHeader
|
||||||
title="Post-grad"
|
title="Post-grad"
|
||||||
subtitle="Further Computer Science Academic Journey"
|
subtitle="Further Computer Science Academic Journey"
|
||||||
|
@ -137,7 +139,7 @@ export default function Demographics() {
|
||||||
<BottomNav
|
<BottomNav
|
||||||
leftPage={pageRoutes.intimacyAndDrugs}
|
leftPage={pageRoutes.intimacyAndDrugs}
|
||||||
rightPage={pageRoutes.friends}
|
rightPage={pageRoutes.friends}
|
||||||
></BottomNav>
|
/>
|
||||||
</div>
|
</div>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|
Binary file not shown.
After Width: | Height: | Size: 762 KiB |
Loading…
Reference in New Issue