# Redesign direction: "Night Shift"

## Intent (from Xeno)
Take the already strong portfolio and make it award-worthy (Awwwards / FWA / CSSDA). No constraints on style or motion. Haiku discovery first, then brainstorming. Preserve all real content and links. Never merge or push.

Assumptions: evolve rather than replace the identity. Xeno called the current site "very nice" and asked to "transform" it, so the night-drive world and the content stay. Fundamentals stay: speed, mobile, a11y, reduced motion, existing budgets and tests.

## Alternatives considered
1. **Editorial brutalism.** Giant type, no 3D, raw grid. Distinctive, but throws away the working scene engine, soundtrack and the identity Xeno likes. Rejected.
2. **Control room / NOC.** Dashboard UI with live panels. Strong fit for a sysadmin but reads as a template (every dev "terminal" portfolio) and fights the cinematic road.
3. **Night Shift (chosen).** Keep the drive; make the *person* legible inside it. Luca is the sysadmin running the infrastructure behind the screen, on the night shift. The road is the uptime line. The site gains a cinematic title sequence, a real-time operations layer (Bucharest clock, uptime counter, route telemetry), and kinetic editorial typography, so it reads as one authored film rather than a scene plus panels.

## Concept
"Night Shift": it is 3 a.m. in Bucharest, the systems are quiet because someone is watching them. The visitor rides along. Every chapter is a checkpoint with a status line.

## Signature moments
1. **Boot-to-drive intro.** A short, skippable boot log (kernel-style lines using real facts: hosts, services, "nextcloud: migrated, rollback ready") resolves into the hero. SSR content is already in the DOM, so it never blocks content, LCP or no-JS. Skipped for reduced motion and repeat visits.
2. **Kinetic variable type.** Geist variable weight and tracking respond to pointer and scroll on the hero name and chapter titles. Zero extra font bytes.
3. **Headlight cursor.** On fine pointers, a soft beam follows the cursor and brightens panel borders and text under it. Hidden for touch, reduced motion and forced colors.
4. **Chapter numerals.** Oversized outlined section numbers (01 to 08) that drift via CSS scroll-driven animation. Progressive enhancement: static where `animation-timeline` is unsupported.
5. **Operations strip.** A live Bucharest clock and uptime-since-career-start counter plus route position. Honest data only; no fake metrics.
6. **Crafted project cards.** Pointer-tracked spotlight, depth tilt, magnetic CTA, staggered reveal on entry.
7. **Grain + vignette.** A single cheap fixed overlay unifies scene and UI like film stock.

## Engineering approach
Additive layer, not a rewrite: `src/styles/nightshift.css` imported last, plus three small units (`useHeadlight`, `BootSequence.vue`, `OperationsStrip.vue`) wired in `AppShell.vue`. No new runtime dependencies. All motion gated through the existing `useMotionPreferences` policy. Existing tests keep passing; new unit tests cover the pure helpers.

## Success criteria
- Existing unit tests, typecheck and `build:preview` budgets still pass.
- Desktop (1440) and mobile (390) look right in a real browser; no horizontal scroll.
- Reduced motion shows the final state with no animation; keyboard focus stays visible.
- Contrast of new text >= 4.5:1.

## Pushed further later
WebGL title-card shader, per-project cinematic case-study pages, rain-on-windshield transition between chapters, audio-reactive HUD, light "daybreak" theme at the end of the route.