replace raster assets with CSS: emoji gradient cards, mock windows (add forge), gradient wallpaper

This commit is contained in:
dvorakmortonxd 2026-10-05 14:28:41 +02:00
commit dae4f1c414
47 changed files with 333 additions and 184 deletions

View file

@ -34,7 +34,7 @@ When in doubt, prefer updating. A stale README **or** agents.md is treated as a
## Bump the version on EVERY prompt — also do this every time
Another standing requirement: increment the **patch** version (`x.x.+1`, so
`2.2.12` → `2.2.13` → …) as part of every task, even the small ones. Keep all of
`2.2.13` → `2.2.14` → …) as part of every task, even the small ones. Keep all of
these in sync:
- `package.json` → `"version"`
@ -56,7 +56,7 @@ frosted-glass **web** site, and an alternate KDE/Plasma **desktop simulation**
utilities in the components (Tailwind is present via PostCSS but the look is
hand-written CSS).
- Path alias: `@/*` → `src/*`.
- Version: `2.2.13` (see `package.json`).
- Version: `2.2.14` (see `package.json`).
### Scripts
```bash
@ -90,7 +90,7 @@ src/app/
page.tsx → renders <ThemeRoot/>, imports web.css + skeuo.css
layout.tsx → html shell, metadata, ThemeScript
globals.css → base/reset styles + Tailwind import
data.ts → socials, codingProjects, techProjects, friends, wallpapers
data.ts → socials, codingProjects, techProjects, friends
web.css → web theme: frosted glass, light + dark tokens
skeuo.css → Windows/Plasma desktop styles (desktop theme only)
revival-inc/page.tsx → fullscreen iframe embedding /public/revival-inc/index.html
@ -103,7 +103,8 @@ src/app/
components/
ThemeRoot.tsx → picks which shell to mount (the router of the UI)
WebLayout.tsx → "web" theme (default): sticky sidebar + glass content
FeatureWindow.tsx → decorative CSS "windows" for the two feature panels (game / browser)
FeatureWindow.tsx → decorative CSS "windows" (game / browser / forge); used in the
web feature panels and the desktop app windows
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
@ -158,7 +159,11 @@ Themes: `web` = default frosted-glass website (sidebar + content, light/dark),
(Josef is 🧌 goblin, the rest 🧙 — the old per-friend SVGs are gone).
Projects/hardware use a CSS multi-column
**masonry** gallery (`.project-grid`) so short cards don't leave half-empty
grid slots; on phones it drops to 2 columns with a shorter card image. The two feature panels (`.web-split`) stretch
grid slots; on phones it drops to 2 columns with a shorter tile. Cards are
**asset-free**: each renders a `.project-thumb` — a `.thumb-N` gradient
(N = index % 6) with the item's `emoji` glyph centred — instead of a
screenshot. `codingProjects` / `techProjects` in `data.ts` carry `emoji`
(no `img`/`image`). The two feature panels (`.web-split`) stretch
to equal height and share a fixed `16 / 10` `.fw` window (the `FeatureWindow`
component) — a decorative, **asset-free CSS mock-up** rather than a screenshot:
Revival Inc. is a little necromancy game scene (night sky, moon, tombstones,
@ -168,10 +173,18 @@ Themes: `web` = default frosted-glass website (sidebar + content, light/dark),
`aria-hidden` but "PRESS START" is a **real link** to the game
(`https://dvorakmortonxd.dev/revival-inc`). The real copy stays in the
`.web-feature-text` paragraph below.
The old raster feature shots (`.web-shot` + `next/image`) were removed from the
web theme only — `revivalinc.webp` / `RustyWolfPreview.webp` are still used by
the desktop theme and the projects gallery, so the files stay. The old stacked
TUI panel layout and the `SlBackground` ASCII train were removed earlier.
`FeatureWindow` also has a **`forge`** variant (a little git-forge repo page)
and all three are reused inside the desktop app windows (GitDXD → forge,
Revival Inc. → game, RustyWolf → browser), so there are no app-preview
screenshots. The old stacked TUI panel layout and the `SlBackground` ASCII
train were removed earlier.
- **No raster UI assets.** Every card, feature panel, app preview and the desktop
wallpaper is drawn in CSS: project/hardware cards are `.project-thumb` gradient
tiles with an `emoji`, the feature/app previews are `FeatureWindow` mock windows,
and `.win-desktop` carries a layered gradient "wallpaper" (there is no
`wallpaper.jpg`). Only the social SVGs, the site logo (`src/app/icon.png`), the
Joker easter egg (`joker.webp`) and the Gentoo mark (`gentoo.svg`) remain as
real image files.
- **Not a terminal.** The web theme deliberately has no TUI chrome: the hero is
a name + blurb (no `$ whoami` prompt, no blinking cursor), section eyebrows are
plain words (not `README.MD` / `TECH_LIST.JSON` filenames), and the activity
@ -473,9 +486,9 @@ knows about icon ids, via `APP_BY_ID`.
contain `data-theme="web"` / `data-scheme="dark"` and the `.web-root` markup.
Theme + scheme are read pre-paint from `localStorage.theme` / `.scheme`, so a
quick check is to set those in devtools and reload.
- `next/image` is lazy by default, so a headless full-page screenshot shows the
below-the-fold feature shots as blank boxes. Scroll the page
slowly first and they load; this is a capture artifact, not a bug. Headless
- There are almost no raster images left (only the logo, the social SVGs, the
Joker easter egg and the Gentoo mark), so a headless full-page screenshot no
longer shows blank lazy-image boxes below the fold. Headless
Chromium lives at `~/.cache/ms-playwright/chromium-*/chrome-linux64/chrome`
(drive it with `--headless=new --remote-debugging-port=…` and CDP).
- A dev server may already be running on port 3000 — on this host it is normally