rebuild the web theme as a skeuomorphic homelab desk (rack hero, drive drawer, LED dashboard, patch panel; CC0 textures + /credits)

agents.md

@@ -34,17 +34,19 @@ When in doubt, prefer updating. A stale README **or** agents.md is treated as a
 ## What this project is
 
 Personal portfolio site for **dvorakmortonxd.dev**. The default view is a
-**web editorial page** (a technical-print layout, no images); a "Desktop mode"
-button swaps to a **KDE Plasma desktop simulation**. Phones only ever get the
-editorial page.
+**skeuomorphic homelab desk** (a rack, LEDs, paper, anodised metal); a physical
+power switch flips to a **KDE Plasma desktop simulation**. Phones only ever get
+the desk.
 
 - Framework: **Next.js 16** (App Router, Turbopack), **React 19**, TypeScript.
-- Styling: **Tailwind v4** for the editorial page — `globals.css` is the design
-  system (CSS custom properties, `@theme` tokens, `@utility` classes) — plus plain
-  CSS for the desktop (`skeuo.css`) and the shared component styles the desktop
-  apps still use (`page.css`).
+- Styling: **Tailwind v4** for layout plus **`web.css`**, the skeuomorphic
+  material system (metal, OLED glass, paper, carbon, rubber, plastic, LEDs,
+  screws, vents, switches) over five CC0 textures in `public/textures`
+  (credited on `/credits`). `globals.css` holds the tokens, base styles and the
+  reveals; `skeuo.css` and `page.css` are the desktop and the shared
+  desktop-app styles.
 - Path alias: `@/*` → `src/*`.
-- Version: `3.0.0` (see `package.json`).
+- Version: `3.1.0` (see `package.json`).
 
 ### Scripts
 ```bash
@@ -77,11 +79,12 @@ token.** Do not print it, copy it into new files, or push it anywhere else.
 src/app/
   page.tsx              → renders <ThemeRoot/>, imports the theme stylesheets
   layout.tsx            → html shell, metadata, next/font, ThemeScript
-  globals.css           → web editorial design system (gruvbox palette; tokens, @utility, base, reveals)
-  editorial.css         → editorial page helpers (social masks, heatmap)
+  globals.css           → palette tokens, base, @theme/@utility, scroll reveals
+  web.css               → skeuomorphic material system + object layouts
   page.css              → shared component styles used by the desktop apps
   skeuo.css             → KDE Plasma desktop styles
   data.ts               → socials, codingProjects, techProjects, friends, wallpapers
+  credits/page.tsx      → credits for the CC0 textures and fonts
   revival-inc/page.tsx  → fullscreen iframe embedding /public/revival-inc/index.html
   api/
     heatmap/route.ts    → proxy for git.dvorakmortonxd.dev contribution heatmap
@@ -89,9 +92,9 @@ src/app/
     ping/route.ts       → service health check (HTTP + minecraft:// via mcstatus.io); host allowlist
     frame/route.ts      → header-stripping proxy so an unframeable friend site loads in a window; host allowlist
   components/
-    ThemeRoot.tsx       → editorial page by default, desktop when theme === "skeuo"
-    EditorialSite.tsx   → the web editorial page (nav, hero, sections)
-    editorial-ui.tsx    → editorial primitives: Reveal, Section, ServiceRow, Contributions, …
+    ThemeRoot.tsx       → the web desk by default, desktop when theme === "skeuo"
+    WebSite.tsx         → the desk: rack hero, drive drawer, pegboard, patch panel
+    web-ui.tsx          → rack units, LED dashboard, social masks, Reveal
     WindowsDesktop.tsx  → "skeuo" theme, desktop: icons, windows, taskbar
     WinWindow.tsx       → a single draggable/resizable window
     apps.tsx            → APPS registry + the content of each app + in-app terminal
@@ -115,17 +118,19 @@ scripts/
 2. `useTheme()` (in `useTheme.ts`) reads `data-theme` via `useSyncExternalStore`;
    `setTheme` sets the attribute and dispatches `theme-change`. Nothing is
    persisted, so a reload returns to `web`.
-3. `ThemeRoot` renders `EditorialSite` unless `theme === "skeuo"`, in which case it
-   mounts `WindowsDesktop` instead. The editorial page stays mounted (hidden) while
-   the desktop is up so its scroll position survives; the desktop mounts on demand
+3. `ThemeRoot` renders `WebSite` unless `theme === "skeuo"`, in which case it
+   mounts `WindowsDesktop` instead. The desk stays mounted (hidden) while the
+   desktop is up so its scroll position survives; the desktop mounts on demand
    (phones can never reach `skeuo`).
 
-Modes: `web` = the editorial site (default/landing), `skeuo` = KDE Plasma desktop.
+Modes: `web` = the skeuomorphic homelab desk (default/landing), `skeuo` = KDE
+Plasma desktop.
 
-The editorial page is **asset-free** apart from the social SVGs, which are used as
-monochrome CSS masks (`.social-mask` in `editorial.css`). `linkedin.svg` is a filled
-badge that masks to a plain square, so `editorial-ui.tsx` renders an inline mark for
-it instead. The desktop still uses the image assets.
+The desk uses **five CC0 textures** from ambientCG (`public/textures`: metal,
+paper, carbon, rubber, plastic), downscaled to 512 px and credited on
+`/credits`. The social SVGs are used as monochrome CSS masks (`.social-mask`);
+`linkedin.svg` is a filled badge that masks to a plain square, so `web-ui.tsx`
+renders an inline mark for it instead. The desktop still uses the image assets.
 
 ---
 
@@ -225,14 +230,18 @@ not free placement. Don't confuse the two.
 - Components are client components (`"use client"` at the top) — they use
   pointer events and window APIs freely.
 - CSS classes are prefixed by area: `win-` (desktop), `app-` / `kickoff` etc.
-  (desktop windows), plus the editorial design-system classes (`shell`, `display`,
-  `label`, `rule*`, `glass*`). Grep by prefix to find styles.
-- The editorial page reveals blocks with `.reveal` (see `Reveal` in
-  `editorial-ui.tsx`): hidden by default, `.is-in` shows. On load the first
-  screenful cascades top-to-bottom (90ms per block, in DOM order); the rest
-  reveal when they scroll in. **Wrap every content block** — anything left
-  unwrapped paints before the top and breaks the top-to-bottom order. The
-  `<noscript>` rule in `layout.tsx` keeps everything visible without JS.
+  (desktop windows), and `w-` (the web desk's materials and objects, in
+  `web.css`). **Never name a `w-*` class after a Tailwind utility** — `.w-screen`
+  collided with Tailwind's `w-screen` (`width: 100vw`) and silently stretched
+  every panel to the viewport. Also remember `web.css` is unlayered, so its
+  properties beat Tailwind utilities on the same element; use a dedicated class
+  (e.g. `.w-navlink`) or `!` when a utility must win.
+- The desk reveals blocks with `.reveal` (see `Reveal` in `web-ui.tsx`): hidden by
+  default, `.is-in` shows. On load the first screenful cascades top-to-bottom
+  (90ms per block, in DOM order); the rest reveal when they scroll in. **Wrap
+  every content block** — anything left unwrapped paints before the top and breaks
+  the top-to-bottom order. The `<noscript>` rule in `layout.tsx` keeps everything
+  visible without JS.
 - Several places deliberately use **imperative DOM work** (e.g. the drag ghost).
   This is intentional for performance; prefer matching the existing pattern over
   "Reactifying" it.