Aeson/past projects

app/archive/[slug]/page.tsx

@@ -0,0 +1,18 @@
+"use client"
+import '@/src/styles/reset.scss';
+
+import NavigationBar from '@/src/components/navbar';
+import ProjectDetail from '@/src/sections/ProjectDetail';
+import Footer from '@/src/components/footer';
+
+const ProjectPage = ({ params }: { params: { slug: string } }) => {
+  return (
+    <main>
+      <NavigationBar />
+      <ProjectDetail slug={params.slug} />
+      <Footer />
+    </main>
+  );
+};
+
+export default ProjectPage;

app/layout.tsx

@@ -2,7 +2,7 @@ import "./globals.css";
 import type { Metadata } from "next";
 import { DM_Sans } from "next/font/google";
 
-const dm_sans = DM_Sans({ subsets: ["latin"], weight: "400" });
+const dm_sans = DM_Sans({ subsets: ["latin"], weight: ["200", "400", "500", "600", "700", "800"] });
 
 export const metadata: Metadata = {
   title: "ACM at UC San Diego Projects Website",

app/page.tsx

@@ -5,12 +5,18 @@ import "../src/styles/reset.scss";
 import NavigationBar from "@/src/components/navbar";
 import Footer from "@/src/components/footer";
 import Hero from "@/src/sections/Hero";
+import FAQ from "@/src/sections/FAQ";
+import Timeline from "@/src/sections/Timeline";
+import HomePastProjects from "@/src/sections/Home-Past-Projects";
 // here we will compile all the sections of the website together
 const Home: NextPage = () => {
   return (
     <main>
       <NavigationBar />
       <Hero />
+      <HomePastProjects />
+      <Timeline />
+      <FAQ />
       <Footer />
     </main>
   );

src/components/countdown/index.tsx

@@ -0,0 +1,66 @@
+"use client";
+
+import { useState, useEffect } from "react";
+import styles from "./style.module.scss";
+
+type CountdownProps = {
+  className?: string;
+};
+
+const Countdown = ({ className = "" }: CountdownProps) => {
+  const [days, setDays] = useState(0);
+  const [hours, setHours] = useState(0);
+  const [minutes, setMinutes] = useState(0);
+  const [seconds, setSeconds] = useState(0);
+  let countdownComponents : number[] = [days, hours, minutes, seconds];
+
+  useEffect(() => {
+    const target = new Date("10/02/2026 23:59:59");
+
+    const interval = setInterval(() => {
+      const now = new Date();
+      const difference = target.getTime() - now.getTime();
+
+      if (difference <= 0) {
+        setDays(0);
+        setHours(0);
+        setMinutes(0);
+        setSeconds(0);
+        countdownComponents = [days, hours, minutes, seconds];
+        clearInterval(interval);
+      } else {
+        setDays(Math.floor(difference / (1000 * 60 * 60 * 24)));
+        setHours(
+          Math.floor(
+            (difference % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60)
+          )
+        );
+        setMinutes(
+          Math.floor((difference % (1000 * 60 * 60)) / (1000 * 60))
+        );
+        setSeconds(Math.floor((difference % (1000 * 60)) / 1000));
+        countdownComponents = [days, hours, minutes, seconds];
+      }
+    }, 1000);
+
+    return () => clearInterval(interval);
+  }, []);
+
+  return (
+    <div className={`${styles.date} ${className}`}>
+      {countdownComponents.map((comp, key) => {
+        const digits = String(comp).padStart(2, '0').split('');
+
+        return (
+          <span key={key}>
+            <span className={styles.digit}>{digits[0]}</span>
+            <span className={styles.digit}>{digits[1]}</span>
+            {key < 3 ? <span>:</span> : null}
+          </span>
+        );
+      })}
+    </div>
+  );
+};
+
+export default Countdown;

src/components/countdown/style.module.scss

@@ -0,0 +1,13 @@
+@use "../../styles/vars.scss" as v; // allows you to use pre-defined colors
+
+.date {
+  color: black;
+  font-size: 1.25rem;
+  font-weight: 700;
+
+  .digit {
+    display: inline-block;
+    width: 1ch;
+    text-align: center;
+  }
+}

src/components/footer/styles.module.scss

@@ -8,7 +8,7 @@ $mmmw: 375px; // medium mobile max width
 .footer {
   width: 100%;
   height: 100%;
-  background-color: vars.$footer-blue;
+  background-color: vars.$proj-blue;
   color: vars.$white;
   z-index: 0;
   position: relative;
@@ -224,4 +224,4 @@ $mmmw: 375px; // medium mobile max width
       }
     }
   }
-}
+}