MAZIMATES

Mazimates is a cinematic, single-page portfolio website for an escape room review team. The site presents the team’s completed rooms, detailed reviews, member profiles, and an interactive timeline through a dark, high-contrast interface with scroll-driven GSAP animations, a mouse-following spotlight effect, and a film-grain overlay. It was built with Next.js 16 using the App Router, React 19, TypeScript, Tailwind CSS v4, shadcn/ui components, and GSAP with ScrollTrigger for all animation. The project is a fully client-rendered single-page application with static generation, resulting in fast load times, optimized assets, and a lightweight runtime limited to GSAP and minimal UI dependencies.

Challenge & Solution

The primary challenge was building a visually immersive, production-quality portfolio site that feels cinematic without relying on cheap horror tropes or sacrificing performance. The site needed a cohesive dark design system rooted in a specific color palette, a responsive floating glassmorphism navigation bar that animates on scroll, a full-viewport hero section with a background reveal animation and parallax, and multiple content sections each with distinct scroll-triggered entrance animations. To address this, the project uses Next.js 16 App Router for static generation and server-component architecture, Tailwind CSS v4 with a custom theme layer for the design system, and shadcn/ui for accessible, composable UI primitives. All animations are built on GSAP with ScrollTrigger, using a per-component gsap.context() pattern that cleanly scopes animations and prevents memory leaks during lifecycle. The navbar uses GSAP ScrollTrigger to interpolate height, padding, and background opacity based on scroll position, while the hero employs a sequenced timeline with background reveal, title letter-spacing animation, tagline fade-in, and CTA entrance. Environment-based SEO control is implemented through generateMetadata with a NEXT_PUBLIC_NOINDEX variable, allowing full indexing in production while blocking crawlers during development. The component architecture follows a clear separation: layout components for navigation, section components for each content block, and compositional components for overlay effects like film grain and mouse spotlight.

Final Result

The final product is a polished, responsive, dark-mode-only portfolio site that ships as statically generated HTML with a minimal JavaScript payload focused on GSAP animations. The site features seven distinct sections: a floating glassmorphism navbar, a cinematic full-viewport hero with background parallax and content fadeout on scroll, featured escape room cards with hover glow effects, animated statistics counters that trigger on viewport entry, team member profile cards, large-format review cards with rating breakdowns, and a chronological timeline with alternating layout. Every section uses ScrollTrigger-based staggered fade-up reveals for a cohesive entrance experience. A persistent film-grain overlay and mouse-following spotlight add atmospheric depth without impacting layout. The site includes environment-aware SEO metadata with Open Graph and Twitter Cards in production, noindex/nofollow in development, and proper semantic HTML throughout. The result is a site that scores well on performance metrics while delivering a distinctive, cinematic presentation that reflects the team’s identity and attention to detail.