Feature/team UI refinement#9
Open
BeeXD wants to merge 9 commits into
Open
Conversation
- Finalized 'Meet the Team' section with a tabbed interface for departmental filtering. - Implemented global custom cursor system using upscaled PNG assets. - Integrated interactive DotGrid and ClickSpark components. - Cleaned up unused components and temporary assets. - Refined Sponsors section with rounded borders and neo-brutalist shadows. - Fixed TypeScript build errors in DotGrid component. - Removed Team Bio section to focus on direct social links.
|
The latest updates on your projects. Learn more about Vercel for GitHub.
|
✅ Deploy Preview for devhack3 ready!
To edit notification comments on pull requests, go to your Netlify project configuration. |
There was a problem hiding this comment.
Pull request overview
This PR refines the event site UI across multiple sections (Hero, Themes, Sponsors, Team), adding new interactive/animated visuals and updating styling/assets to match the DevHack 3.0 design direction.
Changes:
- Reworked Hero to use a vertical “Memories” scrolling photo gallery overlay and new animation timing.
- Replaced the Team carousel/tab structure with a responsive grid-based Team section (with social icons and dividers).
- Redesigned Sponsors with a DotGrid animated background and updated SponsorCard styling; added new fonts/cursors and click-spark effect.
Reviewed changes
Copilot reviewed 19 out of 54 changed files in this pull request and generated 11 comments.
Show a summary per file
| File | Description |
|---|---|
| src/sections/photos.ts | Adds a centralized photo list (webp) used by Hero. |
| src/sections/Hero.tsx | Implements vertical scrolling “Memories” gallery + GSAP timeline updates + date sticker. |
| src/components/BlurText.tsx | Adds a reusable blur-in text animation component. |
| src/sections/Team.tsx | Replaces carousel with a new responsive grid-based Team UI and new datasets. |
| src/sections/Sponsors.tsx | Rebuilds Sponsors section layout and adds DotGrid background usage. |
| src/components/DotGrid.tsx / src/components/DotGrid.css | Adds interactive canvas dot-grid background effect. |
| src/components/SponsorCard.tsx | Updates sponsor card visuals (logo sizing + outlined sticker text). |
| src/components/Themes.tsx | Switches from modal-based themes details to inline expand/collapse behavior. |
| src/sections/Timeline.tsx | Adds a mobile submarine SVG variant and adjusts puff/bubble animation. |
| src/components/ClickSpark.tsx | Adds click spark canvas overlay wrapper used by App. |
| src/index.css | Adds new fonts/tokens, custom cursors, scrollbar utility, and new keyframes/utilities. |
| src/App.tsx | Re-enables Team section and wraps app in ClickSpark; updates nav links. |
| package.json / package-lock.json | Adds react-photo-album + sharp (for optimization script). |
| optimize.cjs | Adds an image-to-webp optimization helper script. |
| src/components/TeamCarousel.tsx / src/components/ParallaxWrapper.tsx / src/components/Marquee.tsx | Removes unused components. |
| CHANGELOG.md | Documents the UI/interaction changes. |
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
Comment on lines
1
to
+3
| import { useState } from 'react'; | ||
| import { motion, AnimatePresence } from 'framer-motion'; | ||
| import TeamCarousel from '../components/TeamCarousel'; | ||
| import { FaLinkedin, FaInstagram } from 'react-icons/fa'; |
Comment on lines
+173
to
+181
| <a | ||
| href={member.instagram || '#'} | ||
| target="_blank" | ||
| rel="noreferrer" | ||
| className="hover:text-[#f97028] transition-colors opacity-80 hover:opacity-100" | ||
| onClick={(e) => e.stopPropagation()} | ||
| > | ||
| <FaInstagram size={18} /> | ||
| </a> |
Comment on lines
+128
to
+165
| const draw = () => { | ||
| const canvas = canvasRef.current; | ||
| if (!canvas) return; | ||
| const ctx = canvas.getContext('2d'); | ||
| if (!ctx) return; | ||
| ctx.clearRect(0, 0, canvas.width, canvas.height); | ||
|
|
||
| const { x: px, y: py } = pointerRef.current; | ||
|
|
||
| for (const dot of dotsRef.current) { | ||
| const ox = dot.cx + dot.xOffset; | ||
| const oy = dot.cy + dot.yOffset; | ||
| const dx = dot.cx - px; | ||
| const dy = dot.cy - py; | ||
| const dsq = dx * dx + dy * dy; | ||
|
|
||
| let style = baseColor; | ||
| if (dsq <= proxSq) { | ||
| const dist = Math.sqrt(dsq); | ||
| const t = 1 - dist / proximity; | ||
| const r = Math.round(baseRgb.r + (activeRgb.r - baseRgb.r) * t); | ||
| const g = Math.round(baseRgb.g + (activeRgb.g - baseRgb.g) * t); | ||
| const b = Math.round(baseRgb.b + (activeRgb.b - baseRgb.b) * t); | ||
| style = `rgb(${r},${g},${b})`; | ||
| } | ||
|
|
||
| ctx.save(); | ||
| ctx.translate(ox, oy); | ||
| ctx.fillStyle = style; | ||
| ctx.fill(circlePath); | ||
| ctx.restore(); | ||
| } | ||
|
|
||
| rafId = requestAnimationFrame(draw); | ||
| }; | ||
|
|
||
| draw(); | ||
| return () => cancelAnimationFrame(rafId); |
Comment on lines
+272
to
+275
| const throttledMove = throttle(onMove, 50); | ||
| window.addEventListener('mousemove', throttledMove, { passive: true }); | ||
| window.addEventListener('click', onClick); | ||
|
|
Comment on lines
+58
to
+60
| a, button, [role="button"], .cursor-pointer { | ||
| cursor: url('/assets/Jeelh-Cursor-Light/Select%20Light.png') 18 2, pointer !important; | ||
| } |
Comment on lines
+39
to
+40
| { id: '1', name: 'Trisha', role: 'Student Co ordinator', image: 'https://api.dicebear.com/9.x/pixel-art/svg?seed=Trisha' }, | ||
| { id: '2', name: 'S Shreenidhi', role: 'Student Co ordinator', image: 'https://api.dicebear.com/9.x/pixel-art/svg?seed=Shreenidhi' }, |
Comment on lines
68
to
69
| const initialize = async () => { | ||
| const context = gsap.context(() => { |
Comment on lines
+91
to
+97
| canvas.width = width * dpr; | ||
| canvas.height = height * dpr; | ||
| canvas.style.width = `${width}px`; | ||
| canvas.style.height = `${height}px`; | ||
| const ctx = canvas.getContext('2d'); | ||
| if (ctx) ctx.scale(dpr, dpr); | ||
|
|
Comment on lines
+10
to
+15
| @font-face { | ||
| font-family: 'Sugar Peachy'; | ||
| src: url('/assets/Sugar Peachy DEMO.otf') format('opentype'); | ||
| font-weight: normal; | ||
| font-style: normal; | ||
| } |
| "react": "^19.2.4", | ||
| "react-dom": "^19.2.4", | ||
| "react-icons": "^5.6.0", | ||
| "react-photo-album": "^3.6.0", |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
No description provided.