From f326cef34025089364e33c1e66364b7bb8966a03 Mon Sep 17 00:00:00 2001
From: aeson tran <aesonvtran@gmail.com>
Date: Fri, 7 Aug 2026 19:46:06 -0700
Subject: [PATCH 1/2] initial add past projects section to main page

added very basic functionality for past projects on the main page
---
 app/page.tsx                                  |   2 +
 src/components/project-card/index.tsx         |   2 +-
 src/components/project-card/projects.json     |  13 +
 src/sections/Home-Past-Projects/index.tsx     | 112 +++++++++
 .../Home-Past-Projects/style.module.scss      | 232 ++++++++++++++++++
 src/sections/ProjectDetail/index.tsx          |   2 +-
 6 files changed, 361 insertions(+), 2 deletions(-)
 create mode 100644 src/sections/Home-Past-Projects/index.tsx
 create mode 100644 src/sections/Home-Past-Projects/style.module.scss

diff --git a/app/page.tsx b/app/page.tsx
index 87618c3..380f50c 100644
--- a/app/page.tsx
+++ b/app/page.tsx
@@ -7,12 +7,14 @@ 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 />
diff --git a/src/components/project-card/index.tsx b/src/components/project-card/index.tsx
index 7daa089..c2f040b 100644
--- a/src/components/project-card/index.tsx
+++ b/src/components/project-card/index.tsx
@@ -33,7 +33,7 @@ const SUBGROUP_CONFIG: Record<string, {
         repoLabel: "GitHub File",
     },
     Robotics: {
-        logo: "/assets/robotics.svg",
+        logo: "/assets/robo.svg",
         border: s.borderRobotics,
         color: s.colorRobotics,
         repoIcon: "/assets/embeds/github-icon.svg",
diff --git a/src/components/project-card/projects.json b/src/components/project-card/projects.json
index 7f461c0..cd1e2aa 100644
--- a/src/components/project-card/projects.json
+++ b/src/components/project-card/projects.json
@@ -112,5 +112,18 @@
     "slides": "https://docs.google.com/presentation/d/1NBU4o8cFqalW_I9UUo_t_h7XsHVtjGcQ7hVZUzqO0qg/edit?usp=sharing",
     "project_link": "https://www.figma.com/file/8kuHJXTZcIGVjm88OCYi1W/Final-Draft?type=design&node-id=1%3A2&t=K7vUmdAhPcQpWj6O-1",
     "technology": null
+  },
+  {
+    "id": "fa26-robotics-1",
+    "quarter": "Fall 2026",
+    "subgroup": "Robotics",
+    "project_title": "Robotics Project",
+    "team_name": "Team 1",
+    "description": "This is an example description of a robotics project.",
+    "mentors": ["John Doe"],
+    "members": ["John Doe"],
+    "slides": "",
+    "project_link": "https://github.com/acmucsd/projects-website",
+    "technology": null
   }
 ]
diff --git a/src/sections/Home-Past-Projects/index.tsx b/src/sections/Home-Past-Projects/index.tsx
new file mode 100644
index 0000000..a5855ad
--- /dev/null
+++ b/src/sections/Home-Past-Projects/index.tsx
@@ -0,0 +1,112 @@
+'use client'
+import Link from 'next/link';
+import s from './style.module.scss';
+import projects_data from '../../components/project-card/projects.json';
+import highlighted_ids from '../../components/project-card/highlighted.json';
+
+const SUBGROUP_ORDER = ['Hack', 'AI', 'Design', 'Robotics'];
+
+const SUBGROUP_CONFIG: Record<string, {
+  logo: string;
+  border: string;
+  button: string;
+  repoIcon: string;
+  repoLabel: string;
+}> = {
+  Design: {
+    logo: "/assets/design.svg",
+    border: s.borderDesign,
+    button: s.buttonDesign,
+    repoIcon: '/assets/embeds/figma-icon.svg',
+    repoLabel: 'Figma'
+  },
+  Hack: {
+    logo: "/assets/hack.svg",
+    border: s.borderHack,
+    button: s.buttonHack,
+    repoIcon: '/assets/embeds/github-icon.svg',
+    repoLabel: 'GitHub File'
+  },
+  AI: {
+    logo: "/assets/ai.svg",
+    border: s.borderAI,
+    button: s.buttonAI,
+    repoIcon: '/assets/embeds/github-icon.svg',
+    repoLabel: 'GitHub File'
+  },
+  Robotics: {
+    logo: "/assets/robo.svg",
+    border: s.borderRobotics,
+    button: s.buttonRobotics,
+    repoIcon: '/assets/embeds/github-icon.svg',
+    repoLabel: 'GitHub File'
+  },
+};
+
+const DEFAULT_CONFIG = {
+  logo: "/assets/proj_logo.png",
+  border: "",
+  color: "",
+  repoIcon: "/assets/embeds/github-icon.svg",
+  repoLabel: "GitHub File",
+};
+
+const highlightedProjects = projects_data.filter((project) => highlighted_ids.includes(project.id));
+
+const displayProjects = SUBGROUP_ORDER
+  .map((subgroup) =>
+    highlightedProjects.find((project) => project.subgroup === subgroup) ??
+    projects_data.find((project) => project.subgroup === subgroup)
+  )
+  .filter((project): project is typeof projects_data[number] => Boolean(project));
+
+const HomePastProjects: React.FC = () => {
+  return (
+    <div className={s.container} id="past-projects">
+      <h1 className={s.header}>See Past Projects</h1>
+      <div className={s.list}>
+        {displayProjects.map((project) => {
+          const config = SUBGROUP_CONFIG[project.subgroup];
+          const slug = project.project_title.toLowerCase().replace(/\s+/g, '-');
+          return (
+            <div className={s.row} key={project.id}>
+              <div className={`${s.imageWrapper} ${config.border}`}>
+                <img
+                  className={project.logo ? s.image : s.imageDefault}
+                  src={project.logo || config.logo}
+                  alt={project.project_title}
+                />
+              </div>
+              <div className={s.details}>
+                <h2 className={s.title}>{project.project_title}</h2>
+                <p className={s.members}>{project.members.join(', ')}</p>
+                <p className={s.description}>{project.description}</p>
+                <div className={s.actions}>
+                  <Link href={`/archive/${slug}`} className={`${s.exploreButton} ${config.button}`}>
+                    Explore Project
+                  </Link>
+                  {project.project_link && (
+                    <a
+                      href={project.project_link}
+                      className={s.repoButton}
+                      target="_blank"
+                      rel="noopener noreferrer"
+                    >
+                      <img className={s.repoIcon} src={config.repoIcon} alt={config.repoLabel} />
+                      {config.repoLabel}
+                    </a>
+                  )}
+                </div>
+              </div>
+            </div>
+          );
+        })}
+      </div>
+      <Link href="/archive" className={s.viewMoreButton}>
+        View More Projects
+      </Link>
+    </div>
+  );
+};
+
+export default HomePastProjects;
diff --git a/src/sections/Home-Past-Projects/style.module.scss b/src/sections/Home-Past-Projects/style.module.scss
new file mode 100644
index 0000000..87a5e61
--- /dev/null
+++ b/src/sections/Home-Past-Projects/style.module.scss
@@ -0,0 +1,232 @@
+@use "../../styles/vars.scss" as vars;
+
+.container {
+  width: 100%;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  padding: 2rem 7.5rem;
+}
+
+.header {
+  align-self: flex-start;
+  font-size: 2.25rem;
+  font-weight: 800;
+  margin: 0 0 2rem;
+}
+
+.list {
+  display: flex;
+  flex-direction: column;
+  gap: 2.5rem;
+  width: 100%;
+}
+
+.row {
+  display: flex;
+  align-items: center;
+  gap: 2.5rem;
+}
+
+.imageWrapper {
+  flex: 0 0 auto;
+  width: 19rem;
+  height: 19rem;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  border: 4px solid;
+  border-radius: 1rem;
+  overflow: hidden;
+  padding: 1.5rem;
+  background-color: transparent;
+  pointer-events: none;
+}
+
+.image {
+  width: 100%;
+  height: 100%;
+  object-fit: contain;
+}
+
+.imageDefault {
+  width: 60%;
+  height: 60%;
+  object-fit: contain;
+  transform: translateY(6%); // svg files are slightly shifted up. need to compensate in order to center it
+}
+
+.borderDesign {
+  border-color: vars.$pink;
+}
+
+.borderHack {
+  border-color: vars.$orange;
+}
+
+.borderAI {
+  border-color: vars.$red;
+}
+
+.borderRobotics {
+  border-color: vars.$robotics-green;
+}
+
+.details {
+  display: flex;
+  flex-direction: column;
+  flex: 1;
+  min-width: 0;
+}
+
+.title {
+  font-size: 1.5rem;
+  font-weight: 700;
+  margin: 0 0 0.375rem;
+  color: vars.$black;
+}
+
+.members {
+  font-size: 1.125rem;
+  // color: vars.$dark-gray;
+  color: vars.$black;
+  margin: 0 0 1.5rem;
+}
+
+.description {
+  font-size: 1.125rem;
+  line-height: 1.5;
+  color: vars.$black;
+  margin: 0 0 1.25rem;
+  display: -webkit-box;
+  -webkit-box-orient: vertical;
+  -webkit-line-clamp: 3;
+  pointer-events: none;
+  overflow: hidden;
+}
+
+.actions {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 0.75rem;
+  align-items: center;
+}
+
+.exploreButton {
+  display: inline-flex;
+  align-items: center;
+  padding: 0.4rem 1rem;
+  border-radius: 0.5rem;
+  font-size: 0.8rem;
+  font-weight: 600;
+  white-space: nowrap;
+  text-decoration: none;
+  color: vars.$white;
+  transition: opacity 0.2s;
+
+  &:hover {
+    opacity: 0.85;
+  }
+}
+
+.buttonDesign {
+  background-color: vars.$pink;
+}
+
+.buttonHack {
+  background-color: vars.$orange;
+}
+
+.buttonAI {
+  background-color: vars.$red;
+}
+
+.buttonRobotics {
+  background-color: vars.$robotics-green;
+}
+
+.repoButton {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  gap: 0.4rem;
+  padding: 0.4rem 1rem;
+  border-radius: 0.5rem;
+  box-shadow: inset 0 0 0 1.5px vars.$black;
+  font-size: 0.8rem;
+  font-weight: 600;
+  white-space: nowrap;
+  text-decoration: none;
+  color: vars.$black;
+  background-color: vars.$white;
+  transition: background-color 0.2s;
+
+  &:hover {
+    background-color: vars.$darker-white;
+  }
+}
+
+.repoIcon {
+  width: 1rem;
+  height: 1rem;
+  object-fit: contain;
+  display: block;
+  flex-shrink: 0;
+  margin: 0;
+}
+
+.viewMoreButton {
+  margin-top: 3rem;
+  background-color: vars.$proj-blue;
+  color: vars.$white;
+  padding: 1rem 2.25rem;
+  border-radius: 0.625rem;
+  border-width: 0;
+  font-size: 1.2rem;
+  font-weight: 500;
+  text-decoration: none;
+  cursor: pointer;
+
+  &:hover {
+    opacity: 0.9;
+  }
+}
+
+@media screen and (max-width: 834px) {
+  .container {
+    padding: 2rem 3.1875rem;
+  }
+
+  .header {
+    font-size: 1.75rem;
+  }
+}
+
+@media only screen and (max-width: 700px) {
+  .list {
+    gap: 4rem;
+  }
+
+  .row {
+    flex-direction: column;
+    align-items: center;
+    text-align: center;
+    gap: 1.25rem;
+  }
+
+  .imageWrapper {
+    width: 100%;
+    max-width: 24rem;
+    height: auto;
+    aspect-ratio: 1 / 1;
+  }
+
+  .description {
+    font-size: 0.8125rem;
+    -webkit-line-clamp: 4;
+  }
+
+  .actions {
+    justify-content: center;
+  }
+}
diff --git a/src/sections/ProjectDetail/index.tsx b/src/sections/ProjectDetail/index.tsx
index 7f5dfd4..259c936 100644
--- a/src/sections/ProjectDetail/index.tsx
+++ b/src/sections/ProjectDetail/index.tsx
@@ -32,7 +32,7 @@ const SUBGROUP_CONFIG: Record<string, {
         repoLabel: "GitHub File",
     },
     Robotics: {
-        logo: "/assets/robotics.svg",
+        logo: "/assets/robo.svg",
         border: s.borderRobotics,
         color: s.colorRobotics,
         repoIcon: "/assets/embeds/github-icon.svg",

From af6598913c79aab444b528ffa81c243caf054192 Mon Sep 17 00:00:00 2001
From: aeson tran <aesonvtran@gmail.com>
Date: Fri, 7 Aug 2026 23:54:31 -0700
Subject: [PATCH 2/2] update spacing and naming convention

---
 src/sections/Home-Past-Projects/style.module.scss | 2 +-
 src/sections/ProjectDetail/index.tsx              | 4 ++--
 2 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/src/sections/Home-Past-Projects/style.module.scss b/src/sections/Home-Past-Projects/style.module.scss
index 87a5e61..4573ea8 100644
--- a/src/sections/Home-Past-Projects/style.module.scss
+++ b/src/sections/Home-Past-Projects/style.module.scss
@@ -25,7 +25,7 @@
 .row {
   display: flex;
   align-items: center;
-  gap: 2.5rem;
+  gap: 8rem;
 }
 
 .imageWrapper {
diff --git a/src/sections/ProjectDetail/index.tsx b/src/sections/ProjectDetail/index.tsx
index 259c936..e90e70c 100644
--- a/src/sections/ProjectDetail/index.tsx
+++ b/src/sections/ProjectDetail/index.tsx
@@ -60,7 +60,7 @@ const ProjectDetail: React.FC<ProjectDetailProps> = ({ slug }) => {
     if (!project) {
         return (
             <div className={s.container}>
-                <Link href="/archive" className={s.backLink}>Back to Archive</Link>
+                <Link href="/archive" className={s.backLink}>Project Archive</Link>
                 <h1 className={s.notFound}>Project not found</h1>
             </div>
         );
@@ -70,7 +70,7 @@ const ProjectDetail: React.FC<ProjectDetailProps> = ({ slug }) => {
 
     return (
         <div className={s.container}>
-            <Link href="/archive" className={s.backLink}>Back to Archive</Link>
+            <Link href="/archive" className={s.backLink}>Project Archive</Link>
 
             <div className={`${s.detail} ${config.border}`}>
                 <div className={s.header}>