merged develop into this branch

.github/workflows/ci.yml

@@ -1,9 +1,9 @@
-name: Linting and Styling Check
+name: CI Checks
 
 on: [push, pull_request]
 
 jobs:
-  lint:
+  quality:
     runs-on: ubuntu-latest
     steps:
       - uses: actions/checkout@v3
@@ -22,5 +22,22 @@ jobs:
       - name: Install Dependencies
         run: pnpm install
 
-      - name: Run Linting and Styling Check
+      - name: Run Linting/Style Check
         run: pnpm lint-check
+
+      - name: Type Check
+        run: pnpm type-check
+
+      - name: Build Check
+        run: pnpm build
+
+      - name: Cache build output
+        uses: actions/cache@v3
+        with:
+          path: |
+            .next
+            dist
+            build
+          key: ${{ runner.os }}-build-${{ github.sha }}
+          restore-keys: |
+            ${{ runner.os }}-build-

package.json

@@ -10,6 +10,7 @@
     "lint": "next lint",
     "lint-fix": "next lint --fix && prettier --write .",
     "lint-check": "next lint && prettier --check .",
+    "type-check": "tsc --noEmit",
     "prepare": "husky"
   },
   "dependencies": {

src/app/about/About.scss

@@ -1,102 +1,138 @@
-@media only screen and (min-width: 768px) {
-  .about-container {
-    max-width: fit-content;
-    margin-left: auto;
-    margin-right: auto;
-  }
-}
-
-.about-container {
+#about-container {
   margin-top: var(--nav-height);
   padding-inline: var(--main-padding);
-  display: grid;
-  gap: 1rem;
+  display: flex;
+  flex-direction: column;
+  gap: 2.5rem;
+  overflow-x: hidden;
+  position: relative;
 
-  h2 {
+  h1 {
     font-style: italic;
-    font-size: 1.5rem;
-    line-height: 1.2;
-
-    @media (min-width: 320px) {
-      font-size: 2rem;
-    }
-
-    @media (min-width: 400px) {
-      max-width: 80%;
-    }
+    font-size: 4rem;
+    margin-bottom: 2rem;
 
     @media (min-width: 580px) {
-      max-width: 65%;
+      font-size: 5rem;
     }
+  }
 
+  h2 {
+    font-size: 2rem;
+    font-style: italic;
+    margin-bottom: 2rem;
     @media (min-width: $tablet-breakpoint) {
       font-size: 4rem;
     }
   }
 
   .about-section {
-    p {
-      margin-top: 2rem;
+    @media (min-width: $desktop-breakpoint) {
+      max-width: 780px;
+      margin-inline: auto;
     }
 
-    @media only screen and (max-width: 469px) {
-      .about-images {
-        display: flex;
-        flex-direction: column;
-        align-items: center;
-        justify-content: center;
+    #about-description {
+      position: relative;
+      display: flex;
+      flex-direction: column;
+      gap: 1rem;
+
+      h3 {
+        font-size: 1.5rem;
+        font-weight: 600;
+        font-style: italic;
+        line-height: 1.2;
       }
-    }
-
-    @media only screen and (max-width: 768px) {
-      .about-images {
-        display: flex;
-        flex-direction: column;
-        align-items: center;
-        justify-content: center;
 
-        img {
-          width: 200px;
-          height: auto;
+      p {
+        @media (min-width: $tablet-breakpoint) {
+          font-size: 1.5rem;
         }
       }
+
+      #about-description-note {
+        margin-top: 1rem;
+      }
     }
 
-    .about-images {
+    #about-images {
       position: relative;
-      display: flex;
-      justify-content: space-between;
-      gap: 1.5rem;
-      padding-top: 5rem;
+      margin-top: 3rem;
+
+      @media (min-width: $tablet-breakpoint) {
+        margin-top: 4rem;
+        margin-bottom: 2rem;
+      }
+
+      @media (min-width: $desktop-breakpoint) {
+        position: static;
+      }
 
       img {
         position: relative;
-        width: 400px;
+        min-width: 200px;
+        width: 50%;
+        max-width: 450px;
         height: auto;
         border: 2px solid white;
         transform-origin: center center;
       }
 
-      .image1 {
-        transform: rotate(-15deg) translateX(-100px);
-      }
-
-      .image2 {
-        transform: rotate(1deg) translateX(-45px) translateY(-5px);
-      }
-
-      .image3 {
-        transform: rotate(10deg) translateX(20px) translateY(50px);
+      #about-image {
+        &-1 {
+          left: 0;
+          transform: translate(calc(-70% + 5vw), 10%) rotate(-15deg);
+
+          @media (min-width: $desktop-breakpoint) {
+            position: absolute;
+            top: 0;
+            left: 0;
+            transform: translate(-30%, 80%) rotate(-15deg);
+          }
+        }
+        &-2 {
+          position: absolute;
+          right: 0;
+          top: 3rem;
+          transform: translateX(calc(40% - 10vw)) translateY(-10%);
+          rotate: 9deg;
+
+          @media (min-width: 580px) {
+            transform: translateX(calc(20% - 10vw)) translateY(30%);
+          }
+
+          @media (min-width: $tablet-breakpoint) {
+            transform: translateX(calc(40% - 10vw)) translateY(30%);
+          }
+
+          @media (min-width: $desktop-breakpoint) {
+            transform: translate(calc(30%), 120%);
+          }
+        }
+        &-3 {
+          position: absolute;
+          right: 0;
+          top: 0;
+          transform: translateX(calc(75% - 10vw)) translateY(-20%);
+          rotate: -3deg;
+
+          @media (min-width: 580px) {
+            transform: translateX(calc(50% - 10vw)) translateY(0%);
+          }
+          @media (min-width: $tablet-breakpoint) {
+            rotate: 3deg;
+            transform: translateX(calc(70% - 10vw)) translateY(-20%);
+          }
+          @media (min-width: $desktop-breakpoint) {
+            transform: translate(calc(50%), 65%);
+          }
+        }
       }
     }
   }
 
   section {
     padding-block: 2rem;
   }
-
-  .info,
-  .section-title {
-    margin-bottom: 2rem;
-  }
 }

src/app/about/page.tsx

@@ -14,33 +14,38 @@ import Stride3 from '@/../public/images/past-photos/stride-3.webp';
 
 export default function About() {
   return (
-    <main className="about-container">
+    <main id="about-container">
       <section className="about-section info">
-        <h2 className="section-title">About</h2>
-        <p>Learn, Connect, and Grow at Stride!</p>
-        <p>
-          Stride is a uniquely design-forward career fair connecting designers
-          with company representatives. Students get the opportunity to showcase
-          their work and experience, so we recommend that you bring a physical
-          copy of your resume!
-        </p>
-        <p>Note: There will be a $7 registration fee</p>
-        <div className="about-images">
+        <h1 className="section-title">About</h1>
+        <div id="about-description">
+          <h3>Learn, Connect, and Grow at Stride!</h3>
+          <p>
+            Stride is a uniquely design-forward career fair connecting designers
+            with company representatives. Students get the opportunity to
+            showcase their work and experience, so we recommend that you bring a
+            physical copy of your resume!
+          </p>
+          <p id="about-description-note">
+            Note: There will be a $5 registration fee. Late registration will be
+            a $7 fee.
+          </p>
+        </div>
+        <div id="about-images">
           <Image
             src={Stride1}
-            className="image1"
+            id="about-image-1"
             alt="Students at career fair speaking with Apple employee who worked on Apple Vision Pro"
           />
-          <Image
-            src={Stride2}
-            className="image2"
-            alt="Two students sitting at table showing career fair postcard while smiling"
-          />
           <Image
             src={Stride3}
-            className="image3"
+            id="about-image-3"
             alt="Multiple Google employees sitting on stage giving a talk"
           />
+          <Image
+            src={Stride2}
+            id="about-image-2"
+            alt="Two students sitting at table showing career fair postcard while smiling"
+          />
         </div>
       </section>
       <Opportunities />