Developer Portfolio v2
Role: Designer & Full Stack Developer
OVERVIEW
This portfolio is the product — a showcase of what I can do with Next.js, Three.js, and a well-thought-out design system. The home page opens with a cinematic typewriter intro sequence. Every page features unique animated 3D scenes. Navigation uses instant CSS overlay transitions with zero React state lag. The design system covers typography, color tokens, spacing, and component patterns.
METRICS
THE PROBLEM
Most developer portfolios are either a GitHub profile or a generic Vercel template. I needed something that shows both design taste and engineering depth — something a client or recruiter would remember.
THE SOLUTION
Designed a cyber-minimalist dark theme from scratch with a full Tailwind CSS design token system. Built custom Three.js scenes for each page. Implemented an always-on-DOM page transition overlay that fires via direct CSS class manipulation — bypassing React's re-render cycle entirely for zero-latency transitions.
KEY ACCOMPLISHMENTS
Cinematic intro animation: typewriter name sequence with scan lines fires once per session
Large-format hero portrait photo with premium glowing frame as the visual centerpiece
6 unique Three.js WebGL scenes — one per page, each with distinct geometry and motion
Zero-latency page transitions: overlay is always in the DOM, triggered by direct CSS class injection
All routes pre-fetched via router.prefetch() on app mount for instant navigation
Custom design system: 40+ color tokens, typography scale, spacing scale, component patterns
3D ENGINE
Each page mounts a Three.js scene via a shared ThreeObject component that accepts a 'type' prop. Scenes include: neural network with animated particles, torus knot with wireframe material, DNA double helix, rotating wireframe cubes, and abstract node graphs.
TRANSITION SYSTEM
The cyber overlay div is always rendered in the DOM. On link click, a CSS class is synchronously added via a ref — no setState, no re-render. The clip-path animation fires instantly. router.push() is called after the animation completes.
DESIGN SYSTEM
Tailwind CSS v4 with a full @theme block defining 40+ color tokens matching Material Design 3 dark scheme. Typography uses Inter for UI text and JetBrains Mono for terminal elements. All components reference design tokens, never raw colors.
TECHNOLOGY STACK
Need something built like this?
I'm available for new projects — Full Stack, Node.js, databases, or end-to-end. Let's talk about what you need.