NeonFolio
Designed and engineered a 60fps animated portfolio with A/B tested CTA flows, unified CMS content, and automated lead routing.
Overview
NeonFolio is my personal branding lab: a high-performance storytelling engine that turns casual visitors into interested collaborators. The build explores how cinematic motion, data, and UX clarity can coexist without sacrificing Core Web Vitals.
Problem
- Design a portfolio that feels like a product launch, not a static resume.
- Balance heavy motion ideas with real-world performance budgets and accessibility.
- Create a content system that makes adding new case studies effortless.
Solution
- Crafted a signature visual language with programmable lightfields, parallax ribbons, and responsive glyphs anchored to my initials.
- Built a modular content layer powering hero spotlights, timelines, and data-driven highlights from a single source of truth.
- Engineered motion primitives with Framer Motion + CSS that respect prefers-reduced-motion and keep LCP under 1.8s.
Results
+42% time on site
Compared to the previous portfolio within the first month of launch.
1.3s LCP
Measured on mid-tier Android devices with Chrome Lighthouse.
Lead quality ↑
Every inbound message now includes project scope, budget band, and timeline via the guided form.
Key Decisions
- Next.js 15 App Router with React 19 streaming + Suspense.
- Framer Motion orchestrating scroll + pointer responsive storytelling.
- Custom Canvas ribbon renderer for live signature lightfields.
Timeline
Discovery
Storyboarding brand pillars, motion tests, and hero narrative.
Design & Build
Component-driven implementation of hero, marquee, projects, and timeline systems.
Refinement
Performance tuning, accessibility audits, and real-device animation QA.