From 68d44d0468763b0213b3a4aec3f35dbb563b16ec Mon Sep 17 00:00:00 2001 From: yepMizu Date: Wed, 8 Apr 2026 22:10:35 +0545 Subject: [PATCH 1/4] Text changes --- .../src/app/assets/images/genderEllipse.tsx | 23 +++++++++++++------ .../AboutTheEvent/AboutTheEventCards.tsx | 2 +- frontend/src/app/sections/FAQ/FAQ.tsx | 4 ++-- 3 files changed, 19 insertions(+), 10 deletions(-) diff --git a/frontend/src/app/assets/images/genderEllipse.tsx b/frontend/src/app/assets/images/genderEllipse.tsx index a7918c7..860d3e5 100644 --- a/frontend/src/app/assets/images/genderEllipse.tsx +++ b/frontend/src/app/assets/images/genderEllipse.tsx @@ -35,10 +35,15 @@ export default function GenderEllipseSVG({ }, [hasAnimated]); useEffect(() => { - if (hasAnimated) { - const id = setTimeout(() => setShowChart(true), 50); - return () => clearTimeout(id); - } + if (!hasAnimated) return; + let raf1: number, raf2: number; + raf1 = requestAnimationFrame(() => { + raf2 = requestAnimationFrame(() => setShowChart(true)); + }); + return () => { + cancelAnimationFrame(raf1); + cancelAnimationFrame(raf2); + }; }, [hasAnimated]); const handleToggle = (gender: "male" | "female") => { @@ -75,6 +80,8 @@ export default function GenderEllipseSVG({ const options: ChartOptions<"doughnut"> = { animation: { duration: 2000, + animateRotate: true, + animateScale: true, }, rotation: 90, maintainAspectRatio: false, @@ -108,9 +115,11 @@ export default function GenderEllipseSVG({ return (
- {showChart && ( - - )} + {showChart && + containerRef.current && + containerRef.current.getBoundingClientRect().width > 0 && ( + + )}
); } \ No newline at end of file diff --git a/frontend/src/app/sections/AboutTheEvent/AboutTheEventCards.tsx b/frontend/src/app/sections/AboutTheEvent/AboutTheEventCards.tsx index c78c075..e82ba40 100644 --- a/frontend/src/app/sections/AboutTheEvent/AboutTheEventCards.tsx +++ b/frontend/src/app/sections/AboutTheEvent/AboutTheEventCards.tsx @@ -13,7 +13,7 @@ const AboutTheEventCards = () => { }, software: { svg: , - title: "Software Club", + title: "DWIT Software Club", description: "The Software Club of Deerwalk Institute of Technology is a student-led organization dedicated to promoting a culture of technology, innovation, and collaboration through workshops and events. Additionally, it is the core team responsible for building Deerhack. Whether it's late-night debugging sessions or organizing large-scale hackathons, we're focused on bridging the gap between classroom theory and the grit of the tech industry.", }, diff --git a/frontend/src/app/sections/FAQ/FAQ.tsx b/frontend/src/app/sections/FAQ/FAQ.tsx index 719c5c1..50b9691 100644 --- a/frontend/src/app/sections/FAQ/FAQ.tsx +++ b/frontend/src/app/sections/FAQ/FAQ.tsx @@ -35,7 +35,7 @@ const Faq = () => { { question: "How long will DeerHack last?", answer: - "While DeerHack is a 48-Hour program, DeerHack also has a lot of other fun, team-building events lined up for the participants which will take place from 11th to 13th June 6 making DeerHack a 3-Day event collectively.", + "While DeerHack is a 48-Hour program, DeerHack also has a lot of other fun, team-building events lined up for the participants which will take place from 12th to 14th June making DeerHack a 3-Day event collectively.", }, { question: "Who can Participate in DeerHack?", @@ -57,7 +57,7 @@ const Faq = () => { { question: "What should I bring to DeerHack?", answer: - "You should bring any necessary equipment or tools for your project, such as a laptop or hardware components. Additionally, you may also want to bring a water bottle, and comfortable clothing for the long hours of relrentless innovation.", + "You should bring any necessary equipment or tools for your project, such as a laptop or hardware components. Additionally, you may also want to bring a water bottle, and comfortable clothing for the long hours of relentless innovation.", }, { question: "Will foods and drinks be provided at DeerHack?", From 820cd51040be098d2c2e0036ac7fca9238d70137 Mon Sep 17 00:00:00 2001 From: yepMizu Date: Wed, 8 Apr 2026 23:27:01 +0545 Subject: [PATCH 2/4] changes --- .../src/app/components/About/AboutCard.tsx | 2 +- frontend/src/app/globals.css | 10 ++++ .../src/app/sections/Tracks/TracksCard.tsx | 53 +++++++++---------- 3 files changed, 36 insertions(+), 29 deletions(-) diff --git a/frontend/src/app/components/About/AboutCard.tsx b/frontend/src/app/components/About/AboutCard.tsx index ee03d75..b95b29e 100644 --- a/frontend/src/app/components/About/AboutCard.tsx +++ b/frontend/src/app/components/About/AboutCard.tsx @@ -134,7 +134,7 @@ export default function AboutCard({

{description}

diff --git a/frontend/src/app/globals.css b/frontend/src/app/globals.css index 3606150..60b35fe 100644 --- a/frontend/src/app/globals.css +++ b/frontend/src/app/globals.css @@ -119,3 +119,13 @@ } } +@keyframes green-blue-shift { + 0% { background-color: #22c55e; } + 50% { background-color: violet } + 100% { background-color: #22c55e; } +} + +.env-animate { + animation: green-blue-shift 3s ease-in-out infinite; +} + diff --git a/frontend/src/app/sections/Tracks/TracksCard.tsx b/frontend/src/app/sections/Tracks/TracksCard.tsx index d034e50..b51c497 100644 --- a/frontend/src/app/sections/Tracks/TracksCard.tsx +++ b/frontend/src/app/sections/Tracks/TracksCard.tsx @@ -51,7 +51,6 @@ const TracksCard = () => { { title: "Blockchain", svg: , - // svgBody: , svgBody: , headStyling: selectedTrack === "Blockchain" @@ -90,11 +89,10 @@ const TracksCard = () => { svg: , svgBody: , headStyling: - selectedTrack === "Environment" - ? "gradient-bg text-magnolia active invert " - : "bg-violet hover:gradient-bg hover:text-magnolia hover:invert transition-all duration-300", - bodyStyling: - "gradient-bg text-magnolia invert transition-all duration-300", + selectedTrack === "Environment" + ? "env-animate text-magnolia active" + : "env-animate text-magnolia hover:opacity-90 transition-opacity duration-300", + bodyStyling: "gradient-bg text-magnolia invert transition-all duration-300", description: "Think Green, Code Clean at DeerHack. Dive into the world of climate-positive innovation. Turn environmental challenges into elegant, scalable, and sustainable tech solutions.", }, @@ -104,32 +102,31 @@ const TracksCard = () => { const handleTrackSelection = (title: string) => { setSelectedTrack(title); setAnimKey((prev) => prev + 1); - resetAutoSwitchTimer(); }; - // Auto switch logic - const resetAutoSwitchTimer = () => { - if (autoSwitchTimer.current) clearTimeout(autoSwitchTimer.current); + // // Auto switch logic + // const resetAutoSwitchTimer = () => { + // if (autoSwitchTimer.current) clearTimeout(autoSwitchTimer.current); - autoSwitchTimer.current = setTimeout(() => { - const currentIndex = trackData.findIndex( - (track) => track.title === selectedTrack - ); - const nextIndex = (currentIndex + 1) % trackData.length; - setSelectedTrack(trackData[nextIndex].title); - setAnimKey((prev) => prev + 1); - resetAutoSwitchTimer(); // schedule next switch - }, 10000); // 8 seconds - }; + // autoSwitchTimer.current = setTimeout(() => { + // const currentIndex = trackData.findIndex( + // (track) => track.title === selectedTrack + // ); + // const nextIndex = (currentIndex + 1) % trackData.length; + // setSelectedTrack(trackData[nextIndex].title); + // setAnimKey((prev) => prev + 1); + // resetAutoSwitchTimer(); // schedule next switch + // }, 10000); // 8 seconds + // }; - // Start auto-switch when component mounts - useEffect(() => { - resetAutoSwitchTimer(); - return () => { - if (autoSwitchTimer.current) clearTimeout(autoSwitchTimer.current); - }; - // eslint-disable-next-line react-hooks/exhaustive-deps - }, [selectedTrack]); + // // Start auto-switch when component mounts + // useEffect(() => { + // resetAutoSwitchTimer(); + // return () => { + // if (autoSwitchTimer.current) clearTimeout(autoSwitchTimer.current); + // }; + // // eslint-disable-next-line react-hooks/exhaustive-deps + // }, [selectedTrack]); return (
From dfa3adbb58d7f0f1440b28fbe70701fb604fb07d Mon Sep 17 00:00:00 2001 From: Rijan Dahal <70582929+enkoki@users.noreply.github.com> Date: Wed, 8 Apr 2026 23:49:00 +0545 Subject: [PATCH 3/4] refactor: env animation to style module --- frontend/src/app/globals.css | 10 ---------- frontend/src/app/sections/Tracks/TracksCard.tsx | 5 +++-- frontend/src/app/sections/Tracks/styles.module.css | 10 ++++++++++ 3 files changed, 13 insertions(+), 12 deletions(-) diff --git a/frontend/src/app/globals.css b/frontend/src/app/globals.css index 60b35fe..3606150 100644 --- a/frontend/src/app/globals.css +++ b/frontend/src/app/globals.css @@ -119,13 +119,3 @@ } } -@keyframes green-blue-shift { - 0% { background-color: #22c55e; } - 50% { background-color: violet } - 100% { background-color: #22c55e; } -} - -.env-animate { - animation: green-blue-shift 3s ease-in-out infinite; -} - diff --git a/frontend/src/app/sections/Tracks/TracksCard.tsx b/frontend/src/app/sections/Tracks/TracksCard.tsx index b51c497..dc1024d 100644 --- a/frontend/src/app/sections/Tracks/TracksCard.tsx +++ b/frontend/src/app/sections/Tracks/TracksCard.tsx @@ -14,6 +14,7 @@ import EdTechSVG from "@/app/assets/icons/EdTech"; import EdTechNew from "@/app/assets/icons/EdTechNew"; import EnvironmentTrackSVG from "@/app/assets/icons/EnvironmentTrack"; import EnvironmentTrackBodySVG from "@/app/assets/icons/EnvironmentTrackBody"; +import styles from "./styles.module.css" const TracksCard = () => { const [selectedTrack, setSelectedTrack] = useState( @@ -90,8 +91,8 @@ const TracksCard = () => { svgBody: , headStyling: selectedTrack === "Environment" - ? "env-animate text-magnolia active" - : "env-animate text-magnolia hover:opacity-90 transition-opacity duration-300", + ? `${styles.envAnimate} text-magnolia active` + : `${styles.envAnimate} text-magnolia hover:opacity-90 transition-opacity duration-300`, bodyStyling: "gradient-bg text-magnolia invert transition-all duration-300", description: "Think Green, Code Clean at DeerHack. Dive into the world of climate-positive innovation. Turn environmental challenges into elegant, scalable, and sustainable tech solutions.", diff --git a/frontend/src/app/sections/Tracks/styles.module.css b/frontend/src/app/sections/Tracks/styles.module.css index 4d30deb..251ca10 100644 --- a/frontend/src/app/sections/Tracks/styles.module.css +++ b/frontend/src/app/sections/Tracks/styles.module.css @@ -9,3 +9,13 @@ scrollbar-width: none; /* Firefox */ } + +@keyframes green-blue-shift { + 0% { background-color: #6DB94C; } + 50% { background-color: #241A4A } + 100% { background-color: #6DB94C; } +} + +.envAnimate { + animation: green-blue-shift 3s ease-in-out infinite; +} From 1f3ffc74bf6df9b677a18cdd0ed4840bf8bbf366 Mon Sep 17 00:00:00 2001 From: yepMizu Date: Thu, 9 Apr 2026 00:05:14 +0545 Subject: [PATCH 4/4] Animation done --- frontend/src/app/sections/Tracks/TracksCard.tsx | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/frontend/src/app/sections/Tracks/TracksCard.tsx b/frontend/src/app/sections/Tracks/TracksCard.tsx index dc1024d..d6461f3 100644 --- a/frontend/src/app/sections/Tracks/TracksCard.tsx +++ b/frontend/src/app/sections/Tracks/TracksCard.tsx @@ -91,9 +91,9 @@ const TracksCard = () => { svgBody: , headStyling: selectedTrack === "Environment" - ? `${styles.envAnimate} text-magnolia active` - : `${styles.envAnimate} text-magnolia hover:opacity-90 transition-opacity duration-300`, - bodyStyling: "gradient-bg text-magnolia invert transition-all duration-300", + ? `gradient-bg text-magnolia active invert` + : `${styles.envAnimate} text-magnolia hover:opacity-90 transition-opacity duration-500`, + bodyStyling: "gradient-bg text-magnolia invert transition-all duration-500", description: "Think Green, Code Clean at DeerHack. Dive into the world of climate-positive innovation. Turn environmental challenges into elegant, scalable, and sustainable tech solutions.", },