diff --git a/docs/superpowers/specs/2026-09-02-portfolio-nightdrive-redesign-design.md b/docs/superpowers/specs/2026-09-02-portfolio-nightdrive-redesign-design.md new file mode 100644 index 0000000..edcd283 --- /dev/null +++ b/docs/superpowers/specs/2026-09-02-portfolio-nightdrive-redesign-design.md @@ -0,0 +1,619 @@ +# Portfolio Nightdrive Redesign Specification + +**Status:** Approved visual direction, pending written specification review +**Date:** 2026-09-02 +**Branch:** `codex/portfolio-nightdrive-redesign` +**Worktree:** `/home/luca/Documents/Portfolio/.worktrees/portfolio-nightdrive-redesign` +**Product:** Pre-rendered single-page portfolio with progressive Vue enhancement and an optional Three.js night-drive world + +## 1. Purpose + +Transform the current technically functional visual alpha into a polished, memorable portfolio for hiring managers and technical interviewers. The experience remains a native-scrolling professional document, while the persistent Three.js world supplies personality through an original retro-futuristic chase drive. + +The redesign must approach the spatial richness and motion quality of The Gallery's Nightdrive Records implementation without copying its branding, writing, recording, or proprietary-looking assets. The portfolio adds systems that the reference does not provide: an original chase-view grand tourer, readable section signs, chapter progression, a professional information layer, a responsive infrastructure diagram, authentic project media, and an original procedural soundtrack. + +This specification refines the approved 2026-09-01 journey architecture. It does not reopen deployment, release signing, supply-chain, Search Console, advanced SEO, or final certification work. + +## 2. Design read and dials + +Reading this as an overhaul of a developer and systems portfolio for hiring managers, using a cinematic retro-futuristic night-drive world with a restrained professional information layer. + +- `DESIGN_VARIANCE: 8` +- `MOTION_INTENSITY: 8` +- `VISUAL_DENSITY: 4` +- Page theme: dark only, locked across the full document +- Information accent: cyan only +- Environmental light colors: magenta and amber, not reused as competing interface accents +- Shape rule: 12px surfaces and popovers, 10px interactive controls, square brand marks where their official artwork requires it + +The selected layout model is the **immersive chase corridor**. The car remains a stable lower-center anchor. Road, terrain, atmosphere, signs, and chapter lighting move around it. Information occupies deliberately composed left, right, or centered corridors while preserving sightlines to the horizon and vehicle. + +## 3. Current-state audit + +### 3.1 Foundations to retain + +- Vue 3, Vite, TypeScript, pre-rendered semantic HTML, and progressive enhancement. +- Canonical section IDs, native anchors, and no router. +- Complete content without WebGL, audio, hydration, or JavaScript. +- Keyboard navigation, visible focus, reduced-motion handling, Static mode, print view, and no-JavaScript reading path. +- Scene lifecycle states, abort and generation guards, context-loss handling, deterministic teardown, and the `SceneResourceBag`. +- Adaptive quality, GPU accounting, deferred Three.js loading, and existing failure-injection seams. +- Audio lifecycle, explicit activation, interruption handling, mute, volume, and teardown. +- Manifest-bound project media, lazy media behavior, accessible video, and the asset-sanitization pipeline. +- Existing content schemas and privacy names unless a visual requirement needs a typed extension. + +### 3.2 Visual systems to replace + +- Flat terrain planes with no meaningful vertex displacement. +- A simple slab road with isolated geometry markers and weak material response. +- A flat circle sun without controlled scan bands, halo depth, or horizon integration. +- Sparse scene depth and a minimal vignette-only post pass. +- A box-derived car with an unreadable silhouette. +- Section signs mapped directly to document distance. +- Alternating generic bordered panels that repeat one layout family throughout the page. +- Inter and system monospace defaults, section-number labels, all-caps headings, decorative dots, and repeated technical-container styling. +- The permanently exposed control bar and separate route HUD that compete with the car for the bottom of the viewport. +- Four disconnected infrastructure rectangles. +- Toolkit placeholders without official icons. +- Equal visual priority for all projects and no authentic project media. +- Engine and road noise presented as a soundtrack despite having no musical layer. + +## 4. Experience principles + +1. **The world is continuous.** Native scrolling never cuts to a different page or hijacks input. The drive remains visible behind the document from start to destination. +2. **The car is the anchor.** Camera, road convergence, panel corridors, signs, and HUD placement are composed around a stable chase view. +3. **Information stays credible.** Panels use substantially opaque near-black surfaces, calm typography, short accent moments, and no game-menu framing. +4. **Motion communicates state.** Acceleration shows input energy, signs announce an upcoming section, chapter changes show route progression, and controls acknowledge activation. +5. **Static remains first-class.** Reduced motion and Static mode provide a composed destination image and complete content without simulating a paused broken scene. +6. **Project evidence is authentic.** Only supplied work appears as project media. No AI-generated substitutes or fake interface screenshots. +7. **The first screen is complete.** Name, equal hybrid role, value proposition, Explore work, and Start the drive are visible without scrolling. + +## 5. Visual system + +### 5.1 Typography + +Use a self-hosted sans-serif pairing with clear licensing: + +- Display and body: Geist Variable. +- Technical labels and route data: Geist Mono. +- Obtain both families from a verified licensed source, self-host them, and record their license in the repository. +- No serif display treatment. +- Headings use sentence case except the two approved destination lines and the Start the drive control. +- Display tracking is tight but not compressed. Body copy targets 60-65 characters per line. +- All visible copy uses regular hyphens. The page contains no em dash or en dash characters. +- Section-number labels and decorative index notation are removed. + +### 5.2 Color + +Information tokens: + +- `--canvas`: blue-black, never pure black. +- `--surface`: near-black navy at 95 percent opacity where text overlaps the world. +- `--surface-strong`: the same near-black navy at 97 percent opacity for mobile overlays and high-energy horizon crossings. +- `--surface-soft`: a slightly lighter same-hue surface at 92 percent opacity for nested evidence that does not cross bright scenery. +- `--text`: soft white with AAA-target contrast for primary copy. +- `--text-muted`: cool gray with WCAG AA contrast. +- `--accent`: restrained cyan for focus, active navigation, links, and one primary interface action. +- `--focus`: warm pale amber reserved for focus visibility, not general decoration. + +World-only colors: + +- Cyan for near road edges, lower grid energy, underglow, and cool atmospheric depth. +- Magenta for higher terrain ridges, rear light, and deep-night horizon energy. +- Amber for sun warmth, center-lane energy, and pre-dawn progression. + +Interface buttons do not alternate between cyan, magenta, and amber. Cyan is the single action accent. + +### 5.3 Surfaces and depth + +- Panels use one 12px radius, a quiet internal highlight, a same-hue border, and a tinted shadow. +- No broad glass blur. Text surfaces remain substantially opaque and readable when the scene becomes bright. +- Nested content is grouped with spacing, type, and sparse dividers rather than a card inside every card. +- A fixed low-opacity grain layer may be used only as a pointer-free viewport overlay. +- CRT treatment is limited to the Three.js output and global atmosphere. Body text never receives scanlines, chromatic aberration, or glow. + +### 5.4 Layer scale + +- `0`: static poster and scene canvas +- `1`: atmospheric viewport treatment +- `2`: document content +- `3`: site navigation +- `4`: route HUD and drive controls +- `5`: control popover +- `6`: skip link and transient error notices + +No arbitrary z-index values are introduced outside this scale. + +## 6. Page composition + +The page retains the existing anchors but each section gets a distinct layout family. + +### 6.1 Start + +- Initial viewport uses a left-biased identity composition with the road horizon visible to the right and the car below. +- Text stack contains name, role, value proposition, and actions only. +- `Explore work` links to `#selected-builds` and works without audio or scene activation. +- `START THE DRIVE` is visible in the compact pre-activation HUD and does not gate exploration. +- The hero uses `min-height: 100dvh`; the primary content and both actions remain visible in the initial viewport. + +### 6.2 Profile + +- A restrained right-side dossier surface with a short introduction and screening facts. +- Facts use aligned label/value rows without section numbering, decorative dots, or a long bordered table. +- The open left corridor preserves the road and terrain. + +### 6.3 Experience + +- A wide left-side professional record with reverse chronological roles and a clearly separated systems-operations proof block. +- Roles use typographic hierarchy and whitespace rather than repeated equal cards. +- The systems evidence receives a distinct same-surface composition, not a nested generic card. + +### 6.4 Infrastructure + +- A centered, wider technical canvas that temporarily narrows the visible road corridor but keeps the horizon and car edges visible. +- The real architecture diagram is the main visual. +- Supporting copy is grouped under traffic flow, identity boundary, service layer, and operations rather than repeating a long list of four generic bands. + +### 6.5 Selected builds + +- The private self-hosted medication tracker and Footy Tracker are the two primary software case studies. +- Each receives an authentic media-led composition with problem, contribution, decisions, outcome, and link state. +- The two compositions use different media proportions to avoid repeated split layouts. +- Opinion Dynamics Simulation appears as a smaller research module following the two primary studies. It remains substantive but clearly supporting. + +### 6.6 Additional work + +- Additional work becomes an asymmetric evidence rail or compact mosaic, not a second Selected builds section. +- The private game prototype, private healthcare platform, Currency Converter, and Linux Modding Guide remain concise. +- Available supplied media creates visual variation. Missing media does not trigger invented screenshots. +- Private projects never receive repository links. + +### 6.7 Toolkit + +- Technologies appear as a compact responsive icon registry grouped into systems and delivery, software and data, and additional experience. +- Every item shows its official icon and visible technology name. +- Official brand icons come from Simple Icons or an official project asset with recorded licensing. +- UI controls use one Phosphor Vue family at a consistent weight. Brand icons are exempt from the UI icon-family rule because their official marks must remain recognizable. +- No decorative colored status dots appear. + +### 6.8 Contact destination + +- The environment reaches a calm pre-dawn state with less magenta, warmer horizon light, lower terrain energy, and a quiet car idle response. +- Display copy is exactly: + + `END OF THIS ROAD.` + `START OF THE NEXT.` + +- Primary action label is `START A CONVERSATION` and uses the existing `mailto:` destination. +- The visible email remains available as fallback text. +- The CV message remains: a current or role-specific CV is available by direct contact. +- GitHub, GitLab, and LinkedIn show recognizable official icons and visible names. + +## 7. Three.js world reconstruction + +### 7.1 Architecture + +Retain `createSceneController` as the lifecycle authority. Replace the current procedural generation internals with focused world modules: + +- `world/road.ts`: shader-driven road bed, edge energy, center markers, shoulder reflection, and flow. +- `world/terrain.ts`: indexed line-segment grid with vertex-shader displacement and distance-aware color/fade. +- `world/sky.ts`: chapter-interpolated sky gradient and atmospheric color. +- `world/sun.ts`: scan-band sun disc, halo, horizon occlusion, and chapter warmth. +- `world/atmosphere.ts`: stars, horizon haze, distant light sources, and speed streaks. +- `world/car.ts`: original modeled grand tourer and its suspension/light response. +- `world/sign.ts`: world-space sign mesh and texture presentation. +- `world/post-processing.ts`: quality-aware composer and final restrained CRT pass. +- `world/environment.ts`: builds modules, owns chapter interpolation, and coordinates the render frame. + +The existing resource bag owns every geometry, material, texture, render target, listener, and disposable runtime object. + +### 7.2 Camera and road + +- Perspective begins near 68-72 degrees at cruise and eases wider under acceleration. +- Camera remains behind and above the car, looking beyond the horizon convergence point. +- Road occupies a convincing central valley with shoulders wide enough to frame the vehicle. +- Continuous shader flow replaces moving individual center-marker meshes. +- Near-road material stays dark and low-reflective, with restrained cyan shoulder response and amber center energy. +- Acceleration affects flow rate, FOV, subtle camera settling, and light streak length. It does not shake body text or move the semantic document. + +### 7.3 Terrain + +- Build one wide indexed line grid across the road and both landscapes. +- Vertex displacement combines multiple deterministic noise octaves. +- A smooth center mask creates a flat road valley while ridges grow toward the edges. +- Grid color blends from cooler cyan near the valley to restrained magenta on higher ridges. +- Distance fog, line opacity, and horizon haze create depth instead of drawing every line at equal intensity. +- Noise and road phases wrap without visible jumps. +- Low quality reduces grid density and octave count without changing composition. + +### 7.4 Sky, sun, and atmosphere + +- The sky is a vertically layered color field that interpolates through journey chapters. +- The large sun sits at the road convergence point and uses a shader for vertical scan bands and edge softness. +- A separate halo and horizon haze layer create depth without turning the full page into a neon glow. +- Stars vary in size and brightness with deterministic seeds. Pre-dawn chapters reduce their visibility. +- Roadside streaks remain nearly invisible at cruise and lengthen only under acceleration. +- Near particles stay sparse enough not to resemble snow or dust. + +### 7.5 Post-processing and CRT + +High quality: + +- Render pass. +- Restrained UnrealBloomPass tuned for sun, road energy, car lights, and bright grid peaks. +- Final shader with subtle vignette, scanline modulation, and low-amplitude grain. + +Medium quality: + +- Reduced pixel ratio and terrain density. +- Lower-resolution bloom target and reduced streak count. +- Same composition and chapter behavior. + +Low quality: + +- Direct renderer or a single lightweight final pass. +- No bloom render target. +- Reduced terrain, stars, and streaks. +- Car, road, sun, and chapter progression remain recognizable. + +Static and reduced motion: + +- Do not initialize or download the live scene when policy disallows it at startup. +- Render a composed local poster derived from the implemented world, not an unrelated generated image. +- Suppress signs, speed streaks, suspension motion, and automatic media. + +### 7.6 Environmental chapters + +Chapter properties interpolate over time instead of changing in one frame: + +- `deep-night`: cool sky, visible stars, magenta horizon, restrained sun. +- `systems`: clearer cyan road valley and slightly stronger structured grid. +- `infrastructure`: deeper blue atmosphere and stronger horizon definition. +- `builds`: richer road response and balanced cyan/magenta terrain. +- `pre-dawn`: reduced stars, warmer sun, cooler terrain saturation. +- `destination`: calm amber horizon, low streak energy, softened magenta, stable vehicle idle. + +## 8. Original chase-view car + +The car is built procedurally from original Three.js geometry. It must not copy a recognizable production model. + +### 8.1 Form + +- Low, wide wedge silhouette with a planted rear stance. +- Faceted lower body, intentional rear shoulders, tapered cabin, and sloped rear glass. +- Rear fascia includes one continuous red light bar, recessed lower panel, and small cyan reflection accents. +- Visible wheel and tire volumes sit within the body rather than outside a rectangular slab. +- Body planes use controlled roughness and metalness so they catch the horizon without becoming mirror chrome. +- Glass remains dark and readable as a different material from the body. + +### 8.2 Motion and light + +- The group remains compositionally stable at the lower center. +- Acceleration produces a subtle rear squat and damped suspension response. +- Cruise adds a barely perceptible road-frequency movement. +- Steering sway is minimal and never drifts off the road center. +- The rear light bar gains intensity under acceleration without flashing. +- Cyan underglow is faint, constrained below the chassis, and reflected into the road rather than drawn as a large transparent rectangle. + +### 8.3 Responsive behavior + +- Desktop shows the complete rear silhouette and both wheels. +- Tablet slightly reduces scale and lowers the car to protect content sightlines. +- Mobile simplifies secondary geometry and keeps only the silhouette, light bar, wheels, glass, and restrained underglow. +- Short landscape viewports may reduce or hide the car if it would cover essential content or controls. + +## 9. Section-sign lifecycle + +Replace the distance-mapped `nextSign` output with a clock-driven controller. Document geometry chooses candidates; the animation clock owns presentation. + +### 9.1 States + +```text +idle -> anticipate -> approach -> dwell -> depart -> cooldown -> idle +``` + +- `anticipate`: candidate latches for 300ms before it becomes visible. +- `approach`: sign travels from the horizon with eased scale, position, and opacity for 900ms. High scroll acceleration may shorten this to 650ms, but no further. +- `dwell`: sign occupies the readable roadside position for at least 1400ms. +- `depart`: sign moves behind the vehicle and fades over 700ms. +- `cooldown`: prevents immediate relatching and one-frame flashes for 350ms. + +### 9.2 Eligibility and precedence + +- Only one sign may exist at a time. +- Ordinary forward passive scrolling may latch the next adjacent section. +- Scroll acceleration may shorten approach slightly, but never the minimum dwell. +- Reverse input cancels a not-yet-readable sign or completes a readable sign cleanly. It does not play a reversed label. +- Explicit anchor navigation, history restoration, multi-section jumps, Static mode, and reduced motion suppress sign creation. +- A large jump clears the current lifecycle without teleporting a different sign into its place. +- Hysteresis around section boundaries prevents repeated enter/exit toggles. + +### 9.3 Rendering + +- Sign sits beside the road rather than floating directly over the car. +- Panel proportions, mounting geometry, and lighting read as an environmental object. +- Copy uses the plain navigation label only. No route numbers or index notation. +- Text texture updates only when the latched target changes. +- Departure moves behind the camera corridor with opacity and transform animation only. + +## 10. Scroll and motion data flow + +Use one shared animation-clock path for continuous values. + +1. A frame sampler reads the current document scroll position without storing per-frame values in reactive component state. +2. The existing pure scroll-drive controller converts samples into route progress, direction, acceleration, and drive speed. +3. Semantic active-section selection remains independent of Three.js and uses measured heading geometry plus observers. +4. The sign controller consumes active section, next candidate, navigation source, direction, and the animation clock. +5. The scene runtime consumes a compact immutable snapshot for each render frame. +6. Vue receives throttled display snapshots only when route labels or control status actually change. + +Replace the current independent raw scroll listeners in `useScrollDrive` and `useJourneySections` with this shared sampling path. Continuous scene values are sampled by the animation clock; structural section changes use observers and scheduled measurements. Do not add another raw `window` scroll handler. + +## 11. Compact vehicle HUD + +### 11.1 Before activation + +- A compact lower-left control exposes `START THE DRIVE` with a clear play or ignition icon. +- A lower-right route indicator shows current section and progress in a quiet form. +- Motion and quality remain accessible from a small settings control. +- The start action is inviting but does not dominate the identity or Explore work action. + +### 11.2 After activation + +- The start surface collapses into a small horizontal cluster. +- Direct controls: mute/unmute, volume access, motion pause/resume, and settings. +- Quality and secondary status live in a 12px popover rather than remaining exposed. +- Status copy appears only when meaningful: preparing, audio unavailable, Static, or reduced motion. +- Buttons use Phosphor icons with accessible names and visible tooltips on hover/focus. +- Every target is at least 44 by 44 CSS pixels and has pressed, hover, focus, disabled, and active feedback. + +### 11.3 Responsive behavior + +- Desktop balances the control cluster against the route HUD while leaving the car center clear. +- Tablet uses safe-area-aware left and right insets. +- Mobile uses one compact horizontal lower control row. Secondary settings open upward. +- Narrow desktop sidebars remain horizontal while width permits. They do not switch to a tall stacked footer based solely on height. +- Short landscape layouts may place the cluster in normal flow near Contact if fixed positioning would obscure content. + +## 12. Procedural soundtrack + +Retain `createAudioController` and replace the underlying graph with separate musical and vehicle layers. + +### 12.1 Mixer + +```text +music bus -> music filter -> music gain \ +engine bus -> engine filter -> engine gain -> master compressor -> master gain -> output +road bus -> road filter -> road gain / +``` + +- Master volume and mute operate after all buses. +- Music, engine, and road levels are independently balanced. +- The graph remains opt-in and is created synchronously inside the activating gesture. + +### 12.2 Music + +- Original procedural synthwave arrangement around a restrained 82-88 BPM pulse. +- Four-chord minor progression using pad voices with slow attack and release. +- Bass sequence locked to the progression and subdivision clock. +- Sparse kick, soft snare or clap, and restrained pulse percussion. +- Optional short melodic motif used infrequently. +- Atmospheric noise or filtered texture supplies continuity between musical events. +- Scheduling uses look-ahead Web Audio timing, not one UI timer per note. + +### 12.3 Acceleration coupling + +- Scroll acceleration may raise the music filter, add a small percussion layer, increase engine pitch, and lift road texture. +- Musical tempo, harmony, and note order do not change chaotically with every wheel event. +- Coupling values are smoothed and bounded. +- Returning to cruise settles naturally without muting the music. + +### 12.4 Failure and lifecycle + +- Rejected start shows `Audio unavailable. Continue without sound.` +- Visibility and mobile interruption suspend and resume according to the existing lifecycle. +- Rapid activation creates one context and one graph. +- Teardown stops scheduled sources, clears schedulers, disconnects buses, and closes once. + +The procedural music engine is the only planned Luna-high implementation assignment. The primary agent owns its interface, integration, balancing, browser iteration, and final acceptance. + +## 13. Infrastructure diagram + +Build a functional responsive SVG or semantic diagram, not decorative artwork. + +### 13.1 Nodes and flow + +Primary traffic path: + +```text +Personal domain + -> Nginx reverse proxy on a repurposed Linux PC + -> optional Authelia protection for services without suitable native authentication + -> Docker service layer + -> Nextcloud, SearXNG, Vaultwarden, Gitea +``` + +Supporting controls: + +- Let's Encrypt and Certbot connect to the domain and Nginx certificate lifecycle. +- fail2ban protects exposed entry points around the host-level ingress boundary. +- Passkeys, two-factor authentication, and recovery connect to the identity boundary at a non-sensitive level. +- Pi-hole appears as a smaller network utility, not as an internet-facing service. + +### 13.2 Trust boundaries + +- Internet and public-domain boundary. +- Host-level ingress and security boundary. +- Identity gate where applicable. +- Docker service boundary. +- Local network utility boundary. + +No real hostname, IP address, port, username, version, threshold, recovery endpoint, or private service name appears. + +### 13.3 Responsive and accessible form + +- Desktop uses a left-to-right flow with clear connectors and grouped boundaries. +- Tablet reduces connector complexity and stacks supporting controls around the primary path. +- Mobile becomes a vertical traffic flow with the same node order. +- Visible legend explains boundary and connector meanings. +- Adjacent structured text describes the same traffic path and controls. +- Relationships do not rely on color alone. + +## 14. Authentic project media + +### 14.1 Current dependency + +The repository and current attachment set do not contain the supplied source binaries. The media slice cannot begin until the source root is identified or the files are attached again. + +### 14.2 Development preparation + +- Use the existing preparation pipeline with an explicit untracked source root and mapping. +- Create safe local derivatives first. Formal release signing and final-byte approval remain deferred. +- Strip metadata and external references. +- Use synthetic demonstration data for medication and healthcare interfaces. +- Remove private URLs, identifiers, personal data, medication data, infrastructure details, and unintended browser chrome. +- The private self-hosted medication tracker never exposes its unpublished product name. +- The private game prototype never exposes its product or repository name. +- Game footage begins after the title screen and uses gameplay only. +- Private projects remain without repository links. + +### 14.3 Presentation + +- Primary case-study media receives intrinsic dimensions and a stable aspect ratio. +- Image captions are functional and concise. +- Video keeps explicit play/pause, reduced-motion poster behavior, offscreen pause, and accessible failure text. +- Media failure keeps project copy and link state intact. +- No AI-generated or stock substitute is used when a supplied derivative is missing. + +## 15. Verified public links + +- Inspect `https://github.com/LucaPisl` and match repositories by project identity, README, language, and visible purpose. +- Add links only when a repository match is verified. +- Required candidates: Footy Tracker, Opinion Dynamics Simulation, Currency Converter, and Linux Modding Guide. +- Do not invent URLs or expose private repositories. +- If a match remains ambiguous after repository inspection, request Luca's decision for that project only. +- Public links use recognizable Git hosting icons, visible action labels, and safe external-link attributes. + +## 16. Responsive integration + +### 16.1 Desktop, 1280px and above + +- Full chase composition, complete car model, highest permitted world density. +- Content corridors may occupy 42-58 percent of width depending on section. +- Navigation remains one line and no taller than 72px. +- Panels never cover both the horizon and car simultaneously. + +### 16.2 Tablet, 768-1279px + +- Reduced car scale, terrain density, and panel overlap. +- Content uses one primary column with controlled left/right offset, never alternating narrow half-width cards. +- HUD and route status use safe-area-aware insets. +- Infrastructure diagram uses the tablet flow. + +### 16.3 Mobile, below 768px + +- Strict single-column content with 16px horizontal padding. +- Near-black surfaces become more opaque for readability. +- Secondary car detail and far atmosphere are reduced. +- Navigation becomes a compact accessible menu or horizontally efficient control without a two-row fixed link wall. +- Bottom controls remain one compact row and do not cover text or media. +- Every section declares its mobile composition explicitly. + +### 16.4 Short and narrow desktop viewports + +- Fixed HUD stays horizontal when width permits. +- Car scale and vertical position adapt before controls move into normal flow. +- Height alone does not trigger the current tall stacked control layout. +- Contact receives enough safe-area padding for every action to remain unobscured. + +## 17. Accessibility and resilient states + +Preserve the current semantic and accessibility contracts while focusing this phase on visual quality. + +- Canvas, car, road, particles, signs, and route HUD remain decorative and hidden from assistive technology. +- Scene description remains available as concise offscreen text. +- Navigation, content, links, diagrams, media, and contact actions remain semantic. +- Reduced motion prevents scene initialization at initial load and disables section signs and automatic media. +- Static poster, loading, scene failure, audio failure, media failure, and missing optional social links each retain a composed layout. +- Loading uses the poster and stable HUD state, not a generic spinner. +- Control labels, focus rings, helper text, and errors meet WCAG AA contrast. +- Keyboard focus never follows passive scrolling or decorative sign state. +- Content remains usable at 320 CSS pixels and with text spacing overrides. + +## 18. Performance constraints + +- Keep Three.js and all scene code behind the existing deferred import. +- Do not download live-scene code for initial reduced-motion or Static policy. +- Preserve the existing transfer and runtime budget gates as regression signals. +- High quality caps device pixel ratio through the existing quality policy. +- Bloom and additional render targets must be reflected in runtime GPU accounting. +- Terrain, stars, streaks, car detail, and post passes scale by quality tier. +- Animate transforms, opacity, shader uniforms, and audio parameters only. +- Avoid per-frame Vue state updates and layout reads inside the Three.js render path. +- Resize recomputes renderer and camera dimensions only when dimensions change. +- Every animation and scheduler has deterministic cleanup. + +## 19. Source originality and licensing + +- The Nightdrive reference supplies a quality bar and technical vocabulary, not portfolio branding or content. +- Build original shader organization, parameter values, color calibration, car geometry, sign system, soundtrack, and UI composition. +- Do not copy Nightdrive's names, writing, cassette artwork, recording, dashboard labels, metrics, or decorative assets. +- If implementation substantially adapts MIT-licensed reference code, include Kyle Provost's MIT notice in a third-party notices file and annotate the adapted module. +- Official icons and any added fonts include their required license records. + +## 20. Implementation ownership and review cadence + +Primary agent owns: + +- visual direction and token system; +- Three.js scene reconstruction; +- car reconstruction; +- section-sign lifecycle and rendering; +- information-layer styling and content composition; +- HUD and controls; +- infrastructure diagram; +- responsive integration; +- browser screenshots, motion comparison, and iterative refinement. + +One Luna-high subagent may implement the isolated procedural music engine after the scene and HUD interfaces are stable. It does not redesign shared visual files. + +Review cadence: + +- One quick focused review after the integrated scene, car, sign, and HUD milestone. +- One final integrated visual and UX review. +- No reviewer after every task and no simultaneous redesign of overlapping files. + +## 21. Implementation slices + +1. Establish visual tokens, font plan, scene interfaces, and isolated preview branch. +2. Reconstruct road, terrain, sky, sun, atmosphere, and quality-aware post-processing. +3. Rebuild and integrate the original chase-view car. +4. Replace sign mapping with the clock-driven lifecycle. +5. Replace the fixed controls with the pre-activation and collapsed HUD states. +6. Implement and integrate the procedural soundtrack. +7. Recompose the information layer and section rhythm. +8. Build the responsive infrastructure diagram and icon registries. +9. Prepare and integrate authentic project media and verified public links. +10. Add destination copy, Explore work, contact action, and project-priority refinements. +11. Perform integrated desktop, tablet, mobile, Static, reduced-motion, and failure-state browser refinement. + +## 22. Visual acceptance + +This redesign phase is acceptable only when: + +- The world has convincing road convergence, displaced terrain, atmospheric depth, a layered horizon, and restrained post-processing. +- Acceleration is immediately perceptible but native scrolling remains normal. +- The car reads as an intentional original grand tourer rather than a box. +- Signs approach, dwell, and depart without flashes, teleports, or overlapping labels. +- Start the drive is inviting before activation and controls become compact afterward. +- The information layer reads as a professional portfolio, not a game menu or generic AI card layout. +- The two leading software case studies clearly outrank Opinion Dynamics and Additional work. +- The infrastructure diagram communicates traffic flow and trust boundaries on desktop and mobile. +- Toolkit and social links show official icons and visible names. +- Authentic project media is integrated without private identifiers. +- Destination copy and Start a conversation are present. +- Keyboard, reduced-motion, Static, no-JavaScript, and lifecycle foundations show no known regression. +- The preview has been inspected directly against the reference quality bar at representative desktop, tablet, mobile, and narrow-short viewports. +- Luca receives a working preview and visually approves it. + +The redesign must not be described as finished before the final working preview and Luca's visual review.