redraw the desk as cartoon skeuomorphism: CSS-only materials (no textures), light cream desk, per-item hues, cork board, receipt, scoreboard
This commit is contained in:
parent
a71cfb1731
commit
1880a5b0db
14 changed files with 1165 additions and 989 deletions
50
README.md
50
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
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue