This Portfolio

Interactive 3D portfolio built with Next.js and Three.js

Next.jsTypeScriptThree.jsR3FGSAPFramer MotionTailwind

The Problem

A traditional portfolio can't demonstrate frontend engineering skill — a static list of projects says nothing about animation, 3D, performance, or attention to detail.

The Solution

This site is the demonstration: a WebGL particle hero with mouse parallax, scroll-driven animations, a command palette, live GitHub data, and full case-study pages — all while targeting a 95+ Lighthouse score.

Key Features

React Three Fiber hero scene with particles and dynamic lights
GSAP ScrollTrigger + Framer Motion animation system
Command palette (Ctrl+K) with keyboard shortcuts
Live GitHub stats from the public API
Smooth scrolling with Lenis and magnetic interactions
Full SEO: metadata, Open Graph, JSON-LD, sitemap

Architecture

Next.js App Router with static generation for project pages. The 3D scene is dynamically imported client-side to keep initial load fast; content lives in typed data files so updating the site is a one-file edit.

Results

A portfolio that is itself the proof of skill — smooth 60fps animations with a lightweight first load.

Timeline

Built in focused sprints alongside client work

Lessons Learned

· 3D is a garnish, not the meal — capping particle counts and device pixel ratio keeps performance excellent.
· Centralizing content in data files makes a 'living' portfolio actually maintainable.

Future Improvements

· Blog with MDX case studies
· AI assistant trained on my project history

Next project

Freelancer CRM