Merge remote-tracking branch 'origin/main' into shahanneda/animations
continuous-integration/drone/push Build is passing
Details
continuous-integration/drone/push Build is passing
Details
This commit is contained in:
commit
40ea8648cc
19
.drone.yml
19
.drone.yml
|
@ -50,7 +50,7 @@ steps:
|
|||
registry: registry.cloud.csclub.uwaterloo.ca
|
||||
repo: registry.cloud.csclub.uwaterloo.ca/snedadah/csc-class-profile-staging
|
||||
|
||||
- name: deploy
|
||||
- name: deploy (staging)
|
||||
image: node:16
|
||||
depends_on:
|
||||
- publish
|
||||
|
@ -60,7 +60,22 @@ steps:
|
|||
commands:
|
||||
- echo "The docker build tag is ${DRONE_BRANCH//\//-}"
|
||||
- 'curl -H "Authorization: $STAGING_AUTH_TOKEN" https://csclub.uwaterloo.ca/~snedadah/webhooks/cscclassprofilestaging?ref=${DRONE_BRANCH//\//-}'
|
||||
|
||||
|
||||
- name: deploy (production)
|
||||
image: node:16
|
||||
depends_on:
|
||||
- export
|
||||
environment:
|
||||
SSH_KEY:
|
||||
from_secret: DEPLOYMENT_SSH_KEY
|
||||
commands:
|
||||
- 'echo "$SSH_KEY" > /tmp/ssh_key'
|
||||
- chmod 600 /tmp/ssh_key
|
||||
- ssh -4 -i /tmp/ssh_key www@caffeine.csclub.uwaterloo.ca -o StrictHostKeyChecking=no '~/bin/classprofile/deploy-classprofile-2022.sh'
|
||||
when:
|
||||
branch:
|
||||
- main
|
||||
|
||||
trigger:
|
||||
event:
|
||||
exclude:
|
||||
|
|
|
@ -57,3 +57,9 @@
|
|||
bottom: 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() {
|
||||
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>
|
||||
|
|
|
@ -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;
|
||||
}
|
||||
}
|
|
@ -10,7 +10,6 @@
|
|||
composes: sideWrapperCommon;
|
||||
align-self: end;
|
||||
margin-right: 0;
|
||||
padding-right: 0;
|
||||
border-radius: calc(200rem / 16) 0 0 calc(200rem / 16);
|
||||
flex-direction: row-reverse;
|
||||
padding-right: calc(50rem / 16);
|
||||
|
@ -20,7 +19,6 @@
|
|||
composes: sideWrapperCommon;
|
||||
align-self: start;
|
||||
margin-left: 0;
|
||||
padding-left: 0;
|
||||
border-radius: 0 calc(200rem / 16) calc(200rem / 16) 0;
|
||||
flex-direction: row;
|
||||
padding-left: calc(50rem / 16);
|
||||
|
@ -42,7 +40,6 @@
|
|||
*/
|
||||
margin: 0 0 calc(45rem / 16) 0;
|
||||
align-self: center;
|
||||
padding: 0 15%;
|
||||
}
|
||||
|
||||
.wrapperCenter .internalWrapper {
|
||||
|
@ -82,10 +79,19 @@
|
|||
|
||||
.internalWrapper {
|
||||
padding: calc(20rem / 16);
|
||||
/* Without this, some graphs will have an horizontal scroll bar thats not needed */
|
||||
overflow-x: auto;
|
||||
}
|
||||
|
||||
.internalWrapper p {
|
||||
font-size: calc(24rem / 16);
|
||||
opacity: .85;
|
||||
line-height: 1.25;
|
||||
}
|
||||
|
||||
.textWrapper {
|
||||
/* We add this since we want the text to shrink before the graph ever shrinks */
|
||||
flex-shrink: 1000;
|
||||
/* So that text is still readable in the awkward 1000px width screen size */
|
||||
min-width: 200px;
|
||||
}
|
|
@ -33,7 +33,7 @@ export function ComponentWrapper({
|
|||
${bodyText ? "" : styles.wrapperNoBodyText}
|
||||
`}
|
||||
>
|
||||
<div className={styles.internalWrapper}>
|
||||
<div className={`${styles.internalWrapper} ${styles.textWrapper}`}>
|
||||
<h3>{heading}</h3>
|
||||
{bodyText ? <p>{bodyText}</p> : null}
|
||||
</div>
|
||||
|
|
|
@ -1,7 +1,6 @@
|
|||
.wrapper {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.barBackground {
|
||||
|
|
|
@ -1,6 +1,7 @@
|
|||
import { pageRoutes } from "data/routes";
|
||||
import Link from "next/link";
|
||||
import React, { useState } from "react";
|
||||
import { basePath } from "utils/getBasePath";
|
||||
|
||||
import { Sections } from "./Sections";
|
||||
|
||||
|
@ -32,7 +33,7 @@ export function Header() {
|
|||
className={styles.menuIcon}
|
||||
>
|
||||
<img
|
||||
src="/images/menuIcon.svg"
|
||||
src={basePath + "/images/menuIcon.svg"}
|
||||
width="50"
|
||||
height="50"
|
||||
draggable="false"
|
||||
|
@ -52,7 +53,7 @@ export function Header() {
|
|||
}}
|
||||
>
|
||||
<img
|
||||
src="/images/rightArrow.svg"
|
||||
src={basePath + "/images/rightArrow.svg"}
|
||||
className={styles.arrowIcon}
|
||||
width="50"
|
||||
height="50"
|
||||
|
|
|
@ -11,7 +11,6 @@
|
|||
|
||||
.wrapper {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
width: min-content;
|
||||
}
|
||||
|
||||
|
|
|
@ -11,7 +11,7 @@
|
|||
}
|
||||
|
||||
.separator {
|
||||
flex: 1;
|
||||
flex: 2;
|
||||
background-color: var(--label);
|
||||
height: calc(1rem / 16);
|
||||
width: 100%;
|
||||
|
@ -50,7 +50,7 @@
|
|||
color: var(--primary-text);
|
||||
}
|
||||
|
||||
.nav li a .linkName:after {
|
||||
.linkName:after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
|
@ -64,13 +64,24 @@
|
|||
transition: transform 0.25s ease-out;
|
||||
}
|
||||
|
||||
.nav li a .linkName:hover:after {
|
||||
.linkName:hover:after {
|
||||
transform: scaleX(1);
|
||||
transform-origin: bottom left;
|
||||
}
|
||||
|
||||
.nav li .linkName {
|
||||
.linkName {
|
||||
margin: 0;
|
||||
display: inline;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
@media screen and (max-width: 900px) {
|
||||
.sections {
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.sections h1 {
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
}
|
|
@ -1,4 +1,5 @@
|
|||
import { PageRoutes } from "data/routes";
|
||||
import Link from "next/link";
|
||||
import React from "react";
|
||||
|
||||
import styles from "./Sections.module.css";
|
||||
|
@ -6,12 +7,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>
|
||||
|
@ -25,12 +37,14 @@ export function Sections({ data, showHeader = true }: SectionsProps) {
|
|||
{Object.values(data).map((datum, index) => {
|
||||
return (
|
||||
<li key={`${datum.name}-${index}`}>
|
||||
<a href={datum.url}>
|
||||
<span className={styles.linkNumber}>
|
||||
{String(index).padStart(2, "0")}{" "}
|
||||
</span>
|
||||
<span className={styles.linkName}>{datum.name}</span>
|
||||
</a>
|
||||
<span className={styles.linkNumber}>
|
||||
{String(index).padStart(2, "0")}{" "}
|
||||
</span>
|
||||
<span className={styles.linkName}>
|
||||
<Link className={styles.linkName} href={datum.url}>
|
||||
{datum.name}
|
||||
</Link>
|
||||
</span>
|
||||
</li>
|
||||
);
|
||||
})}
|
||||
|
|
|
@ -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)
|
||||
}
|
||||
}
|
|
@ -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>
|
||||
|
|
|
@ -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>
|
||||
);
|
||||
}
|
|
@ -0,0 +1,75 @@
|
|||
export const communityReps = [
|
||||
{
|
||||
name: "Sat Arora",
|
||||
link: "https://www.linkedin.com/in/sat-arora/",
|
||||
},
|
||||
{
|
||||
name: "Mayank Mehra",
|
||||
link: "https://www.linkedin.com/in/mayank808",
|
||||
},
|
||||
{
|
||||
name: "Olivia Liu",
|
||||
link: "",
|
||||
},
|
||||
{
|
||||
name: "Amy Luo",
|
||||
link: "https://www.linkedin.com/in/amytluo/",
|
||||
},
|
||||
{
|
||||
name: "Juthika Hoque",
|
||||
link: "https://www.linkedin.com/in/juthikahoque/",
|
||||
},
|
||||
];
|
||||
|
||||
export const designers = [
|
||||
{
|
||||
name: "Jenny Zhang",
|
||||
link: "https://www.instagram.com/j3nny_zhang",
|
||||
},
|
||||
{
|
||||
name: "Vivian Guo",
|
||||
link: "https://www.linkedin.com/in/vivianvg",
|
||||
},
|
||||
{
|
||||
name: "Aaryan Shroff",
|
||||
link: "https://www.linkedin.com/in/aaryan-shroff",
|
||||
},
|
||||
{
|
||||
name: "Rachel Ma",
|
||||
link: "",
|
||||
},
|
||||
];
|
||||
|
||||
export const webDevs = [
|
||||
{
|
||||
name: "Amy Wang",
|
||||
link: "",
|
||||
},
|
||||
{
|
||||
name: "Beihao Zhou",
|
||||
link: "https://www.linkedin.com/in/beihaozhou/",
|
||||
},
|
||||
{
|
||||
name: "Jared He",
|
||||
link: "https://www.linkedin.com/in/jaredhe/",
|
||||
},
|
||||
{
|
||||
name: "Mark Chiu",
|
||||
link: "https://linkedin.com/in/markchiu02",
|
||||
},
|
||||
{
|
||||
name: "Shahan Nedadahandeh",
|
||||
link: "https://shahan.ca/",
|
||||
},
|
||||
];
|
||||
|
||||
export const sysCom = [
|
||||
{
|
||||
name: "Raymond Li",
|
||||
link: "https://raymond.li/",
|
||||
},
|
||||
{
|
||||
name: "Max Erenberg",
|
||||
link: "https://maxerenberg.github.io/",
|
||||
},
|
||||
];
|
|
@ -4,6 +4,7 @@ export interface PageRoute {
|
|||
}
|
||||
|
||||
type PageID =
|
||||
| "home"
|
||||
| "demographics"
|
||||
| "academics"
|
||||
| "coop"
|
||||
|
@ -18,6 +19,10 @@ type PageID =
|
|||
|
||||
export type PageRoutes = { [key in PageID]: PageRoute };
|
||||
export const pageRoutes: PageRoutes = {
|
||||
home: {
|
||||
name: "Home",
|
||||
url: "/",
|
||||
},
|
||||
demographics: {
|
||||
name: "Demographics",
|
||||
url: "/demographics",
|
||||
|
|
|
@ -0,0 +1,27 @@
|
|||
#!/usr/bin/env bash
|
||||
|
||||
set -ex
|
||||
ulimit -u 512
|
||||
|
||||
DIR=$(mktemp --directory)
|
||||
trap "rm -rf $DIR" EXIT
|
||||
|
||||
pushd $DIR
|
||||
|
||||
git clone file:///srv/git/www/cs-2022-class-profile.git --depth=1
|
||||
cd cs-2022-class-profile
|
||||
|
||||
export NEXT_PUBLIC_BASE_PATH="/classprofile/2022"
|
||||
npm install
|
||||
npm run build
|
||||
npm run export
|
||||
|
||||
chgrp -R www out
|
||||
chmod -R g+w out
|
||||
|
||||
shopt -s dotglob
|
||||
|
||||
rm -rf /srv/classprofile/2022/*
|
||||
mv out/* /srv/classprofile/2022/
|
||||
|
||||
popd
|
|
@ -1,11 +1,18 @@
|
|||
/** @type {import('next').NextConfig} */
|
||||
let basePath = process.env.NEXT_PUBLIC_BASE_PATH ? process.env.NEXT_PUBLIC_BASE_PATH : "";
|
||||
const nextConfig = {
|
||||
basePath: basePath,
|
||||
assetPrefix: basePath + "/",
|
||||
|
||||
publicRuntimeConfig : { basePath: basePath },
|
||||
|
||||
// test comment
|
||||
reactStrictMode: true,
|
||||
trailingSlash: true,
|
||||
// This image loader supports `next export`, for optimizing next <Image /> tags
|
||||
images: {
|
||||
loader: 'akamai',
|
||||
path: '',
|
||||
path: basePath,
|
||||
},
|
||||
}
|
||||
|
||||
|
|
File diff suppressed because it is too large
Load Diff
|
@ -2,11 +2,6 @@ html {
|
|||
scroll-behavior: smooth;
|
||||
}
|
||||
|
||||
html,
|
||||
body {
|
||||
overflow-x: hidden;
|
||||
}
|
||||
|
||||
body {
|
||||
/* Theme colours */
|
||||
--pink: #EF839D;
|
||||
|
|
|
@ -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>
|
||||
);
|
||||
}
|
||||
|
|
|
@ -0,0 +1,87 @@
|
|||
import { communityReps, designers, webDevs, sysCom } from "data/contributors";
|
||||
import { pageRoutes } from "data/routes";
|
||||
import React from "react";
|
||||
|
||||
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";
|
||||
|
||||
interface ContributorProfile {
|
||||
name: string;
|
||||
link: string;
|
||||
}
|
||||
|
||||
interface ContributorGroupProps {
|
||||
group: Array<ContributorProfile>;
|
||||
}
|
||||
|
||||
export function ContributorGroup({ group }: ContributorGroupProps) {
|
||||
return (
|
||||
<ul>
|
||||
{group
|
||||
.sort((a, b) => a.name.localeCompare(b.name))
|
||||
.map((d, idx) => {
|
||||
return (
|
||||
<li key={idx}>
|
||||
<a href={d.link}>{d.name}</a>
|
||||
</li>
|
||||
);
|
||||
})}
|
||||
</ul>
|
||||
);
|
||||
}
|
||||
|
||||
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!"
|
||||
/>
|
||||
|
||||
<CenterWrapper>
|
||||
<p>
|
||||
The 2022 CS Class Profile was completed by members of the UW Computer
|
||||
Science Club. Specifically, several current and past members (as of
|
||||
this writing) of the Community Representatives, Designers, Web
|
||||
Committee, and Systems Committee put lots of time into making it what
|
||||
it is. Please contact{" "}
|
||||
<a href="mailto: exec@csclub.uwaterloo.ca">
|
||||
exec@csclub.uwaterloo.ca
|
||||
</a>{" "}
|
||||
for specific concerns for the CS Class Profile, but the specific
|
||||
contributors include the following:
|
||||
</p>
|
||||
<ul>
|
||||
<li>
|
||||
Community Representatives
|
||||
<ContributorGroup group={communityReps} />
|
||||
</li>
|
||||
<li>
|
||||
Designers
|
||||
<ContributorGroup group={designers} />
|
||||
</li>
|
||||
<li>
|
||||
Website Committee
|
||||
<ContributorGroup group={webDevs} />
|
||||
</li>
|
||||
<li>
|
||||
Systems Committee
|
||||
<ContributorGroup group={sysCom} />
|
||||
</li>
|
||||
</ul>
|
||||
</CenterWrapper>
|
||||
|
||||
<BottomNav
|
||||
leftPage={pageRoutes.personal}
|
||||
rightPage={pageRoutes.home}
|
||||
></BottomNav>
|
||||
</div>
|
||||
);
|
||||
}
|
|
@ -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!"
|
||||
|
@ -211,7 +213,7 @@ export default function CoopPage() {
|
|||
heading="What was your coop evaluation rating?"
|
||||
bodyText="Ratings were pretty positive overall! It seems that it's not extremely hard to get an outstanding rating!"
|
||||
>
|
||||
<div style={{ paddingRight: "150px" }}>
|
||||
<div>
|
||||
<StackedBarGraphHorizontal
|
||||
width={isMobile ? pageWidth / 1.5 : 600}
|
||||
height={DefaultProp.graphHeight}
|
||||
|
@ -238,7 +240,7 @@ export default function CoopPage() {
|
|||
align="right"
|
||||
noBackground
|
||||
>
|
||||
<div style={{ paddingRight: "150px" }}>
|
||||
<div>
|
||||
<StackedBarGraphVertical
|
||||
width={isMobile ? pageWidth / 1.5 : 600}
|
||||
height={DefaultProp.graphHeight}
|
||||
|
@ -287,7 +289,7 @@ export default function CoopPage() {
|
|||
bodyText="Interestingly, the referral to non-referral ratio stayed roughly the same as the co-op terms progressed, apart from the first one which had the most referrals. This goes to show that, without a doubt, networking can really get you some great opportunities! Especially in your first co-ops when your experience may be lacking!"
|
||||
noBackground
|
||||
>
|
||||
<div style={{ paddingRight: "150px" }}>
|
||||
<div>
|
||||
<StackedBarGraphVertical
|
||||
width={isMobile ? pageWidth / 1.5 : 600}
|
||||
height={DefaultProp.graphHeight}
|
||||
|
@ -305,7 +307,7 @@ export default function CoopPage() {
|
|||
<BottomNav
|
||||
leftPage={pageRoutes.academics}
|
||||
rightPage={pageRoutes.lifestyleAndInterests}
|
||||
></BottomNav>
|
||||
/>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
|
|
@ -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>
|
||||
);
|
||||
}
|
||||
|
|
|
@ -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>
|
||||
);
|
||||
}
|
||||
|
|
|
@ -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 { 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>
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
|
|
@ -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>
|
||||
);
|
||||
}
|
||||
|
|
|
@ -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>
|
||||
);
|
||||
}
|
||||
|
|
|
@ -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>
|
||||
);
|
||||
}
|
||||
|
|
|
@ -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>
|
||||
);
|
||||
}
|
||||
|
|
|
@ -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>
|
||||
);
|
||||
}
|
||||
|
|
|
@ -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>
|
||||
);
|
||||
}
|
||||
|
|
Binary file not shown.
After Width: | Height: | Size: 762 KiB |
|
@ -0,0 +1,6 @@
|
|||
import config from "next/config";
|
||||
// eslint-disable-next-line @typescript-eslint/no-unsafe-assignment
|
||||
const { publicRuntimeConfig } = config();
|
||||
// eslint-disable-next-line @typescript-eslint/no-unsafe-member-access
|
||||
const basePath = publicRuntimeConfig.basePath as string;
|
||||
export { basePath };
|
Loading…
Reference in New Issue