Initial HTML

j285he-front-page
Jared He 2 months ago
parent 8253f6cbab
commit 8710faaa63
  1. 13
      components/Sections.tsx
  2. 4
      components/Timeline.tsx
  3. 15
      pages/frontpage.module.css
  4. 68
      pages/index.tsx
  5. BIN
      public/images/frontPageTitle.png

@ -11,11 +11,20 @@ interface SectionsProps {
/* Whether to display the "Sections" title and separator that appears on the left. */
showHeader?: boolean;
data: SectionsData[];
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>

@ -32,8 +32,8 @@ export function Timeline({
lineWidth = 5,
outerCircleWidth = 30,
innerCircleWidth = 15,
timeWidth = 200,
textWidth = 300,
timeWidth = 300,
textWidth = 500,
gap = 50,
className,
}: TimelineProps) {

@ -0,0 +1,15 @@
.main {
display: flex;
flex-direction: column;
align-items: center;
}
.main > * {
margin-top: 65px;
margin-bottom: 65px;
}
.left {
align-self: flex-start;
margin-left: 100px;
}

@ -1,12 +1,70 @@
import { mockTimelineData } from "data/mocks";
import { sectionsData } from "data/routes";
import Image from "next/image";
import Link from "next/link";
import React from "react";
import { About } from "@/components/About";
import { CenterWrapper } from "@/components/CenterWrapper";
import { Sections } from "@/components/Sections";
import { Timeline } from "@/components/Timeline";
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>
<div className={styles.main}>
<div className={styles.title}>
<Image
src="/images/frontPageTitle.png"
alt="A picture of the University of Waterloo campus"
width={720}
height={480}
/>
<div className={styles.bubble}>
<h1>Computer Science 2022</h1>
<h1>Class Profile</h1>
<h3>Welcome to UW Computer Science 2022 Class Profile.</h3>
</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 didnt 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 and data processing was done by
the UW Computer Science Club, so please check us out if you enjoy what
you see!
</p>
</CenterWrapper>
<Sections data={sectionsData} className={styles.left} />
<Timeline data={mockTimelineData} className={styles.left} />
<p>
Click <Link href="/playground">here</Link> to visit the playground
<br />
Click <Link href="/samplePage">here</Link> to visit a sample page
</p>
</div>
);
}

Binary file not shown.

After

Width:  |  Height:  |  Size: 762 KiB

Loading…
Cancel
Save