Files
blog/samples/sample-command-center.html

522 lines
17 KiB
HTML

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>River Rooks | Command Center</title>
<style>
@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:wght@400;500;700&family=Inter:wght@400;500;700&family=JetBrains+Mono:wght@400;500;700&display=swap');
:root {
--bg-canvas: #0d0f12;
--bg-surface: #121417;
--bg-elevated: #1c1f26;
--border-color: #2b303b;
--text-primary: #e0e6f0;
--text-muted: #8a95a5;
--accent-cyan: #00f0ff;
--accent-green: #00e676;
--accent-amber: #ffb700;
}
* { box-sizing: border-box; margin: 0; padding: 0; }
body {
background-color: var(--bg-canvas);
color: var(--text-primary);
font-family: 'Inter', sans-serif;
line-height: 1.6;
min-height: 100vh;
display: flex;
flex-direction: column;
}
/* Command Center Top Navigation Header */
.app-header {
background-color: var(--bg-surface);
border-bottom: 1px solid var(--border-color);
padding: 0 16px;
display: flex;
justify-content: space-between;
align-items: center;
height: 48px;
}
.brand-title {
font-family: 'IBM Plex Mono', monospace;
font-size: 0.95rem;
font-weight: 700;
color: var(--text-primary);
display: flex;
align-items: center;
gap: 10px;
}
.status-dot {
width: 8px;
height: 8px;
background-color: var(--accent-cyan);
}
/* Zed-Style Editor Tabs */
.nav-tabs {
display: flex;
gap: 2px;
height: 100%;
align-items: flex-end;
}
.tab-btn {
background-color: var(--bg-canvas);
border: 1px solid var(--border-color);
border-bottom: none;
color: var(--text-muted);
font-family: 'IBM Plex Mono', monospace;
font-size: 0.82rem;
padding: 8px 16px;
cursor: pointer;
border-top-left-radius: 4px;
border-top-right-radius: 4px;
transition: none; /* Instant snap */
}
.tab-btn:hover {
color: var(--text-primary);
background-color: var(--bg-elevated);
}
.tab-btn.active {
background-color: var(--bg-surface);
color: var(--accent-cyan);
border-top: 2px solid var(--accent-cyan);
font-weight: 700;
}
/* Main Container */
.container {
max-width: 900px;
width: 100%;
margin: 32px auto;
padding: 0 20px;
flex: 1;
}
.tab-pane {
display: none;
}
.tab-pane.active {
display: block;
}
/* Panel Component */
.panel {
border: 1px solid var(--border-color);
border-radius: 4px;
background-color: var(--bg-surface);
overflow: hidden;
margin-bottom: 24px;
}
.panel-header {
background-color: var(--bg-canvas);
border-bottom: 1px solid var(--border-color);
padding: 10px 16px;
font-family: 'IBM Plex Mono', monospace;
font-size: 0.85rem;
font-weight: 700;
color: var(--text-muted);
display: flex;
justify-content: space-between;
}
.panel-body {
padding: 20px;
}
/* Services Grid (Tab 1) */
.services-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
gap: 16px;
}
.service-box {
border: 1px solid var(--border-color);
background-color: var(--bg-canvas);
padding: 14px;
border-radius: 2px;
}
.service-box:hover {
border-color: var(--accent-cyan);
}
.service-title {
font-family: 'IBM Plex Mono', monospace;
font-weight: 700;
font-size: 0.92rem;
display: flex;
justify-content: space-between;
margin-bottom: 6px;
}
.service-title a {
color: var(--text-primary);
text-decoration: none;
transition: none;
}
.service-title a:hover {
color: var(--accent-cyan);
}
.badge-status {
font-size: 0.75rem;
padding: 2px 6px;
border-radius: 2px;
font-family: 'IBM Plex Mono', monospace;
}
.badge-online { background-color: rgba(0, 230, 118, 0.15); color: var(--accent-green); }
.badge-internal { background-color: rgba(255, 183, 0, 0.15); color: var(--accent-amber); }
.service-desc {
font-size: 0.85rem;
color: var(--text-muted);
margin-bottom: 12px;
}
.service-stats {
font-family: 'IBM Plex Mono', monospace;
font-size: 0.75rem;
color: var(--text-muted);
border-top: 1px solid var(--border-color);
padding-top: 8px;
display: flex;
justify-content: space-between;
}
/* Blog Archive Table (Tab 2) */
.blog-table {
width: 100%;
border-collapse: collapse;
font-family: 'IBM Plex Mono', monospace;
font-size: 0.85rem;
}
.blog-table th {
text-align: left;
border-bottom: 1px solid var(--border-color);
padding: 10px;
color: var(--text-muted);
font-size: 0.78rem;
}
.blog-table td {
padding: 12px 10px;
border-bottom: 1px solid var(--border-color);
}
.blog-table tr:hover td {
background-color: var(--bg-canvas);
}
.post-link {
color: var(--text-primary);
text-decoration: none;
font-weight: 500;
transition: none;
}
.post-link:hover {
color: var(--accent-cyan);
}
.tag-badge {
color: var(--text-muted);
font-size: 0.78rem;
}
/* Resume Config Document (Tab 3) */
.conf-block {
background-color: var(--bg-canvas);
border: 1px solid var(--border-color);
padding: 16px;
font-family: 'JetBrains Mono', monospace;
font-size: 0.85rem;
border-radius: 4px;
margin-bottom: 20px;
}
.conf-key { color: var(--accent-cyan); }
.conf-val { color: var(--text-primary); }
.conf-comment { color: var(--text-muted); }
.btn-action {
background-color: var(--bg-elevated);
border: 1px solid var(--border-color);
color: var(--text-primary);
font-family: 'IBM Plex Mono', monospace;
font-size: 0.85rem;
padding: 8px 16px;
cursor: pointer;
text-decoration: none;
display: inline-block;
transition: none;
}
.btn-action:hover {
background-color: var(--accent-cyan);
color: var(--bg-canvas);
}
/* Footer */
.cmd-footer {
border-top: 1px solid var(--border-color);
background-color: var(--bg-surface);
padding: 12px 20px;
font-family: 'IBM Plex Mono', monospace;
font-size: 0.8rem;
color: var(--text-muted);
display: flex;
justify-content: space-between;
}
</style>
</head>
<body>
<!-- Top App Bar & Zed-style Tabs -->
<header class="app-header">
<div class="brand-title">
<span class="status-dot"></span>
<a href="index.html" style="color: var(--text-primary); text-decoration: none;">RIVER ROOKS // COMMAND CENTER</a>
</div>
<nav class="nav-tabs">
<button class="tab-btn active" onclick="switchTab('services')">[1] ~/services</button>
<button class="tab-btn" onclick="switchTab('blog')">[2] ~/blog</button>
<button class="tab-btn" onclick="switchTab('resume')">[3] ~/resume</button>
</nav>
</header>
<!-- Main Container -->
<main class="container">
<!-- Tab 1: Homelab & Public Services Directory -->
<div id="tab-services" class="tab-pane active">
<div class="panel">
<div class="panel-header">
<span>/etc/services.d/manifest.json</span>
<span>6 CANONICAL SERVICES</span>
</div>
<div class="panel-body">
<div class="services-grid">
<div class="service-box">
<div class="service-title">
<a href="https://proxy.rooks.dev" target="_blank">Traefik Proxy (v3.1)</a>
<span class="badge-status badge-online">ONLINE</span>
</div>
<p class="service-desc">Edge HTTP reverse proxy with dynamic ACME Let's Encrypt TLS wildcard certificates.</p>
<div class="service-stats">
<span>PORT: 443/tcp</span>
<span>#core</span>
</div>
</div>
<div class="service-box">
<div class="service-title">
<a href="https://nas.rooks.dev" target="_blank">TrueNAS SCALE</a>
<span class="badge-status badge-online">ONLINE</span>
</div>
<p class="service-desc">Primary storage pool managing 48TB ZFS RaidZ2 array with daily scrub jobs.</p>
<div class="service-stats">
<span>NFS / SMB</span>
<span>#storage</span>
</div>
</div>
<div class="service-box">
<div class="service-title">
<a href="https://vault.rooks.dev" target="_blank">Vaultwarden Secrets</a>
<span class="badge-status badge-online">E2EE</span>
</div>
<p class="service-desc">Rust implementation of Bitwarden API hosting credentials, SSH keys, &amp; 2FA.</p>
<div class="service-stats">
<span>2FA / AUTH</span>
<span>#secrets</span>
</div>
</div>
<div class="service-box">
<div class="service-title">
<a href="https://git.rooks.dev" target="_blank">Forgejo Git Forge</a>
<span class="badge-status badge-online">PUBLIC</span>
</div>
<p class="service-desc">Self-hosted Git platform for dotfiles, playbooks, and CTF binary writeups.</p>
<div class="service-stats">
<span>PORT: 3000</span>
<span>#dev-git</span>
</div>
</div>
<div class="service-box">
<div class="service-title">
<a href="https://chef.rooks.dev" target="_blank">CyberChef Workbench</a>
<span class="badge-status badge-online">PUBLIC</span>
</div>
<p class="service-desc">Hex decoding, Base64 operations, regex extraction, &amp; payload analysis.</p>
<div class="service-stats">
<span>OPEN WEB</span>
<span>#security-tool</span>
</div>
</div>
<div class="service-box">
<div class="service-title">
<a href="https://pve.rooks.dev" target="_blank">Proxmox VE (v8.2)</a>
<span class="badge-status badge-online">ONLINE</span>
</div>
<p class="service-desc">Hypervisor cluster hosting Debian LXC containers &amp; KVM virtual machines.</p>
<div class="service-stats">
<span>PORT: 8006</span>
<span>#compute</span>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- Tab 2: Technical Notes & Blog Archive -->
<div id="tab-blog" class="tab-pane">
<div class="panel">
<div class="panel-header">
<span>/var/log/articles.index</span>
<span>POST COUNT: 5</span>
</div>
<div class="panel-body" style="padding: 0;">
<table class="blog-table">
<thead>
<tr>
<th>DATE</th>
<th>TITLE</th>
<th>TAGS</th>
<th>READ TIME</th>
</tr>
</thead>
<tbody>
<tr>
<td>2026-07-20</td>
<td><a href="#" class="post-link">Reverse Engineering IoT Firmware: SPI Flash Extraction</a></td>
<td><span class="tag-badge">[#firmware] [#hardware]</span></td>
<td>8 min</td>
</tr>
<tr>
<td>2026-07-15</td>
<td><a href="#" class="post-link">Building a High-Availability Traefik Router with Docker Compose</a></td>
<td><span class="tag-badge">[#homelab] [#traefik]</span></td>
<td>12 min</td>
</tr>
<tr>
<td>2026-07-10</td>
<td><a href="#" class="post-link">POSIX sh vs. Bash: Portability in Modern Scripts</a></td>
<td><span class="tag-badge">[#posix-sh] [#unix]</span></td>
<td>6 min</td>
</tr>
<tr>
<td>2026-06-28</td>
<td><a href="#" class="post-link">CTF Write-up: Heap Exploitation in glibc 2.35</a></td>
<td><span class="tag-badge">[#ctf] [#binary]</span></td>
<td>15 min</td>
</tr>
<tr>
<td>2026-06-14</td>
<td><a href="#" class="post-link">Zero-Trust Network Isolation with WireGuard &amp; OPNsense VLANs</a></td>
<td><span class="tag-badge">[#networking] [#wireguard]</span></td>
<td>10 min</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
<!-- Tab 3: Resume & Engineering Profile -->
<div id="tab-resume" class="tab-pane">
<div class="panel">
<div class="panel-header">
<span>/etc/river_rooks.conf</span>
<span>POSIX SPECIFICATION</span>
</div>
<div class="panel-body">
<div class="conf-block">
<span class="conf-comment"># Identity &amp; Systems Architecture</span><br>
<span class="conf-key">AUTHOR</span> = <span class="conf-val">"River Rooks"</span><br>
<span class="conf-key">ROLE</span> = <span class="conf-val">"Systems Architecture &amp; Cybersecurity"</span><br>
<span class="conf-key">AFFILIATION</span> = <span class="conf-val">"University of Alabama College of Engineering"</span><br>
<span class="conf-key">PGP_KEY</span> = <span class="conf-val">"0x4A8E92F1C0B3D4E7"</span><br><br>
<span class="conf-comment"># Active Skillset Matrix</span><br>
<span class="conf-key">DOMAINS</span> = [<span class="conf-val">"Network Forensics"</span>, <span class="conf-val">"Self-Hosted Infrastructure"</span>, <span class="conf-val">"Bare-Metal Virtualization"</span>]<br>
<span class="conf-key">LANGUAGES</span> = [<span class="conf-val">"POSIX sh"</span>, <span class="conf-val">"Python"</span>, <span class="conf-val">"Go"</span>, <span class="conf-val">"Lua"</span>, <span class="conf-val">"ARM Assembly"</span>]<br>
<span class="conf-key">STACK</span> = [<span class="conf-val">"Traefik v3"</span>, <span class="conf-val">"WireGuard"</span>, <span class="conf-val">"Proxmox VE"</span>, <span class="conf-val">"TrueNAS"</span>, <span class="conf-val">"Neovim"</span>]
</div>
<h3 style="font-family: 'IBM Plex Mono', monospace; font-size: 0.95rem; margin-bottom: 12px;">System Modules:</h3>
<ul style="font-size: 0.88rem; color: var(--text-muted); line-height: 1.8; margin-bottom: 20px; list-style-position: inside;">
<li><strong style="color: var(--accent-cyan);">/dev/posix-shell-parser</strong> (v1.2.0 • Lua) — Zero-allocation AST lexer</li>
<li><strong style="color: var(--accent-cyan);">/dev/wireguard-mesh</strong> (v0.8.4 • Python) — Full-mesh overlay provisioner</li>
<li><strong style="color: var(--accent-cyan);">/dev/zero-alloc-logger</strong> (v2.1.1 • Go) — High-throughput sync.Pool logger</li>
<li><strong style="color: var(--accent-cyan);">/dev/kernel-bootstrap</strong> (v0.1.0 • ARM ASM) — Bare-metal boot setup</li>
<li><strong style="color: var(--accent-cyan);">/dev/ddns-daemon</strong> (v1.0.2 • Docker API) — Dynamic Cloudflare DNS sync</li>
</ul>
<div style="display: flex; gap: 12px;">
<a href="mailto:river@rooks.dev" class="btn-action">Email: river@rooks.dev</a>
<a href="https://git.rooks.dev" class="btn-action">Git Repositories ↗</a>
<a href="index.html" class="btn-action">Spec Catalog ↗</a>
</div>
</div>
</div>
</div>
</main>
<!-- Command Center Footer -->
<footer class="cmd-footer">
<div>Keyboard Navigation: Press <kbd>1</kbd>, <kbd>2</kbd>, or <kbd>3</kbd> to switch tabs</div>
<div>Ghostty / Zed Terminal Interface</div>
</footer>
<script>
function switchTab(tabId) {
document.querySelectorAll('.tab-btn').forEach(btn => btn.classList.remove('active'));
document.querySelectorAll('.tab-pane').forEach(pane => pane.classList.remove('active'));
if (tabId === 'services') {
document.querySelectorAll('.tab-btn')[0].classList.add('active');
document.getElementById('tab-services').classList.add('active');
} else if (tabId === 'blog') {
document.querySelectorAll('.tab-btn')[1].classList.add('active');
document.getElementById('tab-blog').classList.add('active');
} else if (tabId === 'resume') {
document.querySelectorAll('.tab-btn')[2].classList.add('active');
document.getElementById('tab-resume').classList.add('active');
}
}
document.addEventListener('keydown', (e) => {
if (e.key === '1') switchTab('services');
if (e.key === '2') switchTab('blog');
if (e.key === '3') switchTab('resume');
});
</script>
</body>
</html>