86 lines
3.2 KiB
Markdown
86 lines
3.2 KiB
Markdown
# 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).*
|