Skip to content

Mainsite/bugfix/projects page #298

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
adityapat24 wants to merge 7 commits into
base: dev
Choose a base branch
from
Open

Mainsite/bugfix/projects page #298

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
7 commits
Select commit Hold shift + click to select a range
2b4b8c0
initial changes
adityapat24 Oct 30, 2025
b72532b
format
adityapat24 Oct 30, 2025
534fc1b
mobile implementation
adityapat24 Oct 30, 2025
dcb969b
format
adityapat24 Oct 30, 2025
0168259
description changed
adityapat24 Oct 30, 2025
069e699
format
adityapat24 Oct 30, 2025
4bca6d9
Merge branch 'dev' of github.com:HackBeanpot/core into mainsite/bugfi…
adityapat24 Nov 3, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion apps/main/src/app/(landing)/Sections/About.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -11,7 +11,7 @@ import Dart from "../../lib/Assets/AboutLandingAssets/dart";
import useDevice from "@util/hooks/useDevice";

export default function About(): React.ReactNode {
const { isMobile} = useDevice();
const { isMobile } = useDevice();
return (
<div
className={`relative w-full z-10 ${
Expand Down
6 changes: 3 additions & 3 deletions apps/main/src/app/projects/components/Project.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -93,18 +93,18 @@ function Project({

const expandedSize = isDescExpanded
? isDesktop
? "h-[60vh] w-[50vw]"
? "h-[45vh] w-[50vw]"
: isTablet
? "h-[95vh] w-[70vw]"
: "h-[105%] w-[70vw]"
: baseSize;

const projectCardStylesBG = clsx(
"absolute bg-starlightBlue rounded-xl shadow-[inset_-15px_15px_0_rgba(0,0,0,0.25)]",
"absolute top-0 bg-starlightBlue rounded-xl shadow-[inset_-15px_15px_0_rgba(0,0,0,0.25)]",
expandedSize,
);
const projectCardStylesBorder = clsx(
"absolute outline outline-[15px] outline-firecrackerRedLight outline-solid rounded-xl drop-shadow-[8px_8px_0_#CC322D]",
"absolute top-0 outline outline-[15px] outline-firecrackerRedLight outline-solid rounded-xl drop-shadow-[8px_8px_0_#CC322D]",
expandedSize,
);

Expand Down
54 changes: 54 additions & 0 deletions apps/main/src/app/projects/components/ProjectName.tsx
View file
Open in desktop
Copy link
Contributor

@agonzalez22 agonzalez22 Nov 4, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

wait this is a rly good fix for the ribbon component?! Can you actually make a PR to change and test this change? Like replace the ribbon component code with this and keep the params as text, test among all usecases of the ribbon component and ensure this fix is good? I can take a stab at the changes for this PR

Original file line number Diff line number Diff line change
@@ -0,0 +1,54 @@
import React from "react";

type ProjectNameProps = {
projectName: string;
};

const ProjectName: React.FC<ProjectNameProps> = ({ projectName }) => {
return (
<svg
x="690"
y="265"
width="597"
height="93"
viewBox="0 0 597 93"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M2.28232 37.9013C1.18703 35.1304 3.22915 32.1273 6.20871 32.1273H85.2844C87.6162 32.1273 89.5064 34.0176 89.5064 36.3493V86.7721C89.5064 89.1038 87.6162 90.9941 85.2844 90.9941H6.37191C3.34895 90.9941 1.30549 87.9101 2.4839 85.1263L11.3592 64.1598C11.7908 63.1401 11.8046 61.9917 11.3976 60.9619L2.28232 37.9013Z"
fill="#94181A"
/>
<path
d="M84.58 90.648L54.3562 82.2767C49.955 81.0576 50.3538 74.6904 54.8728 74.0302L85.0966 69.6146C87.6443 69.2424 89.929 71.2175 89.929 73.7922V86.5792C89.929 89.37 87.2696 91.393 84.58 90.648Z"
fill="#68090B"
/>
<path
d="M594.187 37.9482C595.283 35.1773 593.241 32.1742 590.261 32.1742H511.185C508.854 32.1742 506.963 34.0644 506.963 36.3962V86.819C506.963 89.1507 508.854 91.041 511.185 91.041H590.098C593.121 91.041 595.164 87.957 593.986 85.1731L585.111 64.2066C584.679 63.187 584.665 62.0385 585.072 61.0088L594.187 37.9482Z"
fill="#94181A"
/>
<path
d="M512.312 90.6949L542.535 82.3236C546.937 81.1045 546.538 74.7373 542.019 74.0771L511.795 69.6614C509.247 69.2892 506.963 71.2644 506.963 73.8391V86.6261C506.963 89.4169 509.622 91.4398 512.312 90.6949Z"
fill="#68090B"
/>
<path
d="M50.9629 13.8682C50.9629 11.643 52.6716 9.80167 54.8925 9.66178C79.1867 8.13148 210.753 0.106227 298.318 0.0882568C386.36 0.0701892 518.656 8.12855 543.031 9.66192C545.252 9.80164 546.963 11.6432 546.963 13.8685V77.6659C546.963 80.0744 545.013 81.9985 542.607 81.8908C517.15 80.7508 385.733 75.0623 298.318 75.0711C211.381 75.0799 80.6955 80.7511 55.3176 81.8903C52.9113 81.9984 50.9629 80.0741 50.9629 77.6654V13.8682Z"
fill="#CC322D"
/>
<text
x="50%"
y="50%"
fill="#F2E06F"
fontSize="43"
fontFamily="NeulisNeue-Bold"
fontWeight="bold"
letterSpacing="0.05em"
textAnchor="middle"
dominantBaseline="middle"
>
{projectName}
</text>
</svg>
);
};
export default ProjectName;
113 changes: 60 additions & 53 deletions apps/main/src/app/projects/page.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,14 +2,14 @@

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";
import { Footer, NavBar } from "../lib/Components";
import ProjectName from "./components/ProjectName";

const projectData = [
{
Expand All @@ -18,7 +18,7 @@ const projectData = [
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.",
"Memora 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, Memora stimulates memory recall through engaging quizzes and a user-friendly interface.",
link: "https://devpost.com/software/memora-bmi4zw",
},
{
Expand Down Expand Up @@ -70,32 +70,42 @@ const projectData = [

export default function Page() {
const { isMobile, isTablet, isDesktop } = useDevice();

return (
<div className="flex flex-col items-center min-h-screen relative overflow-x-hidden overflow-y-visible">
<div className="flex flex-col items-center min-h-screen relative overflow-x-hidden overflow-y-hidden">
<NavBar />

{/* Background */}
<div
className={`absolute inset-0 -z-10 ${isMobile ? "scale-125" : ""} ${isTablet ? "scale-125" : ""} ${isDesktop ? "scale-125" : ""}`}
className={`absolute inset-0 -z-10 ${
isMobile || isTablet || isDesktop ? "scale-125" : ""
}`}
>
<ProjectBackground className={`${isMobile ? "w-full h-full" : ""}`} />
</div>

<div className="relative z-10 max-w-screen flex flex-col items-center pt-14">
{/* Projects Section */}
<div className="relative z-10 max-w-screen-lg w-full flex flex-col items-center pt-14">
<div
className="self-stretch text-center justify-center text-firecrackerRedDark
font-Sancreek-Regular text-heading leading-[96px]
text-shadow [text-stroke:2px_#F2E06F] [-webkit-text-stroke:2px_#F2E06F]"
font-Sancreek-Regular text-heading leading-[96px]
text-shadow [text-stroke:2px_#F2E06F] [-webkit-text-stroke:2px_#F2E06F]"
>
2025 PROJECTS
</div>

{projectData.map((project, index) => (
<div
key={index}
className={` ${isMobile ? "pt-10 mb-10" : ""} ${isTablet ? "pt-10" : ""} ${isDesktop ? "pt-10" : ""}`}
className={`${isMobile ? "pt-2 mb-2" : "pt-10"} w-full flex flex-col items-center`}
>
<RibbonTitle text={project.award.toUpperCase()} />
<div
className={`${isMobile ? "mb-5" : ""} ${isTablet ? "" : ""} ${isDesktop ? "" : ""}`}
className={`${isMobile ? "scale-[0.85]" : ""} w-full flex justify-center`}
>
<ProjectName projectName={project.award.toUpperCase()} />
</div>
<div
className={`${isMobile ? "mb-2" : "mb-3"} w-full scale-[0.85]`}
>
<Project
projectImage={project.projectImage}
Expand All @@ -107,59 +117,56 @@ export default function Page() {
</div>
</div>
))}
</div>

<div
className={`
${isMobile ? "scale-[0.3] top-[98.5%] -left-[125px]" : ""}
${isTablet ? "scale-[0.7] top-[101%] -left-[150px]" : ""}
${isDesktop ? "top-[100%] -left-[200px]" : ""}
absolute`}
>
<PinkFirework />
</div>
<div
className={`
${isMobile ? "scale-[0.3] top-[98.5%] -left-[120px]" : ""}
${isTablet ? "scale-[0.7] top-[103%] -left-[60px]" : ""}
${isDesktop ? "top-[104%] -left-[85px]" : ""}
absolute`}
>
<YellowFirework />
</div>
<div
className={`
${isMobile ? "scale-[0.3] top-[96%] -left-[30px]" : ""}
${isTablet ? "scale-[0.65] top-[100%] left-[200px]" : ""}
${isDesktop ? "top-[101%] left-[485px]" : ""}
absolute
`}
>
<OrangeFirework />
{/* Fireworks + Archive Section */}
<div className="relative flex flex-col items-center w-full mb-20 overflow-visible mobile:mt-[27rem] tablet:mt-[39rem] desktop:mt-[39rem]">
{/* Fireworks Layer */}
<div className="absolute inset-0 flex justify-center items-center">
<div
className="absolute mobile:-left-[19%] mobile:-top-[255%] mobile:scale-[0.4]
tablet:left-[10%] tablet:-top-[395%] tablet:scale-100
desktop:left-[10%] desktop:-top-[395%] desktopscale-100"
>
<PinkFirework />
</div>
<div
className="absolute mobile:right-[20%] mobile:-top-[225%] mobile:scale-[0.35]
tablet:right-[60%] tablet:-top-[315%] tablet:scale-90
desktop:right-[60%] desktop:-top-[315%] desktop:scale-90"
>
<YellowFirework />
</div>
<div
className="absolute mobile:left-[40%] mobile:-top-[300%] mobile:scale-[0.3]
tablet:right-[15%] tablet:-top-[440%] tablet:scale-100
desktop:right-[15%] desktop:-top-[440%] desktop:scale-100"
>
<OrangeFirework />
</div>
</div>

<div
className={`absolute flex flex-col items-center ${isMobile ? "top-[106.5%]" : ""} ${isTablet ? "top-[112%]" : ""} ${isDesktop ? "top-[118%]" : ""}`}
>
<div className="self-stretch text-center justify-center text-carouselCreamLight text-3xl font-['NeulisNeue-Regular'] leading-10 mb-5">
{/* Archive CTA */}
<div className="flex flex-col items-center text-center z-10 px-4">
<div className="text-carouselCreamLight text-3xl font-['NeulisNeue-Regular'] leading-10 mb-5">
Interested in seeing more past hacker projects?
</div>
<div className="self-stretch text-center justify-center text-carouselCreamLight text-md font-normal font-['NeulisNeue-Regular'] leading-tight mb-5">
<div className="text-carouselCreamLight text-md font-['NeulisNeue-Regular'] leading-tight mb-5">
Check out the HackBeanpot Archive!
</div>

<div className="text-center justify-center">
<Button
text="View Archive"
textColor="white"
color="starlightBlue"
size="medium"
onClick={() =>
window.open("https://archive.hackbeanpot.com/", "_blank")
}
></Button>
</div>
<Button
text="View Archive"
textColor="white"
color="starlightBlue"
size="medium"
onClick={() =>
window.open("https://archive.hackbeanpot.com/", "_blank")
}
/>
</div>
</div>

<Footer />
</div>
);
Expand Down