514 lines
25 KiB
HTML
514 lines
25 KiB
HTML
<!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 & AI</a></li>
|
|
<li><a href="#">AI Resume</a></li>
|
|
<li><a href="#">Home & 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 & 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 & 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 & 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 & 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 & Automations</a>
|
|
<a href="#" class="sidebar-subitem">→ Voice & Speech</a>
|
|
<a href="#" class="sidebar-subitem">→ SIM Cards & GPRS</a>
|
|
<a href="#" class="sidebar-subitem">→ Website Dashboards</a>
|
|
<a href="#" class="sidebar-item">Hardware & 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 & 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 & 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 & IoT</span>
|
|
</div>
|
|
|
|
<h1 class="page-heading">Home Assistant & 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 & 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 & 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 & 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 & 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 & 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 & 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 & 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>
|