← all projects
Next.js
TypeScript
Three.js
Framer Motion
Tailwind CSS
MongoDB
Live2026· Designer & Engineer
Neon Portfolio Platform
This site — a GPU-accelerated portfolio engineered like a product.
Next.jsTypeScriptThree.jsFramer MotionTailwind CSSMongoDB
A Next.js portfolio platform with a handwritten React Three Fiber background, a MongoDB-backed blog and project system, and an admin panel — built to perform, not just to look good.
90+
Lighthouse target
CSS, 0 WebGL
3D fallback
0
Models imported
01 — the problem
What needed solving
Most developer portfolios are either static and forgettable or flashy and slow. I wanted one that proves engineering ability through the codebase itself: real architecture, a real database, and a 3D scene that doesn't tank performance on weaker devices.
02 — architecture
How it's built
Next.js App Router with a clean feature-based structure. The Three.js scene is fully procedural (no imported models) and gated behind a device-tier detector that scales effects — or drops to a CSS fallback — based on hardware. Content lives in MongoDB through a query layer that gracefully falls back to seed data, with a JWT-protected admin panel.
03 — features
What it does
- ›Procedural R3F background with bloom, particles, and a cinematic camera path.
- ›Adaptive performance tiers — full effects on high-end, CSS fallback on low-end.
- ›MongoDB-backed projects, blog, and updates with an admin CRUD panel.
- ›Markdown rendering with syntax highlighting.
- ›SEO: per-route metadata, OpenGraph, sitemap, and robots.
04 — challenges
The hard parts
- ⚠Keeping the WebGL scene at 60fps while staying readable behind dense text.
- ⚠Structuring data access so local Mongo and cloud Mongo are interchangeable.
- ⚠Lazy-loading Three.js so it never blocks first paint or hurts Lighthouse.
