diff --git a/README.md b/README.md index c3109e5..d0a1674 100644 --- a/README.md +++ b/README.md @@ -2,38 +2,27 @@ > The source code for my personal website, **[dvorakmortonxd.dev](https://dvorakmortonxd.dev)**. -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: +This is not a normal portfolio page. It ships **two fully interactive shells** and picks +which one to show based on the saved theme and the device, all from the same content: -- **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. +- **`skeuo`** (default) — a KDE Plasma / Windows-style **desktop simulation**: draggable + snap-to-grid icons, resizable/floating windows, a Start menu, taskbar and live clock. + On phones it becomes an **iOS-style home screen** with a widget grid, dock, drag-to-reorder + and an iOS launch animation. +- **`terminal`** — a **Gruvbox TUI** version of the site: TUI panels, an animated ASCII + train background, a clickable easter-egg logo, and a working in-browser terminal (Alacritty) + with commands like `help`, `ls`, `cat`, `neofetch`, `emerge`, `ssh` and more. -Both modes surface the same personal content: socials, self-hosted services with **live +Both shells surface the same personal content: socials, self-hosted services with **live up/down health checks**, a hardware collection, coding projects, a **GitDXD contribution -heatmap**, gym SBD and links to friends' sites. +heatmap**, a gym SBD panel and links to friends' sites. ## ✨ Features -- **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. -- **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. +- **Two themes / shells** — KDE-style desktop and Gruvbox terminal, toggled from either UI + and persisted in `localStorage` (applied pre-paint to avoid a flash). +- **Phone vs. desktop detection** — a user-agent sniff on `` decides whether + the desktop or the mobile home screen is shown. - **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. @@ -69,17 +58,13 @@ 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 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`) +- **Styling:** hand-written CSS — `src/app/page.css` (terminal theme), `src/app/skeuo.css` + (desktop + mobile), `src/app/globals.css` (base/reset). Tailwind v4 is imported for the + base layer but the UI is custom CSS. +- **Fonts:** Monocraft (self-hosted in `public/`, used by the terminal theme; the desktop + theme uses the system sans stack) +- **Images:** `next/image` +- **Version:** `2.1.0` (see `package.json`) ## 🚀 Running Locally @@ -179,35 +164,33 @@ they contend for `:3000` and `.next/dev/lock`. ``` src/app/ - page.tsx → renders , imports the theme stylesheets - layout.tsx → html shell + metadata; loads the fonts; injects ThemeScript - 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 + page.tsx → renders , imports the two theme stylesheets + layout.tsx → html shell + metadata, injects ThemeScript + globals.css → base/reset styles + Tailwind import + page.css → terminal theme styles + skeuo.css → desktop + mobile home styles data.ts → socials, codingProjects, techProjects, friends, wallpapers - 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 activities/route.ts → GitDXD activity feed proxy - frame/route.ts → header-stripping proxy for unframeable friend sites ping/route.ts → service health check (HTTP + Minecraft) components/ - ThemeRoot.tsx → web desk vs. Desktop mode - ThemeScript.tsx → pre-paint script: device detection + ThemeRoot.tsx → picks which shell(s) to mount + ThemeScript.tsx → pre-paint script: theme + device detection useTheme.ts → theme state via useSyncExternalStore - WebSite.tsx → the desk: rack hero, drawer, pegboard, patch panel - web-ui.tsx → rack units, LED dashboard, social masks, Reveal + TerminalLayout.tsx → the Gruvbox terminal shell WindowsDesktop.tsx → desktop shell: icons, windows, taskbar, Start menu + MobileHome.tsx → phone shell: iOS home screen + app view WinWindow.tsx → one draggable/resizable window apps.tsx → APPS registry, window contents, in-app terminal useDesktopIcons.ts → desktop icon grid + drag/drop logic - useDragOrder.ts → list reordering (used inside apps) - ServiceButton.tsx → desktop service link + live status dot - ContributionHeatmap.tsx → desktop heatmap + recent commits widget + useDragOrder.ts → list reordering (mobile grid/dock) + ServiceButton.tsx → service link + live status dot + ContributionHeatmap.tsx → heatmap + recent commits widget Clock.tsx → live clock JokerLogo.tsx → logo with click easter egg + SlBackground.tsx → animated ASCII train background scripts/ dev-server.mjs → custom dev server: live updates without the dev-only debug surface deploy/ diff --git a/agents.md b/agents.md index c407c86..d947705 100644 --- a/agents.md +++ b/agents.md @@ -33,25 +33,16 @@ 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 -**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. +Personal portfolio site for **dvorakmortonxd.dev**. It's not a normal website — +it ships **two fully interactive desktop/OS simulations** plus a terminal, and +picks which one to show based on theme and device. - Framework: **Next.js 16** (App Router, Turbopack), **React 19**, TypeScript. -- 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. +- Styling: plain CSS files (`page.css`, `skeuo.css`), no CSS-in-JS, no Tailwind + utilities in the components (Tailwind is present via PostCSS but the look is + hand-written CSS). - Path alias: `@/*` → `src/*`. -- Version: `4.0.0` (see `package.json`). +- Version: `2.1.0` (see `package.json`). ### Scripts ```bash @@ -82,14 +73,12 @@ token.** Do not print it, copy it into new files, or push it anywhere else. ``` src/app/ - page.tsx → renders , imports the theme stylesheets - layout.tsx → html shell, metadata, next/font, ThemeScript - globals.css → palette tokens, base, @theme/@utility, scroll reveals - web.css → skeuomorphic material system + object layouts - page.css → shared component styles used by the desktop apps - skeuo.css → KDE Plasma desktop styles + page.tsx → renders , imports page.css + skeuo.css + layout.tsx → html shell, metadata, ThemeScript + globals.css → base/reset styles + Tailwind import data.ts → socials, codingProjects, techProjects, friends, wallpapers - credits/page.tsx → credits (type only — the desk ships no assets) + page.css → base / terminal theme styles + skeuo.css → Windows/Plasma desktop + mobile home styles revival-inc/page.tsx → fullscreen iframe embedding /public/revival-inc/index.html api/ heatmap/route.ts → proxy for git.dvorakmortonxd.dev contribution heatmap @@ -97,45 +86,38 @@ src/app/ ping/route.ts → service health check (HTTP + minecraft:// via mcstatus.io); host allowlist frame/route.ts → header-stripping proxy so an unframeable friend site loads in a window; host allowlist components/ - ThemeRoot.tsx → the web desk by default, desktop when theme === "skeuo" - WebSite.tsx → the desk: rack hero, drive drawer, pegboard, patch panel - web-ui.tsx → rack units, LED dashboard, social masks, Reveal + ThemeRoot.tsx → picks which shell to show (the router of the UI) + TerminalLayout.tsx → "terminal" theme (Gruvbox) WindowsDesktop.tsx → "skeuo" theme, desktop: icons, windows, taskbar + MobileHome.tsx → "skeuo" theme, phone: app grid + dock WinWindow.tsx → a single draggable/resizable window apps.tsx → APPS registry + the content of each app + in-app terminal + embedded-site windows + the Minecraft-style SMP menu useDesktopIcons.ts → desktop icon grid + drag/drop (THE KEY FILE, see below) - useDragOrder.ts → simple list reordering (used inside desktop apps) + useDragOrder.ts → simple list reordering (mobile home screen only) useTheme.ts → theme state via useSyncExternalStore ThemeScript.tsx → inline pre-hydration script: theme + device detection - ServiceButton.tsx → desktop service link + live status dot (pings /api/ping) - ContributionHeatmap.tsx → desktop heatmap + recent-commit widget (uses the two proxies) + ServiceButton.tsx → service link + live status dot (pings /api/ping) + ContributionHeatmap.tsx → heatmap + recent-commit widget (uses the two proxies) Clock.tsx → live clock (useSyncExternalStore + interval) JokerLogo.tsx → site logo with a click easter egg + SlBackground.tsx → animated ASCII train background (terminal theme) scripts/ dev-server.mjs → custom dev server: live updates minus the dev-only debug surface ``` ### How UI selection works -1. `ThemeScript` runs before paint and sets `data-device` (`phone` | `desktop`) - from a user-agent sniff. It does **not** read a stored theme, so the page always - lands on `web`. CSS hides every `.desktop-toggle` on phones. -2. `useTheme()` (in `useTheme.ts`) reads `data-theme` via `useSyncExternalStore`; - `setTheme` sets the attribute and dispatches `theme-change`. Nothing is - persisted, so a reload returns to `web`. -3. `ThemeRoot` renders `WebSite` unless `theme === "skeuo"`, in which case it - mounts `WindowsDesktop` instead. The desk stays mounted (hidden) while the - desktop is up so its scroll position survives; the desktop mounts on demand - (phones can never reach `skeuo`). +1. `ThemeScript` runs before paint. It reads `localStorage.theme` and sets + `data-theme` (`skeuo` | `terminal`) and `data-device` (`phone` | `desktop`) + on `` from a user-agent sniff. +2. `useTheme()` (in `useTheme.ts`) reads `data-theme` via + `useSyncExternalStore` and dispatches a `theme-change` event on toggle. +3. `ThemeRoot` shows the terminal when `theme === "terminal"`; otherwise it + mounts **both** `WindowsDesktop` and `MobileHome` and lets CSS + (`html[data-device="phone"]`) decide which is visible. The desktop stays + mounted while hidden so the Welcome window isn't recreated. -Modes: `web` = the cartoon-skeuomorphic desk (default/landing), `skeuo` = KDE -Plasma desktop. - -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 its own wallpaper -and icons. +Themes: `skeuo` = KDE Plasma / Windows desktop, `terminal` = Gruvbox terminal. --- @@ -198,9 +180,9 @@ Guard (already in place, keep it that way): `e.target` is always the button. ### Related -`useDragOrder.ts` is a **different, simpler** hook used inside the desktop apps -for reordering lists (drag one item over another to swap). It is list reordering, -not free placement. Don't confuse the two. +`useDragOrder.ts` is a **different, simpler** hook used only by `MobileHome` for +reordering the phone app grid/dock (drag one item over another to swap). It is +list reordering, not free placement. Don't confuse the two. --- @@ -234,33 +216,11 @@ not free placement. Don't confuse the two. - Components are client components (`"use client"` at the top) — they use pointer events and window APIs freely. -- CSS classes are prefixed by area: `win-` (desktop), `app-` / `kickoff` etc. - (desktop windows), and `w-` (the web desk's materials and objects, in - `web.css`). **Never name a `w-*` class after a Tailwind utility** — `.w-screen` - 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`, `.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 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 - every content block** — anything left unwrapped paints before the top and breaks - the top-to-bottom order. The `