- {filteredProjects && filteredProjects.map((project, index) => (
-
-
-
-
-
{project.quarter} {project.subgroup} {project.team_name}
+ {projects.map((project, index) => {
+ const config = SUBGROUP_CONFIG[project.subgroup] ?? DEFAULT_CONFIG;
+ return (
+
+
+
+
+ {project.quarter}
+ {project.subgroup} {project.team_name}
+
+
+
+
+
+
+
+
{project.project_title}
+
+
+
Created by: {project.members.join(", ")}
+
Mentored by: {project.mentors.join(", ")}
+ {project.technology && (
+
Technology: {project.technology}
+ )}
+
+
+
{ descWrapperRefs.current[index] = el; }}
+ >
+
{project.description}
+
+
+
-
{project.project_title}
-
-
-
-
Project Description: {project.description}
- Members: {project.members.join(", ")}
- Mentor: {project.mentor}
-
-
-
- 
-
-
- {project.other_links && (
-
- )}
-
- ))}
+ );
+ })}
- )
-}
+ );
+};
-export default ProjectCards;
\ No newline at end of file
+export default ProjectCards;
diff --git a/src/components/project-card/projects.json b/src/components/project-card/projects.json
new file mode 100644
index 0000000..cd1e2aa
--- /dev/null
+++ b/src/components/project-card/projects.json
@@ -0,0 +1,129 @@
+[
+ {
+ "id": "sp23-hack-1",
+ "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.",
+ "mentors": ["Sujal"],
+ "members": ["Greg Weber", "Julie Nguyen", "Josh Chen", "Tim Liu", "Gonzalo Allen-Perez", "Annie Ping"],
+ "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/",
+ "technology": null
+ },
+ {
+ "id": "sp23-hack-2",
+ "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!",
+ "mentors": ["Shreya Nagunuri", "Kevin Wu"],
+ "members": ["Calvin Nguyen", "Kane Li"],
+ "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/",
+ "technology": null
+ },
+ {
+ "id": "sp23-hack-3",
+ "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.",
+ "mentors": ["Angela Hu", "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",
+ "technology": null
+ },
+ {
+ "id": "wi23-hack-1",
+ "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.",
+ "mentors": ["Nikhil Dange"],
+ "members": ["Angela Hu", "Nicholas Cheah", "Kinan Alatasi", "Alexis Vergnet", "Charvi Shukla", "Jason Wong"],
+ "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",
+ "technology": null
+ },
+ {
+ "id": "wi23-design-1",
+ "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.",
+ "mentors": ["Anmol"],
+ "members": ["Cindy Peng", "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",
+ "technology": null
+ },
+ {
+ "id": "fa22-ai-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).",
+ "mentors": ["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",
+ "technology": null
+ },
+ {
+ "id": "fa22-ai-2",
+ "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. ",
+ "mentors": ["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",
+ "technology": null
+ },
+ {
+ "id": "fa22-design-1",
+ "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.",
+ "mentors": ["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",
+ "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/components/project-card/style.module.scss b/src/components/project-card/style.module.scss
index 9efd54b..567917f 100644
--- a/src/components/project-card/style.module.scss
+++ b/src/components/project-card/style.module.scss
@@ -1,70 +1,215 @@
-@use "../../styles/vars.scss" as vars; // allows you to use pre-defined colors
+@use "../../styles/vars.scss" as vars;
.container {
display: grid;
- max-width: 95%;
- margin: 0 auto;
- grid-template-columns: repeat(auto-fit, minmax(20rem, 1fr));
- margin-top: 2rem;
- margin-bottom: 2rem;
- row-gap: 2rem;
- column-gap: 2rem;
-
- .projectItem {
- background-color: vars.$darker-white;
- display: flex;
- flex-direction: column;
- justify-content: flex-start;
- align-items: center;
- text-decoration: none;
- border-radius: 0.5rem;
- padding: 1.5rem;
- box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.1);
+ width: 100%;
+ grid-template-columns: repeat(auto-fit, minmax(min(20rem, 100%), 1fr));
+ gap: 2rem;
+}
+
+.card {
+ display: flex;
+ flex-direction: column;
+ border: 2px solid;
+ border-radius: 0.5rem;
+ padding: 1.5rem;
+ background-color: vars.$white;
+ height: 42rem;
+}
+
+.borderDesign {
+ border-color: vars.$pink;
+}
+
+.borderHack {
+ border-color: vars.$orange;
+}
+
+.borderAI {
+ border-color: vars.$red;
+}
+
+.borderRobotics {
+ border-color: vars.$robotics-green;
+}
+
+.cardHeader {
+ display: flex;
+ align-items: center;
+ gap: 0.75rem;
+ margin-bottom: 1.5rem;
+}
+
+.teamLogo {
+ width: 4rem;
+ height: 4rem;
+ margin: -0.75rem 0 -0.75rem -0.5rem;
+}
+
+.cardHeaderText {
+ display: flex;
+ flex-direction: column;
+ line-height: 1.2;
+}
+
+.cardQuarter {
+ font-size: 0.875rem;
+ font-weight: 400;
+ color: vars.$black;
+}
+
+.cardTeam {
+ font-size: 1.125rem;
+ font-weight: 700;
+ color: vars.$black;
+}
+
+.projectImageWrapper {
+ width: 100%;
+ height: 14rem;
+ min-height: 14rem;
+ max-height: 14rem;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ border-radius: 0.5rem;
+ margin-bottom: 1rem;
+ overflow: hidden;
+ background-color: vars.$darker-white;
+ pointer-events: none;
+}
+
+.projectImage {
+ width: 100%;
+ height: 100%;
+ object-fit: contain;
+ padding: 1rem;
+ margin: 0;
+}
+
+.projectImageDefault {
+ width: 7rem;
+ height: 7rem;
+ object-fit: contain;
+ margin: 0;
+}
+
+.projectTitle {
+ font-size: 1.5rem;
+ font-weight: 700;
+ margin: 0 0 0.75rem;
+}
+
+.colorDesign {
+ color: vars.$pink;
+}
+
+.colorHack {
+ color: vars.$orange;
+}
+
+.colorAI {
+ color: vars.$red;
+}
+
+.colorRobotics {
+ color: vars.$robotics-green;
+}
+
+.projectDetails {
+ margin-bottom: 0.75rem;
+
+ p {
+ margin: 0 0 0.25rem;
+ font-size: 0.875rem;
+ color: vars.$black;
}
- .header {
- text-align: center;
- .AI {
- color: vars.$red;
- font-size: 1.4rem;
- }
- .Hack {
- color: vars.$orange;
- font-size: 1.4rem;
- }
- .Design {
- color: vars.$pink;
- font-size: 1.4rem;
- }
- .team {
- display: flex;
- flex-direction: row;
- align-items: center;
- justify-content: center;
- }
- .community_logo {
- width: 80px;
- height: 80px;
- padding-right: 1rem;
- }
+}
+
+.descriptionWrapper {
+ flex-grow: 1;
+ min-height: 0;
+ margin-bottom: 1.25rem;
+ overflow: clip;
+}
+
+.projectDescription {
+ font-size: 0.875rem;
+ line-height: 1.5;
+ color: vars.$black;
+ margin: 0;
+ display: -webkit-box;
+ -webkit-box-orient: vertical;
+ overflow: hidden;
+ pointer-events: none;
+}
+
+.cardActions {
+ 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;
+
+ &.colorDesign {
+ background-color: vars.$pink;
}
- .logo {
- object-fit: contain;
- width: 100%;
- height: 200px;
- border-top-left-radius: 0.5rem;
- border-top-right-radius: 0.5rem;
+
+ &.colorHack {
+ background-color: vars.$orange;
}
- .description {
- flex-grow: 1;
+
+ &.colorAI {
+ background-color: vars.$red;
+ }
+
+ &.colorRobotics {
+ background-color: vars.$robotics-green;
}
- .project_links {
- display: flex;
- flex-direction: row;
- gap: 1rem;
+
+ &:hover {
+ opacity: 0.85;
}
- .links {
- object-fit: contain;
- width: 100%;
- height: 4rem;
+}
+
+.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;
}
-}
\ No newline at end of file
+}
+
+.repoIcon {
+ width: 1rem;
+ height: 1rem;
+ object-fit: contain;
+ display: block;
+ flex-shrink: 0;
+ margin: 0;
+}
diff --git a/src/sections/Archive/index.tsx b/src/sections/Archive/index.tsx
index 52ce9ef..95be5de 100644
--- a/src/sections/Archive/index.tsx
+++ b/src/sections/Archive/index.tsx
@@ -3,23 +3,49 @@ import { useState } from 'react';
import s from './style.module.scss';
import ProjectCards from '../../components/project-card';
+const FILTERS = [
+ { label: 'Design', className: s.filterDesign },
+ { label: 'Hack', className: s.filterHack },
+ { label: 'AI', className: s.filterAI },
+ { label: 'Robotics', className: s.filterRobotics },
+];
+
const Archive: React.FC = () => {
const [quarter, setQuarter] = useState
('All');
+ const [activeFilter, setActiveFilter] = useState(null);
return (
-
Past Project Archives
-
-
+
+
Past Projects Archive
+
+
+
+ {FILTERS.map(({ label, className }) => (
+
+ ))}
+
+
+
Highlighted Projects
+
+
+
+
Other Projects
-
+
)
}
diff --git a/src/sections/Archive/style.module.scss b/src/sections/Archive/style.module.scss
index 42e62de..44777ef 100644
--- a/src/sections/Archive/style.module.scss
+++ b/src/sections/Archive/style.module.scss
@@ -1,9 +1,140 @@
-@use "../../styles/vars.scss" as vars; // allows you to use pre-defined colors
+@use "../../styles/vars.scss" as vars;
.container {
display: flex;
flex-direction: column;
align-items: center;
margin-top: 2rem;
- padding-top: 3rem;
-}
\ No newline at end of file
+ padding: 3rem vars.calc-relative-size(531px, 3.1875rem, 834px, 7.5rem);
+}
+
+.headerRow {
+ display: flex;
+ align-items: center;
+ justify-content: space-between;
+ flex-wrap: wrap;
+ gap: 1.25rem;
+ width: 100%;
+ margin-bottom: 2rem;
+}
+
+.header {
+ font-size: 2.25rem;
+ font-weight: 800;
+ margin: 0;
+}
+
+.project_selector {
+ appearance: none;
+ background: vars.$white url("/assets/chevron-down.svg") no-repeat right 0.75rem center;
+ border: 1.5px solid #5777C0;
+ border-radius: 0.75rem;
+ padding: 0.625rem 2rem 0.625rem 1.25rem;
+ font-size: 1rem;
+ color: vars.$black;
+ cursor: pointer;
+ outline: none;
+}
+
+.filters {
+ display: flex;
+ flex-wrap: wrap;
+ gap: 0.75rem;
+ align-self: flex-start;
+ margin-bottom: 2rem;
+}
+
+.filterButton {
+ background: transparent;
+ border: 2px solid;
+ border-radius: 2rem;
+ padding: 0.5rem 2rem;
+ font-size: 1rem;
+ cursor: pointer;
+ font-weight: 500;
+ transition: background-color 0.2s;
+ white-space: nowrap;
+}
+
+.filterDesign {
+ border-color: vars.$pink;
+ color: vars.$black;
+}
+
+.filterHack {
+ border-color: vars.$orange;
+ color: vars.$black;
+}
+
+.filterAI {
+ border-color: vars.$red;
+ color: vars.$black;
+}
+
+.filterRobotics {
+ border-color: vars.$robotics-green;
+ color: vars.$black;
+}
+
+.filterActive {
+ &.filterDesign {
+ background-color: rgba(vars.$pink, 0.15);
+ }
+ &.filterHack {
+ background-color: rgba(vars.$orange, 0.15);
+ }
+ &.filterAI {
+ background-color: rgba(vars.$red, 0.15);
+ }
+ &.filterRobotics {
+ background-color: rgba(vars.$robotics-green, 0.15);
+ }
+}
+
+.subheadingRow {
+ display: flex;
+ align-items: baseline;
+ gap: 1rem;
+ align-self: flex-start;
+ margin-top: 2rem;
+ margin-bottom: 1.5rem;
+}
+
+.subheading {
+ font-size: 1.5rem;
+ font-weight: 700;
+ margin: 0;
+ color: vars.$black;
+}
+
+.dateLabel {
+ font-size: 1rem;
+ color: vars.$dark-gray;
+}
+
+@media only screen and (max-width: 530px) {
+ .headerRow {
+ flex-direction: column;
+ align-items: center;
+ gap: 1.25rem;
+ }
+
+ .header {
+ text-align: center;
+ font-size: 1.75rem;
+ white-space: nowrap;
+ }
+
+ .filters {
+ flex-direction: column;
+ align-items: center;
+ align-self: center;
+ width: 100%;
+ }
+
+ .filterButton {
+ width: 55%;
+ text-align: center;
+ }
+}
+
diff --git a/src/sections/FAQ/faq.jsx b/src/sections/FAQ/faq.jsx
new file mode 100644
index 0000000..e5cfb51
--- /dev/null
+++ b/src/sections/FAQ/faq.jsx
@@ -0,0 +1,17 @@
+import s from './style.module.scss';
+
+const FAQItem = ({ question, answer, isOpen, onClick }) => {
+ return (
+
+ );
+};
+
+export default FAQItem;
diff --git a/src/sections/FAQ/index.tsx b/src/sections/FAQ/index.tsx
new file mode 100644
index 0000000..3b292b3
--- /dev/null
+++ b/src/sections/FAQ/index.tsx
@@ -0,0 +1,93 @@
+import { useState } from 'react';
+import type { ReactNode } from 'react';
+import s from './style.module.scss';
+import FAQItem from './faq';
+
+// list of questions and answers
+const faqs: { question: ReactNode; answer: ReactNode }[] = [
+ {
+ question: 'Do I need to be on campus to participate in Summer Projects?',
+ answer: 'No! Meetings throughout the summer are 100% remote!',
+ },
+ {
+ question: 'Do I need to be on campus to participate in Fall/Winter/Spring Projects?',
+ answer: 'Yes!',
+ },
+ {
+ question: 'How long is the program?',
+ answer: (
+ <>
+
Summer: Week of June 22, 2026 to Week 1 of Fall Quarter
+
Fall: Week 3 of Fall Quarter to Week 1 of Winter Quarter
+
Winter: Week 3 of Winter Quarter to Week 1 of Spring Quarter
+
Spring: Week 1 of Spring Quarter to Week 10 of Spring Quarter
+
+ ),
+ },
+ {
+ question: 'What is the time commitment per week?',
+ answer: '5-10 hours!',
+ },
+ {
+ question: "What if I've never done a project before?",
+ answer: (
+ <>
+ No worries! This is a super great
beginner-friendly opportunity to apply your course level knowledge on a real project and level up your resume!
+
+ ),
+ },
+ {
+ question: (
+ <>
+ What do I
actually do if I am accepted into ACM Projects?
+
+ ),
+ answer: (
+
+ - Work with your team and mentors to come up with a project idea to complete by the end of the program
+ - Meet and complete deliverables every week
+ - Progress update meetings (stand-ups) with the Projects community every month
+ - Showcase your project in person during Week 1 of Fall Quarter
+ - Make new friends with likeminded interests!
+ - Make a project you can passionately speak about!
+
+ ),
+ },
+ {
+ question: 'What do mentors do?',
+ answer: (
+
+ - Guide team through entire project timeline, including brainstorming, research, development, testing, and improvement
+ - Prepare and lead team meetings and delegate weekly tasks
+ - Ensure project can and will be completed by the end of the program
+
+ ),
+ },
+];
+
+const FAQ = () => {
+ const [openIndex, setOpenIndex] = useState
(null);
+
+ const toggle = (index: number) => {
+ setOpenIndex(openIndex === index ? null : index);
+ };
+
+ return (
+
+ FAQs
+
+ {faqs.map((faq, i) => (
+ toggle(i)}
+ />
+ ))}
+
+
+ );
+};
+
+export default FAQ;
diff --git a/src/sections/FAQ/style.module.scss b/src/sections/FAQ/style.module.scss
new file mode 100644
index 0000000..fe4edfe
--- /dev/null
+++ b/src/sections/FAQ/style.module.scss
@@ -0,0 +1,110 @@
+@use "../../styles/vars.scss" as v;
+
+$stmw: 956px; // small tablet/mobile max width
+
+$faq-bg: #dce6f7;
+
+.faqSection {
+ max-width: 760px;
+ margin: 4rem auto;
+ padding: 0 1.5rem;
+}
+
+.heading {
+ font-size: 2rem;
+ font-weight: 700;
+ margin-bottom: 1.5rem;
+ text-align: left;
+ color: v.$black;
+
+ @media only screen and (max-width: $stmw) {
+ text-align: center;
+ }
+}
+
+.faqList {
+ display: flex;
+ flex-direction: column;
+ gap: 0.625rem;
+}
+
+.faqItem {
+ background-color: $faq-bg;
+ border-radius: 8px;
+ overflow: hidden;
+ overscroll-behavior: auto; //override overscroll behavior in globals.css
+}
+
+.question {
+ width: 100%;
+ display: flex;
+ align-items: center;
+ justify-content: space-between;
+ gap: 1rem;
+ padding: 1.1rem 1.25rem;
+ background: none;
+ border: none;
+ cursor: pointer;
+ text-align: left;
+ font-size: 1rem;
+ font-weight: 700;
+ color: v.$black;
+}
+
+.chevron {
+ flex-shrink: 0;
+ width: 10px;
+ height: 10px;
+ border-right: 2px solid v.$black;
+ border-bottom: 2px solid v.$black;
+ transform: rotate(45deg);
+ transition: transform 0.3s ease;
+}
+
+.chevronOpen {
+ transform: rotate(-135deg);
+}
+
+.answerWrapper {
+ display: grid;
+ grid-template-rows: 0fr;
+ transition: grid-template-rows 0.3s ease;
+
+ .open & {
+ grid-template-rows: 1fr;
+ }
+}
+
+.answer {
+ overflow: hidden;
+ overscroll-behavior: auto; // override overscroll-behavior in globals.css
+ padding: 0 1.25rem;
+ font-size: 0.95rem;
+ line-height: 1.65;
+ color: v.$black;
+
+ .open & {
+ padding: 0 1.25rem 1.1rem;
+ }
+
+ ul {
+ margin: 0;
+ padding-left: 1.25rem;
+
+ li {
+ margin-bottom: 0.35rem;
+
+ &:last-child {
+ margin-bottom: 0;
+ }
+ }
+ }
+
+ p {
+ margin: 0 0 0.4rem;
+
+ &:last-child {
+ margin-bottom: 0;
+ }
+ }
+}
diff --git a/src/sections/Hero/index.tsx b/src/sections/Hero/index.tsx
index 6b8d483..43d0e04 100644
--- a/src/sections/Hero/index.tsx
+++ b/src/sections/Hero/index.tsx
@@ -2,45 +2,85 @@
import Image from "next/image";
import styles from "./style.module.scss";
import Description from "../description";
+import Countdown from "../../components/countdown";
+import { Size, useWindowSize } from "../../utils/general";
+
+const ProjLogo = "/assets/proj_logo.svg";
+const CountdownImage = "/assets/countdown_image.png";
+const Gradient = "/assets/hero-gradient.png";
+const GradientMobile = "/assets/hero-gradient-mobile.png";
const Hero = () => {
const projects_app = "https://acmurl.com/projects-app";
+ const size: Size = useWindowSize();
+
+ // size.width !== undefined determines whether the viewport has rendered yet
+ const mobile = size.width !== undefined && size.width <= 920;
+
return (
-
-
-
-
-
ACM Projects
-
- ACM Projects is our quarterly projects program where students work
- in a tight knit team. The program gives students the opportunity
- to be hands-on outside of courses in fields such as AI, design,
- and software engineering. The program culminates in a projects
- showcase and the finished product looks great on resumes. We
- welcome all skill levels to apply!
-
-
-
+
+
+
+
+
+
+
+
+
+
ACM Projects
+
+
+ ACM Projects is our quarterly projects program where students work
+ in a tight knit team. The program gives students the opportunity
+ to be hands-on outside of courses in fields such as AI, design,
+ and software engineering. The program culminates in a projects
+ showcase and the finished product looks great on resumes. We
+ welcome all skill levels to apply!
+
+
+
+
+
+
);
};
-export default Hero;
+export default Hero;
\ No newline at end of file
diff --git a/src/sections/Hero/style.module.scss b/src/sections/Hero/style.module.scss
index a0ba2dc..5428594 100644
--- a/src/sections/Hero/style.module.scss
+++ b/src/sections/Hero/style.module.scss
@@ -1,74 +1,229 @@
@use "../../styles/vars.scss" as v; // allows you to use pre-defined colors
-.container {
- min-height: 500px;
+.pageContent {
+ position: relative;
display: flex;
- align-items: center;
- justify-content: center;
- justify-self: start;
flex-direction: column;
+ justify-content: center;
+ align-items: center;
+ padding: 2.44rem 5.44rem;
@media screen and (max-width: 768px) {
align-items: flex-start;
+ padding-inline: 3rem;
}
-}
-.hero {
- margin: auto;
- max-width: 1000px;
- padding: 2rem;
- font-size: 20px;
- word-wrap: normal;
- display: grid;
- grid-template-columns: 1fr 1fr;
- grid-template-areas:
- "about image"
- "button image";
- align-items: start;
- justify-content: center;
-}
+ @media screen and (max-width: 500px) {
+ padding-inline: 1.69rem;
+ }
+
+ .gradient {
+ position: absolute;
+ z-index: -10;
+ top: calc(-5.5rem + 4px);
+ left: 0;
+ width: 100%;
+ height: 85rem;
+ user-select: none;
+
+ @media screen and (max-width: 956px) {
+ top: calc(-6.5rem + 4px)
+ }
+
+ @media screen and (max-width: 920px) {
+ height: 50rem;
+ }
+ }
-@media screen and (max-width: 768px) {
.hero {
display: flex;
- flex-direction: column;
+ justify-content: center;
+ align-items: center;
+ color: v.$black;
+
+ @media screen and (max-width: 768px) {
+ display: flex;
+ flex-direction: column;
+ }
+
+ .hero_main {
+ display: flex;
+ flex-direction: column;
+ font-size: 1.125rem;
+
+ .title {
+ display: flex;
+ align-items: center;
+ gap: 1.25rem;
+ margin-bottom: 1.25rem;
+
+ .titleLogo {
+ width: 8rem;
+ height: auto;
+ margin: 0;
+ }
+
+ .titleText {
+ font-size: 5rem;
+ font-weight: 700;
+ margin: 0;
+ }
+
+ @media screen and (max-width: 1500px) {
+ .titleLogo {
+ width: 6rem;
+ }
+
+ .titleText {
+ font-size: 4rem;
+ }
+ }
+
+ @media screen and (max-width: 1340px) {
+ gap: 0.8rem;
+
+ .titleLogo {
+ width: 4rem;
+ }
+
+ .titleText {
+ font-size: 3rem;
+ }
+ }
+
+ @media screen and (max-width: 965px) {
+ gap: 0.6rem;
+
+ .titleText {
+ font-size: 2.5rem;
+ }
+ }
+ }
+
+ .description {
+ margin-bottom: 1.75rem;
+ }
+
+ .button {
+ background-color: v.$proj-blue;
+ color: v.$white;
+ padding: 1rem 2.25rem;
+ border-radius: 0.625rem;
+ border-width: 0;
+ font-size: 1.2rem;
+ font-weight: 500;
+ cursor: pointer;
+
+ @media screen and (max-width: 1340px) {
+ padding: 0.7rem 1.8rem;
+ font-size: 1rem;
+ }
+
+ @media screen and (max-width: 768px) {
+ justify-content: center;
+ align-self: center;
+ }
+ }
+ }
+
+ .countdownImageWrapper {
+ flex: 0 0 auto;
+ position: relative;
+ margin: 0 -5rem 0 -6rem;
+
+ .countdownImage {
+ width: 42rem;
+ height: auto;
+ margin: -0.5rem 0 -10rem 0;
+ user-select: none;
+ }
+
+ .countdown {
+ position: absolute;
+ top: 7.5rem;
+ right: 16.1rem;
+ transform: perspective(1000px) rotateX(-43deg) rotateY(-43deg);
+ transform-style: preserve-3d;
+ }
+
+ @media screen and (max-width: 1190px) {
+ .countdownImage {
+ width: 35rem;
+ }
+
+ .countdown {
+ top: 6rem;
+ right: 13rem;
+ font-size: 1.2rem;
+ }
+ }
+
+ @media screen and (max-width: 1055px) {
+ .countdownImage {
+ width: 30rem;
+ }
+
+ .countdown {
+ top: 4.9rem;
+ right: 11.2rem;
+ font-size: 1rem;
+ }
+ }
+ }
+
+ .countdownImageWrapperMobile {
+ @extend .countdownImageWrapper;
+ display: none;
+
+ .countdownImage {
+ width: 20rem;
+ margin: 0 0 -3rem 0;
+ }
+
+ .countdown {
+ top: 3.4rem;
+ right: 7.4rem;
+ font-size: 0.7rem;
+ }
+ }
}
}
-.title {
- font-size: 56px;
- font-weight: 200;
-}
+@media screen and (max-width: 920px) {
+ .pageContent {
+ .hero {
+ flex-direction: column;
-.hero_text {
- grid-area: about;
-}
+ .hero_main {
+ align-items: center;
-.image {
- grid-area: image;
- border-radius: 10px;
-}
+ .title {
+ .titleLogo {
+ display: none;
+ }
-.button {
- background-color: v.$acm-blue;
- color: v.$white;
- padding: 12px 30px;
- border-radius: 10px;
- font-size: 16px;
- cursor: pointer;
- border-width: 0;
- grid-area: button;
-}
+ .titleText {
+ font-size: 1.875rem;
+ }
+ }
-.deadline {
- padding-top: 1rem;
- font-size: 16px;
- font-weight: 700;
-}
+ .description {
+ margin-bottom: 2.5rem;
+ text-align: center;
+ }
-@media screen and (max-width: 768px) {
- .button {
- justify-content: center;
- align-self: center;
+ .button {
+ padding: 0.625rem 2.5rem;
+ }
+ }
+
+ .countdownImageWrapper {
+ display: none;
+ }
+
+ .countdownImageWrapperMobile {
+ display: inline;
+ }
+ }
}
-}
+}
\ No newline at end of file
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
= {
+ 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 (
+
+
See Past Projects
+
+ {displayProjects.map((project) => {
+ const config = SUBGROUP_CONFIG[project.subgroup];
+ const slug = project.project_title.toLowerCase().replace(/\s+/g, '-');
+ return (
+
+
+
+
+
+
{project.project_title}
+
{project.members.join(', ')}
+
{project.description}
+
+
+
+ );
+ })}
+
+
+ View More Projects
+
+
+ Back to Archive
+
Project not found
+
+ );
+ }
+
+ const config = SUBGROUP_CONFIG[project.subgroup] ?? DEFAULT_CONFIG;
+
+ return (
+
+
Back to Archive
+
+
+
+
+
+ {project.quarter}
+ {project.subgroup} {project.team_name}
+
+
+
+
+
+
+
+
{project.project_title}
+
+
+
Created by: {project.members.join(", ")}
+
Mentored by: {project.mentors.join(", ")}
+ {project.technology && (
+
Technology: {project.technology}
+ )}
+
+
+
{project.description}
+
+
+
+
Projects Timeline
+
+
+
+
+
{activeEvent.date}
+
+ {activeEvent.description}
+
+
+
+
+ {timelineData.events.map((event, index) => (
+
+ ))}
+