aarons-portfolio

Aaronautics — Design Brief & Handoff

Purpose of this file: the permanent memory of the project. If you’re a new Claude session (or a new person) picking this up, read this top to bottom first. It captures who Aaron is, what we’re building, every decision made so far, the hard constraints we hit, and exactly what to do next.

Working on Orbit specifically (docs/orbit/)? Read docs/orbit/HANDOFF.md too — it’s the always-current, rewritten-every-shipment doc with the live known-issues list and a map of which file owns which visible piece of Orbit. This file stays high-level.

Last updated: 2026-07-17

1. Who this is for

Aaron (GitHub: aselkridge) — building his first website ever. He cares deeply about design, art, and words (he’s a poet), so “functional but generic” is a failure. He has repeatedly (and correctly) rejected anything that feels like a “default AI-built website.”

He is deliberately more than one thing — that range IS the point of the site:

2. The brand

“Aaronautics” = Aaron + (aero)nautics — a play on aeronautics, nodding to his aerospace degree. The whole site leans into a spaceflight / mission-control theme.

3. The core idea (what makes it NOT a normal website)

This is the heart of it, and Aaron is emphatic about it:

The site is not a “web page.” It’s a place you interface with. A diegetic experience — the controls exist as real objects inside the world, not as web buttons floating on top. You operate a machine; you don’t “click a nav link.”

The intended flow:

  1. Boot screen → pick an aesthetic. Not four flat buttons — it should feel like interfacing with a device. Aaron’s own idea: a console/device on the mission-control desk, showing the current theme, with a physical ◄ / ► button on each side. Press one and the whole room transitions to the next aesthetic.
  2. Mission Control room — with a countdown clock modeled on the real NASA incandescent-bulb clock (the “HOUR / MINUTE / SECOND” one — Aaron sent this reference many times; it’s the signature object).
  3. LAUNCH — press the button (or countdown hits zero): ignition, shake, ascent. Bonus idea from a reference: a launch-sequence panel listing items 001–009 maps beautifully to the 9 AlphaForge builds.
  4. In-ship cockpit — view of space out the window; the console panels are the navigation. Click a station to open that section.

The four aesthetics (Aaron approved these descriptions — keep them)

The music player (important, recurring request)

4. Site structure (pages / stations)

Station Contents
Mission The thesis / mission statement. This is the real flagship — Aaron’s point of view, not AlphaForge. “Built to be more than one thing.”
AlphaForge The proof. 9 GTM builds from the Clay-led cohort — each: problem, what he built, tangible numbers. Raw material = his Clay tables / weekly prompt solutions (to be provided).
Life Relatable page — reading / watching / listening / eating. Anime, hip-hop, food. Conversation starters.
Craft The artist side — poetry, drawings, physics. Made things with no ROI attached.
Notes Blog-style writing and video, easy to navigate — fatherhood, the Bronx, building his home, GTM-for-my-community.

Also: the site should link out to other sites/projects Aaron builds later.

5. Typography (SOLVED — do not regress to system fonts)

Aaron’s biggest recurring complaint was “generic AI fonts.” Fixed by self-hosting real fonts. The Bebop cut (for the anime skin, and the baseline voice):

Each other skin should get its own type cut (retro: warm serif; modern: clean grotesque; futuristic: technical). Fonts are pulled from the npm @fontsource/* packages and inlined — see prototypes/build-type.js for the exact method.

6. The 3D model (DONE — downloaded, optimized, live in a real WebGL scene)

7. Tech decisions

8. Constraints we learned the hard way (READ THIS)

9. Reference material Aaron gave

10. Prototypes so far (also saved as private Artifacts on Aaron’s claude.ai)

Files live in prototypes/. Live previews (Aaron’s account):

(These are artifact-body HTML — they render in the Artifact tool. Opened as raw files they mostly work but aren’t the final site.)

11. Where we left off / NEXT STEPS

Aaron liked: the aesthetic-select concept + descriptions, the diegetic direction, the real-font type identity. He wants photoreal 3D objects (not gamey CSS).

DONE (this session):

  1. ✅ Downloaded sony_walkman_wm-f2078.glb and optimized 167 MB → 4.66 MB.
  2. ✅ Built the real Three.js Walkman preview — orbit + clickable transport keys (play/stop/next/back) wired to the Spotify iFrame API, in the mission-control design system. Web root is docs/ (self-contained: Three.js is bundled & self-hosted, Draco decoder + fonts self-hosted; only the Spotify embed is external).

Deployment — one manual step remaining (needs Aaron / repo admin): GitHub Pages is not yet enabled, and neither the Actions GITHUB_TOKEN nor the API proxy can enable it programmatically (both return “not accessible” — the same write-scope gap noted in NEXT-SESSION.md). To go live with zero further code:

Repo → Settings → Pages → Build and deployment → Source: “Deploy from a branch” → Branch: claude/session-jrd7sj, Folder: /docs → Save. Live URL will be https://aselkridge.github.io/aarons-portfolio/. (Or point it at claude/website-build-nevi30 once this work is merged there — same /docs folder.)

Also done (this session, 2nd pass):

ORBIT (docs/orbit/) — now the main experiment, v3 “game engine” (Aaron loves it):

2026-07-17 late session — Orbit v4 (phases shipped in order, each its own commit):

  1. Aim-at-cursor firing fix, smaller asteroids, brand mark (docs/assets/brand/, favicon+og, name corrected to Aaron Selkridge everywhere).
  2. Minimizable themed panels (CRT zap / holo fold), functional chips, compact mobile, TOUCH FLIGHT (ship follows finger + FIRE button).
  3. IDENTITY commit (revert to undo): sun=clean+clickable=THE MISSION (hero-over- city env), AARONAUTICS wordmark header, location line, station nav strip.
  4. Environments v2: theme-aware (cel vs real), left-dock section HUD (bottom sheet mobile), cameos: coupe drift-by (city), spirit+kid bus stop (forest), sloop (ocean), cypher w/ masked MC vs W-crew (lot), swordsman (hidden dunes).
  5. Achievements (localStorage, themed toasts), gold asteroids every ~₩2,500, alien saucer flyby (shootable, drops facts from data/facts.js — AARON: replace placeholders), hidden 6th planet RONIN unlocks at ₩20,000, eggs: type ‘tank!’ (Swordfish) / press R barrel roll (Rocinante).
  6. Hangar ship-exchange animation on theme switch (desktop).
  7. PREPPED: docs/orbit/worker/alien-worker.js — Cloudflare Worker for the real- LLM alien chat (Aaron chose option B). Aaron must: create Anthropic API key (with spend limit!), create free CF worker, paste file, set secret, send URL. Then build the alien hull chat UI. 8. Galaga cabinet: still queued.

2026-07-17 — Orbit v5 (big feedback batch, shipped as separate commits):

NOT yet done from that batch (next up):

Still to do (next):

  1. Aaron’s real content into Orbit stations (AlphaForge builds, Life picks, poems).
  2. The mission-control desk vision (see §11 notes from 2026-07-17 session) stays the long-term north star — Orbit is the shippable now.
  3. Walkman page: swap sample Spotify reel for Aaron’s real tracks.
  4. Aaron’s Drive reference folder (~27 images) still private — share “Anyone with link” if we want builds matched to his references.

Still open / to ask Aaron: fonts for the non-anime skins; whether to mention HubSpot at all; final page order.