# Sam DevOps

**A DevOps and infrastructure portfolio — documenting a self-hosted homelab from NixOS configuration to Docker orchestration.**

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

```bash
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](https://gitea.lab.audasmedia.com.au/sam/sam-iot-electronics) and [sam-pursuits](https://gitea.lab.audasmedia.com.au/sam/sam-pursuits).*