Skip to content
Back to projects
Web ApplicationProduction

Project APEX

This portfolio — engineered like a product, documented like one too

Role
Design, Engineering & Documentation
Period
2026
Next.js 15React 19TypeScriptTailwind CSSFramer MotionLenis

Chapter 01

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.

Chapter 02

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.

Chapter 03

Architecture

  1. 01

    App Router

    Next.js 15 with server components by default

  2. 02

    Feature Modules

    Each section self-contained: components, constants, services

  3. 03

    Design System

    Locked tokens — color, spacing, radius, six type sizes, motion timings

  4. 04

    Service Layer

    GitHub API and contact delivery isolated from UI

Chapter 04

The 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.

Chapter 05

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

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 Learned

  • 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

Want the deeper technical story?

I'm happy to walk through architecture decisions, trade-offs, and demos.