updated README to match current site, opencode.md now keeps README in sync
This commit is contained in:
dvorakmortonxd
parent
709fba188c
commit
ba158a6ae5
2 changed files with 155 additions and 20 deletions
134
README.md
134
README.md
|
|
@ -1,18 +1,56 @@
|
|||
# 👾 dvorakmortonxd.dev
|
||||
|
||||
> The source code for my own website.
|
||||
This repository contains the Next.js frontend for my personal portfolio and link tree, **[dvorakmortonxd.dev](https://dvorakmortonxd.dev)**.
|
||||
It's designed with a custom terminal/TUI aesthetic (using the Monocraft font and a Gruvbox-inspired theme) to list out my socials, hardware collections, self-hosted homelab services, and various scattered coding projects.
|
||||
> 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:
|
||||
|
||||
- **`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 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**, 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).
|
||||
- **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
|
||||
cell, with a follow-the-cursor drag ghost.
|
||||
- **Multi-window manager** — draggable, resizable, minimizable, maximizable, focus/z-order
|
||||
and animated open/close (with reduced-motion support).
|
||||
- **Working terminal app** — command input with history (`↑`/`↓`, `Ctrl+L` to clear) and a
|
||||
hidden `ssh` easter egg.
|
||||
- **Live service status** — each self-hosted service is health-checked through the site's
|
||||
own API; Minecraft is checked through mcstatus.io.
|
||||
- **Live GitDXD stats** — contribution heatmap + latest commit activity proxied server-side
|
||||
from the self-hosted Forgejo instance.
|
||||
- **Extras** — a playable `Revival Inc.` game embedded at `/revival-inc`, `llms.txt`,
|
||||
`robots.txt` and a `sitemap.xml`.
|
||||
|
||||
## 🛠️ Tech Stack
|
||||
|
||||
- **Framework:** Next.js (App Router)
|
||||
- **Language:** TypeScript
|
||||
- **Styling:** Custom CSS for that retro TUI vibe
|
||||
|
||||
- **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)
|
||||
- **Images:** `next/image`
|
||||
- **Version:** `2.1.0` (see `package.json`)
|
||||
|
||||
## 🚀 Running Locally
|
||||
|
||||
Want to spin it up and check the code out yourself?
|
||||
Requires **Node.js >= 20.9.0** (Next.js 16).
|
||||
|
||||
```bash
|
||||
git clone https://git.dvorakmortonxd.dev/dvorakmortonxd/dvorakmortonxd.dev
|
||||
|
|
@ -21,17 +59,83 @@ npm install
|
|||
npm run dev
|
||||
```
|
||||
|
||||
Then open [http://localhost:3000](http://localhost:3000) in your browser.
|
||||
Then open [http://localhost:3000](http://localhost:3000).
|
||||
|
||||
### Scripts
|
||||
|
||||
```bash
|
||||
npm run dev # next dev --turbopack
|
||||
npm run build # next build --turbopack
|
||||
npm run start # next start (production)
|
||||
npm run lint # eslint
|
||||
```
|
||||
|
||||
Handy checks before shipping: `npx tsc --noEmit`, `npx eslint <files>`, `npm run build`.
|
||||
|
||||
### Testing from a phone on your LAN
|
||||
|
||||
`next.config.ts` sets `allowedDevOrigins` so the dev server can be reached from other devices
|
||||
on the local network (otherwise Next.js 403s the dev asset requests).
|
||||
|
||||
## 📡 API Routes
|
||||
|
||||
| Route | Method | What it does |
|
||||
| --- | --- | --- |
|
||||
| `/api/heatmap` | `GET` | Proxies the user's contribution heatmap from `git.dvorakmortonxd.dev`. |
|
||||
| `/api/activities` | `GET` | Fetches the GitDXD activity feed and keeps only the user's own events. |
|
||||
| `/api/ping?url=…` | `GET` | Health-checks a service. Handles `minecraft://host:port` via mcstatus.io; treats any non-5xx HTTP response as "up". |
|
||||
|
||||
## 📁 Project Structure
|
||||
|
||||
```
|
||||
src/app/
|
||||
page.tsx → renders <ThemeRoot/>, 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
|
||||
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
|
||||
ping/route.ts → service health check (HTTP + Minecraft)
|
||||
components/
|
||||
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
|
||||
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
|
||||
ContributionHeatmap.tsx → heatmap + recent commits widget
|
||||
Clock.tsx → live clock
|
||||
JokerLogo.tsx → logo with click easter egg
|
||||
SlBackground.tsx → animated ASCII train background
|
||||
public/ → fonts, wallpapers, icons, friend pages, /revival-inc game, llms.txt, robots.txt, sitemap.xml
|
||||
```
|
||||
|
||||
## 🌍 Deploying?
|
||||
|
||||
In order to deploy the website youd want to set up a reverse proxy and something that runs it as a service, me personally, I use cloudflared and pm2.
|
||||
you could also use something like vercel but I prefer selfhosting, also please if you want to deploy it,
|
||||
you gotta change it enough so that you dont directly copy my website, and also follow the GPL3.0-only license,
|
||||
meaning you gotta make your code opensource too
|
||||
In order to deploy the website you'd want to set up a reverse proxy and something that runs it
|
||||
as a service. Me personally, I use cloudflared and pm2. You could also use something like
|
||||
Vercel, but I prefer self-hosting. Also, if you want to deploy it, you gotta change it enough
|
||||
so that you don't directly copy my website, and also follow the GPL3.0-only license, meaning
|
||||
you gotta make your code open source too.
|
||||
|
||||
Detailed step-by-step production instructions for **PM2 + npm on Debian and Alpine Linux** are in
|
||||
Detailed step-by-step production instructions for **PM2 + npm on Debian and Alpine Linux**
|
||||
(including the Cloudflare Tunnel / Nginx reverse-proxy setup) are in
|
||||
[`DEPLOYMENT.md`](./DEPLOYMENT.md).
|
||||
|
||||
## 📬 Contact
|
||||
To see my projects or get in touch, visit the live site or email me at [dvorak@dvorakmortonxd.dev](mailto:dvorak@dvorakmortonxd.dev).
|
||||
|
||||
To see my projects or get in touch, visit the live site or email me at
|
||||
[dvorak@dvorakmortonxd.dev](mailto:dvorak@dvorakmortonxd.dev).
|
||||
|
||||
## 📄 License
|
||||
|
||||
GPL-3.0-only — see [`LICENSE`](./LICENSE).
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue