Add about
continuous-integration/drone/push Build is passing Details

This commit is contained in:
Jared He 2022-09-01 01:28:24 -04:00
parent b586d52f72
commit 4915466f34
4 changed files with 129 additions and 0 deletions

View File

@ -0,0 +1,55 @@
.aboutWrapper {
position: relative;
flex-direction: column;
width: 90%;
margin: 0 auto;
}
.about {
width: 90%;
display: flex;
flex-direction: row;
background-color: var(--primary-background);
padding: calc(45rem / 16);
}
.about aside {
flex: 1;
margin-right: 40px;
}
.about h1 {
margin: 0;
}
.about article {
flex: 3;
}
.about h4 {
margin: 0;
}
.about p {
color: var(--secondary-text)
}
.angle {
position: absolute;
top: 0;
left: 0;
width: calc(70rem / 16);
height: calc(70rem / 16);
}
.anglePath {
stroke: var(--primary-text)
}
.left.angle {
transform: rotate(180deg);
top: unset;
left: unset;
bottom: 0;
right: 0;
}

65
components/About.tsx Normal file
View File

@ -0,0 +1,65 @@
import React from "react";
import styles from "./About.module.css";
export default function About() {
return (
<div className={styles.aboutWrapper}>
<AngleDecoration isBottom={false} />
<section className={styles.about}>
<aside>
<h1>About the Programs</h1>
<p>Getting an overview of the CS programs in UW</p>
</aside>
<article>
<h4>Computer Science</h4>
<p>
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.
</p>
<h4>Computing and Financial Management</h4>
<p>
Computing and Financial Management (CFM) combines the core CS
courses with electives from areas such as accounting, economics, and
financial management. This is a joint offer from the Faculty of
Mathematics and the School of Accounting and Finance, and has the
same schedule (and flexibility) as CS.
</p>
<h4>CS/BBA</h4>
<p>
Joint with Wilfrid Laurier University, the Business Administration
and Computer Science Double Degree (CS/BBA) is an exclusive offering
that allows students to get experience in CS as well as many
subfields of business. There are 10 school terms and either 4 or 5
co-op terms in the usual schedule, so its a bit more work than CS
or CFM.
</p>
</article>
</section>
<AngleDecoration isBottom={true} />
</div>
);
}
interface AngleDecorationProps {
isBottom: boolean;
}
function AngleDecoration({ isBottom }: AngleDecorationProps) {
return (
<svg
viewBox="0 0 100 100"
className={isBottom ? `${styles.left} ${styles.angle}` : styles.angle}
>
<path
d="M100,2 L2,2 L2,100"
fill="none"
strokeWidth="10"
className={styles.anglePath}
/>
</svg>
);
}

View File

@ -59,6 +59,7 @@ body {
--link: var(--dark--link);
--link-hover: var(--dark--link-hover);
--primary-text: var(--dark--primary-text);
--secondary-text: var(--dark--secondary-text);
--card-background: var(--dark--card-background);
--label: var(--dark--label);
@ -106,6 +107,7 @@ a:hover {
--link: var(--dark--link);
--link-hover: var(--dark--link-hover);
--primary-text: var(--dark--primary-text);
--secondary-text: var(--dark--secondary-text);
--card-background: var(--dark--card-background);
--label: var(--dark--label);
}

View File

@ -2,6 +2,8 @@ import { BarGraphHorizontal, BarGraphVertical } from "components/BarGraph";
import { mockCategoricalData, moreMockCategoricalData } from "data/mocks";
import React from "react";
import About from "@/components/About";
import { ColorPalette } from "../components/ColorPalette";
import { WordCloud } from "../components/WordCloud";
@ -59,6 +61,11 @@ export default function Home() {
value: word.value,
}))}
/>
<h2>
<code>{"<About />"}</code>
<About />
</h2>
</div>
);
}