Problem

Build a visually striking, cinematic memorial website for 400+ graduating M3 students across 13 classrooms — ensuring fast load times for a media-heavy site while evoking nostalgia and emotional engagement.

Process

• Designed a dark, cinema-themed UI with amber/gold accent palette and movie-poster inspired classroom cards to match the farewell event mood.
• Structured data-driven architecture with a classroom seed system generating 13 detail pages, each with tabbed group photo sources and download links.
• Built a performant gallery with masonry layout, lazy loading via IntersectionObserver infinite scroll (24 images per batch), and a keyboard-navigable Lightbox component.
• Implemented hero section with autoplay background video, smart unmute detection respecting browser autoplay policies, and a mute toggle.
• Applied performance optimizations: hoisted animation variants, functional setState to avoid re-renders, passive scroll listeners, dynamic imports for Lightbox, and React Compiler via babel plugin.

Results

• Delivered a nostalgic, high-impact experience for 400+ students with smooth animations and fast media loading.
• Cinematic movie-poster design received positive feedback from students and staff, reinforcing the farewell theme.
• Responsive across all devices with accessible navigation, keyboard-navigable lightbox, and ARIA tab roles.

Learnings

• Handling browser autoplay policies gracefully — attempting unmute then falling back to muted playback.
• Balancing rich Framer Motion animations with perceived performance on media-heavy pages.
• Structuring static data (classroom seeds) to scale cleanly across 13 dynamic routes without a database.