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

README.md

@@ -2,16 +2,18 @@
 
 > The source code for my personal website, **[dvorakmortonxd.dev](https://dvorakmortonxd.dev)**.
 
-It's an **editorial-style personal site** in a **gruvbox** palette, with the whole KDE
-desktop simulation kept behind a "Desktop mode" button. Two modes, one content set:
+It's a **skeuomorphic personal site**: a dark homelab desk built from anodised aluminium, OLED
+glass, carbon fibre and paper, with the whole KDE desktop simulation kept behind a physical
+power switch. Two modes, one content set:
 
-- **Web** (default) — the editorial site: a technical-print layout painted in the gruvbox
-  palette, with serif headlines, mono labels in the margin, hairline rules and a data strip. No
-  images at all; the only graphics are the social icons, used as monochrome CSS masks.
+- **Web** (default) — the homelab desk. A 4U rack carries the headline on an engraved nameplate
+  and a live console readout; services are rack units with status LEDs, the 18 coding projects
+  are labelled SSD caddies in a drive drawer, hardware hangs on a pegboard, the contribution
+  heatmap is an LED matrix and the socials are a patch panel. Textures are CC0 — see
+  [`/credits`](http://localhost:3000/credits).
 - **Desktop mode** — the KDE Plasma / Windows-style **desktop simulation**: draggable
   snap-to-grid icons, resizable/floating windows, a Start menu, taskbar, live clock and a
-  working in-browser terminal (Alacritty). Reachable from the "Desktop mode" button and hidden
-  on phones.
+  working in-browser terminal (Alacritty). Reached from the power switch and hidden on phones.
 
 Both modes surface the same personal content: socials, self-hosted services with **live
 up/down health checks**, a hardware collection, coding projects, a **GitDXD contribution
@@ -19,13 +21,13 @@ heatmap**, gym SBD and links to friends' sites.
 
 ## ✨ Features
 
-- **Web theme is the landing view** — the site always opens on the editorial page; the theme is
-  deliberately not persisted, so a reload never drops you into the desktop. A technical-print
-  layout with serif headlines, mono labels in the margin, hairline rules and a data strip. Text
-  and type only — the sole graphics are the social icons, rendered as monochrome CSS masks.
-- **Desktop mode (desktop-only)** — a "Desktop mode" button swaps to the KDE-style desktop for
-  the session. Phones never get it: the buttons are hidden, so the old iOS-style phone home
-  screen is gone.
+- **Web theme is the landing view** — the site always opens on the desk; the theme is
+  deliberately not persisted, so a reload never drops you into the desktop.
+- **Skeuomorphic hardware** — rack, LEDs, rocker switch, screws, vents and panels are CSS
+  materials over five CC0 textures; every section is a real-world object rather than a card.
+- **Desktop mode (desktop-only)** — a physical power switch in the top rail (and in the footer)
+  flips to the KDE-style desktop for the session. Phones never get it: the switch is hidden, so
+  the old iOS-style phone home screen is gone.
 - **Draggable desktop icons** — free placement that snaps to a measured grid, one icon per
   cell, with a follow-the-cursor drag ghost. Icons shrink on cramped viewports so they never
   collide.
@@ -61,15 +63,16 @@ heatmap**, gym SBD and links to friends' sites.
 
 - **Framework:** Next.js 16 (App Router, Turbopack)
 - **Language:** TypeScript, React 19 (client components everywhere interactivity lives)
-- **Styling:** `src/app/globals.css` is the web editorial design system — the gruvbox palette as
-  CSS custom properties, plus Tailwind v4 `@theme`/`@utility`, base and scroll reveals.
-  `editorial.css` holds page helpers; `page.css` keeps the shared component styles the desktop
-  apps still use, and `skeuo.css` is the KDE desktop. The editorial page is built from Tailwind
-  utilities.
-- **Fonts:** Newsreader (display) + IBM Plex Sans/Mono (body/labels) via `next/font/google`;
-  the desktop keeps its system sans stack.
-- **Images:** `next/image` — but the editorial page uses none (social SVGs as monochrome masks only).
-- **Version:** `3.0.0` (see `package.json`)
+- **Styling:** `src/app/globals.css` holds the palette tokens, base styles, the Tailwind v4
+  `@theme`/`@utility` classes and the scroll reveals. `src/app/web.css` is the skeuomorphic
+  material system (metal, OLED glass, paper, carbon, rubber, plastic, LEDs, screws, vents,
+  switches) and the object layouts. `page.css` keeps the shared component styles the desktop
+  apps still use, and `skeuo.css` is the KDE desktop.
+- **Fonts:** Newsreader (headlines, paper) + IBM Plex Sans/Mono (body, machine labels) via
+  `next/font/google`; the desktop keeps its system sans stack.
+- **Textures:** five CC0 materials from ambientCG, downscaled to 512 px in `public/textures`.
+  Attribution is on `/credits`.
+- **Version:** `3.1.0` (see `package.json`)
 
 ## 🚀 Running Locally
 
@@ -171,11 +174,12 @@ they contend for `:3000` and `.next/dev/lock`.
 src/app/
   page.tsx                → renders <ThemeRoot/>, imports the theme stylesheets
   layout.tsx              → html shell + metadata; loads the fonts; injects ThemeScript
-  globals.css             → web editorial design system (gruvbox palette; tokens, @utility classes, base)
-  editorial.css           → editorial page helpers (social masks, heatmap)
+  globals.css             → palette tokens, base, Tailwind @theme/@utility, scroll reveals
+  web.css                 → skeuomorphic material system + object layouts
   page.css                → shared component styles still used by the desktop apps
   skeuo.css               → KDE desktop styles
   data.ts                 → socials, codingProjects, techProjects, friends, wallpapers
+  credits/page.tsx        → credit page for the textures and fonts
   revival-inc/page.tsx    → embeds the bundled game at /public/revival-inc/index.html
   api/
     heatmap/route.ts      → contribution heatmap proxy
@@ -183,11 +187,11 @@ src/app/
     frame/route.ts        → header-stripping proxy for unframeable friend sites
     ping/route.ts         → service health check (HTTP + Minecraft)
   components/
-    ThemeRoot.tsx           → web editorial vs. Desktop mode
+    ThemeRoot.tsx           → web desk vs. Desktop mode
     ThemeScript.tsx         → pre-paint script: device detection
     useTheme.ts             → theme state via useSyncExternalStore
-    EditorialSite.tsx       → the web editorial page (nav, hero, sections)
-    editorial-ui.tsx        → editorial primitives: Section, ServiceRow, Contributions, …
+    WebSite.tsx             → the desk: rack hero, drawer, pegboard, patch panel
+    web-ui.tsx              → rack units, LED dashboard, social masks, Reveal
     WindowsDesktop.tsx      → desktop shell: icons, windows, taskbar, Start menu
     WinWindow.tsx           → one draggable/resizable window
     apps.tsx                → APPS registry, window contents, in-app terminal