portfolio-next/DESIGN.md

Design

Derived from the three chosen mockups. They are the visual source of truth; this file summarises them. When they disagree with this file, the mockup wins and this file gets fixed.

Principles (owner's, see docs/inspiration.md)

• Calm until touched: nothing moves unless the visitor acts. No autoplay, no scroll-jacking, no loading screens.
• A space to explore: varied ways of showing information (drawn showcases, lists, side sheets), restrained.
• Ordinary, fast, scrolling HTML pages. No canvas/WebGL scenes or game feel.
• Restrained depth and glow are fine; the over-polished "sleek" round was rejected as too modern.
• Never purple/blue "AI" gradients, neon, emoji-as-icons, or generic bento grids.
• Honour prefers-reduced-motion. Pointer effects only behind (hover: hover).

Start page — mockups/nav-d.html

Two halves meeting at a seam; the name is split across it ("Lucas" mono left, "Winther" serif right). Hovering a side widens it; clicking enters. A small dark pill on the seam opens "everything at once" (key G).

• Left/work: #e8eae6 paper with a 24px grid, ink #1c2024, accent #d9532b; IBM Plex Mono + Plex Sans.
• Right/off the clock: plum #2a1a1f with grain, cream #f1e6d6, amber #e8b04a, rose #c9706b; Fraunces + Caveat.
• Footer strip #121416: contact links, /simple, the "projects made" AI preference.

Work space — mockups/tech-r3-c.html

Warm dark. --bg #131210, --panel #1b1916, --panel2 #221f1b, --line #2b2824, --ink #ede7dd, --mute #8e877c, single accent --acc #ea7444, status green --ok #a8b48f only inside drawn UIs. Geist + Geist Mono. Plum "off the clock →" edge on the right. /work/ since spec 009 follows mockups/work-k2.html (built on tech-r3-c; screenshot mockups/shots/work-k2-1440.png): top bar (← gate; Projects, Record, Writing, CV; AI filter) → CV header, one card: "CV in ten seconds" (name, tagline, now/before/degree/contact rows, site.now as a short list, buttons) left; Highlights (result in the accent, title plain) and Keeping up (big accent seal + certificate count, mono course line, topic chips) on --bg2 right; one column when both right blocks are empty → Projects I'm proudest of, up to six panels laid out wide · half · half · wide reversed · half · half (a lone last half goes wide), the AI legend line and the hover hint stacked at the heading's right; screenshots muted (saturate(.5) brightness(.8)) until the panel is hovered or focused within, drawings never → Also made, the filterable list with a side sheet (Esc closes, ←/→ steps, #/id deep links); while searching, a compact strip of matching courses (seal, title, lab tag, provider · month · hours) sits above the rows → Record, two cards: recognition & volunteering (mono group labels, accent on highlighted results) and keeping up (summary line, topic table) → writing and work history. The seal (a ring with two ribbon tails, currentColor) is the only certificate mark: no trophies, badge walls or medals. /work/learning/ is a quiet table page in the same frame.

Personal space — mockups/personal-r2-b.html

Light cream. --bg #f1e6d6, --card #f8f1e6, --line #dccbb2, --ink #2a1a1f, --mute #7d6a5c, --acc #e8b04a, --rose #c9706b, --sage #6f7f45. Fraunces (display and body), Caveat (handwritten accents only), IBM Plex Mono (metadata). Structure: sticky interest chips → "Now" strip (listening, Hardcover, Trakt, playing) → a curated masonry wall of cards shaped by type (comic panels, playable song sleeve, game cover with pull-quote, typographic essay, art as itself) → older years as smaller cards. Dark "work" edge on the left.

Shared

• AI marks: filled = AI-made, half = some AI, outline = by hand, dashed = unknown/not recorded.
• Easing cubic-bezier(.2,.8,.2,1), transitions 150–300ms.
• Placeholders: dotted underline + title="placeholder" until real content replaces them.