NYC : Inspired by Cinematic Move
A highly interactive, scroll-driven personal portfolio built with Next.js and Framer Motion, featuring seamless section transitions, momentum locking, and dynamic visual storytelling.
Tech Stack
Next.jsTechnology
ReactTechnology
Framer MotionTechnology
Tailwind CSS v4Technology
TypeScriptTechnology
Project Details
A highly interactive, scroll-driven personal portfolio built with Next.js and Framer Motion, featuring seamless section transitions, momentum locking, and dynamic visual storytelling.
- Cinematic Storytelling: Replaces the traditional static page layout with a continuous, scroll-driven storytelling experience to maximize visitor engagement.
- Immersive "Stages": Features distinct, seamlessly transitioning sections (Hero, Manifesto, Work, Experience, Skills, Publications, Contact) that are dynamically streamed as the user scrolls down the page.
- Flawless User Experience: Designed with clean, one-scroll section transitions so the user gracefully glides from one topic to the next without disjointed jumps or jarring visual artifacts.
- Mobile-First Precision: Engineered to account for mobile browser quirks (such as the URL bar collapsing mid-scroll) by utilizing Dynamic Viewport Height (dvh) metrics, ensuring a consistent layout across all devices.
Technical Overview
Engineered with precise scroll-progress synchronization and custom physics to create a seamless, app-like cinematic experience directly in the browser.
- Scroll-Progress Synchronization: Leverages Framer Motion's useScroll hook to map viewport scroll position to continuous animation values (scrollYProgress), actively driving background cross-fades and content states.
- Custom Scroll Physics: Implemented a custom useSectionSnap hook for clean section-to-section snapping, paired with an anti-skip momentum locking mechanism to prevent users from accidentally flying past critical content.
- Performance-Optimized Rendering: Architected a dual-layer rendering system: background elements stay mounted and cross-fade to prevent visual "popping," while foreground content is lazily mounted only when visible. This optimizes the DOM size and improves accessibility by ensuring screen readers only interact with the current stage.
- Programmatic Navigation: Built an intelligent scrollToStage utility that calculates exact offset distances and scroll thresholds programmatically, ensuring anchor links navigate perfectly regardless of screen size.