diff --git a/README.md b/README.md index 6c42e91..c3109e5 100644 --- a/README.md +++ b/README.md @@ -2,16 +2,17 @@ > The source code for my personal website, **[dvorakmortonxd.dev](https://dvorakmortonxd.dev)**. -It's a **skeuomorphic personal site**: a near-black desk with anodised hardware, machined -aluminium, clean printed labels and a single orange accent, with the whole KDE desktop -simulation kept behind a physical power switch. Two modes, one content set: +It's a **cartoon-skeuomorphic personal site**: a warm cream desk with chunky, brightly coloured +hardware resting on it, drawn entirely in CSS — no textures, no images — with the whole KDE +desktop simulation kept behind a physical power switch. Two modes, one content set: -- **Web** (default) — the desk. A monitor carries the headline with a mechanical keyboard in - front of it and a small rack beside it; services are 1U rack units with health LEDs, the 18 - coding projects are labelled drives in a drawer, the machines are barcoded asset labels on a - pegboard, the contribution heatmap is printed on a label-printer sheet, friends are business - cards, the gym log is a clipboard and the socials are a patch panel. Textures are CC0 — see - [`/credits`](https://dvorakmortonxd.dev/credits). +- **Web** (default) — the desk. A monitor carries the headline with a candy-keycap keyboard in + front of it and a mini rack beside it; services are 1U rack units with coloured strips and + health LEDs, the 18 coding projects are labelled drives in a drawer, the machines are cards + pinned to a cork board, the contribution heatmap is printed on a receipt, friends are business + cards, the gym numbers are a scoreboard and the socials are a patch panel with coloured ports. + [`/credits`](https://dvorakmortonxd.dev/credits) lists the type and nothing else — there are no + asset licences because there are no assets. - **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). Reached from the power switch and hidden on phones. @@ -24,10 +25,12 @@ heatmap**, gym SBD and links to friends' sites. - **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 materials, modern finish** — near-black desk, dark anodised faceplates, - machined aluminium plaques, matte printed labels and mint/orange LEDs, all CSS over five CC0 - textures. Every section is a physical object with a contact shadow; nothing is pure white on - black or grey on black. +- **CSS-only skeuomorphism** — every surface is a flat gradient with a thick bottom edge, a soft + cast shadow and `color-mix()` tints: slate chassis, cream plastic, paper, cork, black glass, + LEDs, screws, pushpins. The web theme ships no images at all. +- **Not afraid of colour** — a hue per item (orange / teal / blue / lilac / mint / coral / + yellow) cycles through every list, so the desk reads as separate pieces of hardware instead of + one grey wall. - **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. @@ -67,15 +70,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` holds the palette tokens, base styles, the Tailwind v4 - `@theme`/`@utility` classes and the scroll reveals. `src/app/web.css` is the material system - (near-black desk, anodised metal, machined aluminium, printed labels, black glass, LEDs, rack - rails, rocker switch) and the object layouts. `page.css` keeps the shared component styles the - desktop apps still use, and `skeuo.css` is the KDE desktop. -- **Fonts:** IBM Plex Sans/Mono for screens, machine labels and headings; Newsreader for things - printed on paper; via `next/font/google`. The desktop keeps its system sans stack. -- **Textures:** five CC0 materials from ambientCG — `desk` (near-black wood), `metal`, `paper`, - `carbon`, `plastic` — downscaled to 512 px in `public/textures`. Attribution is on `/credits`. -- **Version:** `3.3.0` (see `package.json`) + `@theme`/`@utility` classes and the scroll reveals. `src/app/web.css` is the whole desk: the + materials (slate chassis, cream plastic, paper, cork, black glass), the details (screws, LEDs, + pushpins, rack rails, barcode, torn receipt edge) and every object layout, all CSS with + `color-mix()` for tints and shades. `page.css` keeps the shared component styles the desktop + apps still use, and `skeuo.css` is the KDE desktop. +- **Fonts:** Nunito for hardware labels and headings, Newsreader for anything printed on paper, + IBM Plex Sans/Mono for body copy and terminal text — all via `next/font/google`. The desktop + keeps its system sans stack. +- **Assets:** the web theme ships **no images**. The desktop keeps its own wallpaper and icons. +- **Version:** `4.0.0` (see `package.json`) ## 🚀 Running Locally @@ -182,7 +186,7 @@ src/app/ 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 + credits/page.tsx → credit page (type only — the desk ships no assets) revival-inc/page.tsx → embeds the bundled game at /public/revival-inc/index.html api/ heatmap/route.ts → contribution heatmap proxy diff --git a/agents.md b/agents.md index f14726f..c407c86 100644 --- a/agents.md +++ b/agents.md @@ -34,20 +34,24 @@ 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 desk**: a near-black surface with a monitor, mechanical keyboard, -rack, drive drawer, pegboard of asset labels, label-printer 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. +**cartoon-skeuomorphic desk**: a warm cream surface with a monitor, candy-keycap +keyboard, mini rack, drive drawer, cork board of pinned cards, printed receipt, +business cards, scoreboard and patch panel resting on it — all drawn in CSS, with +no image assets. 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 material system - (near-black desk, anodised metal, machined aluminium, printed labels, black - glass, LEDs, 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. +- Styling: **Tailwind v4** for layout plus **`web.css`**, which is the whole desk + — materials (slate chassis, cream plastic, paper, cork, black glass), details + (screws, LEDs, pushpins, rails, barcode, torn receipt edge) and object layouts, + all CSS with `color-mix()` tints. `globals.css` holds the tokens, base styles + and the reveals; `skeuo.css` and `page.css` are the desktop and the shared + desktop-app styles. **The web theme ships no images.** +- Hue system: list items take a `--tone` custom property from a shared palette + (orange, teal, blue, lilac, mint, coral, yellow), set inline, so objects are + colourful without per-item CSS. - Path alias: `@/*` → `src/*`. -- Version: `3.3.0` (see `package.json`). +- Version: `4.0.0` (see `package.json`). ### Scripts ```bash @@ -85,7 +89,7 @@ src/app/ 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 + credits/page.tsx → credits (type only — the desk ships no assets) revival-inc/page.tsx → fullscreen iframe embedding /public/revival-inc/index.html api/ heatmap/route.ts → proxy for git.dvorakmortonxd.dev contribution heatmap @@ -124,14 +128,14 @@ scripts/ desktop is up so its scroll position survives; the desktop mounts on demand (phones can never reach `skeuo`). -Modes: `web` = the skeuomorphic desk (default/landing), `skeuo` = KDE Plasma -desktop. +Modes: `web` = the cartoon-skeuomorphic desk (default/landing), `skeuo` = KDE +Plasma desktop. -The desk uses **five CC0 textures** from ambientCG (`public/textures`: near-black -desk wood, metal, paper, carbon, plastic), downscaled to 512 px and credited on -`/credits`. The social SVGs are used as monochrome CSS masks (`.social-mask`); +The desk ships **no image assets** — every surface is CSS. The only external +visual files are the social SVGs, 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. +renders an inline mark for it instead. The desktop still uses its own wallpaper +and icons. --- @@ -242,6 +246,12 @@ not free placement. Don't confuse the two. - 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 web desk is CSS-only by design.** No textures, no images, no `url()` + beyond the social masks. Build a surface from a flat gradient plus a thick + bottom edge (`0 5px 0 `) and a soft cast shadow, and shade with + `color-mix(in srgb, var(--tone) N%, …)` instead of adding new hues to the + stylesheet. New list items take a `--tone` from the shared `TONES` palette in + `WebSite.tsx` / `web-ui.tsx` rather than hard-coding a colour. - 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 diff --git a/package.json b/package.json index 17e136d..bba8849 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "dvorakmortonxd", - "version": "3.3.0", + "version": "4.0.0", "private": true, "scripts": { "dev": "node scripts/dev-server.mjs", diff --git a/public/textures/carbon.jpg b/public/textures/carbon.jpg deleted file mode 100644 index 772ef5a..0000000 Binary files a/public/textures/carbon.jpg and /dev/null differ diff --git a/public/textures/desk.jpg b/public/textures/desk.jpg deleted file mode 100644 index 3ab201d..0000000 Binary files a/public/textures/desk.jpg and /dev/null differ diff --git a/public/textures/metal.jpg b/public/textures/metal.jpg deleted file mode 100644 index 9dc68b5..0000000 Binary files a/public/textures/metal.jpg and /dev/null differ diff --git a/public/textures/paper.jpg b/public/textures/paper.jpg deleted file mode 100644 index 5f1849e..0000000 Binary files a/public/textures/paper.jpg and /dev/null differ diff --git a/public/textures/plastic.jpg b/public/textures/plastic.jpg deleted file mode 100644 index 4ac7855..0000000 Binary files a/public/textures/plastic.jpg and /dev/null differ diff --git a/src/app/components/WebSite.tsx b/src/app/components/WebSite.tsx index bf5b4fe..d0b7169 100644 --- a/src/app/components/WebSite.tsx +++ b/src/app/components/WebSite.tsx @@ -27,6 +27,17 @@ const NAV = [ { href: "#contact", label: "contact" }, ]; +/** One hue per item, so every list reads as separate pieces of hardware. */ +const TONES = [ + "var(--orange)", + "var(--teal)", + "var(--blue)", + "var(--lilac)", + "var(--mint)", + "var(--coral)", + "var(--yellow)", +]; + const SERVICES: { name: string; desc: string; @@ -72,11 +83,11 @@ export default function WebSite() { return (
{/* -------------------------------------------------------------- rail */} -
+
- dvorakmortonxd + dvorakmortonxd