DQ Brand Engine
This site. Built to convert.
The Challenge
Personal brand sites often sacrifice performance for visual impact, or look generic by using templates. The goal was a site that feels cinematic and premium while maintaining sub-4-second builds and 95+ Lighthouse scores.
The Solution
Built on Next.js 14 with a custom neo design system: glass-effect cards, tokenized CSS variables, and three-layer scroll sequences using GSAP ScrollTrigger with canvas-based frame scrubbing. Framer Motion handles section-level animations. The entire visual language is defined through reusable CSS classes and design tokens.
The Outcome
The site delivers a premium cinematic experience with 5 video-backed scroll stages, 120 canvas frames for transitions, and full accessibility support including reduced-motion preferences. It serves as both a portfolio and a live demonstration of technical capability.