Portfolio/docs/redesign/direction.md

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.