diff --git a/apps/main/public/projects/CapyCrew.png b/apps/main/public/projects/CapyCrew.png new file mode 100644 index 0000000..2dda467 Binary files /dev/null and b/apps/main/public/projects/CapyCrew.png differ diff --git a/apps/main/public/projects/DevSpace.png b/apps/main/public/projects/DevSpace.png new file mode 100644 index 0000000..4009715 Binary files /dev/null and b/apps/main/public/projects/DevSpace.png differ diff --git a/apps/main/public/projects/EarthBeats.png b/apps/main/public/projects/EarthBeats.png new file mode 100644 index 0000000..d91e81e Binary files /dev/null and b/apps/main/public/projects/EarthBeats.png differ diff --git a/apps/main/public/projects/Fridge.png b/apps/main/public/projects/Fridge.png new file mode 100644 index 0000000..c2fe09b Binary files /dev/null and b/apps/main/public/projects/Fridge.png differ diff --git a/apps/main/public/projects/NUGuessr.png b/apps/main/public/projects/NUGuessr.png new file mode 100644 index 0000000..c24ba66 Binary files /dev/null and b/apps/main/public/projects/NUGuessr.png differ diff --git a/apps/main/src/app/lib/Components/NavBar.tsx b/apps/main/src/app/lib/Components/NavBar.tsx index 24b6dce..0e6a8ff 100644 --- a/apps/main/src/app/lib/Components/NavBar.tsx +++ b/apps/main/src/app/lib/Components/NavBar.tsx @@ -1,7 +1,7 @@ "use client"; import React from "react"; -// import LocalLink from "./LocalLink"; +import LocalLink from "./LocalLink"; // import HomeIcon from "@repo/ui/Icons/HomeIcon"; // import Hamburger from "hamburger-react"; @@ -9,7 +9,18 @@ const NavBar = () => { // const [isOpen, setOpen] = useState(false); // const isMobile = useIsMobileLgScreen(); - return
; + return ( +
+
+ + Projects + +
+
+ ); }; export default NavBar; diff --git a/apps/main/src/app/projects/components/background.tsx b/apps/main/src/app/projects/components/background.tsx new file mode 100644 index 0000000..4044ef9 --- /dev/null +++ b/apps/main/src/app/projects/components/background.tsx @@ -0,0 +1,203 @@ +import React from "react"; + +type ProjectBackgroundProps = { + className?: string; +}; + +const ProjectBackground: React.FC = ({ className }) => { + return ( + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + ); +}; +export default ProjectBackground; diff --git a/apps/main/src/app/projects/components/orangeFirework.tsx b/apps/main/src/app/projects/components/orangeFirework.tsx new file mode 100644 index 0000000..5a9faa4 --- /dev/null +++ b/apps/main/src/app/projects/components/orangeFirework.tsx @@ -0,0 +1,20 @@ +import React from "react"; +const OrangeFirework: React.FC = () => { + return ( + + + + ); +}; +export default OrangeFirework; diff --git a/apps/main/src/app/projects/components/pinkFirework.tsx b/apps/main/src/app/projects/components/pinkFirework.tsx new file mode 100644 index 0000000..4ee1a00 --- /dev/null +++ b/apps/main/src/app/projects/components/pinkFirework.tsx @@ -0,0 +1,18 @@ +import React from "react"; +const PinkFirework: React.FC = () => { + return ( + + + + ); +}; +export default PinkFirework; diff --git a/apps/main/src/app/projects/components/yellowFirework.tsx b/apps/main/src/app/projects/components/yellowFirework.tsx new file mode 100644 index 0000000..bb491aa --- /dev/null +++ b/apps/main/src/app/projects/components/yellowFirework.tsx @@ -0,0 +1,21 @@ +import React from "react"; + +const YellowFirework: React.FC = () => { + return ( + + + + ); +}; +export default YellowFirework; diff --git a/apps/main/src/app/projects/page.tsx b/apps/main/src/app/projects/page.tsx index e51ce9e..1551afe 100644 --- a/apps/main/src/app/projects/page.tsx +++ b/apps/main/src/app/projects/page.tsx @@ -3,56 +3,160 @@ import React from "react"; import Project from "./components/Project"; import RibbonTitle from "@repo/ui/RibbonTitle"; - +import ProjectBackground from "./components/background"; +import useDevice from "@util/hooks/useDevice"; +import PinkFirework from "./components/pinkFirework"; +import OrangeFirework from "./components/orangeFirework"; +import YellowFirework from "./components/yellowFirework"; +import Button from "@repo/ui/Button"; const projectData = [ { projectImage: "/projects/memora.png", projectName: "Memora", - award: "Leave No Trace", + award: "Best Social Impact", members: "Kaleb Cole, Yaroslav Petrashko, Shrey Agarwal, Aditya", description: "Memora is a mobile app that acts as a personalized road map through memories, designed for individuals in the early to moderate stages of dementia and their families. Using personal family photos – snapshots from life's journey – Memora stimulates memory recall through engaging quizzes and a user-friendly interface.", link: "https://devpost.com/software/memora-bmi4zw", }, { - projectImage: "/projects/memora.png", - projectName: "Memora", - award: "Leave No Trace", - members: "Kaleb Cole, Yaroslav Petrashko, Shrey Agarwal, Aditya", + projectImage: "/projects/CapyCrew.png", + projectName: "CapyCrew", + award: "Most Creative", + members: "Sophia Tang, Olivia Jonathan, Alyssa Jane Najera", description: - "Memora is a mobile app that acts as a personalized road map through memories, designed for individuals in the early to moderate stages of dementia and their families. Using personal family photos – snapshots from life's journey – Memora stimulates memory recall through engaging quizzes and a user-friendly interface.", + "CapyCrew is an interactive web experience where users can engage with a digital capybara in a variety of fun ways. By using different key inputs, users can unlock surprises and trigger exciting animations, making every interaction a little adventure.", link: "https://devpost.com/software/memora-bmi4zw", }, { - projectImage: "/projects/memora.png", - projectName: "Memora", - award: "Leave No Trace", - members: "Kaleb Cole, Yaroslav Petrashko, Shrey Agarwal, Aditya", + projectImage: "/projects/Fridge.png", + projectName: "Fridge", + award: "Best UI/UX", + members: "Troy Gunawardene, Thanin Kongkiatsophon, Olivia Li, Jolin Huang", description: - "Memora is a mobile app that acts as a personalized road map through memories, designed for individuals in the early to moderate stages of dementia and their families. Using personal family photos – snapshots from life's journey – Memora stimulates memory recall through engaging quizzes and a user-friendly interface.", + "Fridge gamifies the experience of discovering and enjoying local restaurants. When you eat local, you have a chance of unlocking a new item for your fridge in our webapp. Your fridge is like your profile - stock up on cool finds and show off to your friends!", + link: "https://devpost.com/software/memora-bmi4zw", + }, + { + projectImage: "/projects/NUGuessr.png", + projectName: "NUGuessr", + award: "Best Beginner", + members: "Philip Elbert, Joshua Chan, Oscar Ji, Alan Tai", + description: + "NUGuessr is an interactive web game where players are tasked with guessing the locations of Northeastern campus landmarks. In each round, players are given a photo of certain locations on campus, whether it be a whole building or a specific statue/point of interest. Players must then search the implemented map and pinpoint the location of which they think the picture was taken at, all within a time limit.", + link: "https://devpost.com/software/memora-bmi4zw", + }, + { + projectImage: "/projects/DevSpace.png", + projectName: "DevSpace", + award: "Most Challenging", + members: "Tilak Patel, Shreyaan Pathak", + description: + "DevSpace is a real-time, multi-file collaborative coding platform that integrates: ✅ AI-assisted debugging to catch errors faster ✅ Cloud-accelerated execution for high-performance computing ✅ Jetson-powered Docker runtime for seamless GPU-accelerated workloads", + link: "https://devpost.com/software/memora-bmi4zw", + }, + { + projectImage: "/projects/EarthBeats.png", + projectName: "EarthBeats", + award: "Best Overall", + members: "Harry Duong, Jonathan Tobias Sudarpo, Son Nguyen, Trang Do", + description: + "EarthBeats is an AI-powered road trip planner that optimizes routes to minimize carbon emissions. Users input their start and end points, vehicle type, and travel preferences. The app suggests the most carbon-efficient route, considering factors like elevation changes and road smoothness.", link: "https://devpost.com/software/memora-bmi4zw", }, - // TODO: ADD MORE PROJECTS ]; export default function Page() { + const { isMobile, isTablet, isDesktop } = useDevice(); return ( -
-
+
+
+ +
+ +
+
+ 2025 PROJECTS +
+ {projectData.map((project, index) => ( - // TODO: add title component here when done -
- - +
+ +
+ +
))} + +
+ +
+
+ +
+
+ +
+ +
+
+ Interested in seeing more past hacker projects? +
+
+ Check out the HackBeanpot Archive! +
+ +
+ +
+
-
+ ); } diff --git a/packages/ui/src/Button.tsx b/packages/ui/src/Button.tsx index ac9a4bb..b7e70df 100644 --- a/packages/ui/src/Button.tsx +++ b/packages/ui/src/Button.tsx @@ -15,6 +15,7 @@ const bgColorMap: Record = { firecrackerRedLight: "bg-firecrackerRedLight hover:bg-firecrackerRed", marigoldYellow: "bg-marigoldYellow hover:bg-marigoldYellowDark", cottonCandyCoral: "bg-cottonCandyCoral hover:bg-cottonCandyCoralDark", + starlightBlue: "bg-starlightBlue hover:bg-starlightBlueDark", }; const sizeMap: Record = { diff --git a/packages/ui/src/RibbonTitle.tsx b/packages/ui/src/RibbonTitle.tsx index 7f0f74f..ff7dbfa 100644 --- a/packages/ui/src/RibbonTitle.tsx +++ b/packages/ui/src/RibbonTitle.tsx @@ -16,7 +16,7 @@ export default function RibbonTitle({
{isShort && (
- + {text} @@ -25,7 +25,7 @@ export default function RibbonTitle({ {!isShort && (
- + {text} diff --git a/packages/ui/src/StreetSign.tsx b/packages/ui/src/StreetSign.tsx index 528b427..6f613c3 100644 --- a/packages/ui/src/StreetSign.tsx +++ b/packages/ui/src/StreetSign.tsx @@ -17,9 +17,8 @@ export default function StreetSign({ } > {streetName} - - {suffix} - + + {suffix}
); }