An interactive React showcase of the homelab infrastructure: NixOS flakes, the Niri compositor, Docker ecosystems, Home Assistant automation, Snapcast audio, Zigbee/ESP32 sensor networks, security hardening, and remote setup — presented as deep-dive pages with code blocks and stats.

What it is

A portfolio site that documents how the homelab is architected and operated. Each infrastructure domain gets a dedicated page with architecture notes, configuration snippets (CodeBlock), tooling chips, and status indicators — demonstrating real production DevOps work.

Tech stack

Layer	Technology
Framework	React 19
Build	Vite 6
Styling	Tailwind CSS 4 (via `@tailwindcss/vite`)
Animation	Motion 12
Routing	React Router 7
Icons	lucide-react
Language	TypeScript

Architecture & design patterns

Domain-per-page — 17 infrastructure pages, each a focused deep-dive
Code-first documentation — CodeBlock renders syntax-highlighted config (NixOS, Docker Compose, YAML)
Stat cards — StatCard for key metrics per domain
Status badges — StatusBadge shows service/component health
Tool chips — ToolChip visualizes the toolchain used per domain
Section cards — SectionCard structures long-form content
AI flow page — documents the AI development pipeline (AIFlow)
Shared shell — Layout + PageHeader + nav from navItems.ts
Route-based pages — multi-page SPA

Pages

Route	Domain
`/`	Dashboard — infrastructure overview
`/nixos`	NixOS configuration & flakes
`/niri`	Niri compositor setup
`/docker`	Docker orchestration & services
`/home-assistant`	Home Assistant automation
`/snapcast`	Multi-room audio
`/zigbee-esp32`	Zigbee & ESP32 sensor networks
`/mobile-car-tracker`	Vehicle GPS tracking
`/terminal` / `/nvim`	Dev environment tooling
`/security`	Hardening & access control
`/remote-setup`	Remote access & setup
`/website`	This site's own infra
`/ai-flow`	AI development pipeline
`/home-ai` / `/home-networking` / `/dev-environment`	Supporting domains
`/contact`	Contact + links

Standards

TypeScript strict mode
Semantic HTML, accessible landmarks
Tailwind utility-first styling
Fully responsive
Content as structured data (navItems.ts) + code-first documentation

Getting started

npm install
npm run dev      # development server
npm run build    # production build

Structure

src/
├── components/    # CodeBlock, StatCard, StatusBadge, ToolChip,
│                  # SectionCard, Layout, PageHeader, AiChatBox
├── data/          # navItems.ts
├── pages/         # 17 domain pages + Contact
├── App.tsx        # Router + app shell
└── main.tsx       # Entry point

Part of the Sam Rolfe portfolio family — see sam-iot-electronics and sam-pursuits.