Compare commits

...
2 Commits
Author SHA1 Message Date
venus c0f67e75a3 resetting for dev now that samples are selected 2026-09-12 22:49:47 -05:00
venus 70134d2e00 added more samples and identified ideal candidates 2026-09-12 22:47:46 -05:00
21 changed files with 2375 additions and 7273 deletions
-278
View File
@@ -1,278 +0,0 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>River Rooks | Systems Architecture & Cybersecurity</title>
<style>
@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:ital,wght@0,400;0,500;0,700;1,400&family=Inter:wght@400;500;700&family=JetBrains+Mono:ital,wght@0,400;0,500;1,400&display=swap');
:root {
--bg-canvas: #0d0f12; /* Deep slate/charcoal */
--bg-surface: #121417; /* Lighter surface background */
--border-color: #2b303b; /* Low-contrast 1px border */
--text-primary: #e0e6f0; /* Off-white prose */
--text-muted: #8a95a5; /* Monospaced metadata gray */
--accent: #00f0ff; /* High-visibility Cyan terminal accent */
}
* {
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.65;
min-height: 100vh;
display: flex;
justify-content: center;
align-items: center;
padding: 40px 24px;
}
.standalone-container {
width: 100%;
max-width: 65ch; /* Capped reading density */
}
/* Identity Header */
.author-name {
font-family: 'IBM Plex Mono', monospace;
font-size: 2.2rem;
font-weight: 700;
color: var(--text-primary);
margin-bottom: 8px;
letter-spacing: -0.02em;
}
.status-line {
display: flex;
align-items: center;
gap: 10px;
font-family: 'IBM Plex Mono', monospace;
font-size: 0.85rem;
color: var(--text-muted);
}
/* 8x8px Solid Active State Indicator Dot */
.status-dot {
width: 8px;
height: 8px;
background-color: var(--accent);
display: inline-block;
flex-shrink: 0;
}
/* 1px Solid Dividers */
.section-divider {
border: 0;
border-top: 1px solid var(--border-color);
margin: 32px 0;
}
/* Terminal Status Block */
.terminal-block {
border: 1px solid var(--border-color);
border-radius: 4px;
background-color: var(--bg-surface);
font-family: 'JetBrains Mono', monospace;
overflow: hidden;
margin-bottom: 32px;
}
.terminal-header {
background-color: var(--bg-canvas);
border-bottom: 1px solid var(--border-color);
padding: 8px 16px;
display: flex;
justify-content: space-between;
font-size: 0.78rem;
color: var(--text-muted);
}
.terminal-title {
color: var(--text-primary);
font-weight: 500;
}
.terminal-body {
padding: 16px;
font-size: 0.85rem;
line-height: 1.5;
}
.cmd-line {
color: var(--text-muted);
margin-bottom: 8px;
}
.prompt {
color: var(--accent);
font-weight: 700;
}
.cmd-output {
color: var(--text-primary);
}
.cursor-block {
display: inline-block;
width: 8px;
height: 15px;
background-color: var(--text-primary);
margin-left: 4px;
vertical-align: middle;
animation: blink 1s steps(2, start) infinite;
}
@keyframes blink {
to { visibility: hidden; }
}
/* Sections */
.section-title {
font-family: 'IBM Plex Mono', monospace;
font-size: 1.1rem;
font-weight: 700;
color: var(--text-primary);
margin-bottom: 12px;
}
.bio-section {
margin-bottom: 32px;
}
.bio-text {
font-size: 0.98rem;
color: var(--text-primary);
}
.stack-section {
margin-bottom: 32px;
}
.tag-cluster {
display: flex;
flex-wrap: wrap;
gap: 10px;
font-family: 'IBM Plex Mono', monospace;
font-size: 0.85rem;
}
.tag {
color: var(--text-muted);
}
/* Standalone Footer Links */
.footer-links {
font-family: 'IBM Plex Mono', monospace;
font-size: 0.85rem;
color: var(--text-muted);
display: flex;
flex-wrap: wrap;
gap: 12px;
align-items: center;
}
.footer-link {
color: var(--text-primary);
text-decoration: none;
padding: 2px 6px;
transition: none; /* Instant snap */
}
.footer-link:hover {
background-color: var(--accent);
color: var(--bg-canvas);
}
.footer-link:focus {
outline: 2px solid var(--accent);
outline-offset: -2px;
}
.pipe {
color: var(--border-color);
}
</style>
</head>
<body>
<main class="standalone-container">
<!-- Identity Header -->
<header class="identity-header">
<h1 class="author-name">River Rooks</h1>
<div class="status-line">
<span class="status-dot"></span>
<span class="status-text">SYSTEMS ARCHITECTURE &amp; CYBERSECURITY</span>
</div>
</header>
<hr class="section-divider">
<!-- Under Construction Terminal Block -->
<section class="terminal-section" aria-label="Status Terminal">
<div class="terminal-block">
<div class="terminal-header">
<span class="terminal-title">/var/log/status.txt</span>
<span>STDOUT</span>
</div>
<div class="terminal-body">
<div class="cmd-line"><span class="prompt">$</span> cat /var/log/status.txt</div>
<div class="cmd-output">
Under construction. Full site infrastructure is currently being provisioned. Routing traffic to temporary landing page...<span class="cursor-block"></span>
</div>
</div>
</div>
</section>
<!-- Biography -->
<section class="bio-section">
<h2 class="section-title">whoami</h2>
<p class="bio-text">
Cybersecurity student at the University of Alabama College of Engineering, focusing on network forensics, self-hosted infrastructure, and systems architecture.
</p>
</section>
<!-- Active Stack Tags -->
<section class="stack-section">
<h2 class="section-title">active_stack</h2>
<div class="tag-cluster">
<span class="tag">[#network-forensics]</span>
<span class="tag">[#docker-traefik]</span>
<span class="tag">[#arch-linux]</span>
<span class="tag">[#neovim]</span>
<span class="tag">[#wireguard]</span>
<span class="tag">[#posix-sh]</span>
<span class="tag">[#python]</span>
<span class="tag">[#golang]</span>
<span class="tag">[#rust]</span>
<span class="tag">[#proxmox]</span>
<span class="tag">[#truenas]</span>
</div>
</section>
<hr class="section-divider">
<!-- Piped Contact Footer -->
<footer class="footer-links">
<a href="https://git.rooks.dev" target="_blank" rel="noopener" class="footer-link">Git Forge</a>
<span class="pipe">|</span>
<a href="https://github.com" target="_blank" rel="noopener" class="footer-link">GitHub</a>
<span class="pipe">|</span>
<a href="mailto:river@rooks.dev" class="footer-link">river@rooks.dev</a>
<span class="pipe">|</span>
<a href="#" title="Fingerprint: 0x4A8E92F1C0B3D4E7" class="footer-link">PGP Key</a>
<span class="pipe">|</span>
<a href="samples/index.html" class="footer-link">Spec Samples Catalog</a>
</footer>
</main>
</body>
</html>
-34
View File
@@ -1,34 +0,0 @@
server {
listen 80;
server_name localhost;
root /usr/share/nginx/html;
index index.html river-rooks.html;
# Disable Nginx version tokens
server_tokens off;
# Security Headers
add_header X-Frame-Options "SAMEORIGIN" always;
add_header X-Content-Type-Options "nosniff" always;
add_header X-XSS-Protection "1; mode=block" always;
add_header Referrer-Policy "strict-origin-when-cross-origin" always;
# Gzip Asset Compression
gzip on;
gzip_types text/plain text/css application/json application/javascript text/xml application/xml application/xml+rss text/javascript;
gzip_min_length 256;
# Clean URL Routing
location / {
try_files $uri $uri/ $uri.html =404;
}
# Static asset caching
location ~* \.(?:css|js|svg|png|jpg|jpeg|gif|ico)$ {
expires 7d;
add_header Cache-Control "public, max-age=604800, immutable";
}
error_page 404 /index.html;
}
File diff suppressed because it is too large Load Diff
+780
View File
@@ -0,0 +1,780 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>River Rooks | Blog Lander (Tiling Hero &amp; Feed)</title>
<style>
@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:ital,wght@0,400;0,500;0,700;1,400&family=Inter:wght@400;500;700&family=JetBrains+Mono:ital,wght@0,400;0,500;1,400&display=swap');
:root {
--bg-canvas: #0d0f12; /* Deep slate/charcoal canvas */
--bg-surface: #121417; /* Tile surface */
--bg-elevated: #1c1f26; /* Hovered tile surface */
--border-color: #2b303b; /* Crisp 1px solid border */
--text-primary: #e0e6f0; /* Light off-white prose */
--text-muted: #8a95a5; /* Monospace metadata */
--accent-cyan: #00f0ff; /* Primary active accent */
--accent-green: #00e676; /* Operational status indicator */
--accent-amber: #ffb700; /* Warning / highlight accent */
}
* {
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;
align-items: center;
padding: 24px 16px 48px 16px;
}
.tiling-layout {
width: 100%;
max-width: 1120px;
display: flex;
flex-direction: column;
gap: 16px;
}
/* Top Global Status Header Bar (Gateway 3 Style) */
.global-bar {
background-color: var(--bg-surface);
border: 1px solid var(--border-color);
border-radius: 4px;
padding: 10px 18px;
display: flex;
justify-content: space-between;
align-items: center;
font-family: 'IBM Plex Mono', monospace;
font-size: 0.8rem;
flex-wrap: wrap;
gap: 10px;
}
.brand-group {
display: flex;
align-items: center;
gap: 10px;
color: var(--text-primary);
font-weight: 700;
}
.status-indicator {
width: 8px;
height: 8px;
background-color: var(--accent-green);
display: inline-block;
}
.bar-nav {
display: flex;
gap: 14px;
align-items: center;
}
.bar-link {
color: var(--text-muted);
text-decoration: none;
transition: none; /* Instant snap */
}
.bar-link:hover {
color: var(--accent-cyan);
}
.bar-link.active {
color: var(--text-primary);
border-bottom: 1px solid var(--accent-cyan);
}
/* Hero Tile: Section Declaration & Synopsis */
.hero-tile {
background-color: var(--bg-surface);
border: 1px solid var(--border-color);
border-left: 3px solid var(--accent-cyan);
border-radius: 4px;
padding: 24px 28px;
display: flex;
flex-direction: column;
gap: 12px;
}
.hero-pretitle {
font-family: 'IBM Plex Mono', monospace;
font-size: 0.8rem;
color: var(--accent-cyan);
letter-spacing: 0.06em;
text-transform: uppercase;
}
.hero-main-title {
font-family: 'IBM Plex Mono', monospace;
font-size: 2.1rem;
font-weight: 700;
color: var(--text-primary);
letter-spacing: -0.02em;
line-height: 1.2;
}
.hero-landing-text {
font-size: 0.98rem;
color: var(--text-primary);
line-height: 1.65;
max-width: 82ch;
}
.filter-pills-row {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 8px;
margin-top: 4px;
font-family: 'IBM Plex Mono', monospace;
font-size: 0.78rem;
}
.filter-tag-btn {
background-color: var(--bg-canvas);
border: 1px solid var(--border-color);
color: var(--text-muted);
padding: 3px 8px;
border-radius: 2px;
cursor: pointer;
transition: none;
}
.filter-tag-btn:hover {
border-color: var(--accent-cyan);
color: var(--text-primary);
background-color: var(--bg-elevated);
}
.filter-tag-btn.active {
background-color: var(--accent-cyan);
color: var(--bg-canvas);
border-color: var(--accent-cyan);
font-weight: 700;
}
/* Asymmetric Split Grid */
.split-grid {
display: grid;
grid-template-columns: 1.25fr 0.75fr;
gap: 16px;
}
@media (max-width: 880px) {
.split-grid {
grid-template-columns: 1fr;
}
}
/* Standard Tile Container */
.tile {
background-color: var(--bg-surface);
border: 1px solid var(--border-color);
border-radius: 4px;
padding: 20px;
display: flex;
flex-direction: column;
gap: 14px;
}
.tile-header {
display: flex;
justify-content: space-between;
align-items: baseline;
border-bottom: 1px solid var(--border-color);
padding-bottom: 10px;
}
.tile-title {
font-family: 'IBM Plex Mono', monospace;
font-size: 0.92rem;
font-weight: 700;
color: var(--text-primary);
display: flex;
align-items: center;
gap: 8px;
}
.tile-meta {
font-family: 'IBM Plex Mono', monospace;
font-size: 0.74rem;
color: var(--text-muted);
}
/* Featured Lead Article Card (Inside Tile) */
.featured-card-body {
display: flex;
flex-direction: column;
gap: 12px;
}
.featured-badge-row {
display: flex;
justify-content: space-between;
align-items: center;
font-family: 'IBM Plex Mono', monospace;
font-size: 0.76rem;
flex-wrap: wrap;
gap: 8px;
}
.badge-pinned {
color: var(--accent-amber);
font-weight: 700;
}
.featured-article-title {
font-family: 'IBM Plex Mono', monospace;
font-size: 1.35rem;
font-weight: 700;
color: var(--text-primary);
text-decoration: none;
line-height: 1.3;
transition: none;
}
.featured-article-title:hover {
color: var(--accent-cyan);
}
.featured-prose {
font-size: 0.92rem;
color: var(--text-primary);
line-height: 1.6;
}
/* Terminal Code Block Component */
.terminal-code-box {
border: 1px solid var(--border-color);
border-radius: 3px;
background-color: var(--bg-canvas);
overflow: hidden;
font-family: 'JetBrains Mono', monospace;
}
.code-titlebar {
background-color: var(--bg-surface);
border-bottom: 1px solid var(--border-color);
padding: 6px 12px;
font-size: 0.74rem;
color: var(--text-muted);
display: flex;
justify-content: space-between;
}
.code-content {
padding: 12px;
font-size: 0.78rem;
overflow-x: auto;
color: var(--text-primary);
line-height: 1.5;
}
.featured-cta-row {
display: flex;
justify-content: space-between;
align-items: center;
padding-top: 10px;
border-top: 1px solid var(--border-color);
flex-wrap: wrap;
gap: 10px;
font-family: 'IBM Plex Mono', monospace;
}
.cta-button {
background-color: var(--accent-cyan);
color: var(--bg-canvas);
padding: 6px 14px;
font-weight: 700;
font-size: 0.8rem;
text-decoration: none;
border-radius: 2px;
border: 1px solid var(--accent-cyan);
transition: none;
}
.cta-button:hover {
background-color: transparent;
color: var(--accent-cyan);
}
/* Sidebar Tile Elements */
.sidebar-stats-box {
background-color: var(--bg-canvas);
border: 1px solid var(--border-color);
border-radius: 3px;
padding: 12px 14px;
display: flex;
flex-direction: column;
gap: 8px;
font-family: 'IBM Plex Mono', monospace;
font-size: 0.78rem;
color: var(--text-muted);
}
.stat-row {
display: flex;
justify-content: space-between;
}
.stat-val {
color: var(--text-primary);
font-weight: 700;
}
.topic-track-item {
background-color: var(--bg-canvas);
border: 1px solid var(--border-color);
border-radius: 3px;
padding: 10px 12px;
display: flex;
flex-direction: column;
gap: 4px;
text-decoration: none;
transition: none;
}
.topic-track-item:hover {
border-color: var(--accent-cyan);
background-color: var(--bg-elevated);
}
.topic-track-title {
font-family: 'IBM Plex Mono', monospace;
font-size: 0.84rem;
font-weight: 700;
color: var(--text-primary);
}
.topic-track-item:hover .topic-track-title {
color: var(--accent-cyan);
}
.topic-track-desc {
font-size: 0.78rem;
color: var(--text-muted);
line-height: 1.4;
}
/* Full-Width Chronological Article Feed Tile */
.feed-list {
display: flex;
flex-direction: column;
gap: 12px;
}
.feed-card {
background-color: var(--bg-canvas);
border: 1px solid var(--border-color);
border-radius: 3px;
padding: 16px 18px;
display: flex;
flex-direction: column;
gap: 8px;
transition: none;
}
.feed-card:hover {
border-color: var(--accent-cyan);
background-color: var(--bg-elevated);
}
.feed-meta-row {
display: flex;
justify-content: space-between;
align-items: center;
font-family: 'IBM Plex Mono', monospace;
font-size: 0.76rem;
color: var(--text-muted);
}
.feed-date {
color: var(--accent-cyan);
}
.feed-heading {
font-family: 'IBM Plex Mono', monospace;
font-size: 1.1rem;
font-weight: 700;
color: var(--text-primary);
text-decoration: none;
line-height: 1.35;
transition: none;
}
.feed-card:hover .feed-heading {
color: var(--accent-cyan);
}
.feed-excerpt {
font-size: 0.9rem;
color: var(--text-primary);
line-height: 1.6;
}
.feed-tags-row {
display: flex;
justify-content: space-between;
align-items: center;
padding-top: 6px;
border-top: 1px solid var(--border-color);
font-family: 'IBM Plex Mono', monospace;
font-size: 0.74rem;
color: var(--text-muted);
flex-wrap: wrap;
gap: 6px;
}
.tag-cluster {
display: flex;
gap: 8px;
}
/* Global Footer Tile (Gateway 3 Standard) */
.footer-tile {
background-color: var(--bg-surface);
border: 1px solid var(--border-color);
border-radius: 4px;
padding: 12px 20px;
display: flex;
justify-content: space-between;
align-items: center;
font-family: 'IBM Plex Mono', monospace;
font-size: 0.78rem;
color: var(--text-muted);
flex-wrap: wrap;
gap: 10px;
}
.footer-links-cluster {
display: flex;
gap: 12px;
align-items: center;
}
.footer-btn {
color: var(--text-primary);
text-decoration: none;
padding: 2px 4px;
transition: none;
}
.footer-btn:hover {
background-color: var(--accent-cyan);
color: var(--bg-canvas);
}
.pipe {
color: var(--border-color);
}
</style>
</head>
<body>
<main class="tiling-layout">
<!-- Top Global Status Bar (Gateway 3 Match) -->
<header class="global-bar">
<div class="brand-group">
<span class="status-indicator"></span>
<span>RIVER ROOKS // BLOG &amp; RESEARCH ARCHIVE</span>
</div>
<nav class="bar-nav" aria-label="Quick Navigation">
<a href="service-gateway-tiling.html" class="bar-link">Gateway 3 ↗</a>
<a href="#" class="bar-link active">&gt; Dispatches</a>
<a href="https://git.rooks.dev" target="_blank" rel="noopener" class="bar-link">Git Forge</a>
<a href="feed.xml" class="bar-link">RSS Feed</a>
<a href="index.html" class="bar-link">Catalog ↗</a>
</nav>
</header>
<!-- Hero Tile: Blog Mission & Topic Filters -->
<section class="hero-tile" aria-label="Blog Mission & Overview">
<div class="hero-pretitle">TECHNICAL PUBLICATION REPOSITORY &bull; ~/NOTES/INDEX.MD</div>
<h1 class="hero-main-title">Engineering Notes, CTF Write-Ups &amp; Systems Architecture</h1>
<p class="hero-landing-text">
Documenting bare-metal systems, embedded hardware audits, and network isolation architectures. Writing zero-allocation POSIX scripts, reverse engineering production microcontrollers, and analyzing memory allocator exploitation primitives.
</p>
<div class="filter-pills-row">
<span style="color: var(--text-muted); margin-right: 4px;">TOPIC FILTER:</span>
<button class="filter-tag-btn active" onclick="filterTopic('all', this)">[All Dispatches (5)]</button>
<button class="filter-tag-btn" onclick="filterTopic('firmware', this)">[#firmware (1)]</button>
<button class="filter-tag-btn" onclick="filterTopic('homelab', this)">[#homelab (2)]</button>
<button class="filter-tag-btn" onclick="filterTopic('security', this)">[#security (3)]</button>
<button class="filter-tag-btn" onclick="filterTopic('posix-sh', this)">[#posix-sh (1)]</button>
</div>
</section>
<!-- Split Grid: Featured Article + Research Index -->
<div class="split-grid">
<!-- Left Column: Featured Article Tile -->
<section class="tile" aria-label="Featured Technical Article">
<div class="tile-header">
<div class="tile-title">
<span>// PINNED RESEARCH WRITE-UP</span>
</div>
<span class="tile-meta">SPI FLASH &bull; 8 MIN READ</span>
</div>
<div class="featured-card-body">
<div class="featured-badge-row">
<span class="badge-pinned">[FEATURED DEEP DIVE]</span>
<span style="color: var(--text-muted);">2026-07-20 &bull; ~/notes/iot-firmware-spi-extraction.md</span>
</div>
<h2 style="margin: 0;">
<a href="article-tiling-firmware.html" class="featured-article-title">Reverse Engineering IoT Firmware: SPI Flash Extraction</a>
</h2>
<p class="featured-prose">
In security audits of embedded systems, retrieving firmware is the critical first step. When over-the-air updates are encrypted and debug ports (UART, JTAG) are disabled in production silicon, dumping physical SPI Flash memory becomes necessary. This writeup covers extracting firmware from an 8-pin SOP SPI flash chip using a Bus Pirate and flashrom to bypass bootloader lockdowns.
</p>
<!-- Terminal Code Box -->
<div class="terminal-code-box">
<div class="code-titlebar">
<span>extract_firmware.sh</span>
<span>POSIX sh</span>
</div>
<div class="code-content">
<pre><code># Query the SPI flash details using flashrom via Bus Pirate
flashrom -p buspirate_spi:dev=/dev/ttyUSB0,spispeed=1M -r firmware_dump.bin
# Verify the integrity of the binary dump by comparing hashes
if [ $? -eq 0 ]; then
echo "Dump successful. Running md5sum..."
md5sum firmware_dump.bin
fi</code></pre>
</div>
</div>
<div class="featured-cta-row">
<div class="tag-cluster">
<span style="color: var(--text-muted); font-size: 0.75rem;">[#firmware] [#hardware] [#security] [#bus-pirate]</span>
</div>
<a href="article-tiling-firmware.html" class="cta-button">READ FULL WRITEUP &rarr;</a>
</div>
</div>
</section>
<!-- Right Column: Quick Research Tracks & Telemetry -->
<div style="display: flex; flex-direction: column; gap: 16px;">
<!-- Publication Stats Tile -->
<section class="tile" aria-label="Archive Statistics">
<div class="tile-header">
<div class="tile-title">
<span>// ARCHIVE TELEMETRY</span>
</div>
<span class="tile-meta">STATIC HTML</span>
</div>
<div class="sidebar-stats-box">
<div class="stat-row">
<span>TOTAL ARTICLES:</span>
<span class="stat-val">5 PUBLISHED</span>
</div>
<div class="stat-row">
<span>TOTAL READING TIME:</span>
<span class="stat-val">51 MINUTES</span>
</div>
<div class="stat-row">
<span>ACTIVE TOPICS:</span>
<span class="stat-val">7 CATEGORIES</span>
</div>
<div class="stat-row">
<span>FORMAT COMPLIANCE:</span>
<span class="stat-val">IEEE STD 1003.1</span>
</div>
</div>
</section>
<!-- Curated Focus Tracks -->
<section class="tile" aria-label="Curated Topic Tracks">
<div class="tile-header">
<div class="tile-title">
<span>// RESEARCH TRACKS</span>
</div>
<span class="tile-meta">CURATED</span>
</div>
<div style="display: flex; flex-direction: column; gap: 8px;">
<a href="#" class="topic-track-item">
<div class="topic-track-title">&gt; Embedded &amp; Hardware Forensics</div>
<div class="topic-track-desc">Flash memory dumping, bus tapping, silicon pinout discovery.</div>
</a>
<a href="#" class="topic-track-item">
<div class="topic-track-title">&gt; Network Routing &amp; Homelab</div>
<div class="topic-track-desc">Traefik reverse proxying, WireGuard full-mesh, VLAN firewalls.</div>
</a>
<a href="#" class="topic-track-item">
<div class="topic-track-title">&gt; Low-Level Memory Exploitation</div>
<div class="topic-track-desc">glibc tcache safe-linking, heap corruption, House of Apple.</div>
</a>
</div>
</section>
</div>
</div>
<!-- Full-Width Article Feed Tile -->
<section class="tile" aria-label="Chronological Article Stream">
<div class="tile-header">
<div class="tile-title">
<span>// CHRONOLOGICAL DISPATCHES FEED</span>
</div>
<span class="tile-meta">ALL ARTICLES ORDERED BY DATE</span>
</div>
<div class="feed-list" id="feedList">
<!-- Post 2: Traefik -->
<article class="feed-card" data-tags="homelab networking">
<div class="feed-meta-row">
<time datetime="2026-07-15" class="feed-date">2026-07-15 &bull; 12 min read</time>
<span>~/notes/ha-traefik-docker.md</span>
</div>
<h3 style="margin: 0;">
<a href="article-tiling-traefik.html" class="feed-heading">&gt; Building a High-Availability Traefik Router with Docker Compose</a>
</h3>
<p class="feed-excerpt">
Architecting automated TLS wildcard certificate propagation, Docker provider label routing, zero-downtime container updates, and backend health-check failover routes on bare-metal infrastructure.
</p>
<div class="feed-tags-row">
<div class="tag-cluster">
<span>[#homelab]</span>
<span>[#docker-traefik]</span>
<span>[#networking]</span>
</div>
<a href="article-tiling-traefik.html" style="color: var(--accent-cyan); text-decoration: none;">Read Entry &rarr;</a>
</div>
</article>
<!-- Post 3: POSIX sh -->
<article class="feed-card" data-tags="posix-sh security">
<div class="feed-meta-row">
<time datetime="2026-07-10" class="feed-date">2026-07-10 &bull; 6 min read</time>
<span>~/notes/posix-sh-vs-bash.md</span>
</div>
<h3 style="margin: 0;">
<a href="#" class="feed-heading">&gt; POSIX sh vs. Bash: Portability in Modern Scripts</a>
</h3>
<p class="feed-excerpt">
Analyzing edge-case incompatibilities, syntax overhead, eliminating bashisms, and writing fast, bulletproof bootstrapping scripts for Alpine and embedded targets conforming to IEEE Std 1003.1.
</p>
<div class="feed-tags-row">
<div class="tag-cluster">
<span>[#posix-sh]</span>
<span>[#shell]</span>
<span>[#unix]</span>
</div>
<a href="#" style="color: var(--accent-cyan); text-decoration: none;">Read Entry &rarr;</a>
</div>
</article>
<!-- Post 4: Heap Exploitation -->
<article class="feed-card" data-tags="security">
<div class="feed-meta-row">
<time datetime="2026-06-28" class="feed-date">2026-06-28 &bull; 15 min read</time>
<span>~/notes/ctf-heap-glibc-2-35.md</span>
</div>
<h3 style="margin: 0;">
<a href="article-tiling-heap.html" class="feed-heading">&gt; CTF Write-up: Heap Exploitation in glibc 2.35</a>
</h3>
<p class="feed-excerpt">
Deconstructing modern glibc memory allocator defenses: tcache safe-linking pointer mangling, bypass primitives, and House of Apple file structure hijacking for arbitrary code execution.
</p>
<div class="feed-tags-row">
<div class="tag-cluster">
<span>[#ctf]</span>
<span>[#binary-exploitation]</span>
<span>[#security]</span>
</div>
<a href="article-tiling-heap.html" style="color: var(--accent-cyan); text-decoration: none;">Read Entry &rarr;</a>
</div>
</article>
<!-- Post 5: Zero-Trust WireGuard -->
<article class="feed-card" data-tags="networking security homelab">
<div class="feed-meta-row">
<time datetime="2026-06-14" class="feed-date">2026-06-14 &bull; 10 min read</time>
<span>~/notes/zero-trust-wireguard-opnsense.md</span>
</div>
<h3 style="margin: 0;">
<a href="#" class="feed-heading">&gt; Zero-Trust Network Isolation with WireGuard &amp; OPNsense VLANs</a>
</h3>
<p class="feed-excerpt">
Designing strict zone-based firewall rules across isolated VLANs (Management, Server DMZ, IoT, Trusted Clients) with point-to-point WireGuard cryptographic routing.
</p>
<div class="feed-tags-row">
<div class="tag-cluster">
<span>[#networking]</span>
<span>[#wireguard]</span>
<span>[#security]</span>
</div>
<a href="#" style="color: var(--accent-cyan); text-decoration: none;">Read Entry &rarr;</a>
</div>
</article>
</div>
</section>
<!-- Global Footer Tile (Matching Gateway 3 Exactly) -->
<footer class="footer-tile">
<div>River Rooks &bull; University of Alabama College of Engineering</div>
<nav class="footer-links-cluster" aria-label="Global Footer Links">
<a href="service-gateway-tiling.html" class="footer-btn">Gateway Lander</a>
<span class="pipe">|</span>
<a href="feed.xml" class="footer-btn">RSS</a>
<span class="pipe">|</span>
<a href="https://git.rooks.dev" target="_blank" rel="noopener" class="footer-btn">Forgejo</a>
<span class="pipe">|</span>
<a href="mailto:river@rooks.dev" class="footer-btn">river@rooks.dev</a>
<span class="pipe">|</span>
<a href="#" title="Fingerprint: 0x4A8E92F1C0B3D4E7" class="footer-btn">PGP</a>
<span class="pipe">|</span>
<a href="index.html" class="footer-btn">Catalog ↗</a>
</nav>
</footer>
</main>
<script>
function filterTopic(topic, btn) {
document.querySelectorAll('.filter-tag-btn').forEach(el => el.classList.remove('active'));
btn.classList.add('active');
const cards = document.querySelectorAll('#feedList .feed-card');
cards.forEach(card => {
if (topic === 'all') {
card.style.display = 'flex';
} else {
const tags = card.getAttribute('data-tags') || '';
if (tags.includes(topic)) {
card.style.display = 'flex';
} else {
card.style.display = 'none';
}
}
});
}
</script>
</body>
</html>
+592
View File
@@ -0,0 +1,592 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>River Rooks | Homelab Gateway (Tiling Workspace)</title>
<style>
@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:ital,wght@0,400;0,500;0,700;1,400&family=Inter:wght@400;500;700&family=JetBrains+Mono:ital,wght@0,400;0,500;1,400&display=swap');
:root {
--bg-canvas: #0d0f12; /* Deep slate/charcoal canvas */
--bg-surface: #121417; /* Tile surface */
--bg-elevated: #1c1f26; /* Hovered tile */
--border-color: #2b303b; /* Crisp 1px border */
--text-primary: #e0e6f0; /* Prose off-white */
--text-muted: #8a95a5; /* Monospace metadata */
--accent-cyan: #00f0ff; /* Primary active accent */
--accent-green: #00e676; /* Online indicator */
--accent-amber: #ffb700; /* Warning / internal indicator */
}
* {
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;
align-items: center;
padding: 24px 16px 48px 16px;
}
.tiling-layout {
width: 100%;
max-width: 1120px;
display: flex;
flex-direction: column;
gap: 16px;
}
/* Top Global Status Header Bar */
.global-bar {
background-color: var(--bg-surface);
border: 1px solid var(--border-color);
border-radius: 4px;
padding: 10px 18px;
display: flex;
justify-content: space-between;
align-items: center;
font-family: 'IBM Plex Mono', monospace;
font-size: 0.8rem;
flex-wrap: wrap;
gap: 10px;
}
.brand-group {
display: flex;
align-items: center;
gap: 10px;
color: var(--text-primary);
font-weight: 700;
}
.status-indicator {
width: 8px;
height: 8px;
background-color: var(--accent-green);
display: inline-block;
}
.bar-nav {
display: flex;
gap: 14px;
align-items: center;
}
.bar-link {
color: var(--text-muted);
text-decoration: none;
transition: none; /* Instant snap */
}
.bar-link:hover {
color: var(--accent-cyan);
}
/* Primary Hero Landing Tile (Main Focus of Homepage) */
.hero-tile {
background-color: var(--bg-surface);
border: 1px solid var(--border-color);
border-left: 3px solid var(--accent-cyan);
border-radius: 4px;
padding: 28px 32px;
display: flex;
flex-direction: column;
gap: 16px;
}
.hero-pretitle {
font-family: 'IBM Plex Mono', monospace;
font-size: 0.8rem;
color: var(--accent-cyan);
letter-spacing: 0.06em;
text-transform: uppercase;
}
.hero-main-title {
font-family: 'IBM Plex Mono', monospace;
font-size: 2.2rem;
font-weight: 700;
color: var(--text-primary);
letter-spacing: -0.02em;
line-height: 1.2;
}
.hero-landing-text {
font-size: 1.02rem;
color: var(--text-primary);
line-height: 1.7;
max-width: 80ch;
}
.hero-landing-text p {
margin-bottom: 14px;
}
.hero-landing-text p:last-child {
margin-bottom: 0;
}
.hero-directive-box {
background-color: var(--bg-canvas);
border: 1px solid var(--border-color);
border-radius: 3px;
padding: 14px 18px;
font-family: 'IBM Plex Mono', monospace;
font-size: 0.84rem;
color: var(--text-muted);
line-height: 1.6;
}
.hero-directive-box strong {
color: var(--text-primary);
}
/* Tiling Grid Section: Split Columns */
.split-grid {
display: grid;
grid-template-columns: 1.15fr 0.85fr;
gap: 16px;
}
@media (max-width: 880px) {
.split-grid {
grid-template-columns: 1fr;
}
}
/* Tile Container Style */
.tile {
background-color: var(--bg-surface);
border: 1px solid var(--border-color);
border-radius: 4px;
padding: 20px;
display: flex;
flex-direction: column;
gap: 14px;
}
.tile-header {
display: flex;
justify-content: space-between;
align-items: baseline;
border-bottom: 1px solid var(--border-color);
padding-bottom: 10px;
}
.tile-title {
font-family: 'IBM Plex Mono', monospace;
font-size: 0.95rem;
font-weight: 700;
color: var(--text-primary);
display: flex;
align-items: center;
gap: 8px;
}
.tile-meta {
font-family: 'IBM Plex Mono', monospace;
font-size: 0.74rem;
color: var(--text-muted);
}
/* Featured Service Tile: The Blog */
.blog-service-feature {
background-color: var(--bg-canvas);
border: 1px solid var(--border-color);
border-radius: 3px;
padding: 16px;
display: flex;
flex-direction: column;
gap: 10px;
}
.blog-feature-top {
display: flex;
justify-content: space-between;
align-items: center;
font-family: 'IBM Plex Mono', monospace;
font-size: 0.78rem;
}
.badge-core {
background-color: var(--accent-cyan);
color: var(--bg-canvas);
padding: 2px 6px;
font-weight: 700;
border-radius: 2px;
}
.blog-feature-title {
font-family: 'IBM Plex Mono', monospace;
font-size: 1.15rem;
font-weight: 700;
color: var(--text-primary);
text-decoration: none;
display: inline-block;
transition: none;
}
.blog-feature-title:hover {
color: var(--accent-cyan);
}
.blog-feature-desc {
font-size: 0.9rem;
color: var(--text-primary);
line-height: 1.5;
}
.blog-sublinks {
display: flex;
flex-direction: column;
gap: 6px;
margin-top: 4px;
border-top: 1px solid var(--border-color);
padding-top: 10px;
}
.blog-sublink-item {
display: flex;
justify-content: space-between;
font-family: 'IBM Plex Mono', monospace;
font-size: 0.8rem;
color: var(--text-primary);
text-decoration: none;
padding: 4px 6px;
border-radius: 2px;
transition: none;
}
.blog-sublink-item:hover {
background-color: var(--bg-elevated);
color: var(--accent-cyan);
}
/* Homelab Services Grid */
.services-mini-grid {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 10px;
}
@media (max-width: 540px) {
.services-mini-grid {
grid-template-columns: 1fr;
}
}
.service-tile-item {
background-color: var(--bg-canvas);
border: 1px solid var(--border-color);
border-radius: 3px;
padding: 12px;
text-decoration: none;
display: flex;
flex-direction: column;
justify-content: space-between;
gap: 6px;
transition: none;
}
.service-tile-item:hover {
border-color: var(--accent-cyan);
background-color: var(--bg-elevated);
}
.service-item-title {
font-family: 'IBM Plex Mono', monospace;
font-size: 0.88rem;
font-weight: 700;
color: var(--text-primary);
}
.service-tile-item:hover .service-item-title {
color: var(--accent-cyan);
}
.service-item-tag {
font-family: 'IBM Plex Mono', monospace;
font-size: 0.7rem;
color: var(--text-muted);
}
.service-item-desc {
font-size: 0.8rem;
color: var(--text-muted);
line-height: 1.4;
}
/* Infrastructure Nodes Telemetry Tile */
.node-stat-row {
display: flex;
justify-content: space-between;
align-items: center;
padding: 8px 10px;
background-color: var(--bg-canvas);
border: 1px solid var(--border-color);
border-radius: 3px;
font-family: 'IBM Plex Mono', monospace;
font-size: 0.78rem;
}
.node-name {
color: var(--text-primary);
font-weight: 700;
}
.node-load {
color: var(--accent-green);
}
/* Bottom Global Footer Tile */
.footer-tile {
background-color: var(--bg-surface);
border: 1px solid var(--border-color);
border-radius: 4px;
padding: 12px 20px;
display: flex;
justify-content: space-between;
align-items: center;
font-family: 'IBM Plex Mono', monospace;
font-size: 0.78rem;
color: var(--text-muted);
flex-wrap: wrap;
gap: 10px;
}
.footer-links-cluster {
display: flex;
gap: 12px;
align-items: center;
}
.footer-btn {
color: var(--text-primary);
text-decoration: none;
padding: 2px 4px;
transition: none;
}
.footer-btn:hover {
background-color: var(--accent-cyan);
color: var(--bg-canvas);
}
.pipe {
color: var(--border-color);
}
</style>
</head>
<body>
<main class="tiling-layout">
<!-- Top Status Bar -->
<header class="global-bar">
<div class="brand-group">
<span class="status-indicator"></span>
<span>RIVER ROOKS // NODE GATEWAY</span>
</div>
<nav class="bar-nav" aria-label="Quick Nav">
<a href="blog-lander-cards.html" class="bar-link">&gt; Blog &amp; Notes</a>
<a href="homelab.html" class="bar-link">Infrastructure</a>
<a href="https://git.rooks.dev" target="_blank" rel="noopener" class="bar-link">Git Forge</a>
<a href="index.html" class="bar-link">Catalog ↗</a>
</nav>
</header>
<!-- Main Hero Landing Tile (Central Focus of Homepage) -->
<section class="hero-tile" aria-label="Homepage Mission & Landing Declaration">
<div class="hero-pretitle">SYSTEM DECLARATION &bull; RACK-01 NODE GATEWAY</div>
<h1 class="hero-main-title">Engineering Sovereign Infrastructure &amp; Technical Notes</h1>
<div class="hero-landing-text">
<p>
I am River Rooks, a cybersecurity engineering student at the University of Alabama. My work centers on network forensics, self-hosted system architecture, low-level firmware exploitation, and zero-allocation Unix utilities.
</p>
<p>
This website functions as the unified frontend for my physical homelab cluster. Rather than hosting projects on opaque third-party clouds, everything here runs on bare metal in my personal server rack—orchestrated through Proxmox VE, partitioned across isolated VLANs via OPNsense, and protected by point-to-point WireGuard cryptographic meshes.
</p>
<p>
<strong>Navigation Guide:</strong> If you are here to read technical research, the <strong>Engineering Blog</strong> is linked below with deep write-ups on firmware dumping, heap exploitation, and container routing. If you are here to use tools, the <strong>Public Services</strong> provide locally hosted instances of CyberChef, Stirling PDF, and Git.
</p>
</div>
<div class="hero-directive-box">
<strong>PRIMARY DESTINATIONS:</strong>
<span style="color: var(--accent-cyan); margin-left: 8px;">[1] Technical Blog (5 Articles)</span> &bull;
<span>[2] Forgejo Git Repos</span> &bull;
<span>[3] Public Cryptographic &amp; PDF Tools</span> &bull;
<span>[4] Cluster Telemetry</span>
</div>
</section>
<!-- Split Tiling Columns -->
<div class="split-grid">
<!-- Left Column: Featured Service (Blog) + Recent Articles -->
<div style="display: flex; flex-direction: column; gap: 16px;">
<!-- Featured Service Tile: The Blog -->
<section class="tile" aria-label="Featured Service: Technical Blog">
<div class="tile-header">
<div class="tile-title">
<span>// PRIMARY SERVICE: THE TECHNICAL BLOG</span>
</div>
<span class="tile-meta">~/notes/ &bull; 5 ARTICLES</span>
</div>
<div class="blog-service-feature">
<div class="blog-feature-top">
<span class="badge-core">[CORE PUBLICATION SERVICE]</span>
<span style="color: var(--text-muted);">2026-07-20 LAST SYNC</span>
</div>
<a href="blog-lander-cards.html" class="blog-feature-title">&gt; River Rooks Technical Notes &amp; Research</a>
<p class="blog-feature-desc">
In-depth security post-mortems, CTF write-ups, shell portability benchmarks, and bare-metal homelab architecture guides.
</p>
<div class="blog-sublinks">
<a href="blog-lander-cards.html" class="blog-sublink-item">
<span>1. Reverse Engineering IoT Firmware (SPI Flash)</span>
<span style="color: var(--accent-cyan);">[8 min] &rarr;</span>
</a>
<a href="blog-lander-cards.html" class="blog-sublink-item">
<span>2. High-Availability Traefik with Docker Compose</span>
<span style="color: var(--accent-cyan);">[12 min] &rarr;</span>
</a>
<a href="blog-lander-cards.html" class="blog-sublink-item">
<span>3. POSIX sh vs. Bash: Portability in Modern Scripts</span>
<span style="color: var(--accent-cyan);">[6 min] &rarr;</span>
</a>
<a href="blog-lander-cards.html" class="blog-sublink-item">
<span>4. CTF Write-up: Heap Exploitation in glibc 2.35</span>
<span style="color: var(--accent-cyan);">[15 min] &rarr;</span>
</a>
</div>
</div>
</section>
</div>
<!-- Right Column: Homelab Hosted Services & Node Telemetry -->
<div style="display: flex; flex-direction: column; gap: 16px;">
<!-- Hosted Services Tile -->
<section class="tile" aria-label="Homelab Services Directory">
<div class="tile-header">
<div class="tile-title">
<span>// HOMELAB SERVICES ROUTER</span>
</div>
<span class="tile-meta">4 PUBLIC TOOLS</span>
</div>
<div class="services-mini-grid">
<a href="https://git.rooks.dev" target="_blank" rel="noopener" class="service-tile-item">
<div>
<div class="service-item-title">Forgejo Git</div>
<div class="service-item-tag">git.rooks.dev:2222</div>
</div>
<p class="service-item-desc">Self-hosted code repositories &amp; dotfiles.</p>
</a>
<a href="https://chef.rooks.dev" target="_blank" rel="noopener" class="service-tile-item">
<div>
<div class="service-item-title">CyberChef</div>
<div class="service-item-tag">chef.rooks.dev:443</div>
</div>
<p class="service-item-desc">Hex decoding, cryptography &amp; forensics.</p>
</a>
<a href="https://pdf.rooks.dev" target="_blank" rel="noopener" class="service-tile-item">
<div>
<div class="service-item-title">Stirling PDF</div>
<div class="service-item-tag">pdf.rooks.dev:443</div>
</div>
<p class="service-item-desc">Private document OCR and manipulation.</p>
</a>
<a href="https://status.rooks.dev" target="_blank" rel="noopener" class="service-tile-item">
<div>
<div class="service-item-title">Uptime Kuma</div>
<div class="service-item-tag">status.rooks.dev:3001</div>
</div>
<p class="service-item-desc">Live synthetic latency &amp; uptime telemetry.</p>
</a>
</div>
</section>
<!-- Bare-Metal Node Telemetry Tile -->
<section class="tile" aria-label="Physical Hardware Nodes">
<div class="tile-header">
<div class="tile-title">
<span>// HARDWARE NODES (RACK-01)</span>
</div>
<span class="tile-meta">10GbE SFP+</span>
</div>
<div style="display: flex; flex-direction: column; gap: 8px;">
<div class="node-stat-row">
<div>
<span class="node-name">gw-node01.lan</span>
<span style="color: var(--text-muted); font-size: 0.72rem; margin-left: 6px;">OPNsense 24.7</span>
</div>
<span class="node-load">CPU: 18% | RAM: 32%</span>
</div>
<div class="node-stat-row">
<div>
<span class="node-name">pve-node02.lan</span>
<span style="color: var(--text-muted); font-size: 0.72rem; margin-left: 6px;">Proxmox VE (AMD 5900X)</span>
</div>
<span class="node-load">CPU: 42% | RAM: 68%</span>
</div>
<div class="node-stat-row">
<div>
<span class="node-name">nas-node03.lan</span>
<span style="color: var(--text-muted); font-size: 0.72rem; margin-left: 6px;">TrueNAS (48TB RaidZ2)</span>
</div>
<span class="node-load">CPU: 14% | RAM: 82%</span>
</div>
</div>
</section>
</div>
</div>
<!-- Global Footer Bar -->
<footer class="footer-tile">
<div>River Rooks &bull; University of Alabama College of Engineering</div>
<nav class="footer-links-cluster" aria-label="Global Footer Links">
<a href="blog-lander-cards.html" class="footer-btn">Blog Lander</a>
<span class="pipe">|</span>
<a href="feed.xml" class="footer-btn">RSS</a>
<span class="pipe">|</span>
<a href="https://git.rooks.dev" target="_blank" rel="noopener" class="footer-btn">Forgejo</a>
<span class="pipe">|</span>
<a href="mailto:river@rooks.dev" class="footer-btn">river@rooks.dev</a>
<span class="pipe">|</span>
<a href="#" title="Fingerprint: 0x4A8E92F1C0B3D4E7" class="footer-btn">PGP</a>
<span class="pipe">|</span>
<a href="index.html" class="footer-btn">Catalog ↗</a>
</nav>
</footer>
</main>
</body>
</html>
-273
View File
@@ -1,273 +0,0 @@
# Canonical Content Dataset & Single Source of Truth for Design Samples
**Document Purpose:** Standardized dataset containing canonical profile data, active services, technical blog notes, engineering projects, hardware nodes, and interactive ASCII daemon assets. All design sample layouts (`homepage.html`, `split-panel.html`, `companion.html`, `document-flow.html`, `portfolio.html`, `homelab.html`, `public-services.html`, `sample-dashboard.html`, `sample-command-center.html`, `sample-dual-pane-explorer.html`) pull from this common material.
---
## 1. Persona & Identity (`whoami`)
| Field | Canonical Value |
| :--- | :--- |
| **Full Name** | `River Rooks` |
| **Primary Title** | `Systems Architecture & Cybersecurity` |
| **Academic / Institutional Role** | Cybersecurity student at the University of Alabama College of Engineering |
| **Specialization Areas** | Network forensics, self-hosted infrastructure, systems architecture, low-level tooling, bare-metal virtualization |
| **Physical Node Location** | Alabama, USA / `RACK-01` |
| **System Hostname Prompt** | `dev-blog@system:~$` / `agy --node-01` |
| **PGP Key Fingerprint** | `0x4A8E92F1C0B3D4E7` |
| **SSH Public Key Digest** | `SHA256:7uK+N04wP5rL/9z3Q8s1vX4dF6mK2pT8yB1wN0qZ8` |
| **Email Address** | `river@rooks.dev` (or `river@example.com`) |
| **Public Git Forge** | `https://git.rooks.dev` / `https://github.com` |
| **Matrix Chat Endpoint** | `@river:rooks.dev` |
### Biography Snippets
* **One-Line Meta:** `Cybersecurity student at UA College of Engineering focusing on network forensics, self-hosted infrastructure, and systems architecture.`
* **Extended Bio:** `Cybersecurity student and systems practitioner. Spends time architecting high-throughput homelab networks, reverse engineering IoT firmware, hardening FreeBSD/Linux hypervisors, and writing zero-allocation Unix utilities.`
### Active Tech Stack Tags
```text
[#network-forensics] [#docker-traefik] [#arch-linux] [#neovim] [#wireguard]
[#posix-sh] [#python] [#golang] [#rust] [#proxmox] [#truenas]
```
---
## 2. Services Directory & Infrastructure Catalog
### A. Core & Network Infrastructure
| Service Name | Category | Port / Protocol | Domain / Routing | Access | Description |
| :--- | :--- | :--- | :--- | :--- | :--- |
| **Traefik Proxy (v3.1)** | `#core` | `443/tcp` (TLS) | `https://proxy.rooks.dev` | `INTERNAL / ONLINE` | Edge HTTP reverse proxy and load balancer with dynamic Docker provider discovery and ACME Let's Encrypt TLS wildcard certificates. |
| **OPNsense Firewall (v24.7)** | `#core` | `VLAN 10 / Mgmt` | Gateway IP | `PROTECTED / ACTIVE` | Hardened FreeBSD firewall routing 10GbE traffic with VLAN isolation, Suricata IDS/IPS, and Unbound DNS resolvers. |
| **AdGuard Home** | `#dns` | `53/udp`, `853/tcp` | `https://dns.rooks.dev` | `INTERNAL / PROTECTED` | Network-wide DNS sinkhole filtering trackers and ad domains across all VLANs with DNS-over-HTTPS upstream security. |
| **WireGuard Mesh** | `#vpn` | `51820/udp` | Peer Mesh | `PUBLIC / 14 PEERS` | High-performance encrypted point-to-point VPN tunnel connecting remote laptops and mobile endpoints to homelab subnet. |
### B. Compute, Virtualization & Storage
| Service Name | Category | Port / Protocol | Domain / Routing | Access | Description |
| :--- | :--- | :--- | :--- | :--- | :--- |
| **Proxmox VE (v8.2)** | `#compute` | `8006/tcp` | `https://pve.rooks.dev` | `INTERNAL / ONLINE` | Enterprise hypervisor cluster hosting Debian LXC containers and KVM virtual machines with Ceph & ZFS backend. |
| **TrueNAS SCALE** | `#storage` | `NFS / SMB / 443` | `https://nas.rooks.dev` | `INTERNAL / ONLINE` | Primary network attached storage managing 48TB ZFS RaidZ2 array, dataset snapshots, NFS exports, and scrub jobs. |
| **Forgejo Git Server** | `#dev-git` | `3000/tcp`, `2222/ssh` | `https://git.rooks.dev` | `PUBLIC / OPEN` | Lightweight self-hosted Git forge hosting infrastructure-as-code repos, Ansible playbooks, dotfiles, and CTF archives. |
### C. Public Tools & Developer Utilities
| Service Name | Category | Port / Protocol | Domain / Routing | Access | Description |
| :--- | :--- | :--- | :--- | :--- | :--- |
| **CyberChef Workbench** | `#security-tool` | `443/tcp` | `https://chef.rooks.dev` | `PUBLIC / OPEN` | Cyber Swiss Army Knife for hex decoding, Base64 operations, regex extraction, cryptographic hashing, and CTF payload analysis. |
| **Stirling PDF Studio** | `#pdf-tools` | `443/tcp` | `https://pdf.rooks.dev` | `PUBLIC / OPEN` | Self-hosted document processing suite for merging, splitting, OCR text extraction, password encryption, and PDF page manipulation. |
| **HedgeDoc Collaborative** | `#markdown` | `443/tcp` | `https://pad.rooks.dev` | `PUBLIC / OPEN` | Real-time collaborative Markdown editor for technical specs, RFC drafts, and collaborative meeting notes. |
### D. Media, Reading & Content Automation
| Service Name | Category | Port / Protocol | Domain / Routing | Access | Description |
| :--- | :--- | :--- | :--- | :--- | :--- |
| **Jellyfin Media Portal** | `#media-video` | `8096/tcp` | `https://watch.rooks.dev` | `AUTH REQUIRED` | FOSS media streaming engine leveraging Intel QuickSync GPU hardware acceleration for 4K HDR transcoding. |
| **Arr Automation Suite** | `#automation` | `8989 / 7878 / 9696` | `https://arr.rooks.dev` | `INTERNAL / RUNNING` | Automated content indexing, Prowlarr indexer management, Sonarr/Radarr pipeline, and SABnzbd queue downloader. |
| **Audiobookshelf** | `#media-audio` | `443/tcp` | `https://listen.rooks.dev` | `INVITE ONLY` | Self-hosted audiobook and podcast streaming server with continuous playback position synchronization across mobile clients. |
| **Calibre-Web Library** | `#ebooks` | `443/tcp` | `https://read.rooks.dev` | `PUBLIC READ` | E-book library catalog with e-reader OPDS feed integration and in-browser reading support. |
### E. Security, Telemetry & Communications
| Service Name | Category | Port / Protocol | Domain / Routing | Access | Description |
| :--- | :--- | :--- | :--- | :--- | :--- |
| **Vaultwarden** | `#secrets` | `443/tcp` (E2EE) | `https://vault.rooks.dev` | `2FA / AUTH` | Lightweight Rust implementation of the Bitwarden API hosting encrypted credentials, SSH keys, and TOTP tokens. |
| **Prometheus & Grafana** | `#telemetry` | `3000 / 9090` | `https://mon.rooks.dev` | `INTERNAL / SCRAPING` | Time-series metric collection with Node Exporter, Telegraf agents, and live cluster performance dashboards. |
| **Uptime Kuma** | `#status` | `3001/tcp` | `https://status.rooks.dev` | `PUBLIC / 100% HEALTH`| Synthetic HTTP, Ping, and TCP health monitor broadcasting real-time service uptime alerts to Discord webhooks. |
| **Matrix Synapse** | `#messaging` | `8448/tcp` | `https://matrix.rooks.dev` | `FEDERATED / OPEN` | Federated Matrix homeserver for encrypted messaging, public security channels, and cross-server communication. |
---
## 3. Technical Notes & Blog Articles
### Post 1: Featured Article (Full Writeup)
* **Title:** `Reverse Engineering IoT Firmware: SPI Flash Extraction`
* **File / Path:** `~/notes/iot-firmware-spi-extraction.md`
* **Publication Date:** `2026-07-20`
* **Reading Time:** `8 mins`
* **Tags:** `[#firmware]`, `[#hardware]`, `[#security]`, `[#bus-pirate]`
* **Abstract:** In security audits of embedded systems, retrieving the firmware is the critical first step. When over-the-air updates are encrypted and debug ports (UART, JTAG) are disabled in production silicon, dumping physical SPI Flash memory becomes necessary. This writeup covers extracting firmware from an 8-pin SOP SPI flash chip using a Bus Pirate and flashrom to bypass bootloader lockdowns.
* **Code Snippet (`extract_firmware.sh`):**
```bash
#!/bin/sh
# Query the SPI flash details using flashrom via Bus Pirate
flashrom -p buspirate_spi:dev=/dev/ttyUSB0,spispeed=1M -r firmware_dump.bin
# Verify the integrity of the binary dump by comparing hashes
if [ $? -eq 0 ]; then
echo "Dump successful. Running md5sum..."
md5sum firmware_dump.bin
else
echo "Failed to read flash memory." >&2
exit 1
fi
```
### Post 2: Traefik Docker Architecture
* **Title:** `Building a High-Availability Traefik Router with Docker Compose`
* **File / Path:** `~/notes/ha-traefik-docker.md`
* **Publication Date:** `2026-07-15`
* **Reading Time:** `12 mins`
* **Tags:** `[#homelab]`, `[#docker-traefik]`, `[#networking]`
* **Abstract:** Architecting automated TLS wildcard certificate propagation, Docker provider label routing, zero-downtime container updates, and backend health-check failover routes.
### Post 3: Shell Portability
* **Title:** `POSIX sh vs. Bash: Portability in Modern Scripts`
* **File / Path:** `~/notes/posix-sh-vs-bash.md`
* **Publication Date:** `2026-07-10`
* **Reading Time:** `6 mins`
* **Tags:** `[#posix-sh]`, `[#shell]`, `[#unix]`
* **Abstract:** Analyzing edge-case incompatibilities, syntax overhead, eliminating bashisms, and writing fast, bulletproof bootstrapping scripts for Alpine and embedded targets conforming to IEEE Std 1003.1.
### Post 4: Low-Level CTF Exploitation
* **Title:** `CTF Write-up: Heap Exploitation in glibc 2.35`
* **File / Path:** `~/notes/ctf-heap-glibc-2-35.md`
* **Publication Date:** `2026-06-28`
* **Reading Time:** `15 mins`
* **Tags:** `[#ctf]`, `[#binary-exploitation]`, `[#security]`
* **Abstract:** Deconstructing modern glibc memory allocator defenses: tcache safe-linking pointer mangling, bypass primitives, and House of Apple file structure hijacking for arbitrary code execution.
### Post 5: Network Isolation
* **Title:** `Zero-Trust Network Isolation with WireGuard & OPNsense VLANs`
* **File / Path:** `~/notes/zero-trust-wireguard-opnsense.md`
* **Publication Date:** `2026-06-14`
* **Reading Time:** `10 mins`
* **Tags:** `[#networking]`, `[#wireguard]`, `[#security]`
* **Abstract:** Designing strict zone-based firewall rules across isolated VLANs (Management, Server DMZ, IoT, Trusted Clients) with point-to-point WireGuard cryptographic routing.
---
## 4. Engineering Projects & System Modules
### Module 1: Custom POSIX Shell Parser
* **Path / Identifier:** `/dev/posix-shell-parser`
* **Version:** `v1.2.0`
* **Primary Language:** `Lua`
* **Tags:** `[#lua]`, `[#ast-parser]`, `[#compilers]`
* **Summary:** A lightweight Lexer and AST parser written in Lua for parsing POSIX-compliant shell scripts. Optimized to avoid runtime heap allocations during tokenization, enabling real-time syntax coloring inside terminal buffers.
* **Code Snippet (`lexer.lua`):**
```lua
local function tokenize(src)
local tokens = {}
for pos, char in ipairs(src) do
if char == ";" or char == "|" then
table.insert(tokens, { type = "OPERATOR", value = char })
end
end
return tokens
end
```
### Module 2: WireGuard Mesh Topology Builder
* **Path / Identifier:** `/dev/wireguard-mesh`
* **Version:** `v0.8.4`
* **Primary Language:** `Python` / `POSIX sh`
* **Tags:** `[#networking]`, `[#wireguard]`, `[#automation]`
* **Summary:** Automated configuration generator that computes public/private key matrices and generates atomic configuration files for full-mesh WireGuard overlay networks spanning cloud VMs and homelab servers.
### Module 3: Zero-Allocation Logger (Go)
* **Path / Identifier:** `/dev/zero-alloc-logger`
* **Version:** `v2.1.1`
* **Primary Language:** `Go`
* **Tags:** `[#go]`, `[#performance]`, `[#systems]`
* **Summary:** A high-throughput structured JSON logger utilizing `sync.Pool` memory recycling to eliminate GC pause overhead during disk I/O (>500,000 log events/second).
### Module 4: Embedded Kernel Boot Strap
* **Path / Identifier:** `/dev/kernel-bootstrap`
* **Version:** `v0.1.0`
* **Primary Language:** `ARM Cortex Assembly` / `C`
* **Tags:** `[#arm-cortex]`, `[#assembly]`, `[#embedded]`
* **Summary:** Bare-metal boot sector and initial C runtime setup for ARM Cortex-M microcontrollers. Configures vector table offset registers, performs memory section copying, and initializes early UART debugging output.
### Module 5: Traefik Cloudflare Dynamic DNS Daemon
* **Path / Identifier:** `/dev/ddns-daemon`
* **Version:** `v1.0.2`
* **Primary Language:** `Python` / `Docker SDK`
* **Tags:** `[#docker]`, `[#traefik]`, `[#cloudflare]`
* **Summary:** Background controller daemon monitoring Docker container state transitions and synchronizing container label subdomains with Cloudflare DNS A/AAAA records.
---
## 5. Physical Hardware Nodes & Telemetry
```text
+-------------------+ 10GbE SFP+ +-------------------+
| gw-node01.lan | <==================> | pve-node02.lan |
| OPNsense 24.7 | | Proxmox VE 8.2 |
| Intel N100 (4C/4T)| | AMD 5900X (12C/24T|
+-------------------+ +-------------------+
|| ||
|| 10GbE Trunk || 10GbE NFS/SMB
\/ \/
+--------------------------------------------------------------+
| nas-node03.lan |
| TrueNAS SCALE (48TB RaidZ2 Pool) |
| Intel Core i5-12400 (6C/12T) / 64GB ECC |
+--------------------------------------------------------------+
```
| Hostname | Role / Operating System | Hardware Specifications | Nominal Load |
| :--- | :--- | :--- | :--- |
| **`gw-node01.lan`** | Edge Gateway / OPNsense 24.7 | Intel N100 (4C/4T), 16GB DDR5, 4x 2.5GbE I226-V | CPU: 18% \| RAM: 32% |
| **`pve-node02.lan`** | Hypervisor / Proxmox VE 8.2 | AMD Ryzen 9 5900X (12C/24T), 128GB ECC DDR4, 2x 2TB NVMe | CPU: 42% \| RAM: 68% |
| **`nas-node03.lan`** | Storage / TrueNAS SCALE | Intel Core i5-12400 (6C/12T), 64GB ECC, 6x 16TB Enterprise SAS | CPU: 14% \| RAM: 82% (ZFS ARC) |
---
## 6. ASCII Mascot & Daemon Artframes (`sys-daemon`)
### Frame 1: Idle / Scanning
```text
.-----------------.
/ ^ ^ ^ /|
/ (_) (_) (_) / |
/__________________/ |
| ___ ___ | |
| [o_o] [o_o] | |
| `-' `-' | |
| ______ | |
| / \ | /
| | -- | | /
| \____/ |/
`------------------'
```
### Frame 2: Active / Alert
```text
.-----------------.
/ ^ ^ ^ /|
/ (_) (_) (_) / |
/__________________/ |
| ___ ___ | |
| [-_-] [-_-] | |
| `-' `-' | |
| ______ | |
| / \ | /
| | O | | /
| \____/ |/
`------------------'
```
### Frame 3: Scroll-Tracker Cat Daemon
```text
/\___/\
( o o ) sys-daemon
( =^= ) [TRACKING]
(---)
```
---
## 7. Sample Pages Material Mapping Matrix
This matrix specifies which components and data entries from this canonical document are presented in each sample layout:
| Sample File | Layout Style | Persona / Bio | Services Included | Notes / Articles | Project Modules | Nodes & Telemetry | Mascot / Daemon |
| :--- | :--- | :---: | :---: | :---: | :---: | :---: | :---: |
| [`index.html`](file:///home/venus/code/blog/index.html) | Root Minimalist Business Card | Full whoami | — | — | Active Stack Tags | Terminal stdout | — |
| [`samples/homepage.html`](file:///home/venus/code/blog/samples/homepage.html) | Sample 1: Developer Homepage | Profile header | — | Post 1 (Full) + Archive Index (2,3,4) | — | — | — |
| [`samples/split-panel.html`](file:///home/venus/code/blog/samples/split-panel.html) | Sample 2: Split Panel Feed | — | — | — | Modules 1–5 | Status row | Frame 1/2 Animated |
| [`samples/companion.html`](file:///home/venus/code/blog/samples/companion.html) | Sample 3: Companion Layout | — | — | — | Modules 1–5 | Terminal card | Frame 3 Cat Daemon |
| [`samples/document-flow.html`](file:///home/venus/code/blog/samples/document-flow.html) | Sample 4: Continuous Document Flow | Header banner | — | Post 1 Snippets | Modules 1–5 in detail | — | Frame 3 Scroll Tracker |
| [`samples/portfolio.html`](file:///home/venus/code/blog/samples/portfolio.html) | Sample 5: Portfolio Card | Full whoami | — | — | Active Stack Tags | Terminal stdout | — |
| [`samples/homelab.html`](file:///home/venus/code/blog/samples/homelab.html) | Sample 6: Homelab Lander | Header banner | All Core & Compute (12 services) | — | — | Nodes 1–3 + ASCII Topology | Terminal logs |
| [`samples/public-services.html`](file:///home/venus/code/blog/samples/public-services.html) | Sample 7: Public Portal | Header banner | All Public Utilities (9 services) | — | — | Keys & PGP box | — |
| [`samples/sample-dashboard.html`](file:///home/venus/code/blog/samples/sample-dashboard.html) | Sample 8: 3-Tile Workspace | Center tile bio | Left tile services | Right tile archive | Center tile projects | Status bar | Vim command bar |
| [`samples/sample-command-center.html`](file:///home/venus/code/blog/samples/sample-command-center.html) | Sample 9: Tabbed Command Center | Tab 3 (Resume) | Tab 1 (Services) | Tab 2 (Blog Notes) | Tab 3 (Projects) | Tab 1 (Nodes) | Status dots |
| [`samples/sample-dual-pane-explorer.html`](file:///home/venus/code/blog/samples/sample-dual-pane-explorer.html) | Sample 10: Helix Tree Explorer | Sidebar links | Services subtree | Notes subtree | Modules subtree | Status bar | Sidebar companion |
-475
View File
@@ -1,475 +0,0 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Sample 3: Companion Layout</title>
<style>
@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:ital,wght@0,400;0,500;0,700;1,400&family=Inter:wght@400;500;700&family=JetBrains+Mono:ital,wght@0,400;0,500;1,400&display=swap');
/* Design Spec Token Definition */
:root {
--bg-canvas: #0d0f12; /* Deep charcoal slate */
--bg-surface: #121417; /* Slightly lighter dark surface */
--border-color: #2b303b; /* Low contrast static borders */
--text-primary: #e0e6f0; /* Off-white prose */
--text-muted: #8a95a5; /* Timestamp/status information */
--accent: #00f0ff; /* High-contrast active Cyan */
}
* {
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;
height: 100vh;
overflow: hidden;
display: flex;
flex-direction: column;
}
/* Sticky Navigation Header at the top */
.sticky-header {
position: sticky;
top: 0;
height: 56px;
background-color: var(--bg-canvas);
border-bottom: 1px solid var(--border-color);
display: flex;
justify-content: space-between;
align-items: center;
padding: 0 24px;
z-index: 100;
font-family: 'IBM Plex Mono', monospace;
}
.logo-container {
font-weight: 700;
font-size: 0.95rem;
color: var(--text-primary);
}
.logo-prompt {
color: var(--accent);
}
.header-nav {
display: flex;
gap: 16px;
}
.nav-link {
color: var(--text-primary);
text-decoration: none;
font-size: 0.85rem;
padding: 4px 10px;
border: 1px solid transparent;
display: inline-flex;
align-items: center;
transition: none; /* No spring/delayed transitions */
}
/* Snappy Hover Inversion */
.nav-link:hover {
background-color: var(--accent);
color: var(--bg-canvas);
}
.nav-link:focus {
outline: 2px solid var(--accent);
outline-offset: -2px;
}
/* Structural Indicator for Active Navigation Items */
.nav-link.active::before {
content: "> ";
color: var(--accent);
margin-right: 4px;
}
.nav-link.active:hover::before {
color: var(--bg-canvas);
}
/* Split Container Layout */
.split-container {
display: flex;
flex: 1;
height: calc(100vh - 56px);
overflow: hidden;
}
/* Left Pane - Scrollable Content Feed */
.left-pane {
width: 50%;
overflow-y: auto;
background-color: var(--bg-canvas);
padding: 40px;
border-right: 1px solid var(--border-color);
}
/* Right Pane - Fixed Centered ASCII Widget */
.right-pane {
width: 50%;
background-color: var(--bg-canvas);
display: flex;
align-items: center;
justify-content: center;
padding: 40px;
overflow: hidden;
}
.scroll-content {
width: 100%;
max-width: 65ch; /* Cap article readability width */
margin: 0 auto;
}
.section-title {
font-family: 'IBM Plex Mono', monospace;
font-weight: 700;
font-size: 1.3rem;
color: var(--text-primary);
margin-bottom: 24px;
border-bottom: 1px solid var(--border-color);
padding-bottom: 8px;
}
/* Cards Feed Component */
.card-list {
display: flex;
flex-direction: column;
gap: 16px;
}
.project-card {
border: 1px solid var(--border-color);
border-radius: 4px;
padding: 20px;
background-color: var(--bg-canvas); /* inherits canvas background */
cursor: pointer;
outline: none;
transition: none; /* Interaction suppression */
}
/* Instant Typography Snap on Hover/Focus */
.project-card:hover .card-title,
.project-card:focus .card-title {
color: var(--accent);
}
.project-card:focus {
outline: 2px solid var(--accent);
outline-offset: -2px;
}
.card-title {
font-family: 'IBM Plex Mono', monospace;
font-weight: 700;
font-size: 1rem;
color: var(--text-primary);
margin-bottom: 8px;
transition: none;
}
.card-description {
font-size: 0.9rem;
color: var(--text-muted);
line-height: 1.5;
}
/* Companion Terminal Widget */
.companion-terminal {
width: 100%;
max-width: 420px;
border: 1px solid var(--border-color);
border-radius: 4px;
background-color: var(--bg-surface);
font-family: 'IBM Plex Mono', monospace;
overflow: hidden;
}
.terminal-header {
background-color: var(--bg-canvas);
border-bottom: 1px solid var(--border-color);
padding: 8px 16px;
display: flex;
justify-content: space-between;
align-items: center;
font-size: 0.8rem;
color: var(--text-muted);
}
.tab-title {
color: var(--text-primary);
font-weight: 500;
}
.tab-status {
font-weight: 700;
color: var(--accent);
}
.terminal-body {
padding: 20px;
}
.mascot-pre {
font-family: 'JetBrains Mono', monospace;
font-size: 0.85rem;
line-height: 1.35;
color: var(--text-primary);
background-color: var(--bg-canvas);
padding: 16px;
border: 1px solid var(--border-color);
border-radius: 2px;
overflow: hidden;
white-space: pre;
margin-bottom: 16px;
}
/* Terminal Blinking Block Cursor */
.cursor-block {
display: inline-block;
width: 8px;
height: 15px;
background-color: var(--text-primary);
animation: blink 1s steps(2, start) infinite;
}
@keyframes blink {
to {
visibility: hidden;
}
}
.status-log-panel {
border-top: 1px solid var(--border-color);
padding-top: 12px;
font-size: 0.75rem;
}
.log-output {
color: var(--text-muted);
word-break: break-all;
}
/* Footer styling */
.pane-footer {
margin-top: 40px;
padding-top: 20px;
border-top: 1px solid var(--border-color);
font-family: 'IBM Plex Mono', monospace;
font-size: 0.8rem;
color: var(--text-muted);
display: flex;
justify-content: space-between;
}
/* Mobile Layout (Width <= 768px) */
@media (max-width: 768px) {
body {
overflow-y: auto;
height: auto;
}
.split-container {
flex-direction: column;
height: auto;
overflow: visible;
}
.right-pane {
width: 100%;
height: 300px;
padding: 20px;
order: 1; /* Companion moves to top of stack */
border-bottom: 1px solid var(--border-color);
position: sticky;
top: 56px;
z-index: 90;
}
.left-pane {
width: 100%;
height: auto;
overflow-y: visible;
padding: 24px;
order: 2; /* Content feed follows below */
border-right: none;
}
.companion-terminal {
max-width: 100%;
height: 100%;
}
.terminal-body {
padding: 12px;
display: flex;
flex-direction: column;
height: calc(100% - 33px);
}
.mascot-pre {
padding: 8px;
font-size: 0.75rem;
line-height: 1.25;
flex: 1;
margin-bottom: 8px;
}
.status-log-panel {
padding-top: 8px;
}
}
</style>
</head>
<body>
<!-- Sticky Top Header -->
<header class="sticky-header">
<div class="logo-container">
<span class="logo-prompt">$</span> agy --layout=companion
</div>
<nav class="header-nav">
<a href="index.html" class="nav-link">Catalog</a>
<a href="homepage.html" class="nav-link">Sample 1</a>
<a href="split-panel.html" class="nav-link">Sample 2</a>
<a href="companion.html" class="nav-link active">Sample 3</a>
<a href="document-flow.html" class="nav-link">Sample 4</a>
<a href="portfolio.html" class="nav-link">Sample 5</a>
<a href="homelab.html" class="nav-link">Sample 6</a>
<a href="public-services.html" class="nav-link">Sample 7</a>
<a href="sample-dashboard.html" class="nav-link">Sample 8</a>
<a href="sample-command-center.html" class="nav-link">Sample 9</a>
<a href="sample-dual-pane-explorer.html" class="nav-link">Sample 10</a>
</nav>
</header>
<!-- Split View Container -->
<div class="split-container">
<!-- Left Pane: Scrollable Project Cards -->
<main class="left-pane" aria-label="Project Feed">
<div class="scroll-content">
<h2 class="section-title">River Rooks // System Modules</h2>
<div class="card-list">
<!-- Card 1 -->
<div class="project-card" tabindex="0" data-target="/dev/posix-shell-parser">
<h3 class="card-title">Custom POSIX Shell Parser <span style="font-size: 0.8rem; font-weight: 400; color: var(--text-muted);">[v1.2.0 • #lua]</span></h3>
<p class="card-description">
A lightweight Lexer and AST parser written in Lua for parsing POSIX-compliant shell scripts. Highly optimized for syntax coloring inside modal environments without runtime heap allocations.
</p>
</div>
<!-- Card 2 -->
<div class="project-card" tabindex="0" data-target="/dev/wireguard-mesh">
<h3 class="card-title">WireGuard Mesh Topology Builder <span style="font-size: 0.8rem; font-weight: 400; color: var(--text-muted);">[v0.8.4 • #wireguard]</span></h3>
<p class="card-description">
Automated configuration generator for computing key matrices and setting up full-mesh WireGuard private overlays across cloud instances and local homelab nodes.
</p>
</div>
<!-- Card 3 -->
<div class="project-card" tabindex="0" data-target="/dev/zero-alloc-logger">
<h3 class="card-title">Zero-Allocation Logger (Go) <span style="font-size: 0.8rem; font-weight: 400; color: var(--text-muted);">[v2.1.1 • #golang]</span></h3>
<p class="card-description">
A high-performance JSON structure logger that uses sync.Pool buffers to avoid memory allocation overhead during intensive disk operations (>500k ops/sec).
</p>
</div>
<!-- Card 4 -->
<div class="project-card" tabindex="0" data-target="/dev/kernel-bootstrap">
<h3 class="card-title">Embedded Kernel Boot Strap <span style="font-size: 0.8rem; font-weight: 400; color: var(--text-muted);">[v0.1.0 • #arm-cortex]</span></h3>
<p class="card-description">
Minimalist boot sector and initial kernel bootstrap for ARM Cortex-M microcontrollers to handle vector table offset mapping and early UART status printouts.
</p>
</div>
<!-- Card 5 -->
<div class="project-card" tabindex="0" data-target="/dev/ddns-daemon">
<h3 class="card-title">Traefik Cloudflare DDNS Daemon <span style="font-size: 0.8rem; font-weight: 400; color: var(--text-muted);">[v1.0.2 • #docker-traefik]</span></h3>
<p class="card-description">
Background controller daemon designed to sync Docker container network labels with Cloudflare DNS records to route traffic to local homelab subdomains dynamically.
</p>
</div>
</div>
<footer class="pane-footer">
<span>Sample 3: Companion Layout</span>
<span>© 2026 River Rooks</span>
</footer>
</div>
</main>
<!-- Right Pane: Centered ASCII Companion -->
<aside class="right-pane" aria-label="System Companion">
<div class="companion-terminal">
<div class="terminal-header">
<span class="tab-title">sys-daemon</span>
<span class="tab-status">ACTIVE</span>
</div>
<div class="terminal-body">
<pre id="mascot-display" class="mascot-pre"></pre>
<div class="status-log-panel">
<div id="log-output" class="log-output"></div>
</div>
</div>
</div>
</aside>
</div>
<!-- Companion State Script -->
<script>
const IDLE_ART = ` /\\___/\\
( o o ) sys-daemon
( =^= ) STATUS: IDLE
\\__*__/ LOG: awaiting input<span class="cursor-block"></span>`;
const READING_ART = ` /\\___/\\
( - - ) sys-daemon
( =o= ) STATUS: READING
\\__*__/ LOG: reading module_`;
const mascot = document.getElementById('mascot-display');
const logOutput = document.getElementById('log-output');
const cards = document.querySelectorAll('.project-card');
function setIdle() {
mascot.innerHTML = IDLE_ART;
logOutput.innerText = `> sys-daemon initialized`;
}
function setReading(cardTarget) {
mascot.innerHTML = READING_ART;
logOutput.innerText = `[sys-daemon] target: ${cardTarget}`;
}
// Set Initial State
setIdle();
// Event hooks for Instant State swaps
cards.forEach(card => {
const target = card.getAttribute('data-target');
// Mouse triggers
card.addEventListener('mouseenter', () => setReading(target));
card.addEventListener('mouseleave', setIdle);
// Keyboard accessibility focus/blur triggers
card.addEventListener('focus', () => setReading(target));
card.addEventListener('blur', setIdle);
});
</script>
</body>
</html>
-609
View File
@@ -1,609 +0,0 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Sample 4: Document Flow Layout</title>
<style>
@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:ital,wght@0,400;0,500;0,700;1,400&family=Inter:wght@400;500;700&family=JetBrains+Mono:ital,wght@0,400;0,500;1,400&display=swap');
/* Design Tokens */
:root {
--bg-canvas: #0d0f12; /* Deep charcoal slate */
--bg-surface: #121417; /* Slightly lighter dark surface */
--border-color: #2b303b; /* Low-contrast static 1px borders */
--text-primary: #e0e6f0; /* Off-white reading text */
--text-muted: #8a95a5; /* Monospaced metadata / timestamps */
--accent: #00f0ff; /* High-contrast Cyan indicator */
}
* {
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.65;
height: 100vh;
overflow: hidden;
display: flex;
flex-direction: column;
}
/* Sticky Navigation Header */
.sticky-header {
position: sticky;
top: 0;
height: 56px;
background-color: var(--bg-canvas);
border-bottom: 1px solid var(--border-color);
display: flex;
justify-content: space-between;
align-items: center;
padding: 0 24px;
z-index: 100;
font-family: 'IBM Plex Mono', monospace;
}
.logo-container {
font-weight: 700;
font-size: 0.95rem;
color: var(--text-primary);
}
.logo-prompt {
color: var(--accent);
}
.header-nav {
display: flex;
gap: 16px;
}
.nav-link {
color: var(--text-primary);
text-decoration: none;
font-size: 0.85rem;
padding: 4px 10px;
border: 1px solid transparent;
display: inline-flex;
align-items: center;
transition: none;
}
.nav-link:hover {
background-color: var(--accent);
color: var(--bg-canvas);
}
.nav-link:focus {
outline: 2px solid var(--accent);
outline-offset: -2px;
}
.nav-link.active::before {
content: "> ";
color: var(--accent);
margin-right: 4px;
}
.nav-link.active:hover::before {
color: var(--bg-canvas);
}
/* Main Split Layout */
.split-container {
display: flex;
flex: 1;
height: calc(100vh - 56px);
overflow: hidden;
}
/* Left Pane - Fixed Terminal Scroll-Tracker Daemon */
.left-pane {
width: 380px;
background-color: var(--bg-canvas);
border-right: 1px solid var(--border-color);
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
padding: 32px;
flex-shrink: 0;
}
.companion-terminal {
width: 100%;
border: 1px solid var(--border-color);
border-radius: 4px;
background-color: var(--bg-surface);
font-family: 'IBM Plex Mono', monospace;
overflow: hidden;
}
.terminal-header {
background-color: var(--bg-canvas);
border-bottom: 1px solid var(--border-color);
padding: 8px 16px;
display: flex;
justify-content: space-between;
align-items: center;
font-size: 0.8rem;
color: var(--text-muted);
}
.tab-title {
color: var(--text-primary);
font-weight: 500;
}
.tab-status {
font-weight: 700;
color: var(--accent);
}
.terminal-body {
padding: 20px;
}
.mascot-pre {
font-family: 'JetBrains Mono', monospace;
font-size: 0.82rem;
line-height: 1.35;
color: var(--text-primary);
background-color: var(--bg-canvas);
padding: 16px;
border: 1px solid var(--border-color);
border-radius: 2px;
overflow: hidden;
white-space: pre;
margin-bottom: 16px;
}
/* Blinking Block Cursor */
.cursor-block {
display: inline-block;
width: 8px;
height: 15px;
background-color: var(--text-primary);
animation: blink 1s steps(2, start) infinite;
}
@keyframes blink {
to {
visibility: hidden;
}
}
.status-log-panel {
border-top: 1px solid var(--border-color);
padding-top: 12px;
font-size: 0.75rem;
}
.log-output {
color: var(--text-muted);
word-break: break-all;
}
/* Right Pane - Continuous Document Stream */
.right-pane {
flex: 1;
overflow-y: auto;
background-color: var(--bg-canvas);
padding: 48px 32px;
display: flex;
justify-content: center;
scroll-behavior: smooth;
}
.document-stream {
width: 100%;
max-width: 65ch; /* Optimal prose line length */
}
.document-header {
margin-bottom: 40px;
padding-bottom: 24px;
border-bottom: 1px solid var(--border-color);
}
.doc-title {
font-family: 'IBM Plex Mono', monospace;
font-weight: 700;
font-size: 1.8rem;
color: var(--text-primary);
margin-bottom: 12px;
}
.doc-subtitle {
font-size: 1rem;
color: var(--text-muted);
line-height: 1.5;
}
/* Continuous Section Flow (No 4-sided Bounding Boxes) */
.doc-section {
padding: 32px 0;
border-bottom: 1px solid var(--border-color);
scroll-margin-top: 20px;
}
.doc-section:last-of-type {
border-bottom: none;
}
.section-header-wrap {
display: flex;
align-items: baseline;
gap: 10px;
margin-bottom: 8px;
}
/* Structural Indicator for Active Scroll Section */
.active-indicator {
font-family: 'IBM Plex Mono', monospace;
font-weight: 700;
color: var(--accent);
opacity: 0;
transition: none;
}
.doc-section.is-active .active-indicator {
opacity: 1;
}
.section-heading {
font-family: 'IBM Plex Mono', monospace;
font-weight: 700;
font-size: 1.25rem;
color: var(--text-primary);
}
.doc-section.is-active .section-heading {
color: var(--accent);
}
.section-meta {
font-family: 'IBM Plex Mono', monospace;
font-size: 0.8rem;
color: var(--text-muted);
margin-bottom: 16px;
display: flex;
flex-wrap: wrap;
gap: 12px;
}
.meta-tag {
color: var(--text-muted);
}
.doc-section p {
color: var(--text-primary);
font-size: 0.95rem;
margin-bottom: 16px;
}
.doc-section p:last-child {
margin-bottom: 0;
}
/* Terminal Code Block Component */
.code-block {
border: 1px solid var(--border-color);
border-radius: 4px;
background-color: var(--bg-surface);
margin: 20px 0;
font-family: 'JetBrains Mono', monospace;
overflow: hidden;
}
.code-header {
background-color: var(--bg-canvas);
border-bottom: 1px solid var(--border-color);
padding: 6px 14px;
display: flex;
justify-content: space-between;
font-size: 0.75rem;
color: var(--text-muted);
}
.code-content {
padding: 14px;
overflow-x: auto;
font-size: 0.82rem;
line-height: 1.5;
}
.code-content pre {
margin: 0;
}
.pane-footer {
margin-top: 48px;
padding-top: 24px;
border-top: 1px solid var(--border-color);
font-family: 'IBM Plex Mono', monospace;
font-size: 0.8rem;
color: var(--text-muted);
display: flex;
justify-content: space-between;
}
/* Responsive Mobile Layout (Width <= 768px) */
@media (max-width: 768px) {
body {
overflow-y: auto;
height: auto;
}
.split-container {
flex-direction: column;
height: auto;
overflow: visible;
}
.left-pane {
width: 100%;
height: 280px;
padding: 16px;
border-right: none;
border-bottom: 1px solid var(--border-color);
position: sticky;
top: 56px;
z-index: 90;
}
.right-pane {
padding: 24px 16px;
overflow-y: visible;
}
}
</style>
</head>
<body>
<!-- Sticky Navigation Header -->
<header class="sticky-header">
<div class="logo-container">
<span class="logo-prompt">$</span> agy --layout=document-flow
</div>
<nav class="header-nav">
<a href="index.html" class="nav-link">Catalog</a>
<a href="homepage.html" class="nav-link">Sample 1</a>
<a href="split-panel.html" class="nav-link">Sample 2</a>
<a href="companion.html" class="nav-link">Sample 3</a>
<a href="document-flow.html" class="nav-link active">Sample 4</a>
<a href="portfolio.html" class="nav-link">Sample 5</a>
<a href="homelab.html" class="nav-link">Sample 6</a>
<a href="public-services.html" class="nav-link">Sample 7</a>
<a href="sample-dashboard.html" class="nav-link">Sample 8</a>
<a href="sample-command-center.html" class="nav-link">Sample 9</a>
<a href="sample-dual-pane-explorer.html" class="nav-link">Sample 10</a>
</nav>
</header>
<!-- Split View Container -->
<div class="split-container">
<!-- Left Pane: Fixed Terminal Scroll-Tracker Daemon -->
<aside class="left-pane" aria-label="Scroll Tracker Daemon">
<div class="companion-terminal">
<div class="terminal-header">
<span class="tab-title">sys-daemon (scroll-tracker)</span>
<span class="tab-status">ONLINE</span>
</div>
<div class="terminal-body">
<pre id="mascot-display" class="mascot-pre"></pre>
<div class="status-log-panel">
<div id="log-output" class="log-output">> continuous document flow initialized</div>
</div>
</div>
</div>
</aside>
<!-- Right Pane: Continuous Document Reading Stream -->
<main id="scroll-target" class="right-pane" aria-label="Technical Documentation">
<div class="document-stream">
<!-- Document Header -->
<header class="document-header">
<h1 class="doc-title">River Rooks // Systems &amp; Architecture</h1>
<p class="doc-subtitle">
A high-density technical reading flow. Pinned left pane contains an automated terminal tracker daemon observing scroll depth across system modules.
</p>
</header>
<!-- Section 1 -->
<section id="section-shell-parser" class="doc-section" data-target="/dev/posix-shell-parser">
<div class="section-header-wrap">
<span class="active-indicator">></span>
<h2 class="section-heading">Custom POSIX Shell Parser</h2>
</div>
<div class="section-meta">
<span>Version: v1.2.0</span>
<span>•</span>
<span>Module: /dev/posix-shell-parser</span>
<span>•</span>
<span class="meta-tag">[#lua]</span>
<span class="meta-tag">[#ast-parser]</span>
</div>
<p>
This section details a lightweight Lexer and AST parser written in Lua for parsing POSIX-compliant shell scripts. The architecture avoids runtime allocations during tokenization, enabling real-time syntax coloring inside terminal buffers.
</p>
<p>
The execution pipeline operates in two distinct phases: string scanning into token stream vectors, followed by recursive descent operator precedence tree construction.
</p>
<div class="code-block">
<div class="code-header">
<span>lexer.lua</span>
<span>Lua</span>
</div>
<div class="code-content">
<pre><code>local function tokenize(src)
local tokens = {}
for pos, char in ipairs(src) do
if char == ";" or char == "|" then
table.insert(tokens, { type = "OPERATOR", value = char })
end
end
return tokens
end</code></pre>
</div>
</div>
</section>
<!-- Section 2 -->
<section id="section-wireguard-mesh" class="doc-section" data-target="/dev/wireguard-mesh">
<div class="section-header-wrap">
<span class="active-indicator">></span>
<h2 class="section-heading">WireGuard Mesh Topology Builder</h2>
</div>
<div class="section-meta">
<span>Version: v0.8.4</span>
<span>•</span>
<span>Module: /dev/wireguard-mesh</span>
<span>•</span>
<span class="meta-tag">[#networking]</span>
<span class="meta-tag">[#wireguard]</span>
</div>
<p>
Automated configuration generator designed to provision full-mesh WireGuard overlay networks across distributed cloud nodes and homelab infrastructure.
</p>
<p>
Instead of manually calculating public/private keypairs and Endpoint IP pairings per host node, this utility computes matrix topologies and generates atomic configuration files.
</p>
</section>
<!-- Section 3 -->
<section id="section-zero-alloc-logger" class="doc-section" data-target="/dev/zero-alloc-logger">
<div class="section-header-wrap">
<span class="active-indicator">></span>
<h2 class="section-heading">Zero-Allocation Logger (Go)</h2>
</div>
<div class="section-meta">
<span>Version: v2.1.1</span>
<span>•</span>
<span>Module: /dev/zero-alloc-logger</span>
<span>•</span>
<span class="meta-tag">[#go]</span>
<span class="meta-tag">[#performance]</span>
</div>
<p>
A high-throughput structured JSON logger implemented in Go that leverages <code>sync.Pool</code> byte buffers to completely eliminate heap allocations during intensive I/O operations.
</p>
<p>
Benchmark comparisons demonstrate zero GC overhead when processing over 500,000 log events per second across multi-threaded worker routines.
</p>
</section>
<!-- Section 4 -->
<section id="section-kernel-bootstrap" class="doc-section" data-target="/dev/kernel-bootstrap">
<div class="section-header-wrap">
<span class="active-indicator">></span>
<h2 class="section-heading">Embedded Kernel Boot Strap</h2>
</div>
<div class="section-meta">
<span>Version: v0.1.0</span>
<span>•</span>
<span>Module: /dev/kernel-bootstrap</span>
<span>•</span>
<span class="meta-tag">[#arm-cortex]</span>
<span class="meta-tag">[#assembly]</span>
</div>
<p>
Bare-metal boot sector and initial C runtime setup for ARM Cortex-M microcontrollers. Handles vector table offset initialization, memory region copy routines, and low-level UART debugging initialization.
</p>
</section>
<!-- Section 5 -->
<section id="section-ddns-daemon" class="doc-section" data-target="/dev/ddns-daemon">
<div class="section-header-wrap">
<span class="active-indicator">></span>
<h2 class="section-heading">Traefik Cloudflare DDNS Daemon</h2>
</div>
<div class="section-meta">
<span>Version: v1.0.2</span>
<span>•</span>
<span>Module: /dev/ddns-daemon</span>
<span>•</span>
<span class="meta-tag">[#docker]</span>
<span class="meta-tag">[#traefik]</span>
</div>
<p>
Background controller daemon designed to sync Docker container network labels with Cloudflare DNS records to route traffic to local homelab subdomains dynamically.
</p>
</section>
<footer class="pane-footer">
<span>Sample 4: Document Flow Layout</span>
<span>© 2026 River Rooks</span>
</footer>
</div>
</main>
</div>
<!-- Scroll-Tracker IntersectionObserver Script -->
<script>
const IDLE_ART = ` /\\___/\\
( o o ) sys-daemon
( =^= ) STATUS: IDLE
\\__*__/ LOG: awaiting input<span class="cursor-block"></span>`;
const READING_ART = ` /\\___/\\
( - - ) sys-daemon
( =o= ) STATUS: TRACKING
\\__*__/ LOG: reading module_`;
const mascot = document.getElementById('mascot-display');
const logOutput = document.getElementById('log-output');
const sections = document.querySelectorAll('.doc-section');
const rightPane = document.getElementById('scroll-target');
function setIdle() {
mascot.innerHTML = IDLE_ART;
logOutput.innerText = `> sys-daemon (idle scroll-tracker)`;
}
function setTracking(targetPath) {
mascot.innerHTML = READING_ART;
logOutput.innerText = `[sys-daemon] active_section: ${targetPath}`;
}
setIdle();
// IntersectionObserver to observe document sections in scroll view
const observerOptions = {
root: rightPane,
rootMargin: '-20% 0px -60% 0px', // Active threshold zone
threshold: 0
};
let activeSection = null;
const observer = new IntersectionObserver((entries) => {
entries.forEach(entry => {
if (entry.isIntersecting) {
if (activeSection) {
activeSection.classList.remove('is-active');
}
activeSection = entry.target;
activeSection.classList.add('is-active');
const target = activeSection.getAttribute('data-target');
setTracking(target);
}
});
}, observerOptions);
sections.forEach(section => observer.observe(section));
</script>
</body>
</html>
-871
View File
@@ -1,871 +0,0 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>River Rooks | Homelab Lander & Infrastructure Catalog</title>
<meta name="description" content="Public landing page and operational directory for River Rooks self-hosted homelab infrastructure, services, hardware nodes, and network topology.">
<style>
@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:ital,wght@0,400;0,500;0,700;1,400&family=Inter:wght@400;500;700&family=JetBrains+Mono:ital,wght@0,400;0,500;1,400&display=swap');
:root {
--bg-canvas: #0d0f12; /* Deep slate/charcoal */
--bg-surface: #121417; /* Solid surface container */
--bg-surface-alt: #181b21; /* Slightly lighter surface card */
--border-color: #2b303b; /* Low-contrast 1px border */
--border-active: #00f0ff; /* Active Cyan border */
--text-primary: #e0e6f0; /* Off-white prose */
--text-muted: #8a95a5; /* Monospaced metadata gray */
--accent: #00f0ff; /* High-visibility Cyan terminal accent */
--accent-green: #00ff66; /* ANSI Green for online status */
--accent-amber: #ffb000; /* Amber for alerts / tags */
}
* {
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.65;
min-height: 100vh;
display: flex;
flex-direction: column;
}
/* Sticky Navigation Header */
.sticky-header {
position: sticky;
top: 0;
height: 56px;
background-color: var(--bg-canvas);
border-bottom: 1px solid var(--border-color);
display: flex;
justify-content: space-between;
align-items: center;
padding: 0 24px;
z-index: 100;
font-family: 'IBM Plex Mono', monospace;
}
.logo-container {
font-weight: 700;
font-size: 0.92rem;
color: var(--text-primary);
display: flex;
align-items: center;
gap: 8px;
}
.logo-prompt {
color: var(--accent);
}
.header-nav {
display: flex;
gap: 10px;
overflow-x: auto;
}
.nav-link {
color: var(--text-primary);
text-decoration: none;
font-size: 0.82rem;
padding: 4px 8px;
border: 1px solid transparent;
display: inline-flex;
align-items: center;
transition: none; /* Instant snap */
white-space: nowrap;
}
.nav-link:hover {
background-color: var(--accent);
color: var(--bg-canvas);
}
.nav-link:focus {
outline: 2px solid var(--accent);
outline-offset: -2px;
}
.nav-link.active::before {
content: "> ";
color: var(--accent);
margin-right: 4px;
}
.nav-link.active:hover::before {
color: var(--bg-canvas);
}
/* Outer Wrapper */
.page-wrapper {
flex: 1;
display: flex;
justify-content: center;
padding: 40px 24px 60px 24px;
}
.content-container {
width: 100%;
max-width: 1000px;
}
/* Identity Header */
.identity-header {
display: flex;
justify-content: space-between;
align-items: flex-start;
flex-wrap: wrap;
gap: 16px;
margin-bottom: 24px;
}
.header-titles {
flex: 1;
min-width: 280px;
}
.site-h1 {
font-family: 'IBM Plex Mono', monospace;
font-size: 2rem;
font-weight: 700;
color: var(--text-primary);
margin-bottom: 6px;
letter-spacing: -0.02em;
}
.status-line {
display: flex;
align-items: center;
gap: 10px;
font-family: 'IBM Plex Mono', monospace;
font-size: 0.85rem;
color: var(--text-muted);
}
.status-dot {
width: 8px;
height: 8px;
background-color: var(--accent-green);
display: inline-block;
flex-shrink: 0;
}
.system-badge-box {
font-family: 'IBM Plex Mono', monospace;
font-size: 0.78rem;
background-color: var(--bg-surface);
border: 1px solid var(--border-color);
padding: 10px 14px;
border-radius: 4px;
color: var(--text-muted);
line-height: 1.5;
}
.system-badge-box strong {
color: var(--text-primary);
}
/* Dividers */
.section-divider {
border: 0;
border-top: 1px solid var(--border-color);
margin: 32px 0;
}
/* Terminal Status Block */
.terminal-block {
border: 1px solid var(--border-color);
border-radius: 4px;
background-color: var(--bg-surface);
font-family: 'JetBrains Mono', monospace;
overflow: hidden;
margin-bottom: 36px;
}
.terminal-header {
background-color: var(--bg-canvas);
border-bottom: 1px solid var(--border-color);
padding: 8px 16px;
display: flex;
justify-content: space-between;
font-size: 0.78rem;
color: var(--text-muted);
}
.terminal-title {
color: var(--text-primary);
font-weight: 500;
}
.terminal-body {
padding: 16px;
font-size: 0.84rem;
line-height: 1.55;
}
.cmd-line {
color: var(--text-muted);
margin-bottom: 10px;
}
.prompt {
color: var(--accent);
font-weight: 700;
}
.cmd-output {
color: var(--text-primary);
white-space: pre-wrap;
}
.highlight-green {
color: var(--accent-green);
}
.highlight-cyan {
color: var(--accent);
}
.highlight-amber {
color: var(--accent-amber);
}
.cursor-block {
display: inline-block;
width: 8px;
height: 15px;
background-color: var(--text-primary);
margin-left: 4px;
vertical-align: middle;
animation: blink 1s steps(2, start) infinite;
}
@keyframes blink {
to { visibility: hidden; }
}
/* Section Headings */
.section-header {
display: flex;
justify-content: space-between;
align-items: baseline;
margin-bottom: 16px;
flex-wrap: wrap;
gap: 8px;
}
.section-title {
font-family: 'IBM Plex Mono', monospace;
font-size: 1.15rem;
font-weight: 700;
color: var(--text-primary);
}
.section-meta {
font-family: 'IBM Plex Mono', monospace;
font-size: 0.8rem;
color: var(--text-muted);
}
/* Interactive Filter Controls */
.filter-bar {
display: flex;
flex-wrap: wrap;
gap: 8px;
margin-bottom: 24px;
font-family: 'IBM Plex Mono', monospace;
}
.filter-btn {
background-color: var(--bg-surface);
color: var(--text-muted);
border: 1px solid var(--border-color);
padding: 6px 12px;
font-size: 0.8rem;
cursor: pointer;
font-family: inherit;
border-radius: 4px;
transition: none; /* Instant snap */
}
.filter-btn:hover {
color: var(--text-primary);
border-color: var(--accent);
}
.filter-btn.active {
background-color: var(--accent);
color: var(--bg-canvas);
border-color: var(--accent);
font-weight: 700;
}
.filter-btn:focus {
outline: 2px solid var(--accent);
outline-offset: 1px;
}
/* Services Card Grid */
.services-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
gap: 16px;
margin-bottom: 36px;
}
.service-card {
background-color: var(--bg-surface);
border: 1px solid var(--border-color);
border-radius: 4px;
padding: 18px;
display: flex;
flex-direction: column;
justify-content: space-between;
transition: none;
}
.service-card:hover {
border-color: var(--border-active);
}
.service-card-header {
display: flex;
justify-content: space-between;
align-items: flex-start;
margin-bottom: 10px;
}
.service-name {
font-family: 'IBM Plex Mono', monospace;
font-size: 1rem;
font-weight: 700;
color: var(--text-primary);
}
.service-card:hover .service-name {
color: var(--accent);
}
.service-tag {
font-family: 'IBM Plex Mono', monospace;
font-size: 0.75rem;
color: var(--text-muted);
}
.service-desc {
font-size: 0.88rem;
color: var(--text-muted);
margin-bottom: 16px;
line-height: 1.5;
}
.service-footer {
font-family: 'IBM Plex Mono', monospace;
font-size: 0.78rem;
display: flex;
justify-content: space-between;
align-items: center;
padding-top: 10px;
border-top: 1px solid var(--border-color);
}
.service-port {
color: var(--text-muted);
}
.service-status {
display: flex;
align-items: center;
gap: 6px;
font-weight: 500;
}
.status-text-online {
color: var(--accent-green);
}
.status-text-active {
color: var(--accent);
}
/* Hardware Nodes & Metrics Table */
.nodes-container {
background-color: var(--bg-surface);
border: 1px solid var(--border-color);
border-radius: 4px;
overflow-x: auto;
margin-bottom: 36px;
}
.nodes-table {
width: 100%;
border-collapse: collapse;
font-family: 'IBM Plex Mono', monospace;
font-size: 0.83rem;
text-align: left;
}
.nodes-table th {
background-color: var(--bg-canvas);
color: var(--text-primary);
border-bottom: 1px solid var(--border-color);
padding: 10px 14px;
font-weight: 700;
}
.nodes-table td {
padding: 12px 14px;
border-bottom: 1px solid var(--border-color);
color: var(--text-primary);
vertical-align: middle;
}
.nodes-table tr:last-child td {
border-bottom: none;
}
.nodes-table tr:hover td {
background-color: var(--bg-surface-alt);
}
.node-hostname {
font-weight: 700;
color: var(--accent);
}
.metric-bar {
color: var(--accent-green);
}
/* Network Topology ASCII Block */
.topology-block {
border: 1px solid var(--border-color);
border-radius: 4px;
background-color: var(--bg-surface);
font-family: 'JetBrains Mono', monospace;
padding: 18px;
font-size: 0.8rem;
line-height: 1.4;
overflow-x: auto;
color: var(--text-muted);
margin-bottom: 36px;
}
.topology-title {
color: var(--text-primary);
font-weight: 700;
margin-bottom: 12px;
}
/* Piped Footer Links */
.footer-links {
font-family: 'IBM Plex Mono', monospace;
font-size: 0.85rem;
color: var(--text-muted);
display: flex;
flex-wrap: wrap;
gap: 12px;
align-items: center;
}
.footer-link {
color: var(--text-primary);
text-decoration: none;
padding: 2px 6px;
transition: none; /* Zero-delay snap */
}
.footer-link:hover {
background-color: var(--accent);
color: var(--bg-canvas);
}
.footer-link:focus {
outline: 2px solid var(--accent);
outline-offset: -2px;
}
.pipe {
color: var(--border-color);
}
</style>
</head>
<body>
<!-- Sticky Header -->
<header class="sticky-header">
<div class="logo-container">
<span class="logo-prompt">$</span> agy --page=homelab
</div>
<nav class="header-nav" aria-label="Main Navigation">
<a href="index.html" class="nav-link">Catalog</a>
<a href="homepage.html" class="nav-link">Sample 1</a>
<a href="split-panel.html" class="nav-link">Sample 2</a>
<a href="companion.html" class="nav-link">Sample 3</a>
<a href="document-flow.html" class="nav-link">Sample 4</a>
<a href="portfolio.html" class="nav-link">Sample 5</a>
<a href="homelab.html" class="nav-link active">Sample 6 (Homelab)</a>
<a href="public-services.html" class="nav-link">Sample 7</a>
<a href="sample-dashboard.html" class="nav-link">Sample 8</a>
<a href="sample-command-center.html" class="nav-link">Sample 9</a>
<a href="sample-dual-pane-explorer.html" class="nav-link">Sample 10</a>
</nav>
</header>
<!-- Page Content Container -->
<div class="page-wrapper">
<main class="content-container">
<!-- Identity & Status Banner -->
<header class="identity-header">
<div class="header-titles">
<h1 class="site-h1">Homelab Lander &amp; Infrastructure</h1>
<div class="status-line">
<span class="status-dot"></span>
<span>CLUSTER ONLINE | 10GbE BACKBONE | TRAEFIK V3 EDGE PROXY</span>
</div>
</div>
<div class="system-badge-box">
<div><strong>SYSTEM UPTIME:</strong> 99.98% (42d 14h)</div>
<div><strong>LOCATION:</strong> ALABAMA DCs / RACK-01</div>
</div>
</header>
<hr class="section-divider">
<!-- Under Construction / System Telemetry Terminal Block -->
<section aria-label="System Diagnostics Terminal">
<div class="terminal-block">
<div class="terminal-header">
<span class="terminal-title">/var/log/homelab-status.log</span>
<span>STDOUT [TTY1]</span>
</div>
<div class="terminal-body">
<div class="cmd-line"><span class="prompt">$</span> homelab-ctl status --output=summary</div>
<div class="cmd-output">[<span class="highlight-green">OK</span>] Edge Router: OPNsense 24.7 (10GbE SFP+ WAN/LAN)
[<span class="highlight-green">OK</span>] Reverse Proxy: Traefik v3.1 (Auto Let's Encrypt TLS Wildcard)
[<span class="highlight-green">OK</span>] Virtualization: Proxmox VE 8.2 Cluster (3 Bare-Metal Nodes)
[<span class="highlight-green">OK</span>] ZFS Array: TrueNAS SCALE (48TB RaidZ2 Pool, 0 Degradation)
[<span class="highlight-cyan">INFO</span>] Active Wireguard Mesh Peers: 14 Connected
[<span class="highlight-amber">WARN</span>] Sonarr Queue: 2 downloads pending verification<span class="cursor-block"></span></div>
</div>
</div>
</section>
<!-- Homelab Services Directory -->
<section aria-label="Services Directory">
<div class="section-header">
<h2 class="section-title">services_directory</h2>
<span class="section-meta">12 Active Micro-services</span>
</div>
<!-- Filter Bar -->
<div class="filter-bar" id="filterBar" role="tablist" aria-label="Filter Services">
<button class="filter-btn active" data-filter="all" role="tab" aria-selected="true">All Services</button>
<button class="filter-btn" data-filter="core" role="tab">Core &amp; Network</button>
<button class="filter-btn" data-filter="compute" role="tab">Compute &amp; Storage</button>
<button class="filter-btn" data-filter="media" role="tab">Media &amp; Automation</button>
<button class="filter-btn" data-filter="monitoring" role="tab">Monitoring &amp; Sec</button>
</div>
<!-- Services Cards Grid -->
<div class="services-grid" id="servicesGrid">
<!-- Traefik -->
<article class="service-card" data-category="core">
<div class="service-card-header">
<h3 class="service-name">Traefik Proxy</h3>
<span class="service-tag">[#core]</span>
</div>
<p class="service-desc">Edge HTTP reverse proxy and load balancer with dynamic Docker provider discovery and ACME TLS certificate management.</p>
<div class="service-footer">
<span class="service-port">443/tcp (TLS)</span>
<span class="service-status status-text-online"><span class="status-dot"></span> ONLINE</span>
</div>
</article>
<!-- OPNsense -->
<article class="service-card" data-category="core">
<div class="service-card-header">
<h3 class="service-name">OPNsense Firewall</h3>
<span class="service-tag">[#core]</span>
</div>
<p class="service-desc">Hardened FreeBSD firewall routing 10GbE traffic with VLAN isolation, Suricata IDS/IPS, and Unbound DNS.</p>
<div class="service-footer">
<span class="service-port">VLAN 10 / Mgmt</span>
<span class="service-status status-text-online"><span class="status-dot"></span> ACTIVE</span>
</div>
</article>
<!-- Proxmox VE -->
<article class="service-card" data-category="compute">
<div class="service-card-header">
<h3 class="service-name">Proxmox VE</h3>
<span class="service-tag">[#compute]</span>
</div>
<p class="service-desc">Enterprise hypervisor cluster hosting Debian LXC containers and KVM virtual machines with Ceph &amp; ZFS backend.</p>
<div class="service-footer">
<span class="service-port">8006/tcp</span>
<span class="service-status status-text-online"><span class="status-dot"></span> ONLINE</span>
</div>
</article>
<!-- TrueNAS SCALE -->
<article class="service-card" data-category="compute">
<div class="service-card-header">
<h3 class="service-name">TrueNAS SCALE</h3>
<span class="service-tag">[#storage]</span>
</div>
<p class="service-desc">Primary network attached storage managing 48TB ZFS RaidZ2 array, NFS shares, SMB datasets, and daily scrub jobs.</p>
<div class="service-footer">
<span class="service-port">NFS / SMB</span>
<span class="service-status status-text-online"><span class="status-dot"></span> ONLINE</span>
</div>
</article>
<!-- AdGuard Home -->
<article class="service-card" data-category="core">
<div class="service-card-header">
<h3 class="service-name">AdGuard Home</h3>
<span class="service-tag">[#dns]</span>
</div>
<p class="service-desc">Network-wide DNS sinkhole filtering trackers and ad domains across all VLANs with DNS-over-HTTPS upstream resolvers.</p>
<div class="service-footer">
<span class="service-port">53/udp, 853/tcp</span>
<span class="service-status status-text-active"><span class="status-dot"></span> PROTECTED</span>
</div>
</article>
<!-- WireGuard Mesh -->
<article class="service-card" data-category="core">
<div class="service-card-header">
<h3 class="service-name">WireGuard Mesh</h3>
<span class="service-tag">[#vpn]</span>
</div>
<p class="service-desc">High-performance encrypted point-to-point VPN tunnel connecting remote laptops and mobile endpoints to homelab subnet.</p>
<div class="service-footer">
<span class="service-port">51820/udp</span>
<span class="service-status status-text-online"><span class="status-dot"></span> 14 PEERS</span>
</div>
</article>
<!-- Jellyfin Media -->
<article class="service-card" data-category="media">
<div class="service-card-header">
<h3 class="service-name">Jellyfin Media</h3>
<span class="service-tag">[#media]</span>
</div>
<p class="service-desc">FOSS media streaming engine leveraging Intel QuickSync GPU hardware acceleration for 4K HDR transcoding.</p>
<div class="service-footer">
<span class="service-port">8096/tcp</span>
<span class="service-status status-text-online"><span class="status-dot"></span> READY</span>
</div>
</article>
<!-- Arr Automation Suite -->
<article class="service-card" data-category="media">
<div class="service-card-header">
<h3 class="service-name">Arr Stack (Sonarr/Radarr)</h3>
<span class="service-tag">[#automation]</span>
</div>
<p class="service-desc">Automated content indexing, Prowlarr torrent/Usenet management, and SABnzbd queue downloader pipeline.</p>
<div class="service-footer">
<span class="service-port">8989 / 7878</span>
<span class="service-status status-text-online"><span class="status-dot"></span> RUNNING</span>
</div>
</article>
<!-- Prometheus + Grafana -->
<article class="service-card" data-category="monitoring">
<div class="service-card-header">
<h3 class="service-name">Grafana &amp; Prometheus</h3>
<span class="service-tag">[#telemetry]</span>
</div>
<p class="service-desc">Time-series metric collection with Node Exporter, Telegraf agents, and live cluster performance dashboards.</p>
<div class="service-footer">
<span class="service-port">3000 / 9090</span>
<span class="service-status status-text-active"><span class="status-dot"></span> SCRAPING</span>
</div>
</article>
<!-- Uptime Kuma -->
<article class="service-card" data-category="monitoring">
<div class="service-card-header">
<h3 class="service-name">Uptime Kuma</h3>
<span class="service-tag">[#status]</span>
</div>
<p class="service-desc">Synthetic HTTP, Ping, and TCP health monitor broadcasting real-time service status alerts to Discord webhooks.</p>
<div class="service-footer">
<span class="service-port">3001/tcp</span>
<span class="service-status status-text-online"><span class="status-dot"></span> 100% HEALTH</span>
</div>
</article>
<!-- Vaultwarden -->
<article class="service-card" data-category="monitoring">
<div class="service-card-header">
<h3 class="service-name">Vaultwarden</h3>
<span class="service-tag">[#security]</span>
</div>
<p class="service-desc">Lightweight Rust implementation of the Bitwarden API hosting encrypted credentials, SSH keys, and TOTP tokens.</p>
<div class="service-footer">
<span class="service-port">443/tcp (E2EE)</span>
<span class="service-status status-text-active"><span class="status-dot"></span> LOCKED</span>
</div>
</article>
<!-- Forgejo Git -->
<article class="service-card" data-category="compute">
<div class="service-card-header">
<h3 class="service-name">Forgejo Git Server</h3>
<span class="service-tag">[#git]</span>
</div>
<p class="service-desc">Self-hosted Git forge hosting homelab infrastructure-as-code repos, Ansible playbooks, and Docker compose files.</p>
<div class="service-footer">
<span class="service-port">3000/tcp, 2222/ssh</span>
<span class="service-status status-text-online"><span class="status-dot"></span> ONLINE</span>
</div>
</article>
</div>
</section>
<hr class="section-divider">
<!-- Bare-Metal Hardware Nodes Grid -->
<section aria-label="Hardware Topology">
<div class="section-header">
<h2 class="section-title">hardware_nodes</h2>
<span class="section-meta">3 Physical Bare-Metal Servers</span>
</div>
<div class="nodes-container">
<table class="nodes-table">
<thead>
<tr>
<th>Hostname</th>
<th>Role &amp; OS</th>
<th>Hardware Spec</th>
<th>CPU Load</th>
<th>RAM Util</th>
</tr>
</thead>
<tbody>
<tr>
<td class="node-hostname">gw-node01.lan</td>
<td>OPNsense 24.7</td>
<td>Intel N100 (4C/4T) | 16GB DDR5 | 2.5GbE</td>
<td><span class="metric-bar">[██░░░░░░░░]</span> 18%</td>
<td><span class="metric-bar">[███░░░░░░░]</span> 32%</td>
</tr>
<tr>
<td class="node-hostname">pve-node02.lan</td>
<td>Proxmox VE 8.2</td>
<td>AMD Ryzen 9 5900X (12C/24T) | 128GB ECC | NVMe</td>
<td><span class="metric-bar">[████░░░░░░]</span> 42%</td>
<td><span class="metric-bar">[███████░░░]</span> 68%</td>
</tr>
<tr>
<td class="node-hostname">nas-node03.lan</td>
<td>TrueNAS SCALE</td>
<td>Intel Core i5-12400 (6C/12T) | 64GB ECC | 6x 16TB RaidZ2</td>
<td><span class="metric-bar">[██░░░░░░░░]</span> 14%</td>
<td><span class="metric-bar">[████████░░]</span> 82%</td>
</tr>
</tbody>
</table>
</div>
</section>
<!-- Network Topology Diagram -->
<section aria-label="Network Architecture">
<div class="section-header">
<h2 class="section-title">network_topology</h2>
<span class="section-meta">ASCII Architecture Map</span>
</div>
<div class="topology-block">
<div class="topology-title">// Network Edge &amp; Traffic Routing Flow</div>
[ WAN / INTERNET ]
│
▼
┌─────────────────────────┐
│ OPNsense Edge Gateway │ (10GbE SFP+ / Firewall / IDS)
└───────────┬─────────────┘
│
├───────────────► [ WireGuard Mesh VPN ] (51820/udp Remote Access)
│
▼
┌─────────────────────────┐
│ Traefik v3 Reverse Proxy│ (Auto TLS Certs / Dynamic Docker)
└───────────┬─────────────┘
│
┌─────────┴───────────────────────┬─────────────────────────┐
▼ ▼ ▼
┌─────────────────────────┐ ┌───────────────────────┐ ┌─────────────────────────┐
│ VLAN 10: Management │ │ VLAN 20: Services │ │ VLAN 30: Storage Pool │
│ • Proxmox VE (8006) │ │ • Grafana (3000) │ │ • TrueNAS ZFS (SMB/NFS) │
│ • AdGuard Home (53) │ │ • Jellyfin Media │ │ • Forgejo Git (3000) │
└─────────────────────────┘ └───────────────────────┘ └─────────────────────────┘
</div>
</section>
<hr class="section-divider">
<!-- Piped Contact & Catalog Footer -->
<footer class="footer-links">
<a href="index.html" class="footer-link">Spec Catalog</a>
<span class="pipe">|</span>
<a href="https://git.rooks.dev" class="footer-link">Git Forge</a>
<span class="pipe">|</span>
<a href="mailto:river@rooks.dev" class="footer-link">river@rooks.dev</a>
<span class="pipe">|</span>
<span style="font-size:0.78rem; color:var(--text-muted);">CLUSTER ONLINE • 48TB ZFS POOL • 10GbE SFP+ BACKBONE</span>
</footer>
</main>
</div>
<!-- Pure Vanilla JS Filter Logic -->
<script>
document.addEventListener('DOMContentLoaded', () => {
const filterBtns = document.querySelectorAll('#filterBar .filter-btn');
const serviceCards = document.querySelectorAll('#servicesGrid .service-card');
filterBtns.forEach(btn => {
btn.addEventListener('click', () => {
// Remove active class from all buttons
filterBtns.forEach(b => {
b.classList.remove('active');
b.setAttribute('aria-selected', 'false');
});
// Add active class to clicked button
btn.classList.add('active');
btn.setAttribute('aria-selected', 'true');
const filter = btn.getAttribute('data-filter');
// Toggle service cards visibility based on category
serviceCards.forEach(card => {
const category = card.getAttribute('data-category');
if (filter === 'all' || category === filter) {
card.style.display = 'flex';
} else {
card.style.display = 'none';
}
});
});
});
});
</script>
</body>
</html>
-497
View File
@@ -1,497 +0,0 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Terminal/Minimalist Blog - Home</title>
<style>
@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:ital,wght@0,400;0,500;0,700;1,400&family=Inter:wght@400;500;700&family=JetBrains+Mono:ital,wght@0,400;0,500;1,400&display=swap');
/* CSS Variables & Core Layout */
:root {
--bg-canvas: #121417;
--bg-surface: #1c1f26;
--border-color: #2b303b;
--text-primary: #e0e6f0;
--text-muted: #8a95a5;
--accent: #ffb000; /* Amber */
}
* {
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;
display: flex;
justify-content: center;
}
/* Rigid Grid System & App Wrapper */
.app-container {
display: grid;
grid-template-columns: 260px 1fr;
width: 100%;
max-width: 1200px;
min-height: 100vh;
border-left: 1px solid var(--border-color);
border-right: 1px solid var(--border-color);
}
@media (max-width: 900px) {
.app-container {
grid-template-columns: 1fr;
border-left: none;
border-right: none;
}
.sidebar {
border-right: none !important;
border-bottom: 1px solid var(--border-color);
}
}
/* Sidebar Navigation (Monospaced UI) */
.sidebar {
background-color: var(--bg-canvas);
border-right: 1px solid var(--border-color);
padding: 24px;
display: flex;
flex-direction: column;
font-family: 'IBM Plex Mono', monospace;
}
.profile-title {
font-size: 1.1rem;
font-weight: 700;
color: var(--text-primary);
margin-bottom: 8px;
}
.profile-subtitle {
font-size: 0.85rem;
color: var(--text-muted);
margin-bottom: 24px;
}
.nav-list {
list-style: none;
padding: 0;
margin-bottom: auto;
}
.nav-item {
margin-bottom: 8px;
}
.nav-link {
display: flex;
align-items: center;
color: var(--text-primary);
text-decoration: none;
font-size: 0.9rem;
padding: 6px 8px;
border: 1px solid transparent;
}
/* Snap instant hovers */
.nav-link:hover {
background-color: var(--accent);
color: var(--bg-canvas);
}
.nav-link:focus {
outline: 2px solid var(--accent);
outline-offset: -2px;
}
/* Structural Indicator for Active Nav Items */
.nav-link.active::before {
content: "> ";
color: var(--accent);
margin-right: 6px;
}
.nav-link.active:hover::before {
color: var(--bg-canvas);
}
/* Keybindings Panel */
.keybindings-panel {
border: 1px solid var(--border-color);
background-color: var(--bg-surface);
padding: 16px;
border-radius: 4px;
margin-top: 24px;
}
.keybindings-title {
font-size: 0.8rem;
font-weight: 500;
color: var(--text-primary);
margin-bottom: 12px;
text-transform: uppercase;
letter-spacing: 0.05em;
}
.keybinding-row {
display: flex;
justify-content: space-between;
align-items: center;
font-size: 0.8rem;
margin-bottom: 8px;
}
.keybinding-row:last-child {
margin-bottom: 0;
}
kbd {
background-color: var(--bg-canvas);
border: 1px solid var(--border-color);
border-bottom: 1.5px solid var(--text-muted);
border-radius: 3px;
padding: 1px 5px;
font-size: 0.75rem;
color: var(--text-primary);
font-family: 'JetBrains Mono', monospace;
}
/* Main Content Area */
.main-content {
padding: 40px;
display: flex;
flex-direction: column;
align-items: center;
overflow-y: auto;
}
.prose-container {
width: 100%;
max-width: 65ch; /* Optimal readability cap */
}
/* Typography & Headers */
h1, h2, h3 {
font-family: 'IBM Plex Mono', monospace;
font-weight: 700;
color: var(--text-primary);
margin-top: 0;
}
h1 {
font-size: 1.8rem;
margin-bottom: 16px;
}
h2 {
font-size: 1.3rem;
margin-top: 32px;
margin-bottom: 16px;
border-bottom: 1px solid var(--border-color);
padding-bottom: 8px;
}
p {
margin-bottom: 20px;
color: var(--text-primary);
}
a {
color: var(--accent);
text-decoration: none;
}
a:hover {
text-decoration: underline;
}
/* Dividers */
hr {
border: 0;
border-top: 1px solid var(--border-color);
margin: 32px 0;
width: 100%;
}
/* Metadata Tags */
.post-metadata {
display: flex;
flex-wrap: wrap;
gap: 12px;
margin-bottom: 24px;
font-family: 'IBM Plex Mono', monospace;
font-size: 0.85rem;
color: var(--text-muted);
align-items: center;
}
.tag {
color: var(--accent);
background-color: transparent;
padding: 0;
font-size: 0.85rem;
text-decoration: none;
}
.tag:hover {
text-decoration: underline;
}
/* Terminal-Style Code Block Component */
.code-block {
border: 1px solid var(--border-color);
border-radius: 4px;
background-color: var(--bg-surface);
margin: 24px 0;
font-family: 'JetBrains Mono', monospace;
overflow: hidden;
}
.code-header {
background-color: var(--bg-canvas);
border-bottom: 1px solid var(--border-color);
padding: 8px 16px;
display: flex;
justify-content: space-between;
align-items: center;
font-size: 0.8rem;
color: var(--text-muted);
}
.code-filename {
color: var(--text-primary);
font-weight: 500;
}
.code-content {
padding: 16px;
overflow-x: auto;
font-size: 0.85rem;
line-height: 1.5;
}
.code-content pre {
margin: 0;
}
/* Simple Monospace Syntax Colors */
.syn-comment { color: var(--text-muted); }
.syn-keyword { color: #ff5555; }
.syn-string { color: #50fa7b; }
.syn-type { color: #8be9fd; }
.syn-var { color: #ffb86c; }
/* Dense Archive / Tabular Posts List */
.post-table {
width: 100%;
border-collapse: collapse;
margin-top: 16px;
font-family: 'IBM Plex Mono', monospace;
font-size: 0.9rem;
}
.post-table th, .post-table td {
text-align: left;
padding: 10px 12px;
border-bottom: 1px solid var(--border-color);
}
.post-table th {
color: var(--text-muted);
font-weight: 500;
font-size: 0.8rem;
text-transform: uppercase;
letter-spacing: 0.05em;
}
.post-table tbody tr {
cursor: pointer;
}
/* Tabular Snap Hover - Instantly inverts row */
.post-table tbody tr:hover td {
background-color: var(--accent);
color: var(--bg-canvas);
}
.post-table tbody tr:hover td a {
color: var(--bg-canvas);
}
.post-table td a {
color: var(--text-primary);
font-weight: 500;
}
.post-table .post-date {
color: var(--text-muted);
width: 110px;
}
.post-table tbody tr:hover .post-date {
color: var(--bg-canvas);
}
/* Footer */
footer {
margin-top: 48px;
padding-top: 24px;
border-top: 1px solid var(--border-color);
font-family: 'IBM Plex Mono', monospace;
font-size: 0.8rem;
color: var(--text-muted);
display: flex;
justify-content: space-between;
}
</style>
</head>
<body>
<div class="app-container">
<!-- Sidebar Navigation -->
<aside class="sidebar">
<div class="profile-title">River Rooks</div>
<div class="profile-subtitle">dev-blog@system:~$</div>
<nav>
<ul class="nav-list">
<li class="nav-item"><a href="index.html" class="nav-link">Catalog</a></li>
<li class="nav-item"><a href="homepage.html" class="nav-link active">Sample 1 (Home)</a></li>
<li class="nav-item"><a href="split-panel.html" class="nav-link">Sample 2 (Split)</a></li>
<li class="nav-item"><a href="companion.html" class="nav-link">Sample 3 (Daemon)</a></li>
<li class="nav-item"><a href="document-flow.html" class="nav-link">Sample 4 (Doc Flow)</a></li>
<li class="nav-item"><a href="portfolio.html" class="nav-link">Sample 5 (Portfolio)</a></li>
<li class="nav-item"><a href="homelab.html" class="nav-link">Sample 6 (Homelab)</a></li>
<li class="nav-item"><a href="public-services.html" class="nav-link">Sample 7 (Services)</a></li>
<li class="nav-item"><a href="sample-dashboard.html" class="nav-link">Sample 8 (Dashboard)</a></li>
<li class="nav-item"><a href="sample-command-center.html" class="nav-link">Sample 9 (Command)</a></li>
<li class="nav-item"><a href="sample-dual-pane-explorer.html" class="nav-link">Sample 10 (Explorer)</a></li>
</ul>
</nav>
<!-- Keybindings Panel Widget -->
<div class="keybindings-panel">
<div class="keybindings-title">Active Stack</div>
<div style="font-size: 0.75rem; color: var(--text-muted); line-height: 1.6;">
[#network-forensics]<br>
[#docker-traefik]<br>
[#arch-linux] [#neovim]<br>
[#wireguard] [#posix-sh]
</div>
</div>
</aside>
<!-- Main Content -->
<main class="main-content">
<div class="prose-container">
<!-- Post Title & Metadata Header -->
<article>
<h1>Reverse Engineering IoT Firmware: SPI Flash Extraction</h1>
<div class="post-metadata">
<span>Posted: 2026-07-20</span>
<span>•</span>
<span>Reading: 8 mins</span>
<span>•</span>
<a href="#" class="tag">[#firmware]</a>
<a href="#" class="tag">[#hardware]</a>
<a href="#" class="tag">[#security]</a>
<a href="#" class="tag">[#bus-pirate]</a>
</div>
<p>
In security audits of embedded systems, retrieving the firmware is usually the critical first step. When over-the-air updates are encrypted and the debug ports (UART, JTAG) are disabled in production silicon, dumping the physical SPI Flash memory chip becomes necessary.
</p>
<p>
In this write-up, we extract firmware directly from an 8-pin SOP SPI flash chip using a Bus Pirate. This hardware-level approach bypasses any bootloader lockdowns and extracts the raw partition table directly from the silicon.
</p>
<!-- Component 1: Terminal-Style Code Block with syntax styling -->
<div class="code-block">
<div class="code-header">
<span class="code-filename">extract_firmware.sh</span>
<span>Bash</span>
</div>
<div class="code-content">
<pre><code><span class="syn-comment">#!/bin/sh</span>
<span class="syn-comment"># Query the SPI flash details using flashrom via Bus Pirate</span>
flashrom -p buspirate_spi:dev=/dev/ttyUSB0,spispeed=1M -r firmware_dump.bin
<span class="syn-comment"># Verify the integrity of the binary dump by comparing hashes</span>
<span class="syn-keyword">if</span> [ <span class="syn-var">$?</span> -eq 0 ]; <span class="syn-keyword">then</span>
echo <span class="syn-string">"Dump successful. Running md5sum..."</span>
md5sum firmware_dump.bin
<span class="syn-keyword">else</span>
echo <span class="syn-string">"Failed to read flash memory."</span> &gt;&amp;2
<span class="syn-keyword">exit</span> 1
<span class="syn-keyword">fi</span></code></pre>
</div>
</div>
<p>
After standard verification, we can proceed to unpack the bin file using tools like <code>binwalk</code>. If the partition table contains standard filesystem formats (e.g. SquashFS, jffs2), binwalk extracts it automatically. Otherwise, manual offset carving is required.
</p>
</article>
<hr>
<!-- Tabular Archive Index Section -->
<section>
<h2>Recent Writes &amp; Archive</h2>
<p style="color: var(--text-muted); font-size: 0.9rem; margin-bottom: 20px;">
Dense, terminal-style index of prior posts. Press <kbd>Tab</kbd> to focus and navigate rows instantly.
</p>
<table class="post-table">
<thead>
<tr>
<th>Date</th>
<th>Title</th>
<th>Tags</th>
</tr>
</thead>
<tbody>
<tr onclick="location.href='#'">
<td class="post-date">2026-07-15</td>
<td><a href="#">Building a High-Availability Traefik Router with Docker Compose</a></td>
<td><span style="color: var(--accent);">[#homelab]</span></td>
</tr>
<tr onclick="location.href='#'">
<td class="post-date">2026-07-10</td>
<td><a href="#">POSIX sh vs. Bash: Portability in Modern Scripts</a></td>
<td><span style="color: var(--accent);">[#posix-sh]</span></td>
</tr>
<tr onclick="location.href='#'">
<td class="post-date">2026-06-28</td>
<td><a href="#">CTF Write-up: Heap Exploitation in glibc 2.35</a></td>
<td><span style="color: var(--accent);">[#ctf]</span></td>
</tr>
<tr onclick="location.href='#'">
<td class="post-date">2026-06-14</td>
<td><a href="#">Zero-Trust Network Isolation with WireGuard &amp; OPNsense VLANs</a></td>
<td><span style="color: var(--accent);">[#networking]</span></td>
</tr>
</tbody>
</table>
</section>
<!-- Footer -->
<footer>
<span>© 2026 River Rooks</span>
<span>Aligned with Canonical-Sample-Content.md</span>
</footer>
</div>
</main>
</div>
</body>
</html>
-787
View File
@@ -1,787 +0,0 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>River Rooks | Design Spec Samples Framework</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;
overflow-x: hidden;
}
/* Top Master Navigation Bar */
.master-header {
background-color: var(--bg-surface);
border-bottom: 1px solid var(--border-color);
padding: 10px 20px;
display: flex;
flex-direction: column;
gap: 10px;
position: sticky;
top: 0;
z-index: 1000;
}
.header-top-row {
display: flex;
justify-content: space-between;
align-items: center;
flex-wrap: wrap;
gap: 12px;
}
.brand-title {
font-family: 'IBM Plex Mono', monospace;
font-size: 1.05rem;
font-weight: 700;
color: var(--text-primary);
display: flex;
align-items: center;
gap: 10px;
text-decoration: none;
}
.status-dot {
width: 8px;
height: 8px;
background-color: var(--accent-cyan);
display: inline-block;
}
.header-tools {
display: flex;
align-items: center;
gap: 12px;
font-family: 'IBM Plex Mono', monospace;
font-size: 0.8rem;
}
/* Samples Selector Pill Bar */
.samples-nav-bar {
display: flex;
align-items: center;
gap: 6px;
overflow-x: auto;
padding-bottom: 4px;
scrollbar-width: thin;
scrollbar-color: var(--border-color) transparent;
}
.sample-btn {
background-color: var(--bg-canvas);
color: var(--text-muted);
border: 1px solid var(--border-color);
padding: 6px 12px;
font-family: 'IBM Plex Mono', monospace;
font-size: 0.78rem;
cursor: pointer;
border-radius: 3px;
white-space: nowrap;
transition: none; /* Instant snap */
display: inline-flex;
align-items: center;
gap: 6px;
text-decoration: none;
}
.sample-btn:hover {
color: var(--text-primary);
border-color: var(--accent-cyan);
background-color: var(--bg-elevated);
}
.sample-btn.active {
background-color: var(--accent-cyan);
color: var(--bg-canvas);
border-color: var(--accent-cyan);
font-weight: 700;
}
.btn-badge {
font-size: 0.68rem;
opacity: 0.85;
}
/* Sub-bar / Viewport Controls */
.viewport-bar {
background-color: var(--bg-canvas);
border-bottom: 1px solid var(--border-color);
padding: 6px 20px;
display: flex;
justify-content: space-between;
align-items: center;
font-family: 'JetBrains Mono', monospace;
font-size: 0.78rem;
color: var(--text-muted);
flex-wrap: wrap;
gap: 10px;
}
.current-url-display {
display: flex;
align-items: center;
gap: 8px;
color: var(--text-primary);
}
.prompt-tag {
color: var(--accent-cyan);
font-weight: 700;
}
.frame-controls {
display: flex;
align-items: center;
gap: 8px;
}
.ctrl-btn {
background-color: var(--bg-surface);
border: 1px solid var(--border-color);
color: var(--text-muted);
padding: 3px 8px;
font-family: inherit;
font-size: 0.75rem;
cursor: pointer;
border-radius: 2px;
transition: none;
text-decoration: none;
display: inline-flex;
align-items: center;
gap: 4px;
}
.ctrl-btn:hover {
color: var(--text-primary);
border-color: var(--accent-cyan);
}
.ctrl-btn.active {
color: var(--accent-cyan);
border-color: var(--accent-cyan);
background-color: var(--bg-elevated);
}
/* Main Workspace / Viewport */
.workspace-wrapper {
flex: 1;
display: flex;
flex-direction: column;
align-items: center;
padding: 16px;
background-color: var(--bg-canvas);
}
.frame-container {
width: 100%;
max-width: 100%;
height: calc(100vh - 165px);
min-height: 560px;
border: 1px solid var(--border-color);
border-radius: 4px;
background-color: var(--bg-surface);
display: flex;
flex-direction: column;
overflow: hidden;
transition: max-width 0.15s ease-in-out;
}
.frame-header {
background-color: var(--bg-canvas);
border-bottom: 1px solid var(--border-color);
padding: 6px 14px;
display: flex;
justify-content: space-between;
align-items: center;
font-family: 'IBM Plex Mono', monospace;
font-size: 0.75rem;
color: var(--text-muted);
}
.window-dots {
display: flex;
gap: 6px;
}
.window-dot {
width: 8px;
height: 8px;
border-radius: 50%;
background-color: var(--border-color);
}
.preview-iframe {
width: 100%;
height: 100%;
border: none;
background-color: #0d0f12;
flex: 1;
}
/* Markdown Reader Mode Fallback Container */
.markdown-viewer {
display: none;
padding: 32px 24px;
overflow-y: auto;
height: 100%;
background-color: var(--bg-surface);
font-family: 'Inter', sans-serif;
}
.markdown-prose {
max-width: 75ch;
margin: 0 auto;
color: var(--text-primary);
}
.markdown-prose h1, .markdown-prose h2, .markdown-prose h3 {
font-family: 'IBM Plex Mono', monospace;
color: var(--text-primary);
margin: 24px 0 12px 0;
}
.markdown-prose pre {
background-color: var(--bg-canvas);
border: 1px solid var(--border-color);
padding: 14px;
border-radius: 4px;
font-family: 'JetBrains Mono', monospace;
font-size: 0.82rem;
overflow-x: auto;
margin: 16px 0;
}
.markdown-prose code {
font-family: 'JetBrains Mono', monospace;
color: var(--accent-cyan);
}
.markdown-prose table {
width: 100%;
border-collapse: collapse;
margin: 20px 0;
font-family: 'IBM Plex Mono', monospace;
font-size: 0.85rem;
}
.markdown-prose th, .markdown-prose td {
border: 1px solid var(--border-color);
padding: 8px 12px;
text-align: left;
}
.markdown-prose th {
background-color: var(--bg-canvas);
}
/* Spec Catalog Grid Drawer */
.catalog-drawer {
display: none;
padding: 24px 16px 40px 16px;
max-width: 1100px;
margin: 0 auto;
width: 100%;
}
.drawer-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
gap: 16px;
margin-top: 16px;
}
.card {
background-color: var(--bg-surface);
border: 1px solid var(--border-color);
border-radius: 4px;
padding: 16px;
cursor: pointer;
display: flex;
flex-direction: column;
justify-content: space-between;
}
.card:hover {
border-color: var(--accent-cyan);
background-color: var(--bg-elevated);
}
.card-title {
font-family: 'IBM Plex Mono', monospace;
font-size: 0.95rem;
font-weight: 700;
color: var(--text-primary);
margin-bottom: 6px;
}
.card:hover .card-title {
color: var(--accent-cyan);
}
.card-desc {
font-size: 0.85rem;
color: var(--text-muted);
margin-bottom: 12px;
}
.card-footer {
font-family: 'JetBrains 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;
}
/* Bottom Hotkey Help Footer */
.master-footer {
background-color: var(--bg-surface);
border-top: 1px solid var(--border-color);
padding: 8px 20px;
font-family: 'IBM Plex Mono', monospace;
font-size: 0.75rem;
color: var(--text-muted);
display: flex;
justify-content: space-between;
align-items: center;
flex-wrap: wrap;
gap: 8px;
}
kbd {
background-color: var(--bg-canvas);
border: 1px solid var(--border-color);
border-bottom: 1.5px solid var(--text-muted);
border-radius: 3px;
padding: 1px 4px;
font-size: 0.72rem;
color: var(--text-primary);
}
</style>
</head>
<body>
<!-- Top Master Navigation Bar with Full Sample Options -->
<header class="master-header">
<div class="header-top-row">
<a href="index.html" class="brand-title">
<span class="status-dot"></span>
<span>RIVER ROOKS // SAMPLES VIEWER</span>
</a>
<div class="header-tools">
<span>Hotkeys: <kbd>1</kbd>-<kbd>9</kbd>, <kbd>0</kbd></span>
<button class="ctrl-btn" id="btn-toggle-mode" onclick="toggleViewMode()">View: Frame Preview</button>
<a href="../index.html" class="ctrl-btn">Root Lander ↗</a>
</div>
</div>
<!-- Options Bar to Select Each Sample -->
<nav class="samples-nav-bar" id="sampleOptionsBar" aria-label="Sample Selection Options">
<button class="sample-btn active" data-file="homepage.html" onclick="loadSample('homepage.html', this)">
<span>[1] Homepage</span>
</button>
<button class="sample-btn" data-file="split-panel.html" onclick="loadSample('split-panel.html', this)">
<span>[2] Split Panel</span>
</button>
<button class="sample-btn" data-file="companion.html" onclick="loadSample('companion.html', this)">
<span>[3] Companion</span>
</button>
<button class="sample-btn" data-file="document-flow.html" onclick="loadSample('document-flow.html', this)">
<span>[4] Doc Flow</span>
</button>
<button class="sample-btn" data-file="portfolio.html" onclick="loadSample('portfolio.html', this)">
<span>[5] Portfolio</span>
</button>
<button class="sample-btn" data-file="homelab.html" onclick="loadSample('homelab.html', this)">
<span>[6] Homelab</span>
</button>
<button class="sample-btn" data-file="public-services.html" onclick="loadSample('public-services.html', this)">
<span>[7] Services</span>
</button>
<button class="sample-btn" data-file="sample-dashboard.html" onclick="loadSample('sample-dashboard.html', this)">
<span>[8] Dashboard</span>
</button>
<button class="sample-btn" data-file="sample-command-center.html" onclick="loadSample('sample-command-center.html', this)">
<span>[9] Command</span>
</button>
<button class="sample-btn" data-file="sample-dual-pane-explorer.html" onclick="loadSample('sample-dual-pane-explorer.html', this)">
<span>[0] Explorer</span>
</button>
<button class="sample-btn" data-file="canonical-sample-content.md" onclick="loadSample('canonical-sample-content.md', this)">
<span>[Dataset] Content Spec</span>
</button>
<button class="sample-btn" data-file="unified-design-specification.md" onclick="loadSample('unified-design-specification.md', this)">
<span>[Spec] Master Brief</span>
</button>
</nav>
</header>
<!-- Viewport & Iframe Tool Control Bar -->
<div class="viewport-bar">
<div class="current-url-display">
<span class="prompt-tag">$ agy --view=</span>
<span id="activeFilePath">homepage.html</span>
<span id="activeFileDesc" style="color: var(--text-muted); font-size: 0.72rem; margin-left: 6px;">[Sample 1: Developer Homepage]</span>
</div>
<div class="frame-controls">
<!-- Responsive Width Selector -->
<span style="color: var(--text-muted); margin-right: 4px;">Viewport:</span>
<button class="ctrl-btn active" id="vp-full" onclick="setViewport('100%', this)">100%</button>
<button class="ctrl-btn" id="vp-tablet" onclick="setViewport('768px', this)">768px</button>
<button class="ctrl-btn" id="vp-mobile" onclick="setViewport('380px', this)">380px</button>
<span style="color: var(--border-color);">|</span>
<!-- Direct Link Actions -->
<button class="ctrl-btn" onclick="reloadIframe()" title="Reload current sample">⟳ Reload</button>
<a href="homepage.html" id="openTabBtn" target="_blank" class="ctrl-btn" title="Open directly in new tab">Open Tab ↗</a>
</div>
</div>
<!-- Workspace: Live Iframe Container -->
<main class="workspace-wrapper" id="frameWrapper">
<div class="frame-container" id="frameContainer">
<div class="frame-header">
<div class="window-dots">
<span class="window-dot"></span>
<span class="window-dot"></span>
<span class="window-dot"></span>
</div>
<div id="frameStatusText">SANDBOX IFRAME READY • ISOLATED WORKSPACE</div>
<div>STDOUT [200 OK]</div>
</div>
<!-- Live Interactive Iframe -->
<iframe src="homepage.html" id="sampleIframe" class="preview-iframe" title="Sample Live Viewport"></iframe>
<!-- Markdown Viewer Fallback (for .md files) -->
<div id="markdownViewer" class="markdown-viewer">
<div class="markdown-prose" id="markdownContent"></div>
</div>
</div>
</main>
<!-- Spec Catalog Grid Drawer (Alternate View Mode) -->
<section class="catalog-drawer" id="catalogDrawer" aria-label="Catalog Grid View">
<div style="display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 12px;">
<h2 style="font-family: 'IBM Plex Mono', monospace; font-size: 1.2rem; color: var(--text-primary);">Design Spec Samples Catalog</h2>
<span style="font-family: 'IBM Plex Mono', monospace; font-size: 0.8rem; color: var(--text-muted);">15 Artifacts Registered</span>
</div>
<div class="drawer-grid" id="drawerGrid"></div>
</section>
<!-- Bottom Global Status Footer -->
<footer class="master-footer">
<div>Unified Design Language • Dark Slate Native (#0d0f12)</div>
<div>Press <kbd>1</kbd>-<kbd>0</kbd> to quick-switch • Canonical Dataset Compliant</div>
</footer>
<script>
const catalogData = [
{
key: '1',
file: 'homepage.html',
title: 'Sample 1: Developer Homepage',
type: 'html',
desc: 'Dark-mode developer homepage with sidebar navigation, active stack cluster, featured firmware SPI extraction write-up, and dense archive table.'
},
{
key: '2',
file: 'split-panel.html',
title: 'Sample 2: Split Panel Layout',
type: 'html',
desc: 'Fixed left terminal mascot with binary animation frames, and scrollable right panel showcasing the 5 canonical system modules.'
},
{
key: '3',
file: 'companion.html',
title: 'Sample 3: Companion Layout',
type: 'html',
desc: '50/50 vertical split layout with system module cards on the left and a reactive ASCII companion daemon (sys-daemon) on the right.'
},
{
key: '4',
file: 'document-flow.html',
title: 'Sample 4: Continuous Document Flow',
type: 'html',
desc: 'Continuous reading stream across system modules with pinned IntersectionObserver scroll-tracker daemon observing scroll depth.'
},
{
key: '5',
file: 'portfolio.html',
title: 'Sample 5: River Rooks Portfolio',
type: 'html',
desc: 'Single-column digital business card landing page with stdout terminal status block, 11-item active stack tags, and cryptographic links.'
},
{
key: '6',
file: 'homelab.html',
title: 'Sample 6: Homelab Lander',
type: 'html',
desc: 'Infrastructure catalog with category filter tabs, 12 microservices, 3 bare-metal server specs, and ASCII network topology routing map.'
},
{
key: '7',
file: 'public-services.html',
title: 'Sample 7: Public Services Portal',
type: 'html',
desc: 'Launcher portal for self-hosted web applications with real-time keyword filter, category pills, access levels, and PGP/SSH identity verification box.'
},
{
key: '8',
file: 'sample-dashboard.html',
title: 'Sample 8: 3-Tile Workspace Dashboard',
type: 'html',
desc: 'Neovim/Tmux 3-tile modal workspace featuring live services in left tile, River Rooks resume/bio in center, and 5-post blog archive in right tile.'
},
{
key: '9',
file: 'sample-command-center.html',
title: 'Sample 9: Tabbed Command Center',
type: 'html',
desc: 'Zed Editor / Ghostty tabbed utility layout with keyboard shortcuts [1], [2], [3] switching between Services, Blog Archive, and Resume Config.'
},
{
key: '0',
file: 'sample-dual-pane-explorer.html',
title: 'Sample 10: Dual-Pane Helix Tree Explorer',
type: 'html',
desc: 'Split-screen file-tree explorer with interactive document viewer and sys-daemon mascot reacting to folder item selection.'
},
{
key: 'd',
file: 'canonical-sample-content.md',
title: 'Canonical Content Dataset (Single Source of Truth)',
type: 'md',
desc: 'Master markdown dataset specifying canonical persona profile, services catalog, blog articles, engineering modules, and telemetry nodes.'
},
{
key: 'u',
file: 'unified-design-specification.md',
title: 'Unified Design Specification (Master Brief)',
type: 'md',
desc: 'Master specification uniting design language across homelab, technical notes, and portfolio.'
},
{
key: 's',
file: 'design-specification.md',
title: 'Design Specification (Primary Technical Brief)',
type: 'md',
desc: 'Primary specification document detailing technical web architecture guidelines, typography rules, color tokens, and anti-patterns.'
},
{
key: 'p',
file: 'portfolio-spec.md',
title: 'Portfolio Specification (Landing Page Brief)',
type: 'md',
desc: 'Specification sheet for the single-page under-construction portfolio card layout.'
},
{
key: 'c',
file: 'sample3-spec-sheet.md',
title: 'Sample 3 Specification (Companion Layout Brief)',
type: 'md',
desc: 'Specification sheet detailing the split-screen ASCII companion interaction suppression policy.'
}
];
let currentFile = 'homepage.html';
let currentMode = 'frame'; // 'frame' or 'grid'
function loadSample(fileName, btnElement) {
currentFile = fileName;
// Update active state in top options bar
document.querySelectorAll('#sampleOptionsBar .sample-btn').forEach(btn => {
btn.classList.remove('active');
if (btn.getAttribute('data-file') === fileName) {
btn.classList.add('active');
}
});
// Update active file label and direct open link
document.getElementById('activeFilePath').innerText = fileName;
document.getElementById('openTabBtn').href = fileName;
const itemInfo = catalogData.find(item => item.file === fileName);
if (itemInfo) {
document.getElementById('activeFileDesc').innerText = `[${itemInfo.title}]`;
}
const iframe = document.getElementById('sampleIframe');
const mdViewer = document.getElementById('markdownViewer');
if (fileName.endsWith('.html')) {
mdViewer.style.display = 'none';
iframe.style.display = 'block';
iframe.src = fileName;
} else {
// Render Markdown file via simple fetch & format
iframe.style.display = 'none';
mdViewer.style.display = 'block';
renderMarkdownFile(fileName);
}
// If currently in grid mode, switch back to frame preview mode
if (currentMode === 'grid') {
toggleViewMode();
}
}
async function renderMarkdownFile(fileName) {
const mdContent = document.getElementById('markdownContent');
mdContent.innerHTML = `<div style="font-family: monospace; color: var(--text-muted);">Fetching and parsing ${fileName}...</div>`;
try {
const response = await fetch(fileName);
if (!response.ok) throw new Error('File fetch failed');
const text = await response.text();
// Simple high-readability markdown format converter
let html = text
.replace(/^### (.*$)/gim, '<h3>$1</h3>')
.replace(/^## (.*$)/gim, '<h2>$1</h2>')
.replace(/^# (.*$)/gim, '<h1>$1</h1>')
.replace(/^\> (.*$)/gim, '<blockquote>$1</blockquote>')
.replace(/\*\*(.*)\*\*/gim, '<strong>$1</strong>')
.replace(/\*(.*)\*/gim, '<em>$1</em>')
.replace(/```([\s\S]*?)```/gim, '<pre><code>$1</code></pre>')
.replace(/`([^`]+)`/gim, '<code>$1</code>')
.replace(/\n\n/gim, '<br><br>');
mdContent.innerHTML = html;
} catch (e) {
mdContent.innerHTML = `<div style="color: var(--accent-amber); font-family: monospace;">Failed to load markdown directly in browser. <a href="${fileName}" target="_blank" style="color: var(--accent-cyan);">Click here to view raw file</a></div>`;
}
}
function setViewport(width, btnElement) {
const container = document.getElementById('frameContainer');
container.style.maxWidth = width;
document.querySelectorAll('.frame-controls .ctrl-btn').forEach(btn => {
if (btn.id && btn.id.startsWith('vp-')) {
btn.classList.remove('active');
}
});
if (btnElement) btnElement.classList.add('active');
}
function reloadIframe() {
const iframe = document.getElementById('sampleIframe');
if (iframe.style.display !== 'none') {
iframe.src = iframe.src;
} else {
renderMarkdownFile(currentFile);
}
}
function toggleViewMode() {
const frameWrapper = document.getElementById('frameWrapper');
const catalogDrawer = document.getElementById('catalogDrawer');
const modeBtn = document.getElementById('btn-toggle-mode');
if (currentMode === 'frame') {
currentMode = 'grid';
frameWrapper.style.display = 'none';
catalogDrawer.style.display = 'block';
modeBtn.innerText = 'View: Grid Catalog';
renderDrawerGrid();
} else {
currentMode = 'frame';
frameWrapper.style.display = 'flex';
catalogDrawer.style.display = 'none';
modeBtn.innerText = 'View: Frame Preview';
}
}
function renderDrawerGrid() {
const grid = document.getElementById('drawerGrid');
grid.innerHTML = '';
catalogData.forEach(item => {
const card = document.createElement('div');
card.className = 'card';
card.onclick = () => loadSample(item.file, null);
card.innerHTML = `
<div>
<div class="card-title">${item.title}</div>
<div class="card-desc">${item.desc}</div>
</div>
<div class="card-footer">
<span>${item.file}</span>
<span style="color: var(--accent-cyan);">[LOAD FRAME ↗]</span>
</div>
`;
grid.appendChild(card);
});
}
// Keyboard Shortcuts (1-9, 0)
document.addEventListener('keydown', (e) => {
// If user is not typing in an input
if (['input', 'textarea'].includes(document.activeElement.tagName.toLowerCase())) return;
const keyMap = {
'1': 'homepage.html',
'2': 'split-panel.html',
'3': 'companion.html',
'4': 'document-flow.html',
'5': 'portfolio.html',
'6': 'homelab.html',
'7': 'public-services.html',
'8': 'sample-dashboard.html',
'9': 'sample-command-center.html',
'0': 'sample-dual-pane-explorer.html'
};
if (keyMap[e.key]) {
loadSample(keyMap[e.key], null);
}
});
// Check URL parameters on initialization
document.addEventListener('DOMContentLoaded', () => {
const params = new URLSearchParams(window.location.search);
const requestedSample = params.get('sample') || params.get('view');
if (requestedSample) {
const match = catalogData.find(item => item.file === requestedSample || item.key === requestedSample);
if (match) {
loadSample(match.file, null);
return;
}
}
// Default load Sample 1
loadSample('homepage.html', null);
});
</script>
</body>
</html>
-49
View File
@@ -1,49 +0,0 @@
# Project Brief: Temporary Single-Page Portfolio (Landing Page)
**Project Type:** Single-Page "Under Construction" / Digital Business Card
**Design Philosophy:** High-signal, low-noise. Developer-centric minimalism. (Matches primary site spec)
## 1. Executive Summary
This is a temporary, single-page landing site to serve as a digital presence while the full web architecture is being developed. It must adhere strictly to the global design rules established for the main site (no glassmorphism, no glows, monospace-heavy typography, dark charcoal palette). The layout should be a simple, single-column document flow.
## 2. Layout & Structure
The page will be a single, centered column with a maximum width of `65ch` (characters) to ensure optimal reading density.
### A. Header (Identity)
* **Main Title (H1):** "River Rooks"
* **Subtitle/Status:** A monospaced, muted status line (e.g., "SYSTEMS ARCHITECTURE & CYBERSECURITY") paired with a rigid, square, 8x8px solid active-state indicator dot (using the primary accent color).
### B. The "Under Construction" Terminal Block
* **Component:** A terminal-style code block.
* **Style:** 1px solid border, slightly lighter surface background.
* **Content:** Must present the "under construction" status as a terminal command and stdout output.
* *Example prompt:* `$ cat /var/log/status.txt`
* *Example output:* `Under construction. Full site infrastructure is currently being provisioned. Routing traffic to temporary landing page...`
### C. "Whoami" Section (Biography)
* **Header (H2):** Clean sans-serif or bold monospace.
* **Content:** Standard prose paragraph establishing background (e.g., studying cybersecurity at the University of Alabama College of Engineering, focus on network forensics and self-hosted infrastructure).
### D. Active Stack (Skills & Tech)
* **Component:** A dense cluster of inline metadata tags.
* **Style:** Small, muted, monospaced font. Bracketed format preferred (e.g., `[#network-forensics]`, `[#docker-traefik]`, `[#arch-linux]`, `[#neovim]`).
### E. Footer (Contact & Links)
* **Layout:** A single monospaced line separated by structural pipes (`|`).
* **Links:** GitHub, Email, PGP Key.
* **Interaction:** Links must have an immediate hover state (e.g., background color snap) with zero transition delay. No floaty animations.
## 3. Strict Typography & Color Application
* **Canvas:** Deep slate/charcoal (e.g., `#0d0f12`)
* **Primary Text:** Off-white/light ash (Sans-serif: Inter or Geist)
* **Metadata/Terminal Text:** Muted gray (Monospace: IBM Plex Mono or JetBrains Mono)
* **Accent (Designer's Choice):** A high-visibility terminal color for the status dot and hover states.
* **Dividers:** Use simple 1px solid horizontal rules to separate the Header, Main Content, and Footer.
-369
View File
@@ -1,369 +0,0 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>River Rooks | Systems Architecture & Cybersecurity</title>
<style>
@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:ital,wght@0,400;0,500;0,700;1,400&family=Inter:wght@400;500;700&family=JetBrains+Mono:ital,wght@0,400;0,500;1,400&display=swap');
:root {
--bg-canvas: #0d0f12; /* Deep slate/charcoal */
--bg-surface: #121417; /* Slightly lighter surface background */
--border-color: #2b303b; /* Low-contrast 1px border */
--text-primary: #e0e6f0; /* Off-white prose */
--text-muted: #8a95a5; /* Monospaced metadata gray */
--accent: #00f0ff; /* High-visibility Cyan terminal accent */
}
* {
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.65;
min-height: 100vh;
display: flex;
flex-direction: column;
}
/* Sticky Navigation Header */
.sticky-header {
position: sticky;
top: 0;
height: 56px;
background-color: var(--bg-canvas);
border-bottom: 1px solid var(--border-color);
display: flex;
justify-content: space-between;
align-items: center;
padding: 0 24px;
z-index: 100;
font-family: 'IBM Plex Mono', monospace;
}
.logo-container {
font-weight: 700;
font-size: 0.95rem;
color: var(--text-primary);
}
.logo-prompt {
color: var(--accent);
}
.header-nav {
display: flex;
gap: 14px;
}
.nav-link {
color: var(--text-primary);
text-decoration: none;
font-size: 0.85rem;
padding: 4px 8px;
border: 1px solid transparent;
display: inline-flex;
align-items: center;
transition: none;
}
.nav-link:hover {
background-color: var(--accent);
color: var(--bg-canvas);
}
.nav-link:focus {
outline: 2px solid var(--accent);
outline-offset: -2px;
}
.nav-link.active::before {
content: "> ";
color: var(--accent);
margin-right: 4px;
}
.nav-link.active:hover::before {
color: var(--bg-canvas);
}
/* Page Canvas Container */
.page-wrapper {
flex: 1;
display: flex;
justify-content: center;
align-items: center;
padding: 60px 24px;
}
.content-container {
width: 100%;
max-width: 65ch; /* Capped reading width */
}
/* Header (Identity) */
.author-name {
font-family: 'IBM Plex Mono', monospace;
font-size: 2.2rem;
font-weight: 700;
color: var(--text-primary);
margin-bottom: 8px;
letter-spacing: -0.02em;
}
.status-line {
display: flex;
align-items: center;
gap: 10px;
font-family: 'IBM Plex Mono', monospace;
font-size: 0.85rem;
color: var(--text-muted);
}
/* Rigid, square 8x8px active-state indicator dot */
.status-dot {
width: 8px;
height: 8px;
background-color: var(--accent);
display: inline-block;
flex-shrink: 0;
}
/* 1px Solid Dividers */
.section-divider {
border: 0;
border-top: 1px solid var(--border-color);
margin: 32px 0;
}
/* Under Construction Terminal Block */
.terminal-block {
border: 1px solid var(--border-color);
border-radius: 4px;
background-color: var(--bg-surface);
font-family: 'JetBrains Mono', monospace;
overflow: hidden;
margin-bottom: 32px;
}
.terminal-header {
background-color: var(--bg-canvas);
border-bottom: 1px solid var(--border-color);
padding: 8px 16px;
display: flex;
justify-content: space-between;
font-size: 0.78rem;
color: var(--text-muted);
}
.terminal-title {
color: var(--text-primary);
font-weight: 500;
}
.terminal-body {
padding: 16px;
font-size: 0.85rem;
line-height: 1.5;
}
.cmd-line {
color: var(--text-muted);
margin-bottom: 8px;
}
.prompt {
color: var(--accent);
font-weight: 700;
}
.cmd-output {
color: var(--text-primary);
}
.cursor-block {
display: inline-block;
width: 8px;
height: 15px;
background-color: var(--text-primary);
margin-left: 4px;
vertical-align: middle;
animation: blink 1s steps(2, start) infinite;
}
@keyframes blink {
to { visibility: hidden; }
}
/* Content Sections */
.section-title {
font-family: 'IBM Plex Mono', monospace;
font-size: 1.1rem;
font-weight: 700;
color: var(--text-primary);
margin-bottom: 12px;
}
.bio-section {
margin-bottom: 32px;
}
.bio-text {
font-size: 0.98rem;
color: var(--text-primary);
}
.stack-section {
margin-bottom: 32px;
}
.tag-cluster {
display: flex;
flex-wrap: wrap;
gap: 10px;
font-family: 'IBM Plex Mono', monospace;
font-size: 0.85rem;
}
.tag {
color: var(--text-muted);
}
/* Piped Link Footer with Instant Color Snap */
.footer-links {
font-family: 'IBM Plex Mono', monospace;
font-size: 0.85rem;
color: var(--text-muted);
display: flex;
flex-wrap: wrap;
gap: 12px;
align-items: center;
}
.footer-link {
color: var(--text-primary);
text-decoration: none;
padding: 2px 6px;
transition: none; /* Zero-delay snap */
}
.footer-link:hover {
background-color: var(--accent);
color: var(--bg-canvas);
}
.footer-link:focus {
outline: 2px solid var(--accent);
outline-offset: -2px;
}
.pipe {
color: var(--border-color);
}
</style>
</head>
<body>
<!-- Sticky Header -->
<header class="sticky-header">
<div class="logo-container">
<span class="logo-prompt">$</span> agy --page=portfolio
</div>
<nav class="header-nav">
<a href="index.html" class="nav-link">Catalog</a>
<a href="homepage.html" class="nav-link">Sample 1</a>
<a href="split-panel.html" class="nav-link">Sample 2</a>
<a href="companion.html" class="nav-link">Sample 3</a>
<a href="document-flow.html" class="nav-link">Sample 4</a>
<a href="portfolio.html" class="nav-link active">Sample 5</a>
<a href="homelab.html" class="nav-link">Sample 6</a>
<a href="public-services.html" class="nav-link">Sample 7</a>
<a href="sample-dashboard.html" class="nav-link">Sample 8</a>
<a href="sample-command-center.html" class="nav-link">Sample 9</a>
<a href="sample-dual-pane-explorer.html" class="nav-link">Sample 10</a>
</nav>
</header>
<!-- Page Content Area -->
<div class="page-wrapper">
<main class="content-container">
<!-- A. Header (Identity) -->
<header class="identity-header">
<h1 class="author-name">River Rooks</h1>
<div class="status-line">
<span class="status-dot"></span>
<span class="status-text">SYSTEMS ARCHITECTURE &amp; CYBERSECURITY</span>
</div>
</header>
<hr class="section-divider">
<!-- B. Under Construction Terminal Block -->
<section class="terminal-section" aria-label="Status Terminal">
<div class="terminal-block">
<div class="terminal-header">
<span class="terminal-title">/var/log/status.txt</span>
<span>STDOUT</span>
</div>
<div class="terminal-body">
<div class="cmd-line"><span class="prompt">$</span> cat /var/log/status.txt</div>
<div class="cmd-output">
Provisioning 10GbE homelab cluster. Routing traffic through Traefik v3 edge proxy...<span class="cursor-block"></span>
</div>
</div>
</div>
</section>
<!-- C. "Whoami" Section (Biography) -->
<section class="bio-section">
<h2 class="section-title">whoami</h2>
<p class="bio-text">
Cybersecurity student at the University of Alabama College of Engineering, focusing on network forensics, self-hosted infrastructure, systems architecture, and low-level Unix tooling.
</p>
</section>
<!-- D. Active Stack (Skills & Tech) -->
<section class="stack-section">
<h2 class="section-title">active_stack</h2>
<div class="tag-cluster">
<span class="tag">[#network-forensics]</span>
<span class="tag">[#docker-traefik]</span>
<span class="tag">[#arch-linux]</span>
<span class="tag">[#neovim]</span>
<span class="tag">[#wireguard]</span>
<span class="tag">[#posix-sh]</span>
<span class="tag">[#python]</span>
<span class="tag">[#golang]</span>
<span class="tag">[#rust]</span>
<span class="tag">[#proxmox]</span>
<span class="tag">[#truenas]</span>
</div>
</section>
<hr class="section-divider">
<!-- E. Footer (Contact & Links) -->
<footer class="footer-links">
<a href="https://git.rooks.dev" target="_blank" rel="noopener" class="footer-link">Git Forge</a>
<span class="pipe">|</span>
<a href="https://github.com" target="_blank" rel="noopener" class="footer-link">GitHub</a>
<span class="pipe">|</span>
<a href="mailto:river@rooks.dev" class="footer-link">river@rooks.dev</a>
<span class="pipe">|</span>
<a href="#" title="Fingerprint: 0x4A8E92F1C0B3D4E7" class="footer-link">PGP: 0x4A8E92F1...</a>
<span class="pipe">|</span>
<a href="index.html" class="footer-link">Spec Catalog</a>
</footer>
</main>
</div>
</body>
</html>
-902
View File
@@ -1,902 +0,0 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>River Rooks | Public Services & Applications Portal</title>
<meta name="description" content="Public portal for River Rooks self-hosted web applications, developer utilities, media services, and public identity endpoints.">
<style>
@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:ital,wght@0,400;0,500;0,700;1,400&family=Inter:wght@400;500;700&family=JetBrains+Mono:ital,wght@0,400;0,500;1,400&display=swap');
:root {
--bg-canvas: #0d0f12; /* Deep slate/charcoal */
--bg-surface: #121417; /* Solid surface container */
--bg-surface-alt: #181b21; /* Slightly lighter surface card */
--border-color: #2b303b; /* Low-contrast 1px border */
--border-active: #ffb000; /* Active Amber border */
--text-primary: #e0e6f0; /* Off-white prose */
--text-muted: #8a95a5; /* Monospaced metadata gray */
--accent: #ffb000; /* High-visibility Amber terminal accent */
--accent-cyan: #00f0ff; /* Cyan secondary accent */
--accent-green: #00ff66; /* Green status indicator */
}
* {
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.65;
min-height: 100vh;
display: flex;
flex-direction: column;
}
/* Sticky Navigation Header */
.sticky-header {
position: sticky;
top: 0;
height: 56px;
background-color: var(--bg-canvas);
border-bottom: 1px solid var(--border-color);
display: flex;
justify-content: space-between;
align-items: center;
padding: 0 24px;
z-index: 100;
font-family: 'IBM Plex Mono', monospace;
}
.logo-container {
font-weight: 700;
font-size: 0.92rem;
color: var(--text-primary);
display: flex;
align-items: center;
gap: 8px;
}
.logo-prompt {
color: var(--accent);
}
.header-nav {
display: flex;
gap: 10px;
overflow-x: auto;
}
.nav-link {
color: var(--text-primary);
text-decoration: none;
font-size: 0.82rem;
padding: 4px 8px;
border: 1px solid transparent;
display: inline-flex;
align-items: center;
transition: none; /* Zero-delay snap */
white-space: nowrap;
}
.nav-link:hover {
background-color: var(--accent);
color: var(--bg-canvas);
}
.nav-link:focus {
outline: 2px solid var(--accent);
outline-offset: -2px;
}
.nav-link.active::before {
content: "> ";
color: var(--accent);
margin-right: 4px;
}
.nav-link.active:hover::before {
color: var(--bg-canvas);
}
/* Main Page Wrapper */
.page-wrapper {
flex: 1;
display: flex;
justify-content: center;
padding: 40px 24px 60px 24px;
}
.content-container {
width: 100%;
max-width: 1000px;
}
/* Hero Banner */
.hero-header {
margin-bottom: 28px;
}
.site-title {
font-family: 'IBM Plex Mono', monospace;
font-size: 2.2rem;
font-weight: 700;
color: var(--text-primary);
margin-bottom: 8px;
letter-spacing: -0.02em;
}
.site-subtitle {
font-size: 1rem;
color: var(--text-muted);
max-width: 70ch;
}
/* Dividers */
.section-divider {
border: 0;
border-top: 1px solid var(--border-color);
margin: 32px 0;
}
/* Search & Filter Controls */
.controls-panel {
display: flex;
flex-direction: column;
gap: 16px;
margin-bottom: 32px;
background-color: var(--bg-surface);
border: 1px solid var(--border-color);
border-radius: 4px;
padding: 16px;
}
.search-box {
display: flex;
align-items: center;
background-color: var(--bg-canvas);
border: 1px solid var(--border-color);
border-radius: 4px;
padding: 8px 12px;
font-family: 'IBM Plex Mono', monospace;
font-size: 0.88rem;
}
.search-prompt {
color: var(--accent);
margin-right: 10px;
font-weight: 700;
}
.search-input {
background: none;
border: none;
color: var(--text-primary);
font-family: inherit;
font-size: inherit;
width: 100%;
outline: none;
}
.search-input::placeholder {
color: var(--text-muted);
}
.filter-bar {
display: flex;
flex-wrap: wrap;
gap: 8px;
font-family: 'IBM Plex Mono', monospace;
}
.filter-btn {
background-color: var(--bg-canvas);
color: var(--text-muted);
border: 1px solid var(--border-color);
padding: 6px 12px;
font-size: 0.8rem;
cursor: pointer;
font-family: inherit;
border-radius: 4px;
transition: none; /* Instant snap */
}
.filter-btn:hover {
color: var(--text-primary);
border-color: var(--accent);
}
.filter-btn.active {
background-color: var(--accent);
color: var(--bg-canvas);
border-color: var(--accent);
font-weight: 700;
}
.filter-btn:focus {
outline: 2px solid var(--accent);
outline-offset: 1px;
}
/* Section Headers */
.section-header {
display: flex;
justify-content: space-between;
align-items: baseline;
margin-bottom: 16px;
flex-wrap: wrap;
gap: 8px;
}
.section-title {
font-family: 'IBM Plex Mono', monospace;
font-size: 1.15rem;
font-weight: 700;
color: var(--text-primary);
}
.section-meta {
font-family: 'IBM Plex Mono', monospace;
font-size: 0.8rem;
color: var(--text-muted);
}
/* Featured Services Grid */
.featured-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(290px, 1fr));
gap: 16px;
margin-bottom: 36px;
}
.featured-card {
background-color: var(--bg-surface);
border: 1px solid var(--border-color);
border-radius: 4px;
padding: 20px;
display: flex;
flex-direction: column;
justify-content: space-between;
position: relative;
}
.featured-card:hover {
border-color: var(--accent);
}
.featured-badge {
align-self: flex-start;
font-family: 'IBM Plex Mono', monospace;
font-size: 0.72rem;
font-weight: 700;
color: var(--bg-canvas);
background-color: var(--accent);
padding: 2px 6px;
border-radius: 2px;
margin-bottom: 12px;
text-transform: uppercase;
}
.service-title {
font-family: 'IBM Plex Mono', monospace;
font-size: 1.1rem;
font-weight: 700;
color: var(--text-primary);
margin-bottom: 8px;
}
.featured-card:hover .service-title {
color: var(--accent);
}
.service-body {
font-size: 0.9rem;
color: var(--text-muted);
margin-bottom: 20px;
line-height: 1.5;
}
.action-row {
display: flex;
justify-content: space-between;
align-items: center;
font-family: 'IBM Plex Mono', monospace;
font-size: 0.82rem;
padding-top: 12px;
border-top: 1px solid var(--border-color);
}
.access-tag {
color: var(--text-muted);
}
.launch-btn {
display: inline-flex;
align-items: center;
gap: 4px;
background-color: var(--bg-canvas);
color: var(--text-primary);
border: 1px solid var(--border-color);
padding: 6px 12px;
text-decoration: none;
font-weight: 500;
border-radius: 4px;
transition: none;
}
.launch-btn:hover {
background-color: var(--accent);
color: var(--bg-canvas);
border-color: var(--accent);
}
.launch-btn:focus {
outline: 2px solid var(--accent);
outline-offset: 1px;
}
/* All Public Services Grid */
.services-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
gap: 16px;
margin-bottom: 36px;
}
.service-card {
background-color: var(--bg-surface);
border: 1px solid var(--border-color);
border-radius: 4px;
padding: 18px;
display: flex;
flex-direction: column;
justify-content: space-between;
transition: none;
}
.service-card:hover {
border-color: var(--border-active);
}
.card-header {
display: flex;
justify-content: space-between;
align-items: flex-start;
margin-bottom: 8px;
}
.card-title {
font-family: 'IBM Plex Mono', monospace;
font-size: 1rem;
font-weight: 700;
color: var(--text-primary);
}
.service-card:hover .card-title {
color: var(--accent);
}
.card-category {
font-family: 'IBM Plex Mono', monospace;
font-size: 0.75rem;
color: var(--text-muted);
}
.card-desc {
font-size: 0.88rem;
color: var(--text-muted);
margin-bottom: 16px;
line-height: 1.5;
}
.card-footer {
display: flex;
justify-content: space-between;
align-items: center;
font-family: 'IBM Plex Mono', monospace;
font-size: 0.78rem;
padding-top: 10px;
border-top: 1px solid var(--border-color);
}
.badge-access {
display: inline-flex;
align-items: center;
gap: 6px;
}
.dot-public {
width: 6px;
height: 6px;
background-color: var(--accent-green);
display: inline-block;
}
.dot-auth {
width: 6px;
height: 6px;
background-color: var(--accent);
display: inline-block;
}
.direct-link {
color: var(--text-primary);
text-decoration: none;
padding: 3px 8px;
border: 1px solid var(--border-color);
border-radius: 3px;
background-color: var(--bg-canvas);
}
.direct-link:hover {
background-color: var(--accent);
color: var(--bg-canvas);
border-color: var(--accent);
}
/* Public Identity & Quick Keys Box */
.identity-box {
background-color: var(--bg-surface);
border: 1px solid var(--border-color);
border-radius: 4px;
padding: 20px;
font-family: 'JetBrains Mono', monospace;
margin-bottom: 36px;
}
.identity-title {
font-size: 1rem;
font-weight: 700;
color: var(--text-primary);
margin-bottom: 14px;
}
.key-row {
display: flex;
justify-content: space-between;
align-items: center;
padding: 10px 0;
border-bottom: 1px solid var(--border-color);
font-size: 0.83rem;
flex-wrap: wrap;
gap: 10px;
}
.key-row:last-child {
border-bottom: none;
padding-bottom: 0;
}
.key-label {
color: var(--text-muted);
}
.key-value {
color: var(--text-primary);
}
.copy-btn {
background-color: var(--bg-canvas);
color: var(--text-primary);
border: 1px solid var(--border-color);
padding: 4px 8px;
font-family: inherit;
font-size: 0.75rem;
cursor: pointer;
border-radius: 3px;
transition: none;
}
.copy-btn:hover {
background-color: var(--accent);
color: var(--bg-canvas);
}
/* Piped Footer Links */
.footer-links {
font-family: 'IBM Plex Mono', monospace;
font-size: 0.85rem;
color: var(--text-muted);
display: flex;
flex-wrap: wrap;
gap: 12px;
align-items: center;
}
.footer-link {
color: var(--text-primary);
text-decoration: none;
padding: 2px 6px;
transition: none; /* Zero-delay snap */
}
.footer-link:hover {
background-color: var(--accent);
color: var(--bg-canvas);
}
.footer-link:focus {
outline: 2px solid var(--accent);
outline-offset: -2px;
}
.pipe {
color: var(--border-color);
}
</style>
</head>
<body>
<!-- Sticky Header -->
<header class="sticky-header">
<div class="logo-container">
<span class="logo-prompt">$</span> agy --page=public-services
</div>
<nav class="header-nav" aria-label="Main Navigation">
<a href="index.html" class="nav-link">Catalog</a>
<a href="homepage.html" class="nav-link">Sample 1</a>
<a href="split-panel.html" class="nav-link">Sample 2</a>
<a href="companion.html" class="nav-link">Sample 3</a>
<a href="document-flow.html" class="nav-link">Sample 4</a>
<a href="portfolio.html" class="nav-link">Sample 5</a>
<a href="homelab.html" class="nav-link">Sample 6</a>
<a href="public-services.html" class="nav-link active">Sample 7 (Public Services)</a>
<a href="sample-dashboard.html" class="nav-link">Sample 8</a>
<a href="sample-command-center.html" class="nav-link">Sample 9</a>
<a href="sample-dual-pane-explorer.html" class="nav-link">Sample 10</a>
</nav>
</header>
<!-- Page Content Area -->
<div class="page-wrapper">
<main class="content-container">
<!-- Hero Header -->
<header class="hero-header">
<h1 class="site-title">Public Services Portal</h1>
<p class="site-subtitle">
Direct access to public self-hosted web applications, developer utilities, repository mirrors, and interactive tools operated by River Rooks.
</p>
</header>
<!-- Instant Search & Category Filter Controls -->
<section aria-label="Search and Filter Controls">
<div class="controls-panel">
<div class="search-box">
<span class="search-prompt">$ search_services</span>
<input type="text" id="searchInput" class="search-input" placeholder="type service name, tag, or technology..." aria-label="Search Public Services">
</div>
<div class="filter-bar" id="filterBar" role="tablist" aria-label="Service Categories">
<button class="filter-btn active" data-filter="all" role="tab" aria-selected="true">All Services</button>
<button class="filter-btn" data-filter="dev" role="tab">Developer Services</button>
<button class="filter-btn" data-filter="tools" role="tab">Utilities &amp; Tools</button>
<button class="filter-btn" data-filter="media" role="tab">Media &amp; Content</button>
<button class="filter-btn" data-filter="security" role="tab">Identity &amp; Security</button>
</div>
</div>
</section>
<!-- Featured Services Section -->
<section aria-label="Featured Public Services">
<div class="section-header">
<h2 class="section-title">featured_flagships</h2>
<span class="section-meta">Primary Public Endpoints</span>
</div>
<div class="featured-grid">
<!-- Forgejo -->
<article class="featured-card">
<div>
<span class="featured-badge">Open Source Git Forge</span>
<h3 class="service-title">Forgejo Repositories</h3>
<p class="service-body">
Self-hosted Git platform hosting public source code for network security scripts, Neovim dotfiles, Ansible playbooks, and Docker compose templates.
</p>
</div>
<div class="action-row">
<span class="access-tag">Access: Public Read</span>
<a href="#" class="launch-btn">Explore Repos ↗</a>
</div>
</article>
<!-- CyberChef -->
<article class="featured-card">
<div>
<span class="featured-badge">Security Utility</span>
<h3 class="service-title">CyberChef Workbench</h3>
<p class="service-body">
Web-based data transformation tool for hex decoding, Base64 operations, regex extraction, cryptographic hashing, and CTF payload analysis.
</p>
</div>
<div class="action-row">
<span class="access-tag">Access: Open Web</span>
<a href="#" class="launch-btn">Launch App ↗</a>
</div>
</article>
<!-- Stirling PDF -->
<article class="featured-card">
<div>
<span class="featured-badge">Document Tools</span>
<h3 class="service-title">Stirling PDF Studio</h3>
<p class="service-body">
Locally hosted document processing suite for merging, splitting, OCR extraction, password encryption, and PDF page manipulation.
</p>
</div>
<div class="action-row">
<span class="access-tag">Access: Open Web</span>
<a href="#" class="launch-btn">Launch App ↗</a>
</div>
</article>
</div>
</section>
<hr class="section-divider">
<!-- All Public Services Catalog Grid -->
<section aria-label="Complete Public Services Directory">
<div class="section-header">
<h2 class="section-title">services_catalog</h2>
<span class="section-meta" id="resultCount">Showing 9 Services</span>
</div>
<div class="services-grid" id="servicesGrid">
<!-- Forgejo Git -->
<article class="service-card" data-category="dev" data-search="forgejo git repo code source open">
<div>
<div class="card-header">
<h3 class="card-title">Forgejo Git Forge</h3>
<span class="card-category">[#dev-git]</span>
</div>
<p class="card-desc">Public repository mirror for software projects, dotfiles, and CTF writeups.</p>
</div>
<div class="card-footer">
<span class="badge-access"><span class="dot-public"></span> PUBLIC</span>
<a href="#" class="direct-link">git.rooks.dev ↗</a>
</div>
</article>
<!-- CyberChef -->
<article class="service-card" data-category="tools" data-search="cyberchef decode base64 crypto hex ctf">
<div>
<div class="card-header">
<h3 class="card-title">CyberChef Workbench</h3>
<span class="card-category">[#security-tool]</span>
</div>
<p class="card-desc">Cyber Swiss Army Knife for encoding, decoding, hashing, and data parsing.</p>
</div>
<div class="card-footer">
<span class="badge-access"><span class="dot-public"></span> PUBLIC</span>
<a href="#" class="direct-link">chef.rooks.dev ↗</a>
</div>
</article>
<!-- Stirling PDF -->
<article class="service-card" data-category="tools" data-search="pdf stirling merge split ocr document">
<div>
<div class="card-header">
<h3 class="card-title">Stirling PDF Studio</h3>
<span class="card-category">[#pdf-tools]</span>
</div>
<p class="card-desc">Complete PDF manipulation tool for merging, splitting, and OCR scanning.</p>
</div>
<div class="card-footer">
<span class="badge-access"><span class="dot-public"></span> PUBLIC</span>
<a href="#" class="direct-link">pdf.rooks.dev ↗</a>
</div>
</article>
<!-- Hedgedoc -->
<article class="service-card" data-category="dev" data-search="hedgedoc codimd markdown notes collab">
<div>
<div class="card-header">
<h3 class="card-title">HedgeDoc Collaborative</h3>
<span class="card-category">[#markdown]</span>
</div>
<p class="card-desc">Real-time collaborative Markdown editor for technical specs and meeting notes.</p>
</div>
<div class="card-footer">
<span class="badge-access"><span class="dot-public"></span> OPEN</span>
<a href="#" class="direct-link">pad.rooks.dev ↗</a>
</div>
</article>
<!-- Jellyfin Media -->
<article class="service-card" data-category="media" data-search="jellyfin video stream media movie tv">
<div>
<div class="card-header">
<h3 class="card-title">Jellyfin Media Portal</h3>
<span class="card-category">[#media-video]</span>
</div>
<p class="card-desc">Personal video library with 4K HDR hardware acceleration and mobile streaming.</p>
</div>
<div class="card-footer">
<span class="badge-access"><span class="dot-auth"></span> ACCOUNT REQ</span>
<a href="#" class="direct-link">watch.rooks.dev ↗</a>
</div>
</article>
<!-- Audiobookshelf -->
<article class="service-card" data-category="media" data-search="audiobookshelf audio book podcast library">
<div>
<div class="card-header">
<h3 class="card-title">Audiobookshelf</h3>
<span class="card-category">[#media-audio]</span>
</div>
<p class="card-desc">Self-hosted audiobook and podcast server with position syncing across devices.</p>
</div>
<div class="card-footer">
<span class="badge-access"><span class="dot-auth"></span> INVITE ONLY</span>
<a href="#" class="direct-link">listen.rooks.dev ↗</a>
</div>
</article>
<!-- Calibre-Web -->
<article class="service-card" data-category="media" data-search="calibre ebook pdf book reading library">
<div>
<div class="card-header">
<h3 class="card-title">Calibre-Web Library</h3>
<span class="card-category">[#ebooks]</span>
</div>
<p class="card-desc">E-book library catalog with e-reader OPDS feed and browser reading support.</p>
</div>
<div class="card-footer">
<span class="badge-access"><span class="dot-public"></span> PUBLIC READ</span>
<a href="#" class="direct-link">read.rooks.dev ↗</a>
</div>
</article>
<!-- Vaultwarden -->
<article class="service-card" data-category="security" data-search="vaultwarden bitwarden password vault secrets 2fa">
<div>
<div class="card-header">
<h3 class="card-title">Vaultwarden Password Vault</h3>
<span class="card-category">[#secrets]</span>
</div>
<p class="card-desc">End-to-end encrypted password manager endpoint for authorized client syncing.</p>
</div>
<div class="card-footer">
<span class="badge-access"><span class="dot-auth"></span> 2FA / AUTH</span>
<a href="#" class="direct-link">vault.rooks.dev ↗</a>
</div>
</article>
<!-- Matrix Synapse -->
<article class="service-card" data-category="security" data-search="matrix chat element federation identity messaging">
<div>
<div class="card-header">
<h3 class="card-title">Matrix Federated Chat</h3>
<span class="card-category">[#messaging]</span>
</div>
<p class="card-desc">Federated Matrix homeserver for encrypted messaging and public discussion rooms.</p>
</div>
<div class="card-footer">
<span class="badge-access"><span class="dot-public"></span> FEDERATED</span>
<a href="#" class="direct-link">matrix.rooks.dev ↗</a>
</div>
</article>
</div>
</section>
<hr class="section-divider">
<!-- Public Identity & Key Verification Section -->
<section aria-label="Identity and Public Keys">
<div class="section-header">
<h2 class="section-title">public_keys_&amp;_verification</h2>
<span class="section-meta">Cryptographic Identity</span>
</div>
<div class="identity-box">
<div class="identity-title">// Public Endpoints &amp; Cryptographic Fingerprints</div>
<div class="key-row">
<div>
<span class="key-label">PGP Key ID / Fingerprint:</span><br>
<span class="key-value">0x4A8E92F1C0B3D4E7 • 3F8A B29C 7D1E 4056 9912 A8B0 C4D3 E2F1 8091 22A4</span>
</div>
<button class="copy-btn" onclick="navigator.clipboard.writeText('0x4A8E92F1C0B3D4E7')">Copy Key ID</button>
</div>
<div class="key-row">
<div>
<span class="key-label">Matrix Handle:</span><br>
<span class="key-value">@river:rooks.dev</span>
</div>
<button class="copy-btn" onclick="navigator.clipboard.writeText('@river:rooks.dev')">Copy Matrix ID</button>
</div>
<div class="key-row">
<div>
<span class="key-label">Public SSH Key Digest:</span><br>
<span class="key-value">SHA256:7uK+N04wP5rL/9z3Q8s1vX4dF6mK2pT8yB1wN0qZ8 (river@rooks.dev)</span>
</div>
<button class="copy-btn" onclick="navigator.clipboard.writeText('SHA256:7uK+N04wP5rL/9z3Q8s1vX4dF6mK2pT8yB1wN0qZ8')">Copy Digest</button>
</div>
</div>
</section>
<hr class="section-divider">
<!-- Piped Contact Footer -->
<footer class="footer-links">
<a href="index.html" class="footer-link">Spec Catalog</a>
<span class="pipe">|</span>
<a href="https://git.rooks.dev" class="footer-link">Git Forge</a>
<span class="pipe">|</span>
<a href="mailto:river@rooks.dev" class="footer-link">river@rooks.dev</a>
<span class="pipe">|</span>
<span style="font-size:0.78rem; color:var(--text-muted);">PUBLIC SERVICES PORTAL • RIVER ROOKS</span>
</footer>
</main>
</div>
<!-- Pure Vanilla JS Search & Filter Script -->
<script>
document.addEventListener('DOMContentLoaded', () => {
const searchInput = document.getElementById('searchInput');
const filterBtns = document.querySelectorAll('#filterBar .filter-btn');
const serviceCards = document.querySelectorAll('#servicesGrid .service-card');
const resultCount = document.getElementById('resultCount');
let currentFilter = 'all';
let currentQuery = '';
function updateResults() {
let visibleCount = 0;
serviceCards.forEach(card => {
const category = card.getAttribute('data-category');
const searchData = card.getAttribute('data-search').toLowerCase();
const cardText = card.innerText.toLowerCase();
const matchesCategory = (currentFilter === 'all' || category === currentFilter);
const matchesQuery = currentQuery === '' || searchData.includes(currentQuery) || cardText.includes(currentQuery);
if (matchesCategory && matchesQuery) {
card.style.display = 'flex';
visibleCount++;
} else {
card.style.display = 'none';
}
});
resultCount.textContent = `Showing ${visibleCount} Service${visibleCount !== 1 ? 's' : ''}`;
}
// Filter Buttons Click Listener
filterBtns.forEach(btn => {
btn.addEventListener('click', () => {
filterBtns.forEach(b => {
b.classList.remove('active');
b.setAttribute('aria-selected', 'false');
});
btn.classList.add('active');
btn.setAttribute('aria-selected', 'true');
currentFilter = btn.getAttribute('data-filter');
updateResults();
});
});
// Search Input Listener
searchInput.addEventListener('input', (e) => {
currentQuery = e.target.value.trim().toLowerCase();
updateResults();
});
});
</script>
</body>
</html>
-521
View File
@@ -1,521 +0,0 @@
<!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>
-474
View File
@@ -1,474 +0,0 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>River Rooks | Terminal Workspace Dashboard</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;
}
/* Top Mode/Status Header */
.top-bar {
background-color: var(--bg-surface);
border-bottom: 1px solid var(--border-color);
padding: 8px 16px;
font-family: 'IBM Plex Mono', monospace;
font-size: 0.82rem;
display: flex;
justify-content: space-between;
align-items: center;
}
.mode-tag {
background-color: var(--accent-cyan);
color: var(--bg-canvas);
padding: 2px 8px;
font-weight: 700;
border-radius: 2px;
}
.filepath {
color: var(--text-primary);
margin-left: 12px;
}
.status-group {
display: flex;
align-items: center;
gap: 16px;
color: var(--text-muted);
}
.status-dot {
width: 8px;
height: 8px;
background-color: var(--accent-green);
display: inline-block;
}
/* Tiled Grid Layout */
.dashboard-grid {
display: grid;
grid-template-columns: 300px 1fr 340px;
gap: 16px;
padding: 16px;
flex: 1;
}
@media (max-width: 1024px) {
.dashboard-grid {
grid-template-columns: 1fr;
}
}
/* Tile Container */
.tile {
background-color: var(--bg-surface);
border: 1px solid var(--border-color);
border-radius: 4px;
display: flex;
flex-direction: column;
}
.tile-header {
background-color: var(--bg-canvas);
border-bottom: 1px solid var(--border-color);
padding: 8px 14px;
font-family: 'IBM Plex Mono', monospace;
font-size: 0.85rem;
font-weight: 700;
color: var(--text-primary);
display: flex;
justify-content: space-between;
}
.tile-body {
padding: 16px;
flex: 1;
overflow-y: auto;
}
/* Services List (Left Tile) */
.service-card {
border: 1px solid var(--border-color);
background-color: var(--bg-canvas);
padding: 12px;
margin-bottom: 12px;
border-radius: 2px;
}
.service-head {
display: flex;
justify-content: space-between;
align-items: center;
font-family: 'IBM Plex Mono', monospace;
font-size: 0.85rem;
font-weight: 700;
margin-bottom: 4px;
}
.service-head a {
color: var(--text-primary);
text-decoration: none;
transition: none;
}
.service-head a:hover {
color: var(--accent-cyan);
}
.service-meta {
font-family: 'IBM Plex Mono', monospace;
font-size: 0.75rem;
color: var(--text-muted);
display: flex;
justify-content: space-between;
}
.badge-online { color: var(--accent-green); }
.badge-internal { color: var(--accent-amber); }
/* Resume / Main Content (Center Tile) */
.hero-title {
font-family: 'IBM Plex Mono', monospace;
font-size: 1.8rem;
font-weight: 700;
margin-bottom: 6px;
}
.subtitle {
font-family: 'IBM Plex Mono', monospace;
font-size: 0.85rem;
color: var(--accent-cyan);
margin-bottom: 16px;
}
.bio-prose {
font-size: 0.95rem;
max-width: 65ch;
margin-bottom: 20px;
}
.section-title {
font-family: 'IBM Plex Mono', monospace;
font-size: 1rem;
font-weight: 700;
border-bottom: 1px solid var(--border-color);
padding-bottom: 6px;
margin: 20px 0 12px 0;
}
.project-card {
border: 1px solid var(--border-color);
padding: 12px;
margin-bottom: 12px;
border-radius: 2px;
}
.project-card:hover {
background-color: var(--bg-elevated);
}
.project-title {
font-family: 'IBM Plex Mono', monospace;
font-size: 0.9rem;
font-weight: 700;
color: var(--accent-cyan);
margin-bottom: 4px;
}
.tag-cluster {
display: flex;
flex-wrap: wrap;
gap: 8px;
font-family: 'IBM Plex Mono', monospace;
font-size: 0.78rem;
color: var(--text-muted);
margin-top: 8px;
}
/* Notes / Log Stream (Right Tile) */
.article-item {
padding: 10px 0;
border-bottom: 1px solid var(--border-color);
}
.article-item:last-child { border-bottom: none; }
.article-date {
font-family: 'IBM Plex Mono', monospace;
font-size: 0.75rem;
color: var(--text-muted);
}
.article-link {
font-family: 'IBM Plex Mono', monospace;
font-size: 0.85rem;
font-weight: 700;
color: var(--text-primary);
text-decoration: none;
display: block;
margin: 2px 0;
transition: none;
}
.article-link:hover {
color: var(--accent-cyan);
}
/* Command Prompt Bar */
.cmd-footer {
background-color: var(--bg-surface);
border-top: 1px solid var(--border-color);
padding: 8px 16px;
font-family: 'JetBrains Mono', monospace;
font-size: 0.82rem;
display: flex;
align-items: center;
gap: 10px;
}
.prompt-symbol { color: var(--accent-cyan); font-weight: bold; }
.cmd-input {
background: none;
border: none;
color: var(--text-primary);
font-family: inherit;
font-size: inherit;
width: 100%;
outline: none;
}
</style>
</head>
<body>
<!-- Top Status Navigation -->
<header class="top-bar">
<div style="display: flex; align-items: center; gap: 12px;">
<span class="mode-tag">NORMAL</span>
<span class="filepath">/home/river/dashboard.workspace</span>
<span style="color: var(--border-color);">|</span>
<nav style="display: flex; gap: 8px; font-size: 0.78rem;">
<a href="index.html" style="color: var(--text-primary); text-decoration: none;">Catalog</a>
<span style="color: var(--border-color);">/</span>
<a href="homelab.html" style="color: var(--text-muted); text-decoration: none;">Homelab</a>
<span style="color: var(--border-color);">/</span>
<a href="public-services.html" style="color: var(--text-muted); text-decoration: none;">Services</a>
<span style="color: var(--border-color);">/</span>
<a href="sample-command-center.html" style="color: var(--text-muted); text-decoration: none;">Command</a>
<span style="color: var(--border-color);">/</span>
<a href="sample-dual-pane-explorer.html" style="color: var(--text-muted); text-decoration: none;">Explorer</a>
</nav>
</div>
<div class="status-group">
<span><span class="status-dot"></span> TRAEFIK: V3.1 OK</span>
<span>CLUSTER: 10GbE SFP+</span>
<span>UPTIME: 99.98%</span>
</div>
</header>
<!-- Main 3-Tile Dashboard -->
<main class="dashboard-grid">
<!-- Left Tile: Homelab & Public Services Directory -->
<section class="tile">
<div class="tile-header">
<span>/etc/services</span>
<span>[CANONICAL SERVICES]</span>
</div>
<div class="tile-body">
<div class="service-card">
<div class="service-head">
<a href="https://proxy.rooks.dev" target="_blank">Traefik Proxy (v3.1)</a>
<span class="badge-online">[ONLINE]</span>
</div>
<p style="font-size: 0.8rem; color: var(--text-muted); margin-bottom: 6px;">Edge HTTP reverse proxy with dynamic ACME wildcard TLS.</p>
<div class="service-meta">
<span>PORT: 443/tcp</span>
<span>#core</span>
</div>
</div>
<div class="service-card">
<div class="service-head">
<a href="https://nas.rooks.dev" target="_blank">TrueNAS SCALE</a>
<span class="badge-online">[ONLINE]</span>
</div>
<p style="font-size: 0.8rem; color: var(--text-muted); margin-bottom: 6px;">Primary storage pool managing 48TB ZFS RaidZ2 array.</p>
<div class="service-meta">
<span>NFS / SMB</span>
<span>#storage</span>
</div>
</div>
<div class="service-card">
<div class="service-head">
<a href="https://vault.rooks.dev" target="_blank">Vaultwarden Secrets</a>
<span class="badge-online">[E2EE]</span>
</div>
<p style="font-size: 0.8rem; color: var(--text-muted); margin-bottom: 6px;">Lightweight Rust Bitwarden API hosting credentials &amp; 2FA.</p>
<div class="service-meta">
<span>2FA / AUTH</span>
<span>#secrets</span>
</div>
</div>
<div class="service-card">
<div class="service-head">
<a href="https://git.rooks.dev" target="_blank">Forgejo Git Forge</a>
<span class="badge-online">[PUBLIC]</span>
</div>
<p style="font-size: 0.8rem; color: var(--text-muted); margin-bottom: 6px;">Self-hosted Git platform for dotfiles, playbooks &amp; CTF code.</p>
<div class="service-meta">
<span>PORT: 3000</span>
<span>#dev-git</span>
</div>
</div>
<div class="service-card">
<div class="service-head">
<a href="https://chef.rooks.dev" target="_blank">CyberChef Workbench</a>
<span class="badge-online">[PUBLIC]</span>
</div>
<p style="font-size: 0.8rem; color: var(--text-muted); margin-bottom: 6px;">Hex decoding, Base64, hashing &amp; CTF payload analysis.</p>
<div class="service-meta">
<span>OPEN WEB</span>
<span>#security-tool</span>
</div>
</div>
</div>
</section>
<!-- Center Tile: Engineering Resume & Bio -->
<section class="tile">
<div class="tile-header">
<span>~/whoami.md</span>
<span>RESUME</span>
</div>
<div class="tile-body">
<h1 class="hero-title">River Rooks</h1>
<div class="subtitle">SYSTEMS ARCHITECTURE &amp; CYBERSECURITY</div>
<p class="bio-prose">
Cybersecurity student at the University of Alabama College of Engineering.
Focusing on network forensics, self-hosted infrastructure resilience, bare-metal virtualization, and low-level Unix tooling.
</p>
<h2 class="section-title">active_stack</h2>
<div class="tag-cluster">
<span>[#network-forensics]</span>
<span>[#docker-traefik]</span>
<span>[#arch-linux]</span>
<span>[#neovim]</span>
<span>[#wireguard]</span>
<span>[#posix-sh]</span>
<span>[#python]</span>
<span>[#golang]</span>
<span>[#rust]</span>
<span>[#proxmox]</span>
<span>[#truenas]</span>
</div>
<h2 class="section-title">featured_modules</h2>
<div class="project-card">
<div class="project-title">/dev/posix-shell-parser <span style="font-size: 0.75rem; color: var(--text-muted);">[v1.2.0 • #lua]</span></div>
<p style="font-size: 0.85rem; color: var(--text-primary);">
Zero-allocation Lexer and AST parser written in Lua for parsing POSIX shell scripts inside modal terminal buffers.
</p>
</div>
<div class="project-card">
<div class="project-title">/dev/wireguard-mesh <span style="font-size: 0.75rem; color: var(--text-muted);">[v0.8.4 • #wireguard]</span></div>
<p style="font-size: 0.85rem; color: var(--text-primary);">
Automated configuration generator computing key matrices and provisioning full-mesh WireGuard private overlays across cloud and homelab nodes.
</p>
</div>
<div class="project-card">
<div class="project-title">/dev/zero-alloc-logger <span style="font-size: 0.75rem; color: var(--text-muted);">[v2.1.1 • #golang]</span></div>
<p style="font-size: 0.85rem; color: var(--text-primary);">
High-throughput structured JSON logger utilizing sync.Pool byte buffers to eliminate heap allocation GC overhead (>500k ops/sec).
</p>
</div>
</div>
</section>
<!-- Right Tile: Technical Notes & Blog Stream -->
<section class="tile">
<div class="tile-header">
<span>/var/log/articles.log</span>
<span>NOTES</span>
</div>
<div class="tile-body">
<div class="article-item">
<div class="article-date">2026-07-20 | #FIRMWARE</div>
<a href="#" class="article-link">Reverse Engineering IoT Firmware: SPI Flash Extraction</a>
<p style="font-size: 0.78rem; color: var(--text-muted);">Dumping SPI flash chips via Bus Pirate &amp; flashrom to bypass locked bootloaders.</p>
</div>
<div class="article-item">
<div class="article-date">2026-07-15 | #HOMELAB</div>
<a href="#" class="article-link">Building a High-Availability Traefik Router with Docker Compose</a>
<p style="font-size: 0.78rem; color: var(--text-muted);">Dynamic Docker provider discovery &amp; Let's Encrypt automated TLS wildcard routing.</p>
</div>
<div class="article-item">
<div class="article-date">2026-07-10 | #POSIX-SH</div>
<a href="#" class="article-link">POSIX sh vs. Bash: Portability in Modern Scripts</a>
<p style="font-size: 0.78rem; color: var(--text-muted);">Eliminating bashisms and adhering to IEEE Std 1003.1 for high-speed bootstrapping.</p>
</div>
<div class="article-item">
<div class="article-date">2026-06-28 | #CTF</div>
<a href="#" class="article-link">CTF Write-up: Heap Exploitation in glibc 2.35</a>
<p style="font-size: 0.78rem; color: var(--text-muted);">Tcache safe-linking bypass and House of Apple file structure hijacking primitives.</p>
</div>
<div class="article-item">
<div class="article-date">2026-06-14 | #NETWORKING</div>
<a href="#" class="article-link">Zero-Trust Network Isolation with WireGuard &amp; OPNsense VLANs</a>
<p style="font-size: 0.78rem; color: var(--text-muted);">Segregating untrusted IoT devices, homelab servers, and management networks.</p>
</div>
</div>
</section>
</main>
<!-- Interactive Terminal Footer Bar -->
<footer class="cmd-footer">
<span class="prompt-symbol">$</span>
<input type="text" class="cmd-input" placeholder="River Rooks Workspace • Type :help or click links to navigate..." readonly>
</footer>
</body>
</html>
-464
View File
@@ -1,464 +0,0 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>River Rooks | Dual Pane Explorer</title>
<style>
@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:ital,wght@0,400;0,500;0,700;1,400&family=Inter:wght@400;500;700&family=JetBrains+Mono:wght@400;500&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;
height: 100vh;
display: flex;
flex-direction: column;
overflow: hidden;
}
/* Top Breadcrumb Bar */
.top-nav {
background-color: var(--bg-surface);
border-bottom: 1px solid var(--border-color);
height: 42px;
padding: 0 16px;
display: flex;
align-items: center;
justify-content: space-between;
font-family: 'IBM Plex Mono', monospace;
font-size: 0.82rem;
}
.status-dot {
width: 8px;
height: 8px;
background-color: var(--accent-green);
display: inline-block;
margin-right: 6px;
}
/* Dual Pane Layout Container */
.split-view {
display: flex;
flex: 1;
height: calc(100vh - 42px - 28px);
}
/* Left Sidebar Tree (280px) */
.sidebar {
width: 280px;
background-color: var(--bg-surface);
border-right: 1px solid var(--border-color);
display: flex;
flex-direction: column;
font-family: 'IBM Plex Mono', monospace;
font-size: 0.82rem;
}
.sidebar-header {
padding: 10px 14px;
border-bottom: 1px solid var(--border-color);
font-weight: 700;
color: var(--text-muted);
}
.tree-view {
padding: 12px;
flex: 1;
overflow-y: auto;
}
.tree-folder {
font-weight: 700;
color: var(--text-primary);
margin: 8px 0 4px 0;
}
.tree-item {
padding: 4px 8px 4px 16px;
color: var(--text-muted);
cursor: pointer;
border-radius: 2px;
display: flex;
justify-content: space-between;
transition: none;
}
.tree-item:hover {
color: var(--accent-cyan);
background-color: var(--bg-elevated);
}
.tree-item.active {
color: var(--accent-cyan);
background-color: var(--bg-canvas);
border-left: 2px solid var(--accent-cyan);
font-weight: 700;
}
/* Bottom ASCII Companion Panel */
.sidebar-companion {
border-top: 1px solid var(--border-color);
padding: 10px;
background-color: var(--bg-canvas);
font-family: 'JetBrains Mono', monospace;
font-size: 0.72rem;
color: var(--text-muted);
line-height: 1.2;
}
.companion-art {
color: var(--accent-cyan);
white-space: pre;
}
/* Right Document Viewer */
.main-pane {
flex: 1;
padding: 28px;
overflow-y: auto;
background-color: var(--bg-canvas);
}
.doc-container {
max-width: 65ch;
margin: 0 auto;
}
.doc-path {
font-family: 'IBM Plex Mono', monospace;
font-size: 0.8rem;
color: var(--text-muted);
margin-bottom: 12px;
}
.doc-title {
font-family: 'IBM Plex Mono', monospace;
font-size: 1.8rem;
font-weight: 700;
margin-bottom: 16px;
color: var(--text-primary);
}
.code-block {
border: 1px solid var(--border-color);
background-color: var(--bg-surface);
font-family: 'JetBrains Mono', monospace;
font-size: 0.82rem;
border-radius: 4px;
margin: 16px 0;
overflow: hidden;
}
.code-header {
background-color: var(--bg-canvas);
border-bottom: 1px solid var(--border-color);
padding: 6px 12px;
font-size: 0.75rem;
color: var(--text-muted);
}
.code-content {
padding: 12px;
overflow-x: auto;
}
.tag-cluster {
display: flex;
gap: 8px;
font-family: 'IBM Plex Mono', monospace;
font-size: 0.78rem;
color: var(--text-muted);
margin-top: 16px;
}
/* Bottom Status Bar */
.status-bar {
height: 28px;
background-color: var(--bg-surface);
border-top: 1px solid var(--border-color);
padding: 0 16px;
display: flex;
align-items: center;
justify-content: space-between;
font-family: 'IBM Plex Mono', monospace;
font-size: 0.75rem;
color: var(--text-muted);
}
</style>
</head>
<body>
<!-- Top Breadcrumbs Bar -->
<header class="top-nav">
<div style="display: flex; align-items: center; gap: 12px;">
<span class="status-dot"></span>
<span style="font-weight: 700;">RIVER ROOKS // TREE EXPLORER</span>
<span style="color: var(--border-color);">|</span>
<nav style="display: flex; gap: 8px; font-size: 0.78rem;">
<a href="index.html" style="color: var(--text-primary); text-decoration: none;">Catalog</a>
<span style="color: var(--border-color);">/</span>
<a href="homepage.html" style="color: var(--text-muted); text-decoration: none;">Sample 1</a>
<span style="color: var(--border-color);">/</span>
<a href="homelab.html" style="color: var(--text-muted); text-decoration: none;">Homelab</a>
<span style="color: var(--border-color);">/</span>
<a href="public-services.html" style="color: var(--text-muted); text-decoration: none;">Services</a>
<span style="color: var(--border-color);">/</span>
<a href="sample-dashboard.html" style="color: var(--text-muted); text-decoration: none;">Dashboard</a>
</nav>
</div>
<div>
<span style="color: var(--text-muted);">HOST: pve-node02.lan [10GbE]</span>
</div>
</header>
<!-- Dual Split View -->
<div class="split-view">
<!-- Left Explorer Sidebar -->
<aside class="sidebar">
<div class="sidebar-header">FILE SYSTEM EXPLORER</div>
<div class="tree-view">
<div class="tree-folder">▾ /services/</div>
<div class="tree-item active" onclick="selectItem(this, 'traefik')">traefik.md <span>[SVC]</span></div>
<div class="tree-item" onclick="selectItem(this, 'truenas')">truenas.md <span>[SVC]</span></div>
<div class="tree-item" onclick="selectItem(this, 'vaultwarden')">vaultwarden.md <span>[SVC]</span></div>
<div class="tree-item" onclick="selectItem(this, 'forgejo')">forgejo.md <span>[SVC]</span></div>
<div class="tree-item" onclick="selectItem(this, 'cyberchef')">cyberchef.md <span>[SVC]</span></div>
<div class="tree-folder">▾ /notes/</div>
<div class="tree-item" onclick="selectItem(this, 'spi-flash')">spi-flash.md <span>[BLOG]</span></div>
<div class="tree-item" onclick="selectItem(this, 'ha-traefik')">ha-traefik.md <span>[BLOG]</span></div>
<div class="tree-item" onclick="selectItem(this, 'posix-sh')">posix-sh.md <span>[BLOG]</span></div>
<div class="tree-item" onclick="selectItem(this, 'ctf-heap')">ctf-heap.md <span>[BLOG]</span></div>
<div class="tree-folder">▾ /modules/</div>
<div class="tree-item" onclick="selectItem(this, 'shell-parser')">shell-parser.lua <span>[DEV]</span></div>
<div class="tree-item" onclick="selectItem(this, 'mesh-builder')">wireguard-mesh.py <span>[DEV]</span></div>
<div class="tree-item" onclick="selectItem(this, 'zero-logger')">zero-logger.go <span>[DEV]</span></div>
<div class="tree-folder">▾ /resume/</div>
<div class="tree-item" onclick="selectItem(this, 'whoami')">whoami.md <span>[CV]</span></div>
<div class="tree-item" onclick="selectItem(this, 'stack')">active_stack.conf <span>[CV]</span></div>
</div>
<!-- ASCII Companion Panel -->
<div class="sidebar-companion">
<div class="companion-art" id="mascot-art">
/\___/\
( o o ) sys-daemon
( =^= ) STATUS: IDLE
\__*__/ LOG: ready█
</div>
</div>
</aside>
<!-- Right Main Document View -->
<main class="main-pane">
<div class="doc-container" id="doc-view">
<!-- Default Content: Traefik Proxy -->
<div class="doc-path">file:///home/river/services/traefik.md</div>
<h1 class="doc-title">Service: Traefik Proxy (v3.1)</h1>
<p>
Edge HTTP reverse proxy and load balancer with dynamic Docker provider discovery and ACME Let's Encrypt TLS wildcard certificate management.
</p>
<div class="code-block">
<div class="code-header">traefik.yml</div>
<div class="code-content">
entryPoints:
web:
address: ":80"
websecure:
address: ":443"
certificatesResolvers:
cloudflare:
acme:
dnsChallenge:
provider: cloudflare
</div>
</div>
<div class="tag-cluster">
<span>[#core]</span>
<span>[#docker-traefik]</span>
<span>[PORT: 443/tcp]</span>
<span>[STATUS: ONLINE]</span>
</div>
</div>
</main>
</div>
<!-- Bottom Status Bar -->
<footer class="status-bar">
<div>UTF-8 | LF | POSIX Shell</div>
<div>River Rooks • Canonical Content Dataset Compliant</div>
</footer>
<script>
const docs = {
'traefik': `
<div class="doc-path">file:///home/river/services/traefik.md</div>
<h1 class="doc-title">Service: Traefik Proxy (v3.1)</h1>
<p>Edge HTTP reverse proxy and load balancer with dynamic Docker provider discovery and ACME Let's Encrypt TLS wildcard certificate management.</p>
<div class="code-block">
<div class="code-header">traefik.yml</div>
<div class="code-content">
entryPoints:
web:
address: ":80"
websecure:
address: ":443"
certificatesResolvers:
cloudflare:
acme:
dnsChallenge:
provider: cloudflare
</div>
</div>
<div class="tag-cluster"><span>[#core]</span><span>[#docker-traefik]</span><span>[PORT: 443/tcp]</span><span>[STATUS: ONLINE]</span></div>
`,
'truenas': `
<div class="doc-path">file:///home/river/services/truenas.md</div>
<h1 class="doc-title">Service: TrueNAS SCALE</h1>
<p>Primary storage pool managing 48TB ZFS RaidZ2 array across 6x 16TB enterprise SAS drives with daily snapshots and NFS/SMB exports.</p>
<div class="tag-cluster"><span>[#storage]</span><span>[#zfs]</span><span>[PORT: NFS / SMB]</span><span>[STATUS: ONLINE]</span></div>
`,
'vaultwarden': `
<div class="doc-path">file:///home/river/services/vaultwarden.md</div>
<h1 class="doc-title">Service: Vaultwarden Secrets</h1>
<p>Lightweight Rust implementation of the Bitwarden API hosting encrypted credentials, SSH keys, and TOTP authentication tokens.</p>
<div class="tag-cluster"><span>[#secrets]</span><span>[#security]</span><span>[PORT: 443/tcp]</span><span>[STATUS: 2FA/AUTH]</span></div>
`,
'forgejo': `
<div class="doc-path">file:///home/river/services/forgejo.md</div>
<h1 class="doc-title">Service: Forgejo Git Forge</h1>
<p>Self-hosted Git forge hosting homelab infrastructure-as-code repos, Ansible playbooks, dotfiles, and CTF binary writeup scripts.</p>
<div class="tag-cluster"><span>[#dev-git]</span><span>[#git]</span><span>[PORT: 3000/tcp]</span><span>[STATUS: PUBLIC]</span></div>
`,
'cyberchef': `
<div class="doc-path">file:///home/river/services/cyberchef.md</div>
<h1 class="doc-title">Service: CyberChef Workbench</h1>
<p>Web-based data transformation Swiss Army knife for hex decoding, Base64 operations, regex extraction, and CTF payload analysis.</p>
<div class="tag-cluster"><span>[#security-tool]</span><span>[#crypto]</span><span>[STATUS: PUBLIC]</span></div>
`,
'spi-flash': `
<div class="doc-path">file:///home/river/notes/iot-firmware-spi-extraction.md</div>
<h1 class="doc-title">Reverse Engineering IoT Firmware: SPI Flash Extraction</h1>
<p>Physical hardware-level dumping of SPI flash memory chips using Bus Pirate and flashrom to bypass locked bootloaders.</p>
<div class="code-block">
<div class="code-header">extract_firmware.sh</div>
<div class="code-content">
flashrom -p buspirate_spi:dev=/dev/ttyUSB0,spispeed=1M -r firmware_dump.bin
md5sum firmware_dump.bin
</div>
</div>
<div class="tag-cluster"><span>[#firmware]</span><span>[#hardware]</span><span>[#security]</span><span>[DATE: 2026-07-20]</span></div>
`,
'ha-traefik': `
<div class="doc-path">file:///home/river/notes/ha-traefik-docker.md</div>
<h1 class="doc-title">Building a High-Availability Traefik Router</h1>
<p>Architecting automated TLS wildcard certificate propagation and dynamic Docker container discovery failover routing.</p>
<div class="tag-cluster"><span>[#homelab]</span><span>[#docker-traefik]</span><span>[DATE: 2026-07-15]</span></div>
`,
'posix-sh': `
<div class="doc-path">file:///home/river/notes/posix-sh-vs-bash.md</div>
<h1 class="doc-title">POSIX sh vs. Bash: Portability in Modern Scripts</h1>
<p>Eliminating bashisms and adhering to IEEE Std 1003.1 for high-speed bootstrapping in Alpine and embedded targets.</p>
<div class="tag-cluster"><span>[#posix-sh]</span><span>[#unix]</span><span>[DATE: 2026-07-10]</span></div>
`,
'ctf-heap': `
<div class="doc-path">file:///home/river/notes/ctf-heap-glibc-2-35.md</div>
<h1 class="doc-title">CTF Write-up: Heap Exploitation in glibc 2.35</h1>
<p>Tcache safe-linking bypass and House of Apple file structure hijacking primitives for arbitrary code execution.</p>
<div class="tag-cluster"><span>[#ctf]</span><span>[#binary-exploitation]</span><span>[DATE: 2026-06-28]</span></div>
`,
'shell-parser': `
<div class="doc-path">file:///home/river/modules/posix-shell-parser.lua</div>
<h1 class="doc-title">Module: Custom POSIX Shell Parser (v1.2.0)</h1>
<p>Zero-allocation Lexer and AST parser written in Lua for real-time syntax coloring in modal editors.</p>
<div class="code-block">
<div class="code-header">lexer.lua</div>
<div class="code-content">
local function tokenize(src)
local tokens = {}
for pos, char in ipairs(src) do
if char == ";" or char == "|" then table.insert(tokens, { type = "OPERATOR", value = char }) end
end
return tokens
end
</div>
</div>
<div class="tag-cluster"><span>[#lua]</span><span>[#ast-parser]</span><span>[VERSION: v1.2.0]</span></div>
`,
'mesh-builder': `
<div class="doc-path">file:///home/river/modules/wireguard-mesh.py</div>
<h1 class="doc-title">Module: WireGuard Mesh Topology Builder (v0.8.4)</h1>
<p>Matrix topology generator creating atomic configuration files and key pairings across multi-cloud and homelab nodes.</p>
<div class="tag-cluster"><span>[#networking]</span><span>[#wireguard]</span><span>[VERSION: v0.8.4]</span></div>
`,
'zero-logger': `
<div class="doc-path">file:///home/river/modules/zero-alloc-logger.go</div>
<h1 class="doc-title">Module: Zero-Allocation Logger (Go v2.1.1)</h1>
<p>High-throughput structured JSON logger utilizing sync.Pool byte buffers to eliminate heap allocations (>500k ops/sec).</p>
<div class="tag-cluster"><span>[#golang]</span><span>[#performance]</span><span>[VERSION: v2.1.1]</span></div>
`,
'whoami': `
<div class="doc-path">file:///home/river/resume/whoami.md</div>
<h1 class="doc-title">River Rooks - Systems Architecture &amp; Cybersecurity</h1>
<p>Cybersecurity student at the University of Alabama College of Engineering, focusing on network forensics, self-hosted infrastructure, and bare-metal virtualization.</p>
<div class="tag-cluster"><span>[#cybersecurity]</span><span>[#systems]</span><span>[UA COLLEGE OF ENGINEERING]</span></div>
`,
'stack': `
<div class="doc-path">file:///home/river/resume/active_stack.conf</div>
<h1 class="doc-title">Active Engineering Stack</h1>
<div class="code-block">
<div class="code-header">stack.conf</div>
<div class="code-content">
DOMAINS="Network Forensics, Self-Hosted Infrastructure, Linux Kernel Hardening"
LANGUAGES="POSIX sh, Python, Go, Rust, Lua, ARM Assembly"
STACK="Traefik v3, WireGuard, Proxmox VE, TrueNAS SCALE, Neovim"
</div>
</div>
<div class="tag-cluster"><span>[#arch-linux]</span><span>[#neovim]</span><span>[#wireguard]</span></div>
`
};
function selectItem(element, docKey) {
document.querySelectorAll('.tree-item').forEach(el => el.classList.remove('active'));
element.classList.add('active');
document.getElementById('doc-view').innerHTML = docs[docKey] || '';
// Update mascot state
const mascot = document.getElementById('mascot-art');
mascot.innerText = ` /\\___/\\\n ( - - ) sys-daemon\n ( =o= ) STATUS: READING\n \\__*__/ LOG: ${docKey}_`;
setTimeout(() => {
mascot.innerText = ` /\\___/\\\n ( o o ) sys-daemon\n ( =^= ) STATUS: IDLE\n \\__*__/ LOG: ready█`;
}, 1200);
}
</script>
</body>
</html>
-106
View File
@@ -1,106 +0,0 @@
# Design Specification: Sample 3 (Companion Layout)
**Status:** Ready for Handoff
**Target Page:** `companion.html`
**Layout Type:** 50/50 Split Screen (Reactive Desktop, Stacked Mobile)
**Theme Vibe:** Hyper-minimalist terminal utility, clean information hierarchy, zero animation noise.
---
## 1. Design Philosophy & Guidelines
This sample modifies the primary design spec by enforcing a strict **"interaction suppression"** policy. Dynamic decorations (such as border color transitions or card expansion effects) are completely disallowed. Contrast and active states are communicated solely through instantaneous typography color changes.
The key feature is a persistent digital companion on the right half of the screen. The companion must feel like a quiet terminal process rather than an active distraction.
---
## 2. Layout Geometry & Grid
The layout divides the viewport down the middle on desktop screens.
### Desktop Layout (Width > 768px)
- **Top Header:** Sticky `56px` navigation bar containing breadcrumbs/catalog links.
- **Split Container:** Spans 100% viewport width and 100% viewport height minus header (`height: calc(100vh - 56px)`).
- **Columns:**
- **Left Pane (50%):** Scrollable container. Houses a single-column list of project cards.
- **Right Pane (50%):** Fixed/non-scrollable container. Houses the centered ASCII companion terminal widget.
### Mobile Layout (Width <= 768px)
- The layout collapses into a single vertical stack.
- The ASCII companion pane moves to the top (fixed height: `300px`).
- The content pane follows below, scrollable within the main document window.
---
## 3. Color Palette & Typography
### Base Colors
- **Canvas Background:** `#0d0f12` (Deep charcoal slate)
- **Surface Background:** `#121417` (Slightly lighter dark surface)
- **Static Borders:** `#2b303b` (1px solid, low contrast)
- **Primary Text:** `#e0e6f0` (Off-white prose)
- **Muted Text:** `#8a95a5` (Timestamp / status information)
- **Active Accent:** `#00f0ff` (High-contrast Cyan)
### Typography
- **UI & ASCII Content:** Monospace (`JetBrains Mono` or `IBM Plex Mono`).
- **Prose Content:** Sans-serif (`Inter` or `Geist Sans`) for high readability.
---
## 4. Content Cards (Left Column)
Each card is a clean, structural text panel.
### Structure
- 1px static border (`#2b303b`) with `4px` border-radius.
- No background color (inherits Canvas background) or a solid `#121417` surface background.
- Elements:
1. **Header (`h3`):** Monospaced, bold, `#e0e6f0`.
2. **Description (`p`):** Sans-serif, `#8a95a5`, capped at `65ch` length.
### Interactions (Ultra-Minimal)
- **No Border Shifts:** Borders must remain `#2b303b` at all times.
- **No Translation:** Hovering must not scale, shift, or offset the card.
- **Instant Typography Snap:** Hovering or focusing the card snaps the text color of the Header (`h3`) from `#e0e6f0` to Cyan (`#00f0ff`) instantly.
- **CSS Rule:** Use `transition: none;` on all hover effects.
---
## 5. ASCII Companion (Right Column)
The companion is rendered as block-level ASCII text inside a simulated terminal panel.
### Layout Widget
- Sits centered in the right pane.
- Styled to resemble a terminal output terminal: card box with a tab bar indicating the daemon name `sys-daemon`.
### Animation & States
The companion has two interactive states:
#### State 1: IDLE
- **Mascot Art:**
```text
/\___/\
( o o ) sys-daemon
( =^= ) STATUS: IDLE
\__*__/ LOG: awaiting input█
```
- **Animation:** The terminal block cursor (`█`) blinks continuously at 1Hz (`opacity: 0` to `1` instantly). The rest of the mascot is static.
#### State 2: READING (Triggered on Card Hover)
- **Mascot Art:**
```text
/\___/\
( - - ) sys-daemon
( =o= ) STATUS: READING
\__*__/ LOG: reading module_
```
- **Reaction Log:** Underneath the mascot, a mini status output log updates to display the title of the card currently hovered. For example:
`[sys-daemon] target: /dev/mesh-mesh-topology-builder`
### Behavior Scripting Rules
- Attach `mouseenter` and `mouseleave` event listeners to the cards in the left pane.
- On hover, swap the inner HTML of the ASCII container to the `READING` frame and append the card's target name to the log output.
- Revert back to the `IDLE` frame immediately when the cursor leaves the card.
-478
View File
@@ -1,478 +0,0 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Minimalist Split Panel Layout</title>
<style>
@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:ital,wght@0,400;0,500;0,700;1,400&family=Inter:wght@400;500;700&family=JetBrains+Mono:ital,wght@0,400;0,500;1,400&display=swap');
/* Design Spec Token Definition */
:root {
--bg-canvas: #121417;
--bg-surface: #1c1f26;
--border-color: #2b303b;
--text-primary: #e0e6f0;
--text-muted: #8a95a5;
--accent: #00ff66; /* ANSI Green */
}
* {
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;
height: 100vh;
overflow: hidden;
display: flex;
flex-direction: column;
}
/* Sticky Navigation Header at the top */
.sticky-header {
position: sticky;
top: 0;
height: 56px;
background-color: var(--bg-canvas);
border-bottom: 1px solid var(--border-color);
display: flex;
justify-content: space-between;
align-items: center;
padding: 0 24px;
z-index: 100;
font-family: 'IBM Plex Mono', monospace;
}
.logo-container {
font-weight: 700;
font-size: 1rem;
color: var(--text-primary);
}
.logo-prompt {
color: var(--accent);
}
.header-nav {
display: flex;
gap: 16px;
}
.nav-link {
color: var(--text-primary);
text-decoration: none;
font-size: 0.9rem;
padding: 4px 10px;
border: 1px solid transparent;
display: inline-flex;
align-items: center;
}
/* Snappy Hover Inversion */
.nav-link:hover {
background-color: var(--accent);
color: var(--bg-canvas);
}
.nav-link:focus {
outline: 2px solid var(--accent);
outline-offset: -2px;
}
/* Structural Indicator for Active Navigation Items */
.nav-link.active::before {
content: "> ";
color: var(--accent);
margin-right: 4px;
}
.nav-link.active:hover::before {
color: var(--bg-canvas);
}
/* Split Container Layout */
.split-container {
display: flex;
flex: 1;
height: calc(100vh - 56px);
overflow: hidden;
}
@media (max-width: 768px) {
.split-container {
flex-direction: column;
overflow-y: auto;
}
.left-pane {
width: 100% !important;
height: auto !important;
border-right: none !important;
border-bottom: 1px solid var(--border-color);
padding: 40px 24px !important;
}
.right-pane {
height: auto !important;
overflow-y: visible !important;
}
}
/* Left Pane - Sticky Terminal Mascot (non-scrolling) */
.left-pane {
width: 380px;
background-color: var(--bg-canvas);
border-right: 1px solid var(--border-color);
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
padding: 32px;
flex-shrink: 0;
}
.terminal-card {
width: 100%;
border: 1px solid var(--border-color);
background-color: var(--bg-surface);
border-radius: 4px;
padding: 20px;
font-family: 'IBM Plex Mono', monospace;
}
.terminal-card-header {
font-size: 0.75rem;
color: var(--text-muted);
margin-bottom: 16px;
border-bottom: 1px solid var(--border-color);
padding-bottom: 8px;
display: flex;
justify-content: space-between;
}
.mascot-pre {
font-size: 0.8rem;
line-height: 1.2;
color: var(--accent);
background-color: var(--bg-canvas);
padding: 12px;
border: 1px solid var(--border-color);
border-radius: 2px;
overflow: hidden;
white-space: pre;
}
.status-panel {
margin-top: 16px;
font-size: 0.8rem;
color: var(--text-primary);
}
.status-row {
display: flex;
justify-content: space-between;
margin-bottom: 4px;
}
.status-label {
color: var(--text-muted);
}
.status-value {
font-weight: 500;
}
/* Right Pane - Scrollable Content feed */
.right-pane {
flex: 1;
overflow-y: auto;
background-color: var(--bg-canvas);
padding: 40px 24px;
display: flex;
justify-content: center;
}
.scroll-content {
width: 100%;
max-width: 70ch; /* Cap readability width */
}
.section-title {
font-family: 'IBM Plex Mono', monospace;
font-weight: 700;
font-size: 1.4rem;
color: var(--text-primary);
margin-bottom: 24px;
border-bottom: 1px solid var(--border-color);
padding-bottom: 8px;
}
/* Tile Cards Component */
.tile-list {
display: flex;
flex-direction: column;
gap: 20px;
}
.tile {
background-color: var(--bg-surface);
border: 1px solid var(--border-color);
border-radius: 4px;
padding: 24px;
text-decoration: none;
color: inherit;
display: block;
transition: none; /* Instant snap interactions */
}
/* Snappy Hover State (Border highlight & accent title) */
.tile:hover {
border-color: var(--accent);
}
.tile:focus {
outline: 2px solid var(--accent);
outline-offset: 4px;
}
.tile-header {
display: flex;
justify-content: space-between;
align-items: baseline;
margin-bottom: 8px;
}
.tile-title {
font-family: 'IBM Plex Mono', monospace;
font-weight: 700;
font-size: 1.1rem;
color: var(--text-primary);
}
.tile:hover .tile-title {
color: var(--accent);
}
.tile-meta {
font-family: 'IBM Plex Mono', monospace;
font-size: 0.8rem;
color: var(--text-muted);
}
.tile-description {
font-size: 0.9rem;
color: var(--text-primary);
line-height: 1.5;
}
/* Footer styling inside the scroll view */
.pane-footer {
margin-top: 40px;
padding-top: 20px;
border-top: 1px solid var(--border-color);
font-family: 'IBM Plex Mono', monospace;
font-size: 0.8rem;
color: var(--text-muted);
display: flex;
justify-content: space-between;
}
</style>
</head>
<body>
<!-- Sticky Top Header -->
<header class="sticky-header">
<div class="logo-container">
<span class="logo-prompt">$</span> agy --layout=split
</div>
<nav class="header-nav">
<a href="index.html" class="nav-link">Catalog</a>
<a href="homepage.html" class="nav-link">Sample 1</a>
<a href="split-panel.html" class="nav-link active">Sample 2</a>
<a href="companion.html" class="nav-link">Sample 3</a>
<a href="document-flow.html" class="nav-link">Sample 4</a>
<a href="portfolio.html" class="nav-link">Sample 5</a>
<a href="homelab.html" class="nav-link">Sample 6</a>
<a href="public-services.html" class="nav-link">Sample 7</a>
<a href="sample-dashboard.html" class="nav-link">Sample 8</a>
<a href="sample-command-center.html" class="nav-link">Sample 9</a>
<a href="sample-dual-pane-explorer.html" class="nav-link">Sample 10</a>
</nav>
</header>
<!-- Split Panel Main Container -->
<div class="split-container">
<!-- Left Pane - Center-Aligned ASCII Art Terminal Mascot -->
<aside class="left-pane">
<div class="terminal-card">
<div class="terminal-card-header">
<span>sys_monitor.sh</span>
<span>ONLINE</span>
</div>
<pre id="ascii-mascot" class="mascot-pre">
.-----------------.
/ ^ ^ ^ /|
/ (_) (_) (_) / |
/__________________/ |
| ___ ___ | |
| [o_o] [o_o] | |
| `-' `-' | |
| ______ | |
| / \ | /
| | -- | | /
| \____/ |/
`------------------'
</pre>
<div class="status-panel">
<div class="status-row">
<span class="status-label">Target:</span>
<span class="status-value">pve-node02.lan</span>
</div>
<div class="status-row">
<span class="status-label">Status:</span>
<span class="status-value" style="color: var(--accent);">ANIMATING</span>
</div>
<div class="status-row">
<span class="status-label">Cluster:</span>
<span class="status-value">10GbE SFP+</span>
</div>
</div>
</div>
</aside>
<!-- Right Pane - Scrollable List of Cards -->
<main class="right-pane">
<div class="scroll-content">
<h2 class="section-title">River Rooks // System Modules</h2>
<div class="tile-list">
<!-- Tile 1 -->
<a href="#" class="tile">
<div class="tile-header">
<h3 class="tile-title">Custom POSIX Shell Parser</h3>
<span class="tile-meta">v1.2.0 • [#lua]</span>
</div>
<p class="tile-description">
A lightweight Lexer and AST parser written in Lua for parsing POSIX-compliant shell scripts. Highly optimized for syntax coloring inside modal environments without runtime heap allocations.
</p>
</a>
<!-- Tile 2 -->
<a href="#" class="tile">
<div class="tile-header">
<h3 class="tile-title">WireGuard Mesh Topology Builder</h3>
<span class="tile-meta">v0.8.4 • [#wireguard]</span>
</div>
<p class="tile-description">
Automated configuration generator for computing key matrices and setting up full-mesh WireGuard private overlays across cloud instances and local homelab nodes.
</p>
</a>
<!-- Tile 3 -->
<a href="#" class="tile">
<div class="tile-header">
<h3 class="tile-title">Zero-Allocation Logger (Go)</h3>
<span class="tile-meta">v2.1.1 • [#golang]</span>
</div>
<p class="tile-description">
A high-performance JSON structure logger that uses sync.Pool buffers to avoid memory allocation overhead during intensive disk operations (>500k ops/sec).
</p>
</a>
<!-- Tile 4 -->
<a href="#" class="tile">
<div class="tile-header">
<h3 class="tile-title">Embedded Kernel Boot Strap</h3>
<span class="tile-meta">v0.1.0 • [#arm-cortex]</span>
</div>
<p class="tile-description">
Minimalist boot sector and initial kernel bootstrap for ARM Cortex-M microcontrollers to handle vector table offset mapping and early UART status printouts.
</p>
</a>
<!-- Tile 5 -->
<a href="#" class="tile">
<div class="tile-header">
<h3 class="tile-title">Traefik Cloudflare Dynamic DNS Daemon</h3>
<span class="tile-meta">v1.0.2 • [#docker-traefik]</span>
</div>
<p class="tile-description">
Background controller daemon designed to sync Docker container network labels with Cloudflare DNS records to route traffic to local homelab subdomains dynamically.
</p>
</a>
</div>
<footer class="pane-footer">
<span>Sample 2: Split Panel Layout</span>
<span>© 2026 River Rooks</span>
</footer>
</div>
</main>
</div>
<!-- Lightweight Script for Mascot Animation (Binary Steps) -->
<script>
const mascot = document.getElementById('ascii-mascot');
const frames = [
// Frame 1: Standard Look
` .-----------------.
/ ^ ^ ^ /|
/ (_) (_) (_) / |
/__________________/ |
| ___ ___ | |
| [o_o] [o_o] | |
| `-' `-' | |
| ______ | |
| / \\ | /
| | -- | | /
| \\____/ |/
\`------------------'`,
// Frame 2: Blinking Eyes / Surprised Mouth
` .-----------------.
/ ^ ^ ^ /|
/ (_) (_) (_) / |
/__________________/ |
| ___ ___ | |
| [-_-] [-_-] | |
| \`-' \`-' | |
| ______ | |
| / \\ | /
| | O | | /
| \\____/ |/
\`------------------'`,
// Frame 3: Winking Eyes / Grinning Mouth
` .-----------------.
/ ^ ^ ^ /|
/ (_) (_) (_) / |
/__________________/ |
| ___ ___ | |
| [o_-] [o_-] | |
| \`-' \`-' | |
| ______ | |
| / \\ | /
| | == | | /
| \\____/ |/
\`------------------'`
];
let currentFrame = 0;
setInterval(() => {
currentFrame = (currentFrame + 1) % frames.length;
mascot.innerText = frames[currentFrame];
}, 850);
</script>
</body>
</html>
-86
View File
@@ -1,86 +0,0 @@
# Unified Design Specification: Homelab, Blog & Engineering Portfolio
**Target Platform:** Integrated Personal Site (Public Services Directory, Technical Blog/Notes, Engineering Resume)
**Design Philosophy:** High-signal, low-noise. Developer-centric minimalism, modal text editor & terminal emulator craftsmanship.
**Vibe References:** Zed Editor, Ghostty, Noctalia.dev, Tiling Window Managers (Hyprland/i3).
**Strict Anti-Patterns:** Zero glassmorphism, zero glows/shadows, zero gradients, zero spring animations, zero rounded SaaS "blobs".
---
## 1. Executive Summary & Unified Purpose
This specification unites the design language across three primary user goals:
1. **Services Directory:** Instant access, routing links, and status visibility for self-hosted homelab services and public utilities.
2. **Technical Notes & Blog:** High-density, comfortable reading experience for deep technical writing (CTF write-ups, architecture specs, config guides, code snippets).
3. **Engineering Resume & Portfolio:** A crisp, high-craft presentation of skills, project archives, and active tech stack designed to impress technical recruiters and engineering leaders.
---
## 2. Unified Design Language & Rules
### Global Constraints
* **NO Glassmorphism:** Zero `backdrop-filter: blur()`, frosted glass, or translucent overlays.
* **NO Glows or Drop Shadows:** Depth is constructed exclusively via subtle surface color contrast and 1px solid borders.
* **NO Gradients:** Pure, solid color tokens across canvas, surfaces, and accent elements.
* **NO Spring/Float Animations:** Interactions feature instant snapped state transitions (`transition: none;`) or binary 1Hz blinking cursors/indicators.
* **Minimal Radii:** Sharp corners preferred. Border radii capped strictly at `0px` to `4px`.
### Geometry & Spatial Hierarchy
* **Grid Baseline:** Strict 4pt / 8pt baseline grid for consistent spacing and padding.
* **Reading Density:** Article and prose containers capped at `65ch` max width.
* **Dividers:** Clean 1px solid horizontal lines (`<hr>`) used to delineate major structural sections.
---
## 3. Unified Color Palette
The color system is dark-mode native, built from muted charcoal slate tones reminiscent of modern terminal emulators and modal text editors.
| Token Key | Hex Value | Application & Role |
| :--- | :--- | :--- |
| `--bg-canvas` | `#0d0f12` | Main canvas background (deep charcoal slate). |
| `--bg-surface` | `#121417` | Card backgrounds, terminal blocks, sidebars. |
| `--bg-elevated` | `#1c1f26` | Hovered card state, active tab surface. |
| `--border-color` | `#2b303b` | Structural 1px grid lines, card borders, horizontal dividers. |
| `--text-primary` | `#e0e6f0` | Off-white primary text for headings and body prose. |
| `--text-muted` | `#8a95a5` | Monospaced metadata, timestamps, tags, labels, status text. |
| `--accent-cyan` | `#00f0ff` | Primary active accent (terminal prompt, active nav snap, focus outline). |
| `--accent-green` | `#00e676` | Status indicator: Online / Operational / Verified. |
| `--accent-amber` | `#ffb700` | Status indicator: Under Construction / Maintenance / Warning. |
---
## 4. Digital & Typographical Language
### Dual Typography Hierarchy
* **Monospace Layer (`IBM Plex Mono`, `JetBrains Mono`):**
- **Usage:** Headings (`H1`-`H3`), navigation links, breadcrumbs, tags, terminal code blocks, timestamps, metadata, and keyboard shortcuts (`<kbd>`).
- **Weights:** Medium (500), Bold (700).
* **Prose Layer (`Inter`, `Geist Sans`):**
- **Usage:** Article body prose, project summaries, resume biography.
- **Line Height:** `1.65` to `1.7`.
- **Weight:** Regular (400).
### Digital Interface Conventions
* **POSIX-Style Path Headers:** Titles and section markers formatted as file paths (e.g., `/var/log/status.txt`, `/etc/services`, `~/notes/ctf-2026.md`).
* **Active Status Dots:** Rigid 8x8px square indicators (`.status-dot`) signaling system state (Cyan/Green for operational, Amber for construction).
* **Metadata Tag Cluster:** Monospaced bracketed tags (e.g., `[#homelab]`, `[#docker-traefik]`, `[#cybersecurity]`).
* **Instantaneous Snap Hover:** Interactive elements transition without delay (`transition: none;`), snapping text to Cyan (`#00f0ff`) or inverting background colors.
* **Keyboard Shortcut Badges (`<kbd>`):** Crisp, 1px bordered boxes depicting keys (e.g., `Ctrl` + `K`, `Tab`).
---
## 5. Functional Layout Modules
### A. Homelab & Public Services Directory
* Dense tabular grid listing self-hosted apps and public APIs.
* Displays service name, description, status badge (`[ONLINE]`, `[INTERNAL]`, `[PUBLIC]`), and routing link.
### B. Technical Notes & Blog
* Tabular article archive indexed by date, title, reading duration, and tags.
* Terminal-style code snippets with filename headers (e.g., `traefik.yml`) and copy utility.
### C. Resume & Portfolio Showcase
* Header identity block with `whoami` summary and active stack cluster.
* Project showcase cards featuring instant snap state.
* Optional integrated ASCII companion daemon (`sys-daemon`) for interactive module inspection.