~/jstites$
2026

# jstites.dev

This site. A terminal-styled portfolio with an MDX blog, command palette, and live visitor data.

role
solo
stack
Next.js 16React 19Tailwind v4MDXTypeScriptClaude Code
repo
git.jstites.dev/jstites/personal-page
demo
jstites.dev

## Why

I wanted a single canonical URL to put on a resume — not a LinkedIn profile, not a GitHub README. Built it over a weekend on Next.js 16 + Tailwind v4 to also feel out the new App Router conventions.

## Built with AI, honestly

I'm a backend engineer by trade. Most of the React, Tailwind, and visual design here was built with Claude Code as a pair — I drove the architecture, design decisions, content, and the parts I cared about most (the Fingerprint integration, the Forgejo CI/CD pipeline, the self-hosted Docker deploy), and Claude wrote most of the frontend plumbing. I think being transparent about that matters more than pretending I'm secretly a great UI dev. (Backend devs rule!!!)

## What's interesting

  • MDX in repo, no CMS. Posts and projects are .mdx files in content/. Frontmatter is parsed with gray-matter, content is rendered with @next/mdx. Zero runtime fetches for content.
  • Self-hosted everything. Code lives in my own Forgejo, the Docker image builds via Forgejo Actions on a custom runner image I also built, and the container runs on my Unraid server.

## devlog(2 entries)

  1. initial scaffold and deploy

    First version live. Next.js 16 App Router, Tailwind v4 (no JS config — tokens live in @theme inline {...} in globals.css), MDX-in-repo for projects and blog, terminal aesthetic with a working command palette (/ to search, ? for shortcuts, g h/p/b/a vim-style nav).

    Deployed via Docker image pushed to a self-hosted Forgejo container registry, pulled and run manually on an Unraid server.

  2. neofetch widget + theme system

    Replaced the plain whoami line on the landing with a neofetch-style block: ASCII "JS" logo on the left, two-column data on the right (visits, ID, IP-derived location, VPN status, incognito, browser, OS, screen, language, timezone, a live local clock, current theme). Fingerprint Smart Signals supply the geolocation, VPN, and incognito flags; everything else comes from browser APIs that the page already had access to.

    Also added a real theme system — 11 named themes (Atom One Dark/Light, GitHub Dark/Light, Solarized Dark, Dracula, Gruvbox Dark, Tokyo Night, Godot, plus defaults). Each theme is a .theme-<id> class on <html> setting five CSS vars; dark themes additionally get the .dark class so Tailwind's dark: variant still fires. Boot script applies the saved theme before paint so there's no FOUC.