Khang/past projects page

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",

src/components/project-card/highlighted.json

@@ -0,0 +1,5 @@
+[
+  "sp23-hack-1",
+  "wi23-design-1",
+  "fa22-ai-1"
+]

src/components/project-card/index.tsx

@@ -1,148 +1,156 @@
+'use client'
+import { useEffect, useLayoutEffect, useRef } from "react";
 import s from "./style.module.scss";
+import projects_data from "./projects.json";
+import highlighted_ids from "./highlighted.json";
 
-// Images for embed links and other logos
-
-const default_pic = "/assets/proj_logo.png";
-const figma = "/assets/embeds/figma.png";
-const github = "/assets/embeds/github.png";
-const slides = "/assets/embeds/slides.png";
-const other_links = "/assets/embeds/other_links.png";
-const hack_logo = "/assets/hack.svg";
-const design_logo = "/assets/design.svg";
-const ai_logo = "/assets/ai.svg";
-
-const projects_data = [
-    {"quarter": "Spring 2023",
-    "subgroup": "Hack",
-    "project_title": "Word Nerd",
-    "team_name": "Team 1",
-    "logo": "/assets/project_logos/word_nerd.png",
-    "description": "We created a clone of the game CodeNames, except that users have the option to upload their own words so they can follow a theme or use it as a unique way to study vocab concepts with friends.",
-    "mentor": "Sujal",
-    "members": ["Greg Weber (Front-end)", "Julie Nguyen (Front-end)", "Josh Chen (Front-end)", "Tim Liu (Back-end)", "Gonzalo Allen-Perez (Back-end)", "Annie Ping (Back-end)"],
-    "slides": "https://docs.google.com/presentation/d/1xPRnYbfmZHW8l7_jo7gmTAxowV3PmLO39MvzfHht_Dk/edit?usp=sharing",
-    "project_link": "https://github.com/acmucsd-projects/sp23-hack-team-1",
-    "other_links": "https://codenames-acm.netlify.app/"
+const SUBGROUP_CONFIG: Record<string, {
+    logo: string;
+    border: string;
+    color: string;
+    repoIcon: string;
+    repoLabel: string;
+}> = {
+    Design: {
+        logo: "/assets/design.svg",
+        border: s.borderDesign,
+        color: s.colorDesign,
+        repoIcon: "/assets/embeds/figma-icon.svg",
+        repoLabel: "Figma",
     },
-    {"quarter": "Spring 2023",
-    "subgroup": "Hack",
-    "project_title": "GAMED",
-    "team_name": "Team 2",
-    "logo": "/assets/project_logos/gamed.png",
-    "description": "We created a website where UCSD students can find other players to play video games with. They can do this by creating an account, creating cards, and sending cards to people!.",
-    "mentor": "Shreya Nagunuri and Kevin Wu",
-    "members": ["Calvin Nguyen (Front-end)", "Kane Li (Full-stack)"],
-    "slides": "https://docs.google.com/presentation/d/1W-3JfpnNEghKXsuuCe1638ZBUkyCkntRNy6yUnFhr_4/edit?usp=sharing",
-    "project_link": "https://github.com/acmucsd-projects/sp23-hack-team-2",
-    "other_links": "https://ucsdgamed.onrender.com/"
+    Hack: {
+        logo: "/assets/hack.svg",
+        border: s.borderHack,
+        color: s.colorHack,
+        repoIcon: "/assets/embeds/github-icon.svg",
+        repoLabel: "GitHub File",
     },
-    {"quarter": "Spring 2023",
-    "subgroup": "Hack",
-    "project_title": "Eventify",
-    "team_name": "Team 3",
-    "logo": "/assets/project_logos/eventify.png",
-    "description": "We created a website that can track on-campus UCSD events.",
-    "mentor": "Angela Hu and Charvi Shukla",
-    "members": ["Gavyn Ezell", "Cho Jung (Angela) Tsai", "Qijun (Mary) Hu", "Jae Whan Lee", "Rachel Chau", "Willey Zhou"],
-    "slides": "https://docs.google.com/presentation/d/1U93WsdyVuFDbvgWZ931oakEpL7zgzbZz8vNolmMZtFI/edit?usp=sharing",
-    "project_link": "https://github.com/acmucsd-projects/sp23-hack-team-3",
-    "other_links": "https://www.figma.com/file/KqvP7N6lLUu8NnT2ZnYK3o/Eventify?type=design&node-id=0%3A1&mode=design&t=hnFUTSx4agxe4CNT-1"
+    AI: {
+        logo: "/assets/ai.svg",
+        border: s.borderAI,
+        color: s.colorAI,
+        repoIcon: "/assets/embeds/github-icon.svg",
+        repoLabel: "GitHub File",
     },
-    {"quarter": "Winter 2023",
-    "subgroup": "Hack",
-    "project_title": "IGFood",
-    "team_name": "Team 1",
-    "logo": "/assets/project_logos/ig_food.svg",
-    "description": "Yelp and Google Reviews are written by strangers that you cannot necessarily trust. Our solution is to create an application which creates a more personalized food-rating experience! The application connects you to your friends and allows you to see what/where your friends are eating via posts on a feed.",
-    "mentor": "Nikhil Dange",
-    "members": ["Angela Hu (Project Lead/Front-end)", "Nicholas Cheah (Front-end)", "Kinan Alatasi (Front-end)", "Alexis Vergnet (Back-end)", "Charvi Shukla (Back-end)", "Jason Wong (Back-end)"],
-    "slides": "https://docs.google.com/presentation/d/1g0pEKT7Rx_hoZDnC27zxxPs2UqipDLffgUC0Z0v5xUE/edit?usp=sharing",
-    "project_link": "https://github.com/acmucsd-projects/wi23-hack-team-1",
-    "other_links": "https://www.figma.com/file/lX9VzkvBHesJT4e2zK6LOr/IGFood-Web-App-Design?type=design&node-id=0%3A1&mode=design&t=Z6gg0vyLGspHj7r5-1"
+    Robotics: {
+        logo: "/assets/robotics.svg",
+        border: s.borderRobotics,
+        color: s.colorRobotics,
+        repoIcon: "/assets/embeds/github-icon.svg",
+        repoLabel: "GitHub File",
     },
-    {"quarter": "Winter 2023",
-    "subgroup": "Design",
-    "project_title": "Triton2Go Redesign",
-    "team_name": "Team 1",
-    "description": "Recognizing the indispensable role of food ordering apps in the UCSD students’ daily lives, our team aimed to focus on the official food ordering mobile app Triton2Go (Mobile Order) by redesigning both the visual layouts and content layouts to optimize the user interface, streamline the ordering process, incorporate engaging gamification elements in rewards store to encourage user loyalty and satisfaction. We hope to help our target users and make the end process intelligent, enjoyable, and productive.",
-    "mentor": "Anmol",
-    "members": ["Cindy Peng (Project Lead)", "Thomas Wang", "Dianne Natanauan", "Amy To"],
-    "slides": "https://docs.google.com/presentation/d/1eCxEr19T1yPc1zffcvXHE9n0KPUSUy6G87tE_Ub_9Fk/edit?usp=sharing",
-    "project_link": "https://www.figma.com/file/0r2ncVSKHqBY9pOQCGrHvq/Mobile-Order-Prototypes?type=design&node-id=0%3A1&t=33a883iMHphAA1U1-1"
-    },
-    {"quarter": "Fall 2022",
-    "subgroup": "AI",
-    "project_title": "Supreme Court Predictor",
-    "team_name": "Team 1",
-    "description": "Using machine learning, predict the outcomes of Supreme Court Cases (whether they are conservative, liberal, or unspecifiable).",
-    "mentor": "Stephanie",
-    "members": ["Jenny Mar", "Nitya Pillai", "Ada He", "Han Hoang", "Rushil Chandrupatla", "Serena Chen"],
-    "slides": "https://docs.google.com/presentation/d/1qANpLZvhv5F0lOkbUxtlJU5UF4KqsDzuy0Dy6E2BG-0/edit?usp=sharing",
-    "project_link": "https://github.com/acmucsd-projects/fa22-ai-team-1",
-    "other_links": "https://deepnote.com/join-team?token=02d34e715c9e4f6"
-    },
-    {"quarter": "Fall 2022",
-    "subgroup": "AI",
-    "project_title": "GAIN: Gamers for Artificial Intelligence and NLP",
-    "team_name": "Team 2",
-    "description": "Using NLP and Machine Learning, created a Political Sentiment Classifier that can address blocks of texts and determine whether they are politically charged and classify them as Liberal or Democratic. ",
-    "mentor": "Weiji Chen",
-    "members": ["Samvrit Srinath", "Calvin Nguyen", "Peter Gao", "Benjamin Johnson", "Skyler Goh", "Joon Kim"],
-    "slides": "https://docs.google.com/presentation/d/1s7W3E9Wv5RXAzmgQYjCN166xycIJuxyFnCbs_IpVBlw/edit?usp=sharing",
-    "project_link": "https://github.com/acmucsd-projects/fa22-ai-team-2",
-    "other_links": "https://colab.research.google.com/drive/1zfL2UtCyJnwAMzqeAAvfTigUU6rVxCca?usp=sharing"
-    },
-    {"quarter": "Fall 2022",
-    "subgroup": "Design",
-    "project_title": "UCSD App Redesign",
-    "team_name": "Team 1",
-    "description": "We redesigned the UCSD mobile app to increase its functionality and aesthetic appeal, helping students navigate it with more ease, efficiency, and less confusion.",
-    "mentor": "Anthony Manrique",
-    "members": ["Tammy Ding","Khoi Nguyen", "Caitlyn Cielo", "Sashwat Nayak"],
-    "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"
-    },
-];
+};
+
+const DEFAULT_CONFIG = {
+    logo: "/assets/proj_logo.png",
+    border: "",
+    color: "",
+    repoIcon: "/assets/embeds/github-icon.svg",
+    repoLabel: "GitHub File",
+};
 
 interface ProjectProps {
     quarter: string;
+    highlighted?: boolean;
+    subgroup?: string | null;
 }
 
-const ProjectCards: React.FC<ProjectProps> = ({quarter}) => {
-    const filteredProjects = quarter === "All" ? projects_data : projects_data.filter((project) =>
-    project.quarter === quarter
-  );
+const ProjectCards: React.FC<ProjectProps> = ({ quarter, highlighted, subgroup }) => {
+    let projects = quarter === "All"
+        ? projects_data
+        : projects_data.filter((project) => project.quarter === quarter);
+
+    if (subgroup) {
+        projects = projects.filter((project) => project.subgroup === subgroup);
+    }
+
+    if (highlighted !== undefined) {
+        projects = projects.filter((project) =>
+            highlighted ? highlighted_ids.includes(project.id) : !highlighted_ids.includes(project.id)
+        );
+    }
+
+    projects = [...projects].sort((a, b) => a.team_name.localeCompare(b.team_name));
+
+    const descWrapperRefs = useRef<(HTMLDivElement | null)[]>([]);
+
+    const updateClamps = () => {
+        const wrappers = descWrapperRefs.current;
+        if (!wrappers) return;
+        for (const wrapper of wrappers) {
+            if (!wrapper) continue;
+            const p = wrapper.querySelector("p") as HTMLParagraphElement | null;
+            if (!p) continue;
+            p.style.webkitLineClamp = "unset";
+            const availableHeight = wrapper.clientHeight;
+            const lineHeight = parseFloat(getComputedStyle(p).lineHeight);
+            const lines = Math.max(1, Math.floor(availableHeight / lineHeight));
+            p.style.webkitLineClamp = String(lines);
+        }
+    };
+
+    useLayoutEffect(() => { updateClamps(); }, [projects.length]);
+
+    useEffect(() => {
+        window.addEventListener("resize", updateClamps);
+        return () => window.removeEventListener("resize", updateClamps);
+    }, []);
+
     return (
         <div className={s.container}>
-            {filteredProjects && filteredProjects.map((project, index) => (
-                <div className={s.projectItem} key={index}>
-                    <div className={s.header}>
-                        <div className={s.team}>
-                            <img className={s.community_logo} src={project.subgroup === "AI" ? ai_logo : project.subgroup === "Hack" ? hack_logo : project.subgroup === "Design" ? design_logo : default_pic} alt="Community Logo"/>
-                            <h1 className={`${s[project.subgroup]}`}>{project.quarter} {project.subgroup} {project.team_name}</h1>
+            {projects.map((project, index) => {
+                const config = SUBGROUP_CONFIG[project.subgroup] ?? DEFAULT_CONFIG;
+                return (
+                    <div className={`${s.card} ${config.border}`} key={project.id}>
+                        <div className={s.cardHeader}>
+                            <img className={s.teamLogo} src={config.logo} alt={`${project.subgroup} Logo`} />
+                            <div className={s.cardHeaderText}>
+                                <span className={s.cardQuarter}>{project.quarter}</span>
+                                <span className={s.cardTeam}>{project.subgroup} {project.team_name}</span>
+                            </div>
+                        </div>
+
+                        <div className={s.projectImageWrapper}>
+                            <img
+                                className={project.logo ? s.projectImage : s.projectImageDefault}
+                                src={project.logo || config.logo}
+                                alt={project.project_title}
+                            />
+                        </div>
+
+                        <h3 className={`${s.projectTitle} ${config.color}`}>{project.project_title}</h3>
+
+                        <div className={s.projectDetails}>
+                            <p><strong>Created by:</strong> {project.members.join(", ")}</p>
+                            <p><strong>Mentored by:</strong> {project.mentors.join(", ")}</p>
+                            {project.technology && (
+                                <p><strong>Technology:</strong> {project.technology}</p>
+                            )}
+                        </div>
+
+                        <div
+                            className={s.descriptionWrapper}
+                            ref={(el) => { descWrapperRefs.current[index] = el; }}
+                        >
+                            <p className={s.projectDescription}>{project.description}</p>
+                        </div>
+
+                        <div className={s.cardActions}>
+                            <a href={`/archive/${project.project_title.toLowerCase().replace(/\s+/g, "-")}`} className={`${s.exploreButton} ${config.color}`}>
+                                Explore Project
+                            </a>
+                            {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>
-                    <h3>{project.project_title}</h3>
-                    </div>
-                    <img className={s.logo} src={project.logo || default_pic} alt="Project Logo" />
-                    <div className={s.description}>
-                        <h4>Project Description: {project.description}</h4>
-                        <h4>Members: {project.members.join(", ")}</h4>
-                        <h4>Mentor: {project.mentor}</h4>
-                    </div>
-                    <div className={s.project_links}>
-                        <a href={project.slides}>
-                            <img className={s.links} src={slides} alt="Slides Logo"/>
-                        </a>
-                        <a href={project.project_link}><img className={s.links} 
-                        src={project.subgroup === "Hack" || project.subgroup === "AI" ? github : project.subgroup === "Design" ? figma : default_pic} alt="Project Repo Logo"/></a>
-                        {project.other_links && (
-                            <a href={project.other_links}><img className={s.links} src={other_links} alt="Other Links Logo"/></a>
-                        )}
                     </div>
-                </div>
-            ))}
+                );
+            })}
         </div>
-    )
-}
+    );
+};
 
-export default ProjectCards;
+export default ProjectCards;