turn the terminal/Gruvbox theme into the skeuo console
- rename the theme everywhere: id terminal -> skeuo, desktop sim skeuo -> desktop, skeleton terminal shell -> SkeuoLayout, page.css -> shared.css (shared components), old skeuo.css -> desktop.css, storage key theme -> dmx-theme (with migration) - rebuild the theme as a walnut-and-aluminium home-lab console: brass plates, patch bay, analogue gym gauges, clipboard, stitched leather logbook, service rack with pilot lamps, framed print, chart recorder, cartridge, software box, pegboard tags, card-index drawer - all materials are CSS + inline-SVG noise (no texture images); Barlow Semi Condensed + Courier Prime via next/font with fallbacks - desktop mode is now phone-only (<=768px): switch hidden above that, stored desktop preference overridden, sim never mounted on wide viewports - drop the ASCII train background and its gruvbox.webp asset
This commit is contained in:
parent
b2244da743
commit
d3f953e4a2
17 changed files with 4439 additions and 2834 deletions
66
README.md
66
README.md
|
|
@ -2,16 +2,25 @@
|
|||
|
||||
> The source code for my personal website, **[dvorakmortonxd.dev](https://dvorakmortonxd.dev)**.
|
||||
|
||||
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:
|
||||
This is not a normal portfolio page. It ships a hand-built **skeuomorphic console** plus a
|
||||
**phone-only desktop simulation**, both rendering the same content:
|
||||
|
||||
- **`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.
|
||||
- **`skeuo`** (default) — the site itself: a walnut-and-aluminium home-lab console on a workshop
|
||||
bench. Every section is a physical object — an engraved nameplate, an aluminium patch bay,
|
||||
analogue load meters for the gym numbers, a clipboard, a leather logbook, a rack of service
|
||||
modules with live pilot lamps, a framed screenshot, a chart recorder, a game cartridge, a
|
||||
software box, a pegboard of manila tags and a card-index drawer. Materials are CSS + inline-SVG
|
||||
noise only: the theme ships **no images of its own**. One light source (top-left), layered
|
||||
shadows for raised/recessed/embossed/stitched parts, and a deliberate two-font pairing: a
|
||||
condensed engraved panel face for metal, a typewriter for anything on paper.
|
||||
- **`desktop`** (phone-width viewports only) — 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.
|
||||
|
||||
The desktop simulation is only offered at ≤ 768 px: on anything wider the switch is hidden and
|
||||
the page always renders `skeuo`, so a desktop visitor can never end up stuck in a mode whose
|
||||
switch they cannot reach.
|
||||
|
||||
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
|
||||
|
|
@ -19,8 +28,16 @@ heatmap**, a gym SBD panel and links to friends' sites.
|
|||
|
||||
## ✨ Features
|
||||
|
||||
- **Two themes / shells** — KDE-style desktop and Gruvbox terminal, toggled from either UI
|
||||
and persisted in `localStorage` (applied pre-paint to avoid a flash).
|
||||
- **Two shells** — the skeuo console (default everywhere) and the KDE-style desktop simulation
|
||||
(phone-width viewports only, flipped by the physical switch on the nameplate). The choice is
|
||||
persisted in `localStorage` under `dmx-theme` and applied pre-paint to avoid a flash; legacy
|
||||
`theme` values are migrated once.
|
||||
- **Desktop mode is phone-only** — at ≤ 768 px the switch appears and both shells are reachable;
|
||||
at 768 px and above it is hidden and any saved `desktop` preference is overridden, so wide
|
||||
viewports can never get stuck.
|
||||
- **CSS-only materials** — wood, brushed aluminium, brass, leather, black bakelite, paper, glass
|
||||
and rubber are built from gradients, `color-mix()` and an inline-SVG `feTurbulence` grain; no
|
||||
texture images ship with the theme.
|
||||
- **Phone vs. desktop detection** — a user-agent sniff on `<html data-device>` 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
|
||||
|
|
@ -58,11 +75,14 @@ heatmap**, a gym SBD panel and links to friends' sites.
|
|||
|
||||
- **Framework:** Next.js 16 (App Router, Turbopack)
|
||||
- **Language:** TypeScript, React 19 (client components everywhere interactivity lives)
|
||||
- **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)
|
||||
- **Styling:** hand-written CSS — `src/app/skeuo.css` (the skeuo console: materials, objects,
|
||||
depth), `src/app/desktop.css` (KDE desktop + mobile home), `src/app/shared.css` (styles for
|
||||
components both shells render: service buttons, heatmap, project cards, logo) and
|
||||
`src/app/globals.css` (base/reset). Tailwind v4 is imported for the base layer but the UI is
|
||||
custom CSS.
|
||||
- **Fonts:** Barlow Semi Condensed (engraved panel labels, headings, controls) + Courier Prime
|
||||
(everything printed or typewritten), both via `next/font/google` with explicit fallback
|
||||
stacks. Monocraft stays self-hosted in `public/` for the desktop's terminal windows.
|
||||
- **Images:** `next/image`
|
||||
- **Version:** `2.1.0` (see `package.json`)
|
||||
|
||||
|
|
@ -164,11 +184,12 @@ they contend for `:3000` and `.next/dev/lock`.
|
|||
|
||||
```
|
||||
src/app/
|
||||
page.tsx → renders <ThemeRoot/>, imports the two theme stylesheets
|
||||
layout.tsx → html shell + metadata, injects ThemeScript
|
||||
page.tsx → renders <ThemeRoot/>, imports the three stylesheets
|
||||
layout.tsx → html shell + metadata, loads the two fonts, injects ThemeScript
|
||||
globals.css → base/reset styles + Tailwind import
|
||||
page.css → terminal theme styles
|
||||
skeuo.css → desktop + mobile home styles
|
||||
skeuo.css → the skeuo console: materials, objects, depth
|
||||
desktop.css → KDE desktop + mobile home styles
|
||||
shared.css → styles for components both shells render
|
||||
data.ts → socials, codingProjects, techProjects, friends, wallpapers
|
||||
revival-inc/page.tsx → embeds the bundled game at /public/revival-inc/index.html
|
||||
api/
|
||||
|
|
@ -179,18 +200,17 @@ src/app/
|
|||
ThemeRoot.tsx → picks which shell(s) to mount
|
||||
ThemeScript.tsx → pre-paint script: theme + device detection
|
||||
useTheme.ts → theme state via useSyncExternalStore
|
||||
TerminalLayout.tsx → the Gruvbox terminal shell
|
||||
SkeuoLayout.tsx → the skeuo console 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 (mobile grid/dock)
|
||||
ServiceButton.tsx → service link + live status dot
|
||||
ServiceButton.tsx → service link + live status lamp
|
||||
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/
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue