I’m building an interactive portfolio whose sole purpose is to prove my front-end engineering skills, so every pixel, transition, and line of code must feel like a technical flex. The experience will lean into a bold, vibrant aesthetic and revolve around project case studies presented through motion-driven storytelling. Core interactions I need you to engineer: • A cinematic hero that plays an HTML5 Canvas frame-by-frame animation as the user scrolls, perfectly synced to scroll position. • A cursor-spotlight effect that “reveals” hidden code snippets or design layers in real time. • GSAP-powered section transitions, easing curves, and micro-animations that stay buttery smooth at 60 fps. • Physics-inspired 3D tilt cards for each case study, reacting to mouse movement with realistic depth and inertia. • A custom cursor plus inertia-based smooth scrolling that works across modern browsers and feels native on touch devices. • Clean, semantic HTML, modern CSS (preferably leveraging CSS @layers or cascade management), and vanilla JavaScript only—no heavyweight frameworks. Performance is non-negotiable; I want minimal bundle size, efficient asset loading, and a Lighthouse score north of 90 on both mobile and desktop. Please plan for modular, documented code so I can extend the site later. Deliverables 1. Fully responsive, production-ready source code (HTML, CSS, JS) in a Git repo. 2. Build/asset pipeline instructions. 3. A short README that explains how each key interaction is structured. If you have examples of similar scroll-driven or Canvas-based work, share them so I can gauge fit. I’m happy to discuss timelines and milestones once you’ve reviewed the spec.