Skip to content
Back to work
Web ApplicationProduction

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

  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

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