From 12a4e196ab2a37119dfa09322bdabe26aa7bdad8 Mon Sep 17 00:00:00 2001 From: LucaP Date: Sat, 10 Oct 2026 14:11:22 +0300 Subject: [PATCH] docs: record Night Shift redesign direction --- docs/redesign/direction.md | 35 +++++++++++++++++++++++++++++++++++ 1 file changed, 35 insertions(+) create mode 100644 docs/redesign/direction.md diff --git a/docs/redesign/direction.md b/docs/redesign/direction.md new file mode 100644 index 0000000..c1ee54a --- /dev/null +++ b/docs/redesign/direction.md @@ -0,0 +1,35 @@ +# 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.