Lucas WintherandClaude Opus 5.5
974b3eb0df
- CV header with highlights and keeping-up summary replaces the intro and Now strip - "Projects I'm proudest of": up to six featured panels; screenshots muted until hover - "Also made" list; searching it also lists matching courses - Record section: recognition & volunteering, courses by topic - /work/learning/: searchable course list (plain script), in the sitemap - Top bar: Projects, Record, Writing, CV; no Bluesky link in the work footer - Highlights: only the placement takes the accent (owner, after the preview) Owner looked at the rendered preview on 2026-11-12 before this commit. Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
50 lines
3.9 KiB
Markdown
50 lines
3.9 KiB
Markdown
# 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.
|