dvorakmortonxd/dvorakmortonxd.dev
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

rebuild the web theme as a physical desk (walnut surface, monitor + keyboard, real rack, drive drawer, paper tags, dot-matrix report, brass plaques)

Browse source
This commit is contained in:
Martin Dvořák 2026-09-30 09:09:47 +00:00
commit cfc256c7bd
9 changed files with 1604 additions and 869 deletions
Download patch file Download diff file Expand all files Collapse all files

30
agents.md
View file

@ -34,19 +34,20 @@ 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
**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.
**skeuomorphic desk**: a walnut surface with a monitor, keyboard, rack, drive
drawer, pegboard, dot-matrix report, business cards, clipboard and patch panel
resting on it. 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 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`
- Styling: **Tailwind v4** for layout plus **`web.css`**, the material system
(walnut desk, graphite metal, cream paper, brass, OLED glass, LEDs, screws,
rack rails, rocker switch) 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.1.0` (see `package.json`).
- Version: `3.2.0` (see `package.json`).
### Scripts
```bash
@ -123,11 +124,11 @@ scripts/
desktop is up so its scroll position survives; the desktop mounts on demand
(phones can never reach `skeuo`).
Modes: `web` = the skeuomorphic homelab desk (default/landing), `skeuo` = KDE
Plasma desktop.
Modes: `web` = the skeuomorphic desk (default/landing), `skeuo` = KDE Plasma
desktop.
The desk uses **five CC0 textures** from ambientCG (`public/textures`: metal,
paper, carbon, rubber, plastic), downscaled to 512 px and credited on
The desk uses **five CC0 textures** from ambientCG (`public/textures`: desk
walnut, metal, paper, carbon, 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.
@ -235,7 +236,12 @@ not free placement. Don't confuse the two.
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.
(e.g. `.w-navlink`, `.w-corner-tr`) or `!` when a utility must win. (`.w-screw`
sets `position: relative` for its slot, which is why screws are placed with
`.w-corner-*` instead of Tailwind's `absolute`.)
- Angles and offsets that hover states need to override live in CSS custom
properties (e.g. `--tilt` on `.w-drive`), never in inline `style` transforms —
an inline transform wins over `:hover`.
- 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