components/About.tsx

@@ -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>

pages/frontpage.module.css

@@ -29,7 +29,7 @@
 .blurb {
   position: absolute;
   bottom: 20vh;
-  right: 7vw;
+  right: 10vw;
   width: fit-content;
   height: fit-content;
   padding: calc(30rem / 16);
@@ -79,6 +79,39 @@
   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;
@@ -88,8 +121,21 @@
     display: none;
   }
 
+  .titleImage {
+    top: 2vh;
+  }
+
   .blurb {
     right: 0;
+    top: 30vh;
+  }
+
+  .blurb h1 {
+    font-size: calc(40rem / 16);
+  }
+
+  .blurb h3 {
+    font-size: calc(30rem / 16);
   }
 }
 

pages/index.tsx

@@ -23,9 +23,12 @@ export default function Home() {
             />
           </div>
           <div className={styles.blurb}>
-            <h1 className={styles.classYear}>Computer Science 2022</h1>
+            <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} />