Compare commits
2
Commits
f3ae84ad79
...
c0f67e75a3
| Author | SHA1 | Date | |
|---|---|---|---|
|
|
c0f67e75a3 | ||
|
|
70134d2e00 |
-278
@@ -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 & 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
@@ -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
@@ -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 & 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 & 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">> 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 • ~/NOTES/INDEX.MD</div>
|
||||||
|
<h1 class="hero-main-title">Engineering Notes, CTF Write-Ups & 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 • 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 • ~/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 →</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">> Embedded & 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">> Network Routing & 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">> 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 • 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">> 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 →</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 • 6 min read</time>
|
||||||
|
<span>~/notes/posix-sh-vs-bash.md</span>
|
||||||
|
</div>
|
||||||
|
<h3 style="margin: 0;">
|
||||||
|
<a href="#" class="feed-heading">> 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 →</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 • 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">> 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 →</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 • 10 min read</time>
|
||||||
|
<span>~/notes/zero-trust-wireguard-opnsense.md</span>
|
||||||
|
</div>
|
||||||
|
<h3 style="margin: 0;">
|
||||||
|
<a href="#" class="feed-heading">> Zero-Trust Network Isolation with WireGuard & 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 →</a>
|
||||||
|
</div>
|
||||||
|
</article>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<!-- Global Footer Tile (Matching Gateway 3 Exactly) -->
|
||||||
|
<footer class="footer-tile">
|
||||||
|
<div>River Rooks • 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>
|
||||||
@@ -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">> Blog & 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 • RACK-01 NODE GATEWAY</div>
|
||||||
|
<h1 class="hero-main-title">Engineering Sovereign Infrastructure & 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> •
|
||||||
|
<span>[2] Forgejo Git Repos</span> •
|
||||||
|
<span>[3] Public Cryptographic & PDF Tools</span> •
|
||||||
|
<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/ • 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">> River Rooks Technical Notes & 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] →</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] →</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] →</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] →</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 & 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 & 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 & 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 • 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>
|
||||||
@@ -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 |
|
|
||||||
@@ -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>
|
|
||||||
@@ -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 & 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>
|
|
||||||
@@ -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 & 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 & Network</button>
|
|
||||||
<button class="filter-btn" data-filter="compute" role="tab">Compute & Storage</button>
|
|
||||||
<button class="filter-btn" data-filter="media" role="tab">Media & Automation</button>
|
|
||||||
<button class="filter-btn" data-filter="monitoring" role="tab">Monitoring & 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 & 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 & 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 & 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 & 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>
|
|
||||||
@@ -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> >&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 & 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 & 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>
|
|
||||||
@@ -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>
|
|
||||||
@@ -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.
|
|
||||||
@@ -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 & 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>
|
|
||||||
@@ -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 & Tools</button>
|
|
||||||
<button class="filter-btn" data-filter="media" role="tab">Media & Content</button>
|
|
||||||
<button class="filter-btn" data-filter="security" role="tab">Identity & 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_&_verification</h2>
|
|
||||||
<span class="section-meta">Cryptographic Identity</span>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="identity-box">
|
|
||||||
<div class="identity-title">// Public Endpoints & 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>
|
|
||||||
@@ -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, & 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, & 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 & 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 & 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 & 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 & 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>
|
|
||||||
@@ -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 & 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 & 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 & 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 & 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 & 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 & 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 & 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>
|
|
||||||
@@ -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 & 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>
|
|
||||||
@@ -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.
|
|
||||||
@@ -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>
|
|
||||||
@@ -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.
|
|
||||||
Reference in New Issue
Block a user