Projects/Portfolio v2

Portfolio v2

frontendLive2025

Cinematic Developer Portfolio

Next.jsFramer MotionGSAPReact Three FiberTailwind CSSTypeScript

Overview

Project Background

Portfolio v2 serves as both a personal showcase and an architectural experiment — proving that production-quality motion design and WebGL experiences can coexist with optimal Core Web Vitals scores.

A complete redesign of my personal portfolio with a focus on cinematic motion design, WebGL effects, and performance-first architecture. Every interaction was crafted to feel like a premium product, not a template.

Technology Stack

Next.js 15TypeScriptFramer MotionGSAP 3React Three FiberDreiLenisTailwind CSS 4Vercel

Key Features

Mouse-reactive hero with WebGL particle field

Cinematic page transitions using Framer Motion's AnimatePresence

Scroll-synchronized GSAP timeline animations

Custom SVG cursor follower with magnetic button effects

Lenis smooth scrolling with scroll-velocity parallax

Engineering

Challenges & Solutions

Challenge

Animation Performance on Low-End Devices

Rich WebGL and Framer Motion animations simultaneously caused jank on mid-range Android devices due to compositor thread saturation.

Solution

Separated WebGL and DOM animation layers using CSS will-change isolation. Three.js canvas runs on a dedicated off-screen canvas worker. GSAP animations are batch-scheduled using GSDevTools timelines.

Challenge

Smooth Scroll + SPA Navigation

Lenis smooth scroll conflicts with Next.js App Router's instant navigation, causing scroll position jumps on route changes.

Solution

Implemented a custom scroll restoration system that pauses Lenis on navigation start, resets scroll to zero, then resumes after the page transition animation completes.

Gallery