Project APEX
This portfolio — engineered like a product, documented like one too
- Role
- Design, Engineering & Documentation
- Period
- 2026
- Next.js 15
- React 19
- TypeScript
- Tailwind CSS
- Framer Motion
- Lenis
The Problem
Most developer portfolios are static résumés with a template skin. The goal here was different: a portfolio that itself demonstrates engineering maturity — specified before implementation, built on a design-token system, animated with intention, and honest about what is real.
Research
A 343-page Software Design & Engineering Bible was written before implementation: information architecture, design tokens, a Motion Bible with timing budgets, per-screen specifications, data models, and quality gates. The implementation answers to that document.
Architecture
01
App Router
Next.js 15 with server components by default
02
Feature Modules
Each section self-contained: components, constants, services
03
Design System
Locked tokens — color, spacing, radius, six type sizes, motion timings
04
Service Layer
GitHub API and contact delivery isolated from UI
Challenges
- Award-level motion while holding Lighthouse performance targets
- Full reduced-motion and keyboard accessibility across every effect
- No fabricated content — every gap renders as a documented honest state
Solution
A creative layer built entirely on transforms and opacity: constellation canvas, mouse-reactive lighting, magnetic cursor and buttons, word-mask typography reveals, scroll-driven timelines — all gated behind prefers-reduced-motion and pointer capability checks.
Results
- Zero TypeScript errors under strict mode, zero lint warnings
- First-load JS ≈ 180 kB with the full motion system
- Every section verified against its written specification
Lessons
- Documentation-first works — ambiguity is where quality dies
- Premium feel comes from restraint plus consistency, not effect count
- Honest empty states beat fake content every time
Roadmap
- Real project imagery
- Live GitHub integration
- APEX Studio admin platform