sam/SamsTechnical-wikijs
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Initial commit: SamsTechnical-wikijs

Browse Source
This commit is contained in:
Sam Rolfe
2026-08-26 13:18:51 +10:00
commit 9769623760
7 changed files with 3531 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

513
navigation-prototype.html Normal file
View File

@@ -0,0 +1,513 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>SYSARCH · Knowledge Base Structure</title>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=EB+Garamond:ital,wght@0,400;0,500;1,400&family=JetBrains+Mono:wght@400;500&family=Saira+Condensed:wght@500;600;700;800&display=swap" rel="stylesheet">
<style>
:root {
--canvas: #000000;
--ink: #ffffff;
--body: #cccccc;
--muted: #999999;
--muted-deep: #666666;
--surface-card: #141414;
--surface-soft: #0d0d0d;
--surface-elevated: #1f1f1f;
--border: #262626;
--link: #c3d9f3;
--success: #5fa657;
--font-display: 'Saira Condensed', 'Impact', 'Arial Black', sans-serif;
--font-body: 'EB Garamond', 'Georgia', serif;
--font-mono: 'JetBrains Mono', 'Fira Code', 'Consolas', ui-monospace, monospace;
--sidebar-width: 310px;
--nav-height: 56px;
}
* { margin: 0; padding: 0; box-sizing: border-box; }
html, body {
background: var(--canvas); color: var(--body);
font-family: var(--font-body); font-size: 16px;
-webkit-font-smoothing: antialiased;
}
.topnav {
position: sticky; top: 0; z-index: 100;
background: var(--canvas); border-bottom: 1px solid var(--border);
display: flex; align-items: center; height: var(--nav-height); padding: 0 24px;
}
.topnav .wordmark {
font-family: var(--font-mono); font-size: 13px; color: var(--ink);
letter-spacing: 6px; text-transform: uppercase; margin-right: 40px;
}
.topnav .nav-links { display: flex; gap: 24px; list-style: none; }
.topnav .nav-links a {
font-family: var(--font-mono); font-size: 10px; color: var(--muted);
text-transform: uppercase; letter-spacing: 2px; text-decoration: none; transition: color 0.2s;
}
.topnav .nav-links a:hover { color: var(--ink); }
.topnav .nav-search {
margin-left: auto; background: transparent; border: 1px solid var(--border);
border-radius: 9999px; padding: 8px 20px;
font-family: var(--font-mono); font-size: 11px; color: var(--muted);
letter-spacing: 1.5px; text-transform: uppercase; cursor: pointer; transition: border-color 0.2s;
}
.topnav .nav-search:hover { border-color: var(--ink); }
.page-layout { display: flex; min-height: calc(100vh - var(--nav-height)); }
.sidebar { width: var(--sidebar-width); flex-shrink: 0; border-right: 1px solid var(--border); overflow-y: auto; padding: 16px 0 48px; }
.sidebar-section { margin-bottom: 2px; }
.sidebar-heading {
display: flex; align-items: center; gap: 10px; padding: 8px 20px;
font-family: var(--font-mono); font-size: 10px; text-transform: uppercase;
letter-spacing: 2px; color: var(--muted-deep); cursor: pointer; user-select: none; transition: color 0.2s;
}
.sidebar-heading:hover { color: var(--muted); }
.sidebar-heading .icon { font-size: 14px; line-height: 1; flex-shrink: 0; }
.sidebar-heading .chevron { margin-left: auto; font-size: 9px; transition: transform 0.2s; font-family: var(--font-mono); flex-shrink: 0; }
.sidebar-heading .chevron.open { transform: rotate(90deg); }
.sidebar-items { overflow: hidden; max-height: 0; transition: max-height 0.3s ease; }
.sidebar-items.open { max-height: 3000px; }
.sidebar-item {
display: block; padding: 5px 20px 5px 50px;
font-family: var(--font-mono); font-size: 10px; color: var(--muted);
text-decoration: none; letter-spacing: 1.5px; text-transform: uppercase;
border-left: 2px solid transparent; transition: color 0.2s, border-color 0.2s, background 0.2s;
}
.sidebar-item:hover { color: var(--ink); background: rgba(255,255,255,0.02); }
.sidebar-item.active { color: var(--link); border-left-color: var(--link); background: rgba(195,217,243,0.04); }
.sidebar-subitem {
display: block; padding: 3px 20px 3px 66px;
font-family: var(--font-mono); font-size: 9px; color: var(--muted-deep);
text-decoration: none; letter-spacing: 1.5px; text-transform: uppercase; transition: color 0.2s;
}
.sidebar-subitem:hover { color: var(--muted); }
.main-content { flex: 1; padding: 48px 64px; max-width: 1120px; overflow-x: hidden; }
.breadcrumb {
font-family: var(--font-mono); font-size: 11px; color: var(--muted-deep);
letter-spacing: 2px; text-transform: uppercase; margin-bottom: 8px;
}
.breadcrumb a { color: var(--muted); text-decoration: none; }
.breadcrumb a:hover { color: var(--link); }
.breadcrumb .separator { margin: 0 6px; }
.page-heading {
font-family: var(--font-display); font-size: 44px; font-weight: 600; color: var(--ink);
letter-spacing: 3px; text-transform: uppercase; margin-bottom: 8px; line-height: 1.1;
}
.page-meta { font-family: var(--font-mono); font-size: 11px; color: var(--muted); letter-spacing: 2px; text-transform: uppercase; margin-bottom: 24px; }
.page-subtitle { font-family: var(--font-body); font-size: 15px; color: var(--body); line-height: 1.5; margin-bottom: 32px; max-width: 700px; }
.section-label { font-family: var(--font-mono); font-size: 10px; color: var(--muted); letter-spacing: 2px; text-transform: uppercase; margin-bottom: 16px; padding-top: 40px; }
.hub-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; margin-bottom: 32px; }
.hub-card {
border: 1px solid var(--border); background: var(--surface-card); padding: 24px;
transition: border-color 0.2s, background 0.2s; cursor: pointer;
}
.hub-card:hover { border-color: var(--muted-deep); background: var(--surface-elevated); }
.hub-card .card-icon { font-size: 20px; margin-bottom: 8px; line-height: 1; }
.hub-card .card-title { font-family: var(--font-display); font-size: 20px; font-weight: 600; color: var(--ink); letter-spacing: 1.5px; text-transform: uppercase; margin-bottom: 4px; }
.hub-card .card-count { font-family: var(--font-mono); font-size: 9px; color: var(--muted-deep); letter-spacing: 1.5px; text-transform: uppercase; margin-bottom: 8px; }
.hub-card .card-desc { font-family: var(--font-body); font-size: 14px; color: var(--body); line-height: 1.5; }
.xref-section { margin-top: 48px; padding-top: 32px; border-top: 1px solid var(--border); }
.xref-label { font-family: var(--font-mono); font-size: 10px; color: var(--muted); letter-spacing: 2px; text-transform: uppercase; margin-bottom: 16px; }
.xref-grid { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 16px; }
.xref-card {
border: 1px solid var(--border); padding: 16px; background: var(--surface-soft); transition: border-color 0.2s; cursor: pointer;
}
.xref-card:hover { border-color: var(--muted-deep); }
.xref-card .xref-icon { font-size: 16px; margin-bottom: 6px; }
.xref-card .xref-title { font-family: var(--font-display); font-size: 14px; font-weight: 600; color: var(--ink); letter-spacing: 1px; text-transform: uppercase; margin-bottom: 2px; }
.xref-card .xref-path { font-family: var(--font-mono); font-size: 9px; color: var(--muted-deep); letter-spacing: 1.5px; text-transform: uppercase; }
.content-section { margin-bottom: 32px; }
.content-section h2 { font-family: var(--font-display); font-size: 22px; font-weight: 600; color: var(--ink); letter-spacing: 1.5px; text-transform: uppercase; margin-bottom: 12px; }
.content-section p { font-family: var(--font-body); font-size: 15px; color: var(--body); line-height: 1.6; margin-bottom: 12px; }
.project-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.project-item {
padding: 12px 16px; border: 1px solid var(--border); background: var(--surface-soft);
font-family: var(--font-mono); font-size: 10px; color: var(--muted);
letter-spacing: 1.5px; text-transform: uppercase; cursor: pointer; transition: border-color 0.2s;
}
.project-item:hover { border-color: var(--muted-deep); color: var(--ink); }
.project-item .p-status { font-size: 8px; color: var(--muted-deep); margin-left: 8px; }
@media (max-width: 1024px) { .sidebar { display: none; } .main-content { padding: 32px 24px; } .hub-grid { grid-template-columns: 1fr; } .xref-grid { grid-template-columns: 1fr 1fr; } .project-grid { grid-template-columns: 1fr; } .page-heading { font-size: 36px; } }
@media (max-width: 768px) { .topnav .nav-links { display: none; } .xref-grid { grid-template-columns: 1fr; } .page-heading { font-size: 28px; } .main-content { padding: 24px 16px; } }
</style>
</head>
<body>
<!-- ===== TOP NAV ===== -->
<nav class="topnav">
<span class="wordmark">SYSARCH</span>
<ul class="nav-links">
<li><a href="#">Machines</a></li>
<li><a href="#">Docker</a></li>
<li><a href="#">Dev &amp; AI</a></li>
<li><a href="#">AI Resume</a></li>
<li><a href="#">Home &amp; IoT</a></li>
<li><a href="#">Audio</a></li>
<li><a href="#">Network</a></li>
</ul>
<div class="nav-search">Search</div>
</nav>
<!-- ===== LAYOUT ===== -->
<div class="page-layout">
<!-- ===== SIDEBAR ===== -->
<aside class="sidebar">
<!-- MACHINES -->
<div class="sidebar-section">
<div class="sidebar-heading" onclick="toggle(this)">
<span class="icon">🖥</span> Machines &amp; OS
<span class="chevron open">▶</span>
</div>
<div class="sidebar-items open">
<a href="#" class="sidebar-item active">Overview</a>
<a href="#" class="sidebar-item">NixOS Desktop</a>
<a href="#" class="sidebar-subitem">→ sam-desktop</a>
<a href="#" class="sidebar-subitem">→ Niri Compositor</a>
<a href="#" class="sidebar-subitem">→ Flake Config</a>
<a href="#" class="sidebar-item">NixOS Server</a>
<a href="#" class="sidebar-subitem">→ nixos-desktop</a>
<a href="#" class="sidebar-item">Ubuntu Server</a>
<a href="#" class="sidebar-subitem">→ sam-ubuntu1</a>
<a href="#" class="sidebar-subitem">→ Service Management</a>
</div>
</div>
<!-- DOCKER (split across 2 hosts) -->
<div class="sidebar-section">
<div class="sidebar-heading" onclick="toggle(this)">
<span class="icon">🐳</span> Docker Ecosystem
<span class="chevron">▶</span>
</div>
<div class="sidebar-items">
<a href="#" class="sidebar-item">Overview</a>
<a href="#" class="sidebar-item">Host: nixos-desktop</a>
<a href="#" class="sidebar-subitem">→ Service Catalog</a>
<a href="#" class="sidebar-subitem">→ Compose Stacks</a>
<a href="#" class="sidebar-subitem">→ Mosquitto MQTT</a>
<a href="#" class="sidebar-subitem">→ N8N Automation</a>
<a href="#" class="sidebar-subitem">→ Pi-Hole Backup</a>
<a href="#" class="sidebar-subitem">→ Snapcast Server</a>
<a href="#" class="sidebar-item">Host: sam-ubuntu1</a>
<a href="#" class="sidebar-subitem">→ Service Catalog</a>
<a href="#" class="sidebar-subitem">→ Compose Stacks</a>
<a href="#" class="sidebar-subitem">→ Caddy Proxy</a>
<a href="#" class="sidebar-subitem">→ Wiki.js</a>
<a href="#" class="sidebar-subitem">→ Gitea</a>
<a href="#" class="sidebar-subitem">→ Home Assistant</a>
<a href="#" class="sidebar-subitem">→ Pi-Hole</a>
<a href="#" class="sidebar-subitem">→ Immich</a>
<a href="#" class="sidebar-item">Backup Strategy</a>
<a href="#" class="sidebar-item">Monitoring</a>
</div>
</div>
<!-- DEV & AI (merged) -->
<div class="sidebar-section">
<div class="sidebar-heading" onclick="toggle(this)">
<span class="icon">⚡</span> Dev &amp; AI
<span class="chevron">▶</span>
</div>
<div class="sidebar-items">
<a href="#" class="sidebar-item">Overview</a>
<a href="#" class="sidebar-item">Pi Coding Agent</a>
<a href="#" class="sidebar-item">Neovim Setup</a>
<a href="#" class="sidebar-item">Terminal Config</a>
<a href="#" class="sidebar-item">CLI Tooling</a>
<a href="#" class="sidebar-item">Open Code / Aider</a>
<a href="#" class="sidebar-item">Hermes / OpenClaw</a>
<a href="#" class="sidebar-item">VSCode (Sporadic)</a>
<a href="#" class="sidebar-item">Skills</a>
<a href="#" class="sidebar-subitem">→ System Architect</a>
<a href="#" class="sidebar-subitem">→ Design Build</a>
<a href="#" class="sidebar-subitem">→ Security Scanning</a>
<a href="#" class="sidebar-subitem">→ Caveman Mode</a>
<a href="#" class="sidebar-subitem">→ NixOS Workflow</a>
<a href="#" class="sidebar-item">Extensions</a>
<a href="#" class="sidebar-item">Templates &amp; Prompts</a>
<a href="#" class="sidebar-item">Workflows</a>
</div>
</div>
<!-- AI RESUME SYSTEM -->
<div class="sidebar-section">
<div class="sidebar-heading" onclick="toggle(this)">
<span class="icon">📋</span> AI Resume System
<span class="chevron">▶</span>
</div>
<div class="sidebar-items">
<a href="#" class="sidebar-item">Architecture</a>
<a href="#" class="sidebar-item">Docker Containers</a>
<a href="#" class="sidebar-item">React Websites</a>
<a href="#" class="sidebar-item">LangChain Pipeline</a>
<a href="#" class="sidebar-item">Obsidian Ingestion</a>
<a href="#" class="sidebar-item">RAG Database</a>
<a href="#" class="sidebar-item">Chatbot Frontend</a>
<a href="#" class="sidebar-item">Content Sources</a>
<a href="#" class="sidebar-subitem">→ Gardening Knowledge</a>
<a href="#" class="sidebar-subitem">→ Wiki.js Export</a>
<a href="#" class="sidebar-subitem">→ Obsidian Vaults</a>
<a href="#" class="sidebar-subitem">→ GitHub Projects</a>
</div>
</div>
<!-- HOME ASSISTANT & IOT -->
<div class="sidebar-section">
<div class="sidebar-heading" onclick="toggle(this)">
<span class="icon">🏠</span> Home Assistant &amp; IoT
<span class="chevron">▶</span>
</div>
<div class="sidebar-items">
<a href="#" class="sidebar-item">Overview</a>
<a href="#" class="sidebar-item">IoT Architecture</a>
<a href="#" class="sidebar-subitem">→ How It All Works</a>
<a href="#" class="sidebar-subitem">→ Mosquitto MQTT</a>
<a href="#" class="sidebar-subitem">→ Cron &amp; Automations</a>
<a href="#" class="sidebar-subitem">→ Voice &amp; Speech</a>
<a href="#" class="sidebar-subitem">→ SIM Cards &amp; GPRS</a>
<a href="#" class="sidebar-subitem">→ Website Dashboards</a>
<a href="#" class="sidebar-item">Hardware &amp; Skills</a>
<a href="#" class="sidebar-subitem">→ Electronics Guide</a>
<a href="#" class="sidebar-subitem">→ Sensors</a>
<a href="#" class="sidebar-subitem">→ Microcontrollers</a>
<a href="#" class="sidebar-subitem">→ Power Systems</a>
<a href="#" class="sidebar-subitem">→ Connectivity</a>
<a href="#" class="sidebar-item">Projects</a>
<a href="#" class="sidebar-subitem">→ GPS Vehicle Tracking</a>
<a href="#" class="sidebar-subitem">→ Head Light Bar &amp; Racks</a>
<a href="#" class="sidebar-subitem">→ Car WiFi / Media System</a>
<a href="#" class="sidebar-subitem">→ Car Second Battery</a>
<a href="#" class="sidebar-subitem">→ Garden Sprinklers</a>
<a href="#" class="sidebar-subitem">→ Garden Lights</a>
<a href="#" class="sidebar-subitem">→ Garden NFC / N8N</a>
<a href="#" class="sidebar-subitem">→ Garden Monitoring</a>
<a href="#" class="sidebar-subitem">→ Custom Voice Assistant</a>
<a href="#" class="sidebar-subitem">→ Front Door Cam</a>
<a href="#" class="sidebar-subitem">→ Security Camera</a>
<a href="#" class="sidebar-subitem">→ ESP32 Presence (PIR)</a>
<a href="#" class="sidebar-subitem">→ ESP32 Zigbee Radar</a>
<a href="#" class="sidebar-subitem">→ ESP32 Zigbee Router</a>
<a href="#" class="sidebar-subitem">→ ESP32 Remote Control</a>
<a href="#" class="sidebar-subitem">→ ESP32 Master Control</a>
<a href="#" class="sidebar-subitem">→ ESP32 Power Monitor</a>
<a href="#" class="sidebar-subitem">→ Wake On Lan</a>
<a href="#" class="sidebar-subitem">→ Homebox NFC Organizer</a>
<a href="#" class="sidebar-subitem">→ Fish Feeder</a>
<a href="#" class="sidebar-subitem">→ Dog Feeder</a>
<a href="#" class="sidebar-subitem">→ Dog Water</a>
<a href="#" class="sidebar-subitem">→ Dog Door Opener</a>
<a href="#" class="sidebar-subitem">→ Yogurt Maker</a>
<a href="#" class="sidebar-subitem">→ Lizard Habitat System</a>
<a href="#" class="sidebar-subitem">→ Possum Patrol</a>
<a href="#" class="sidebar-subitem">→ Website Display Screen</a>
<a href="#" class="sidebar-subitem">→ Mobile Phone Projects</a>
<a href="#" class="sidebar-item">Dashboards</a>
</div>
</div>
<!-- SNAPCAST AUDIO -->
<div class="sidebar-section">
<div class="sidebar-heading" onclick="toggle(this)">
<span class="icon">🔊</span> Snapcast Audio
<span class="chevron">▶</span>
</div>
<div class="sidebar-items">
<a href="#" class="sidebar-item">Architecture</a>
<a href="#" class="sidebar-subitem">→ Voice Integration</a>
<a href="#" class="sidebar-subitem">→ Multi-Room Sync</a>
<a href="#" class="sidebar-item">RPi Clients</a>
<a href="#" class="sidebar-item">Configuration</a>
</div>
</div>
<!-- NETWORK -->
<div class="sidebar-section">
<div class="sidebar-heading" onclick="toggle(this)">
<span class="icon">🌐</span> Network
<span class="chevron">▶</span>
</div>
<div class="sidebar-items">
<a href="#" class="sidebar-item">Topology</a>
<a href="#" class="sidebar-item">DNS &amp; Pi-Hole</a>
<a href="#" class="sidebar-item">Caddy Proxy</a>
<a href="#" class="sidebar-item">Security</a>
<a href="#" class="sidebar-item">VPN</a>
</div>
</div>
</aside>
<!-- ===== MAIN CONTENT — Home & IoT Hub ===== -->
<main class="main-content">
<div class="breadcrumb">
<a href="#">Home</a>
<span class="separator">/</span>
<span style="color:var(--muted)">Home Assistant &amp; IoT</span>
</div>
<h1 class="page-heading">Home Assistant &amp; IoT</h1>
<div class="page-meta">30+ projects · 5 architecture guides · Hardware catalog</div>
<div class="page-subtitle">
Smart home automation, ESP32 sensor networks, vehicle tracking, garden systems, pet care automation,
and custom voice integration — all tied together through Home Assistant, Mosquitto MQTT,
and the Snapcast audio system.
</div>
<!-- Architecture -->
<div class="section-label">Architecture &amp; Infrastructure</div>
<div class="hub-grid" style="grid-template-columns:repeat(3,1fr);">
<div class="hub-card">
<div class="card-icon">🏗️</div>
<div class="card-title" style="font-size:17px;">How It All Works</div>
<div class="card-desc">End-to-end IoT architecture: sensors → MQTT → HA → automations → voice/alerts.</div>
</div>
<div class="hub-card">
<div class="card-icon">📡</div>
<div class="card-title" style="font-size:17px;">Mosquitto MQTT</div>
<div class="card-desc">Message broker setup, topics, bridging, and security.</div>
</div>
<div class="hub-card">
<div class="card-icon">🗣️</div>
<div class="card-title" style="font-size:17px;">Voice &amp; Speech</div>
<div class="card-desc">Custom voice assistant, Piper TTS, speech recognition, Snapcast integration.</div>
</div>
<div class="hub-card">
<div class="card-icon">📱</div>
<div class="card-title" style="font-size:17px;">SIM Cards &amp; GPRS</div>
<div class="card-desc">Cellular connectivity for GPS tracking, remote monitoring, SMS alerts.</div>
</div>
<div class="hub-card">
<div class="card-icon">⏰</div>
<div class="card-title" style="font-size:17px;">Cron &amp; Automations</div>
<div class="card-desc">Scheduled tasks, timed events, and HA automation blueprints.</div>
</div>
<div class="hub-card">
<div class="card-icon">📊</div>
<div class="card-title" style="font-size:17px;">Website Tracking</div>
<div class="card-desc">Web-based dashboards, public status pages, data visualization.</div>
</div>
</div>
<!-- Hardware & Skills -->
<div class="section-label">Hardware &amp; Skills Catalog</div>
<div class="hub-grid">
<div class="hub-card">
<div class="card-icon">🔧</div>
<div class="card-title">Electronics Guide</div>
<div class="card-count">Foundations</div>
<div class="card-desc">Breadboarding, soldering, wiring, connectors. Relays, resistors, capacitors, voltage regulation.</div>
</div>
<div class="hub-card">
<div class="card-icon">📡</div>
<div class="card-title">Sensors</div>
<div class="card-count">20+ Types</div>
<div class="card-desc">PIR, temperature, humidity, light, moisture, gas, radar, GPS, magnetic, ultrasonic, pressure.</div>
</div>
<div class="hub-card">
<div class="card-icon">🔌</div>
<div class="card-title">Microcontrollers</div>
<div class="card-count">ESP32 · RPi · More</div>
<div class="card-desc">ESP32 dev boards, Raspberry Pi (all models), Arduino, programming, flashing, deployment.</div>
</div>
<div class="hub-card">
<div class="card-icon">⚡</div>
<div class="card-title">Power Systems</div>
<div class="card-count">Battery · Solar</div>
<div class="card-desc">Lithium batteries, solar chargers, power management, low-power design, UPS integration.</div>
</div>
<div class="hub-card">
<div class="card-icon">📶</div>
<div class="card-title">Connectivity</div>
<div class="card-count">WiFi · Zigbee · GPRS · NFC</div>
<div class="card-desc">Wireless protocols, mesh networking, NFC tags, SIM cards, signal range optimization.</div>
</div>
<div class="hub-card">
<div class="card-icon">🎛️</div>
<div class="card-title">Input &amp; Output</div>
<div class="card-count">HMI Components</div>
<div class="card-desc">Buttons, potentiometers, dials, keypads, LEDs, displays, speakers, haptics, custom keyboards.</div>
</div>
</div>
<!-- Projects -->
<div class="section-label">IoT Projects</div>
<div class="project-grid">
<div class="project-item">🚗 GPS Vehicle Tracking</div>
<div class="project-item">🚙 Head Light Bar &amp; Racks</div>
<div class="project-item">📡 Car WiFi / Media / Cams</div>
<div class="project-item">🔋 Car Second Battery</div>
<div class="project-item">💧 Garden Sprinklers</div>
<div class="project-item">💡 Garden Lights</div>
<div class="project-item">🏷️ Garden NFC / N8N</div>
<div class="project-item">🌱 Garden Monitor (Moisture/N)</div>
<div class="project-item">🎙️ Custom Voice Assistant</div>
<div class="project-item">🚪 Front Door Cam</div>
<div class="project-item">📹 Security Camera</div>
<div class="project-item">📡 ESP32 Presence (PIR)</div>
<div class="project-item">📡 ESP32 Zigbee Radar</div>
<div class="project-item">🔄 ESP32 Zigbee Router</div>
<div class="project-item">🎮 ESP32 Remote Control</div>
<div class="project-item">⚙️ ESP32 Master Control</div>
<div class="project-item">🔌 ESP32 Power Monitor</div>
<div class="project-item">💤 Wake On Lan</div>
<div class="project-item">📦 Homebox NFC Organizer</div>
<div class="project-item">🐟 Fish Feeder</div>
<div class="project-item">🍗 Dog Feeder</div>
<div class="project-item">💧 Dog Water</div>
<div class="project-item">🐕 Dog Door Opener</div>
<div class="project-item">🥛 Yogurt Maker</div>
<div class="project-item">🦎 Lizard Habitat System</div>
<div class="project-item">🐿️ Possum Patrol</div>
<div class="project-item">📺 Website Display Screen</div>
<div class="project-item">📱 Mobile Phone Projects</div>
</div>
<!-- CROSS-REFERENCES -->
<div class="xref-section">
<div class="xref-label">Related Topics</div>
<div class="xref-grid">
<div class="xref-card">
<div class="xref-icon">🔊</div>
<div class="xref-title">Snapcast Audio</div>
<div class="xref-path">Audio / Voice Integration</div>
</div>
<div class="xref-card">
<div class="xref-icon">🐳</div>
<div class="xref-title">Docker (MQTT)</div>
<div class="xref-path">Docker / nixos-desktop / Mosquitto</div>
</div>
<div class="xref-card">
<div class="xref-icon">🌐</div>
<div class="xref-title">Network (VPN)</div>
<div class="xref-path">Network / VPN</div>
</div>
</div>
</div>
</main>
</div>
<script>
function toggle(el) {
const section = el.closest('.sidebar-section');
const items = section.querySelector('.sidebar-items');
const chevron = el.querySelector('.chevron');
items.classList.toggle('open');
chevron.classList.toggle('open');
}
</script>
</body>
</html>