Compare commits
38
Commits
bc74ca1b04
..
server
| Author | SHA1 | Date | |
|---|---|---|---|
 venus
|
2bf5e83964 | ||
|
venus
|
d6c5ed1d3b | ||
|
venus
|
528c302c74 | ||
|
venus
|
66c4e89732 | ||
|
venus
|
60f77838a0 | ||
|
venus
|
04a39ca852 | ||
|
venus
|
eddbf5470e | ||
|
venus
|
acd47b80aa | ||
|
venus
|
900014f506 | ||
|
venus
|
737a6e3e51 | ||
|
venus
|
2423546ee6 | ||
|
venus
|
d55297f1dd | ||
|
venus
|
d3aefa343e | ||
|
venus
|
78b1e0b485 | ||
|
venus
|
e733f479dd | ||
|
venus
|
1079b956d3 | ||
|
venus
|
125b3e8839 | ||
|
venus
|
cedd8194f6 | ||
|
venus
|
e4601dbbcb | ||
|
venus
|
fc6c17b541 | ||
|
venus
|
1491d3fa5c | ||
|
venus
|
b13a50ccee | ||
|
venus
|
d8fb8a3699 | ||
|
venus
|
c0f67e75a3 | ||
|
venus
|
70134d2e00 | ||
|
venus
|
f3ae84ad79 | ||
|
venus
|
451fb34f52 | ||
|
venus
|
9f4758039a | ||
|
venus
|
6a0f4347f9 | ||
|
venus
|
0ee5fae6be | ||
|
venus
|
be516f8848 | ||
|
venus
|
59bac4bac9 | ||
|
venus
|
e68322f182 | ||
|
venus
|
bf351e9755 | ||
|
venus
|
801ba3a533 | ||
|
venus
|
65ad51560c | ||
|
venus
|
0f80bf4e9b | ||
|
venus
|
424041a827 |
+5
-3
@@ -1,5 +1,7 @@
|
|||||||
.git
|
.git
|
||||||
.gitignore
|
.gitignore
|
||||||
Dockerfile
|
.agents
|
||||||
docker-compose.yml
|
node_modules
|
||||||
*.md
|
_site
|
||||||
|
sample-designs
|
||||||
|
*.log
|
||||||
|
|||||||
@@ -0,0 +1,5 @@
|
|||||||
|
# Environment Template
|
||||||
|
# Copy to .env and adjust variables as needed:
|
||||||
|
SITE_DOMAIN=riverrooks.dev
|
||||||
|
SITE_URL=https://riverrooks.dev
|
||||||
|
PORT=8080
|
||||||
@@ -0,0 +1,8 @@
|
|||||||
|
node_modules/
|
||||||
|
_site/
|
||||||
|
.cache/
|
||||||
|
.DS_Store
|
||||||
|
*.log
|
||||||
|
.env
|
||||||
|
docker-compose.yml
|
||||||
|
posts/*
|
||||||
-15
@@ -1,15 +0,0 @@
|
|||||||
FROM nginx:1.25-alpine
|
|
||||||
|
|
||||||
# Remove default Nginx configuration
|
|
||||||
RUN rm /etc/nginx/conf.d/default.conf
|
|
||||||
|
|
||||||
# Copy custom Nginx security & performance config
|
|
||||||
COPY nginx.conf /etc/nginx/conf.d/default.conf
|
|
||||||
|
|
||||||
# Copy static website files into Nginx server root
|
|
||||||
COPY . /usr/share/nginx/html
|
|
||||||
|
|
||||||
# Expose standard HTTP port
|
|
||||||
EXPOSE 80
|
|
||||||
|
|
||||||
CMD ["nginx", "-g", "daemon off;"]
|
|
||||||
@@ -1,17 +0,0 @@
|
|||||||
version: '3.8'
|
|
||||||
|
|
||||||
services:
|
|
||||||
web:
|
|
||||||
build:
|
|
||||||
context: .
|
|
||||||
dockerfile: Dockerfile
|
|
||||||
image: river-rooks-blog:latest
|
|
||||||
container_name: river_rooks_web
|
|
||||||
restart: unless-stopped
|
|
||||||
ports:
|
|
||||||
- "8080:80"
|
|
||||||
healthcheck:
|
|
||||||
test: ["CMD", "wget", "-qO-", "http://localhost:80/"]
|
|
||||||
interval: 30s
|
|
||||||
timeout: 5s
|
|
||||||
retries: 3
|
|
||||||
Executable
+36
@@ -0,0 +1,36 @@
|
|||||||
|
#!/usr/bin/env zsh
|
||||||
|
set -e
|
||||||
|
echo "pulling latest build image..."
|
||||||
|
docker compose pull
|
||||||
|
|
||||||
|
# Check which service is running
|
||||||
|
if docker compose ps blog-blue --filter "status=running" -q | grep -q .; then
|
||||||
|
CURRENT="blog-blue"
|
||||||
|
TARGET="blog-green"
|
||||||
|
else
|
||||||
|
CURRENT="blog-green"
|
||||||
|
TARGET="blog-blue"
|
||||||
|
fi
|
||||||
|
|
||||||
|
echo "Current: $CURRENT -> deploying Target: $TARGET"
|
||||||
|
|
||||||
|
# TODO dont run if 0 instances running
|
||||||
|
# Scale current deployment to two instances, keeping the old one and adding a running env of the new one
|
||||||
|
docker compose up -d --no-deps $TARGET
|
||||||
|
|
||||||
|
echo "waiting for $TARGET to pass healthcheck..."
|
||||||
|
# docker ps --filter 'label=com.docker.compose.service=blog' --filter 'health=starting'
|
||||||
|
until [[ "$(docker inspect --format '{{.State.Health.Status}}' $(docker compose ps -q $TARGET) 2>/dev/null)" == "healthy" ]]; do
|
||||||
|
sleep 1
|
||||||
|
done
|
||||||
|
|
||||||
|
# Give traefik backend a few seconds to update
|
||||||
|
sleep 3
|
||||||
|
|
||||||
|
echo "Stopping $CURRENT..."
|
||||||
|
docker compose stop $CURRENT
|
||||||
|
docker compose rm -f $CURRENT
|
||||||
|
|
||||||
|
echo "Zero downtime deployment to $TARGET complete."
|
||||||
|
# TODO zero downtime deployment
|
||||||
|
# TODO run on a cron job
|
||||||
-270
@@ -1,270 +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>
|
|
||||||
</div>
|
|
||||||
</section>
|
|
||||||
|
|
||||||
<hr class="section-divider">
|
|
||||||
|
|
||||||
<!-- Piped Contact Footer -->
|
|
||||||
<footer class="footer-links">
|
|
||||||
<a href="https://github.com" target="_blank" rel="noopener" class="footer-link">GitHub</a>
|
|
||||||
<span class="pipe">|</span>
|
|
||||||
<a href="mailto:river@example.com" class="footer-link">Email</a>
|
|
||||||
<span class="pipe">|</span>
|
|
||||||
<a href="#" class="footer-link">PGP Key</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;
|
|
||||||
}
|
|
||||||
@@ -0,0 +1,30 @@
|
|||||||
|
x-blog-templage: &blog-base
|
||||||
|
image: git.riverrooks.dev/venus/river-rooks-blog:latest
|
||||||
|
restart: unless-stopped
|
||||||
|
volumes:
|
||||||
|
- "./posts:/app/src/posts"
|
||||||
|
environment:
|
||||||
|
- "SITE_DOMAIN=${SITE_DOMAIN:?Error: SITE_DOMAIN is not set. Please define SITE_DOMAIN in .env}"
|
||||||
|
- "SITE_URL=${SITE_URL:-https://${SITE_DOMAIN}}"
|
||||||
|
- "PORT=${PORT:-8080}"
|
||||||
|
- "WATCH=true"
|
||||||
|
- "API_SECRET=${API_SECRET}"
|
||||||
|
ports:
|
||||||
|
- "${HOST_PORT:-${PORT:-8080}}:${PORT:-8080}"
|
||||||
|
networks:
|
||||||
|
- backend
|
||||||
|
healthcheck:
|
||||||
|
test: ["CMD-SHELL", "wget -qO- http://127.0.0.1:${PORT:-8080}/healthz > /dev/null || exit 1"]
|
||||||
|
interval: 5s
|
||||||
|
timeout: 3s
|
||||||
|
retries: 3
|
||||||
|
start_period: 5s
|
||||||
|
# I Have this deployed with a series of traefik labels but that's not strictly nessescary
|
||||||
|
services:
|
||||||
|
blog-blue:
|
||||||
|
<<: *blog-base
|
||||||
|
blog-green:
|
||||||
|
<<: *blog-base
|
||||||
|
networks:
|
||||||
|
backend:
|
||||||
|
external: true
|
||||||
@@ -1,470 +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>
|
|
||||||
</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">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</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.
|
|
||||||
</p>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<!-- Card 2 -->
|
|
||||||
<div class="project-card" tabindex="0" data-target="/dev/wireguard-mesh">
|
|
||||||
<h3 class="card-title">WireGuard Mesh Topology Builder</h3>
|
|
||||||
<p class="card-description">
|
|
||||||
Automated configuration generator for 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)</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.
|
|
||||||
</p>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<!-- Card 4 -->
|
|
||||||
<div class="project-card" tabindex="0" data-target="/dev/kernel-bootstrap">
|
|
||||||
<h3 class="card-title">Embedded Kernel Boot Strap</h3>
|
|
||||||
<p class="card-description">
|
|
||||||
Minimalist boot sector and initial kernel bootstrap for ARM Cortex-M microcontrollers to handle memory map initialization 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</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.
|
|
||||||
</p>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<footer class="pane-footer">
|
|
||||||
<span>Companion Spec Sample</span>
|
|
||||||
<span>© 2026 Developer System</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,81 +0,0 @@
|
|||||||
# Project Brief: Technical Web Architecture & Blog
|
|
||||||
|
|
||||||
**Project Type:** Personal Blog & Technical Documentation Site
|
|
||||||
**Design Philosophy:** High-signal, low-noise. Developer-centric minimalism.
|
|
||||||
**Vibe/Comparisons:** Zed Editor, Ghostty, Noctalia.dev.
|
|
||||||
**Strictly Avoid:** Raycast, Astro, Vercel-style "SaaS" aesthetics.
|
|
||||||
|
|
||||||
## 1. Executive Summary
|
|
||||||
This project requires a web interface that feels like a native development environment or terminal emulator, not a marketing page. The design must prioritize raw performance, keyboard navigability, and information density. It should evoke the craftsmanship of tiling window managers and modal text editors.
|
|
||||||
|
|
||||||
The content will heavily feature deep technical writing, including CTF write-ups, network routing diagrams, Docker/Traefik architectures, and raw code snippets (Lua, POSIX `sh`, and Python). The design must accommodate high-density information without visual clutter.
|
|
||||||
|
|
||||||
---
|
|
||||||
|
|
||||||
## 2. Global Rules & Anti-Patterns
|
|
||||||
|
|
||||||
To achieve the correct aesthetic, the designer must adhere to strict constraints.
|
|
||||||
|
|
||||||
> **The "Do Not Use" List**
|
|
||||||
> * **NO Glassmorphism:** Zero use of `backdrop-filter: blur()`, frosted glass, or translucent overlays.
|
|
||||||
> * **NO Glows or Drop Shadows:** Elements should not float, glow, or cast shadows. Depth is created through crisp 1px borders and distinct surface colors.
|
|
||||||
> * **NO Gradients:** Avoid sweeping linear or radial gradients. Stick to solid colors.
|
|
||||||
> * **NO Spring Animations:** Avoid floaty, delayed transitions.
|
|
||||||
> * **NO Rounded Blobs:** Keep border-radii minimal (0px to 4px max). Sharp corners are preferred.
|
|
||||||
|
|
||||||
---
|
|
||||||
|
|
||||||
## 3. Typography System
|
|
||||||
|
|
||||||
The typographical hierarchy is a hybrid system utilizing monospace fonts for structural elements and a clean sans-serif for long-form reading.
|
|
||||||
|
|
||||||
| Usage | Font Family Preference | Weight | Role |
|
|
||||||
| :--- | :--- | :--- | :--- |
|
|
||||||
| **Structural / UI** | IBM Plex Mono, JetBrains Mono | Regular (400), Medium (500) | Navigation links, metadata, dates, tags, timestamps, buttons. |
|
|
||||||
| **Code Blocks** | JetBrains Mono, Fira Code | Regular (400) | Inline code snippets, terminal command blocks, scripts. |
|
|
||||||
| **Body Prose** | Inter, Geist Sans, Roboto | Regular (400) | Standard article paragraphs, lists. |
|
|
||||||
| **Headings (H1-H3)**| IBM Plex Mono (or Sans variant) | Bold (700) | Article titles, section headers. |
|
|
||||||
|
|
||||||
**Typographical Constraints:**
|
|
||||||
* **Line Height:** `1.6` to `1.7` for prose.
|
|
||||||
* **Max Width:** Cap article text at `65ch` (characters) for optimal readability.
|
|
||||||
|
|
||||||
---
|
|
||||||
|
|
||||||
## 4. Color Palette (Dark Mode Native)
|
|
||||||
|
|
||||||
The site does not need a light mode. It should be built as a dark-mode native experience using a muted, low-saturation charcoal palette, mimicking a modern terminal or IDE.
|
|
||||||
|
|
||||||
* **Base Canvas (`#121417` or `#0d0f12`):** A deep slate/charcoal. Not pure black (`#000000`), which causes eye strain.
|
|
||||||
* **Surface / Card (`#1c1f26`):** Slightly lighter than the canvas for article blocks or terminal windows.
|
|
||||||
* **Borders & Dividers (`#2b303b`):** Subtle, low-contrast 1px solid lines used to define grids and separate content.
|
|
||||||
* **Primary Text (`#e0e6f0`):** Off-white/light ash for prose.
|
|
||||||
* **Muted Text (`#8a95a5`):** For timestamps, metadata, and non-essential UI text.
|
|
||||||
* **Accent Color (Designer's Choice):** One single, vibrant terminal color (e.g., ANSI Green, Amber, or Cyan) used sparingly for active states, link hovers, or terminal prompts (like `>`).
|
|
||||||
|
|
||||||
---
|
|
||||||
|
|
||||||
## 5. Layout & Component Architecture
|
|
||||||
|
|
||||||
The layout should be heavily grid-based, feeling structural and deliberate.
|
|
||||||
|
|
||||||
### Core Components Needed
|
|
||||||
1. **Terminal-Style Code Blocks:** Must support syntax highlighting. Should include a simple header (e.g., showing the filename like `config.lua` or `docker-compose.yml`) with a 1px border.
|
|
||||||
2. **Metadata Tags:** Small, monospaced inline blocks for categorizing posts (e.g., `[#homelab]`, `[#ctf]`, `[#hyprland]`).
|
|
||||||
3. **Keyboard Shortcut Hints:** Visual styling for `<kbd>` elements, rendering as crisp, bordered boxes (e.g., `Ctrl` + `K`).
|
|
||||||
4. **Index/Archive List:** A dense, tabular list for older posts, prioritized by date, title, and tags, rather than large image thumbnails.
|
|
||||||
|
|
||||||
### Spacing & Grid
|
|
||||||
* Use a rigid 4pt or 8pt baseline grid.
|
|
||||||
* Padding inside code blocks and cards should be dense but mathematically consistent.
|
|
||||||
* Full-bleed horizontal dividers (`<hr>`) should be used to separate major sections instead of large margins.
|
|
||||||
|
|
||||||
---
|
|
||||||
|
|
||||||
## 6. Interaction & Motion
|
|
||||||
|
|
||||||
Interactivity should mirror command-line interfaces: fast, binary, and unembellished.
|
|
||||||
|
|
||||||
* **Hover States:** Immediate state changes. Instead of fading a button's background over `300ms`, snap the background color instantly or invert the text/background colors.
|
|
||||||
* **Focus States:** Explicit, high-visibility 1px or 2px solid outlines (using the accent color) when navigating via the `Tab` key. Accessibility and keyboard navigation are paramount.
|
|
||||||
* **Active Elements:** Use structural indicators (like a `>` prepended to an active navigation link, or a solid left-border block) rather than changing font sizes or scaling elements up.
|
|
||||||
@@ -1,604 +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>
|
|
||||||
</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">Engineering Architecture & Portfolio</h1>
|
|
||||||
<p class="doc-subtitle">
|
|
||||||
A high-density technical reading flow. Pinned left pane contains an automated terminal tracker daemon observing scroll depth across sections.
|
|
||||||
</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 Developer System</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,869 +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>
|
|
||||||
</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 Xeon E-2278G (8C/16T) | 64GB ECC | 6x16TB ZFS</td>
|
|
||||||
<td><span class="metric-bar">[██░░░░░░░░]</span> 24%</td>
|
|
||||||
<td><span class="metric-bar">[████████░░]</span> 81%</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 / Authelia 2FA)
|
|
||||||
└───────────┬─────────────┘
|
|
||||||
│
|
|
||||||
┌─────────┴───────────────────────┬─────────────────────────┐
|
|
||||||
▼ ▼ ▼
|
|
||||||
┌─────────────────────────┐ ┌───────────────────────┐ ┌─────────────────────────┐
|
|
||||||
│ VLAN 10: Management │ │ VLAN 20: Services │ │ VLAN 30: Storage Pool │
|
|
||||||
│ • Proxmox VE (8006) │ │ • Grafana (3000) │ │ • TrueNAS ZFS (SMB/NFS) │
|
|
||||||
│ • AdGuard Home (53) │ │ • Jellyfin Media │ │ • MinIO S3 Bucket │
|
|
||||||
└─────────────────────────┘ └───────────────────────┘ └─────────────────────────┘
|
|
||||||
</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://github.com" target="_blank" rel="noopener" class="footer-link">GitHub</a>
|
|
||||||
<span class="pipe">|</span>
|
|
||||||
<a href="mailto:river@example.com" class="footer-link">Email</a>
|
|
||||||
<span class="pipe">|</span>
|
|
||||||
<a href="#" class="footer-link">PGP Key</a>
|
|
||||||
<span class="pipe">|</span>
|
|
||||||
<span style="font-size:0.78rem; color:var(--text-muted);">HOSTED ON SELF-HEALED K3S CLUSTER</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,498 +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">[node-01]</div>
|
|
||||||
<div class="profile-subtitle">dev-blog@system:~$</div>
|
|
||||||
|
|
||||||
<nav>
|
|
||||||
<ul class="nav-list">
|
|
||||||
<li class="nav-item">
|
|
||||||
<a href="homepage.html" class="nav-link active">Home</a>
|
|
||||||
</li>
|
|
||||||
<li class="nav-item">
|
|
||||||
<a href="#" class="nav-link">Posts</a>
|
|
||||||
</li>
|
|
||||||
<li class="nav-item">
|
|
||||||
<a href="#" class="nav-link">Projects</a>
|
|
||||||
</li>
|
|
||||||
<li class="nav-item">
|
|
||||||
<a href="index.html" class="nav-link">Spec Catalog</a>
|
|
||||||
</li>
|
|
||||||
</ul>
|
|
||||||
</nav>
|
|
||||||
|
|
||||||
<!-- Keybindings Panel Widget -->
|
|
||||||
<div class="keybindings-panel">
|
|
||||||
<div class="keybindings-title">Keyboard Shortcuts</div>
|
|
||||||
<div class="keybinding-row">
|
|
||||||
<span>Search posts</span>
|
|
||||||
<kbd>Ctrl</kbd> + <kbd>K</kbd>
|
|
||||||
</div>
|
|
||||||
<div class="keybinding-row">
|
|
||||||
<span>Go to Catalog</span>
|
|
||||||
<kbd>g</kbd> + <kbd>c</kbd>
|
|
||||||
</div>
|
|
||||||
<div class="keybinding-row">
|
|
||||||
<span>Toggle Terminal</span>
|
|
||||||
<kbd>~</kbd>
|
|
||||||
</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>
|
|
||||||
</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);">[#shell]</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>
|
|
||||||
</tbody>
|
|
||||||
</table>
|
|
||||||
</section>
|
|
||||||
|
|
||||||
<!-- Footer -->
|
|
||||||
<footer>
|
|
||||||
<span>© 2026 Developer Blog</span>
|
|
||||||
<span>Built with Design-Specification.md</span>
|
|
||||||
</footer>
|
|
||||||
|
|
||||||
</div>
|
|
||||||
</main>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
</body>
|
|
||||||
</html>
|
|
||||||
@@ -1,370 +0,0 @@
|
|||||||
<!DOCTYPE html>
|
|
||||||
<html lang="en">
|
|
||||||
<head>
|
|
||||||
<meta charset="UTF-8">
|
|
||||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
||||||
<title>Design Spec Samples Catalog | Dynamic Registry</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&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;
|
|
||||||
max-width: 860px;
|
|
||||||
margin: 40px auto;
|
|
||||||
padding: 0 20px;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Header Identity */
|
|
||||||
.catalog-header {
|
|
||||||
border-bottom: 1px solid var(--border-color);
|
|
||||||
padding-bottom: 16px;
|
|
||||||
margin-bottom: 24px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.catalog-title {
|
|
||||||
font-family: 'IBM Plex Mono', monospace;
|
|
||||||
font-size: 1.6rem;
|
|
||||||
font-weight: 700;
|
|
||||||
color: var(--text-primary);
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
gap: 12px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.status-dot {
|
|
||||||
width: 10px;
|
|
||||||
height: 10px;
|
|
||||||
background-color: var(--accent-cyan);
|
|
||||||
display: inline-block;
|
|
||||||
}
|
|
||||||
|
|
||||||
.catalog-meta {
|
|
||||||
font-family: 'IBM Plex Mono', monospace;
|
|
||||||
font-size: 0.82rem;
|
|
||||||
color: var(--text-muted);
|
|
||||||
margin-top: 6px;
|
|
||||||
display: flex;
|
|
||||||
justify-content: space-between;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Search Filter Input Bar */
|
|
||||||
.filter-bar {
|
|
||||||
margin-bottom: 24px;
|
|
||||||
display: flex;
|
|
||||||
gap: 12px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.search-input {
|
|
||||||
background-color: var(--bg-surface);
|
|
||||||
border: 1px solid var(--border-color);
|
|
||||||
border-radius: 4px;
|
|
||||||
color: var(--text-primary);
|
|
||||||
font-family: 'JetBrains Mono', monospace;
|
|
||||||
font-size: 0.85rem;
|
|
||||||
padding: 10px 14px;
|
|
||||||
width: 100%;
|
|
||||||
outline: none;
|
|
||||||
}
|
|
||||||
|
|
||||||
.search-input:focus {
|
|
||||||
border-color: var(--accent-cyan);
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Dynamic Catalog Cards List */
|
|
||||||
.samples-list {
|
|
||||||
display: flex;
|
|
||||||
flex-direction: column;
|
|
||||||
gap: 16px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.sample-card {
|
|
||||||
background-color: var(--bg-surface);
|
|
||||||
border: 1px solid var(--border-color);
|
|
||||||
border-radius: 4px;
|
|
||||||
padding: 16px;
|
|
||||||
transition: none; /* Instant snap */
|
|
||||||
}
|
|
||||||
|
|
||||||
.sample-card:hover {
|
|
||||||
border-color: var(--accent-cyan);
|
|
||||||
background-color: var(--bg-elevated);
|
|
||||||
}
|
|
||||||
|
|
||||||
.sample-header {
|
|
||||||
display: flex;
|
|
||||||
justify-content: space-between;
|
|
||||||
align-items: flex-start;
|
|
||||||
margin-bottom: 6px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.sample-link {
|
|
||||||
font-family: 'IBM Plex Mono', monospace;
|
|
||||||
font-size: 1.05rem;
|
|
||||||
font-weight: 700;
|
|
||||||
color: var(--text-primary);
|
|
||||||
text-decoration: none;
|
|
||||||
transition: none;
|
|
||||||
}
|
|
||||||
|
|
||||||
.sample-link:hover {
|
|
||||||
color: var(--accent-cyan);
|
|
||||||
}
|
|
||||||
|
|
||||||
.badge {
|
|
||||||
font-family: 'IBM Plex Mono', monospace;
|
|
||||||
font-size: 0.72rem;
|
|
||||||
padding: 2px 6px;
|
|
||||||
border-radius: 2px;
|
|
||||||
font-weight: 700;
|
|
||||||
}
|
|
||||||
|
|
||||||
.badge-html { background-color: rgba(0, 240, 255, 0.15); color: var(--accent-cyan); }
|
|
||||||
.badge-md { background-color: rgba(255, 183, 0, 0.15); color: var(--accent-amber); }
|
|
||||||
|
|
||||||
.sample-filename {
|
|
||||||
font-family: 'JetBrains Mono', monospace;
|
|
||||||
font-size: 0.78rem;
|
|
||||||
color: var(--text-muted);
|
|
||||||
margin-bottom: 8px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.sample-desc {
|
|
||||||
font-size: 0.88rem;
|
|
||||||
color: var(--text-muted);
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Footer */
|
|
||||||
.catalog-footer {
|
|
||||||
margin-top: 40px;
|
|
||||||
padding-top: 16px;
|
|
||||||
border-top: 1px solid var(--border-color);
|
|
||||||
font-family: 'IBM Plex Mono', monospace;
|
|
||||||
font-size: 0.78rem;
|
|
||||||
color: var(--text-muted);
|
|
||||||
display: flex;
|
|
||||||
justify-content: space-between;
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
</head>
|
|
||||||
<body>
|
|
||||||
|
|
||||||
<header class="catalog-header">
|
|
||||||
<h1 class="catalog-title">
|
|
||||||
<span class="status-dot"></span>
|
|
||||||
DESIGN SPEC SAMPLES CATALOG
|
|
||||||
</h1>
|
|
||||||
<div class="catalog-meta">
|
|
||||||
<span>PATH: /samples/</span>
|
|
||||||
<span id="file-counter">SCANNING DIRECTORY...</span>
|
|
||||||
</div>
|
|
||||||
</header>
|
|
||||||
|
|
||||||
<!-- Filter Input -->
|
|
||||||
<div class="filter-bar">
|
|
||||||
<input type="text" id="search-box" class="search-input" placeholder="Search samples by name, keyword, or filename... ($ grep -i)" oninput="filterSamples()">
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<!-- Dynamic Catalog Container -->
|
|
||||||
<main id="samples-container" class="samples-list">
|
|
||||||
<!-- Rendered dynamically by JavaScript -->
|
|
||||||
</main>
|
|
||||||
|
|
||||||
<footer class="catalog-footer">
|
|
||||||
<div>Unified Design Language Compliant</div>
|
|
||||||
<div>POSIX / Terminal Minimalist Spec</div>
|
|
||||||
</footer>
|
|
||||||
|
|
||||||
<script>
|
|
||||||
// Known files catalog with fallback metadata definitions
|
|
||||||
const knownFiles = [
|
|
||||||
{
|
|
||||||
file: 'unified-design-specification.md',
|
|
||||||
title: 'Unified Design Specification (Master Brief)',
|
|
||||||
type: 'md',
|
|
||||||
desc: 'The master specification uniting Homelab Services Directory, Technical Blog/Notes, and Resume/Portfolio into a dark slate (#0d0f12), dual-typography (IBM Plex Mono + Inter), instant snap interaction language.'
|
|
||||||
},
|
|
||||||
{
|
|
||||||
file: 'sample-dashboard.html',
|
|
||||||
title: 'Sample 8: Terminal Workspace Dashboard (3-Tile Split)',
|
|
||||||
type: 'html',
|
|
||||||
desc: 'A 3-tile modal editor workspace layout (Neovim/Tmux style) featuring live homelab services, resume bio, article log stream, and interactive vim command bar.'
|
|
||||||
},
|
|
||||||
{
|
|
||||||
file: 'sample-command-center.html',
|
|
||||||
title: 'Sample 9: Command Center (Zed/Ghostty Tabbed Utility)',
|
|
||||||
type: 'html',
|
|
||||||
desc: 'A tabbed single-pane utility layout inspired by Zed Editor and Ghostty. Features keyboard navigation hotkeys [1], [2], [3] for Services, Blog, and Resume tabs.'
|
|
||||||
},
|
|
||||||
{
|
|
||||||
file: 'sample-dual-pane-explorer.html',
|
|
||||||
title: 'Sample 10: Dual-Pane Tree Explorer (Helix File Tree)',
|
|
||||||
type: 'html',
|
|
||||||
desc: 'A split-screen file-tree explorer featuring a left tree sidebar, document view container, and an interactive ASCII daemon mascot (sys-daemon) reacting to item selection.'
|
|
||||||
},
|
|
||||||
{
|
|
||||||
file: 'homepage.html',
|
|
||||||
title: 'Sample 1: Developer Homepage (Terminal Minimalist Spec)',
|
|
||||||
type: 'html',
|
|
||||||
desc: 'A dark-mode native developer homepage modeled after modern, high-density terminal setups and IDEs. Adheres strictly to zero glassmorphism and solid color layouts.'
|
|
||||||
},
|
|
||||||
{
|
|
||||||
file: 'split-panel.html',
|
|
||||||
title: 'Sample 2: Split Panel Layout (ASCII Animation & Scrollable Tiles)',
|
|
||||||
type: 'html',
|
|
||||||
desc: 'A dashboard layout with a sticky site nav header, left panel with animated terminal ASCII character, and right panel with scrollable developer project cards.'
|
|
||||||
},
|
|
||||||
{
|
|
||||||
file: 'companion.html',
|
|
||||||
title: 'Sample 3: Companion Layout (Interactive Daemon & Minimal Cards)',
|
|
||||||
type: 'html',
|
|
||||||
desc: 'A 50/50 vertical split layout with content cards on the left and a persistent, reactive ASCII companion on the right with discrete state updates.'
|
|
||||||
},
|
|
||||||
{
|
|
||||||
file: 'document-flow.html',
|
|
||||||
title: 'Sample 4: Document Flow Layout (Scroll-Tracker Daemon)',
|
|
||||||
type: 'html',
|
|
||||||
desc: 'A continuous document reading flow removing 4-sided bounding boxes, featuring a left pane with an IntersectionObserver scroll-tracker daemon.'
|
|
||||||
},
|
|
||||||
{
|
|
||||||
file: 'portfolio.html',
|
|
||||||
title: 'Sample 5: River Rooks Portfolio (Single-Page Business Card)',
|
|
||||||
type: 'html',
|
|
||||||
desc: 'A single-column digital business card landing page conforming to portfolio-spec.md with terminal stdout block, active stack tags, and piped footer.'
|
|
||||||
},
|
|
||||||
{
|
|
||||||
file: 'homelab.html',
|
|
||||||
title: 'Sample 6: Homelab Lander & Infrastructure Directory',
|
|
||||||
type: 'html',
|
|
||||||
desc: 'A public-facing lander for self-hosted homelab infrastructure featuring category filters, service cards, telemetry, and ASCII network topology routing map.'
|
|
||||||
},
|
|
||||||
{
|
|
||||||
file: 'public-services.html',
|
|
||||||
title: 'Sample 7: Public Services & Applications Portal',
|
|
||||||
type: 'html',
|
|
||||||
desc: 'A quick-access launcher portal for self-hosted web tools (Git forge, CyberChef, Stirling PDF, media) with search, filters, and access level badges.'
|
|
||||||
},
|
|
||||||
{
|
|
||||||
file: 'design-specification.md',
|
|
||||||
title: 'Design Specification (Primary Technical Brief)',
|
|
||||||
type: 'md',
|
|
||||||
desc: 'Primary specification document detailing technical web architecture guidelines, typography rules, color palette, and global anti-pattern constraints.'
|
|
||||||
},
|
|
||||||
{
|
|
||||||
file: 'portfolio-spec.md',
|
|
||||||
title: 'Portfolio Specification (Landing Page Brief)',
|
|
||||||
type: 'md',
|
|
||||||
desc: 'Specification sheet for the single-page under-construction portfolio card layout.'
|
|
||||||
},
|
|
||||||
{
|
|
||||||
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 allItems = [];
|
|
||||||
|
|
||||||
async function initCatalog() {
|
|
||||||
allItems = [...knownFiles];
|
|
||||||
|
|
||||||
// Attempt dynamic discovery via fetch directory listing if web server supports autoindex
|
|
||||||
try {
|
|
||||||
const response = await fetch('./');
|
|
||||||
if (response.ok) {
|
|
||||||
const htmlText = await textResponse(response);
|
|
||||||
const parser = new DOMParser();
|
|
||||||
const doc = parser.parseFromString(htmlText, 'text/html');
|
|
||||||
const links = Array.from(doc.querySelectorAll('a'))
|
|
||||||
.map(a => a.getAttribute('href'))
|
|
||||||
.filter(href => href && (href.endsWith('.html') || href.endsWith('.md')) && href !== 'index.html');
|
|
||||||
|
|
||||||
// Merge dynamically discovered files if any are missing from knownFiles
|
|
||||||
links.forEach(href => {
|
|
||||||
const cleanName = href.replace('./', '');
|
|
||||||
if (!allItems.some(item => item.file === cleanName)) {
|
|
||||||
const isHtml = cleanName.endsWith('.html');
|
|
||||||
allItems.push({
|
|
||||||
file: cleanName,
|
|
||||||
title: cleanName,
|
|
||||||
type: isHtml ? 'html' : 'md',
|
|
||||||
desc: `Dynamically discovered ${isHtml ? 'HTML sample' : 'Markdown specification'} file.`
|
|
||||||
});
|
|
||||||
}
|
|
||||||
});
|
|
||||||
}
|
|
||||||
} catch (err) {
|
|
||||||
console.log('Directory autoindex fetch skipped, rendering fallback manifest.');
|
|
||||||
}
|
|
||||||
|
|
||||||
renderCatalog(allItems);
|
|
||||||
}
|
|
||||||
|
|
||||||
async function textResponse(res) {
|
|
||||||
return await res.text();
|
|
||||||
}
|
|
||||||
|
|
||||||
function renderCatalog(items) {
|
|
||||||
const container = document.getElementById('samples-container');
|
|
||||||
const counter = document.getElementById('file-counter');
|
|
||||||
|
|
||||||
counter.innerText = `${items.length} FILES INDEXED`;
|
|
||||||
container.innerHTML = '';
|
|
||||||
|
|
||||||
if (items.length === 0) {
|
|
||||||
container.innerHTML = `<div style="color: var(--text-muted); font-family: monospace;">No matching sample files found.</div>`;
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
|
|
||||||
items.forEach(item => {
|
|
||||||
const card = document.createElement('div');
|
|
||||||
card.className = 'sample-card';
|
|
||||||
|
|
||||||
const badgeClass = item.type === 'html' ? 'badge-html' : 'badge-md';
|
|
||||||
const badgeLabel = item.type === 'html' ? 'HTML SAMPLE' : 'MARKDOWN SPEC';
|
|
||||||
|
|
||||||
card.innerHTML = `
|
|
||||||
<div class="sample-header">
|
|
||||||
<a href="${item.file}" class="sample-link">${item.title}</a>
|
|
||||||
<span class="badge ${badgeClass}">${badgeLabel}</span>
|
|
||||||
</div>
|
|
||||||
<div class="sample-filename">file:///samples/${item.file}</div>
|
|
||||||
<div class="sample-desc">${item.desc}</div>
|
|
||||||
`;
|
|
||||||
|
|
||||||
container.appendChild(card);
|
|
||||||
});
|
|
||||||
}
|
|
||||||
|
|
||||||
function filterSamples() {
|
|
||||||
const query = document.getElementById('search-box').value.toLowerCase().trim();
|
|
||||||
const filtered = allItems.filter(item =>
|
|
||||||
item.title.toLowerCase().includes(query) ||
|
|
||||||
item.file.toLowerCase().includes(query) ||
|
|
||||||
item.desc.toLowerCase().includes(query)
|
|
||||||
);
|
|
||||||
renderCatalog(filtered);
|
|
||||||
}
|
|
||||||
|
|
||||||
document.addEventListener('DOMContentLoaded', initCatalog);
|
|
||||||
</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,358 +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>
|
|
||||||
</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">
|
|
||||||
Under construction. Full site infrastructure is currently being provisioned. Routing traffic to temporary landing page...<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, and systems architecture.
|
|
||||||
</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>
|
|
||||||
</div>
|
|
||||||
</section>
|
|
||||||
|
|
||||||
<hr class="section-divider">
|
|
||||||
|
|
||||||
<!-- E. Footer (Contact & Links) -->
|
|
||||||
<footer class="footer-links">
|
|
||||||
<a href="https://github.com" target="_blank" rel="noopener" class="footer-link">GitHub</a>
|
|
||||||
<span class="pipe">|</span>
|
|
||||||
<a href="mailto:river@example.com" class="footer-link">Email</a>
|
|
||||||
<span class="pipe">|</span>
|
|
||||||
<a href="#" class="footer-link">PGP Key</a>
|
|
||||||
<span class="pipe">|</span>
|
|
||||||
<a href="index.html" class="footer-link">Spec Catalog</a>
|
|
||||||
</footer>
|
|
||||||
|
|
||||||
</main>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
</body>
|
|
||||||
</html>
|
|
||||||
@@ -1,901 +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>
|
|
||||||
</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 Fingerprint:</span><br>
|
|
||||||
<span class="key-value">3F8A B29C 7D1E 4056 9912 A8B0 C4D3 E2F1 8091 22A4</span>
|
|
||||||
</div>
|
|
||||||
<button class="copy-btn" onclick="navigator.clipboard.writeText('3F8AB29C7D1E40569912A8B0C4D3E2F1809122A4')">Copy Key Fingerprint</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:</span><br>
|
|
||||||
<span class="key-value">ssh-ed25519 AAAAC3NzaC1lZDI1NTE5AAAAIH8q882a... river@rooks.dev</span>
|
|
||||||
</div>
|
|
||||||
<button class="copy-btn" onclick="navigator.clipboard.writeText('ssh-ed25519 AAAAC3NzaC1lZDI1NTE5AAAAIH8q882aZ9kX1m2pL3vN4qR5sT6uV7wX8yZ9river@rooks.dev')">Copy Public Key</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://github.com" target="_blank" rel="noopener" class="footer-link">GitHub</a>
|
|
||||||
<span class="pipe">|</span>
|
|
||||||
<a href="mailto:river@example.com" class="footer-link">Email Contact</a>
|
|
||||||
<span class="pipe">|</span>
|
|
||||||
<a href="#" class="footer-link">Download PGP Key</a>
|
|
||||||
<span class="pipe">|</span>
|
|
||||||
<span style="font-size:0.78rem; color:var(--text-muted);">PUBLIC SERVICES PORTAL v2.4</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,485 +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>
|
|
||||||
RIVER ROOKS // COMMAND CENTER
|
|
||||||
</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>4 SERVICES OPERATIONAL</span>
|
|
||||||
</div>
|
|
||||||
<div class="panel-body">
|
|
||||||
<div class="services-grid">
|
|
||||||
|
|
||||||
<div class="service-box">
|
|
||||||
<div class="service-title">
|
|
||||||
<a href="https://grafana.local" target="_blank">grafana.homelab</a>
|
|
||||||
<span class="badge-status badge-online">ONLINE</span>
|
|
||||||
</div>
|
|
||||||
<p class="service-desc">Real-time metrics, Prometheus scraping, & homelab telemetry dashboards.</p>
|
|
||||||
<div class="service-stats">
|
|
||||||
<span>PING: 4ms</span>
|
|
||||||
<span>TRAEFIK HTTPS</span>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="service-box">
|
|
||||||
<div class="service-title">
|
|
||||||
<a href="https://vault.local" target="_blank">vault.homelab</a>
|
|
||||||
<span class="badge-status badge-online">ONLINE</span>
|
|
||||||
</div>
|
|
||||||
<p class="service-desc">HashiCorp Vault secret storage, certificate authority, & mTLS renewal.</p>
|
|
||||||
<div class="service-stats">
|
|
||||||
<span>PING: 2ms</span>
|
|
||||||
<span>SEALED: FALSE</span>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="service-box">
|
|
||||||
<div class="service-title">
|
|
||||||
<a href="https://nextcloud.local" target="_blank">cloud.homelab</a>
|
|
||||||
<span class="badge-status badge-online">ONLINE</span>
|
|
||||||
</div>
|
|
||||||
<p class="service-desc">Encrypted private cloud file storage & automated system backup target.</p>
|
|
||||||
<div class="service-stats">
|
|
||||||
<span>PING: 6ms</span>
|
|
||||||
<span>STORAGE: 1.2TB</span>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="service-box">
|
|
||||||
<div class="service-title">
|
|
||||||
<a href="https://wireguard.local" target="_blank">wireguard.homelab</a>
|
|
||||||
<span class="badge-status badge-internal">INTERNAL</span>
|
|
||||||
</div>
|
|
||||||
<p class="service-desc">WireGuard mesh VPN gateway connecting cloud VPS instances to homelab node.</p>
|
|
||||||
<div class="service-stats">
|
|
||||||
<span>PING: 12ms</span>
|
|
||||||
<span>PEERS: 6 ACTIVE</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: 4</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-08-02</td>
|
|
||||||
<td><a href="#" class="post-link">Hardening Traefik Ingress with HashiCorp Vault mTLS</a></td>
|
|
||||||
<td><span class="tag-badge">[#homelab] [#traefik]</span></td>
|
|
||||||
<td>8 min</td>
|
|
||||||
</tr>
|
|
||||||
<tr>
|
|
||||||
<td>2026-07-18</td>
|
|
||||||
<td><a href="#" class="post-link">DEFCON CTF Qualifier: Memory Corruption & Heap Exploitation</a></td>
|
|
||||||
<td><span class="tag-badge">[#ctf] [#binary]</span></td>
|
|
||||||
<td>14 min</td>
|
|
||||||
</tr>
|
|
||||||
<tr>
|
|
||||||
<td>2026-06-29</td>
|
|
||||||
<td><a href="#" class="post-link">Custom Linux Kernel Compilation for BPF Network Tracing</a></td>
|
|
||||||
<td><span class="tag-badge">[#linux] [#ebpf]</span></td>
|
|
||||||
<td>11 min</td>
|
|
||||||
</tr>
|
|
||||||
<tr>
|
|
||||||
<td>2026-05-14</td>
|
|
||||||
<td><a href="#" class="post-link">Minimalist Dotfiles & Hyprland Keybindings Optimization</a></td>
|
|
||||||
<td><span class="tag-badge">[#hyprland] [#dots]</span></td>
|
|
||||||
<td>5 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 & System Purpose</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 Architect & Cybersecurity Researcher"</span><br>
|
|
||||||
<span class="conf-key">AFFILIATION</span> = <span class="conf-val">"University of Alabama College of Engineering"</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">"Linux Kernel Hardening"</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">"C"</span>, <span class="conf-val">"Lua"</span>]<br>
|
|
||||||
<span class="conf-key">TOOLS</span> = [<span class="conf-val">"Docker"</span>, <span class="conf-val">"Traefik"</span>, <span class="conf-val">"WireGuard"</span>, <span class="conf-val">"Neovim"</span>, <span class="conf-val">"Arch Linux"</span>]
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<p style="font-size: 0.92rem; margin-bottom: 16px;">
|
|
||||||
Focused on building resilient, zero-trust network architectures and low-noise self-hosted environments.
|
|
||||||
Proven CTF participant and open-source dotfiles maintainer.
|
|
||||||
</p>
|
|
||||||
|
|
||||||
<div style="display: flex; gap: 12px;">
|
|
||||||
<a href="#" class="btn-action">Download Resume (.PDF)</a>
|
|
||||||
<a href="#" class="btn-action">Fetch PGP Key</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,434 +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>
|
|
||||||
<span class="mode-tag">NORMAL</span>
|
|
||||||
<span class="filepath">/home/river/dashboard.workspace</span>
|
|
||||||
</div>
|
|
||||||
<div class="status-group">
|
|
||||||
<span><span class="status-dot"></span> TRAEFIK: MESH_OK</span>
|
|
||||||
<span>SYS_LOAD: 0.14</span>
|
|
||||||
<span>UPTIME: 99.98%</span>
|
|
||||||
</div>
|
|
||||||
</header>
|
|
||||||
|
|
||||||
<!-- Main 3-Tile Dashboard -->
|
|
||||||
<main class="dashboard-grid">
|
|
||||||
|
|
||||||
<!-- Left Tile: Homelab Services Directory -->
|
|
||||||
<section class="tile">
|
|
||||||
<div class="tile-header">
|
|
||||||
<span>/etc/services</span>
|
|
||||||
<span>[4 ACTIVE]</span>
|
|
||||||
</div>
|
|
||||||
<div class="tile-body">
|
|
||||||
|
|
||||||
<div class="service-card">
|
|
||||||
<div class="service-head">
|
|
||||||
<a href="https://grafana.local" target="_blank">grafana.homelab</a>
|
|
||||||
<span class="badge-online">[ONLINE]</span>
|
|
||||||
</div>
|
|
||||||
<p style="font-size: 0.8rem; color: var(--text-muted); margin-bottom: 6px;">Telemetry & Prometheus monitoring dashboards.</p>
|
|
||||||
<div class="service-meta">
|
|
||||||
<span>PORT: :3000</span>
|
|
||||||
<span>HTTPS</span>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="service-card">
|
|
||||||
<div class="service-head">
|
|
||||||
<a href="https://vault.local" target="_blank">vault.homelab</a>
|
|
||||||
<span class="badge-online">[ONLINE]</span>
|
|
||||||
</div>
|
|
||||||
<p style="font-size: 0.8rem; color: var(--text-muted); margin-bottom: 6px;">HashiCorp Vault secret storage & certificates.</p>
|
|
||||||
<div class="service-meta">
|
|
||||||
<span>PORT: :8200</span>
|
|
||||||
<span>mTLS</span>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="service-card">
|
|
||||||
<div class="service-head">
|
|
||||||
<a href="https://nextcloud.local" target="_blank">cloud.homelab</a>
|
|
||||||
<span class="badge-online">[ONLINE]</span>
|
|
||||||
</div>
|
|
||||||
<p style="font-size: 0.8rem; color: var(--text-muted); margin-bottom: 6px;">Private encrypted document & data storage.</p>
|
|
||||||
<div class="service-meta">
|
|
||||||
<span>PORT: :443</span>
|
|
||||||
<span>HTTPS</span>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="service-card">
|
|
||||||
<div class="service-head">
|
|
||||||
<a href="https://wireguard.local" target="_blank">vpn.homelab</a>
|
|
||||||
<span class="badge-internal">[INTERNAL]</span>
|
|
||||||
</div>
|
|
||||||
<p style="font-size: 0.8rem; color: var(--text-muted); margin-bottom: 6px;">WireGuard mesh overlay network ingress.</p>
|
|
||||||
<div class="service-meta">
|
|
||||||
<span>UDP: :51820</span>
|
|
||||||
<span>VPN</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 ARCHITECT & CYBERSECURITY RESEARCHER</div>
|
|
||||||
|
|
||||||
<p class="bio-prose">
|
|
||||||
Computer Science & Cybersecurity student at the University of Alabama College of Engineering.
|
|
||||||
Specializing in low-level network forensics, self-hosted infrastructure resilience, and hardened Linux kernel configurations.
|
|
||||||
</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>[#hashicorp-vault]</span>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<h2 class="section-title">featured_projects</h2>
|
|
||||||
|
|
||||||
<div class="project-card">
|
|
||||||
<div class="project-title">mesh-topology-builder</div>
|
|
||||||
<p style="font-size: 0.85rem; color: var(--text-primary);">
|
|
||||||
Automated WireGuard mesh network provisioner written in POSIX shell and Python. Generates deterministic keypairs and Traefik routing rules.
|
|
||||||
</p>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="project-card">
|
|
||||||
<div class="project-title">pcap-forensics-parser</div>
|
|
||||||
<p style="font-size: 0.85rem; color: var(--text-primary);">
|
|
||||||
High-throughput PCAP packet analyzer built for CTF competitions to detect anomalous TCP handshake flags and hidden ICMP payloads.
|
|
||||||
</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-08-02 | #HOMELAB</div>
|
|
||||||
<a href="#" class="article-link">Hardening Traefik Ingress with HashiCorp Vault mTLS</a>
|
|
||||||
<p style="font-size: 0.78rem; color: var(--text-muted);">Zero-trust certificate auto-renewal pipeline configuration.</p>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="article-item">
|
|
||||||
<div class="article-date">2026-07-18 | #CTF</div>
|
|
||||||
<a href="#" class="article-link">DEFCON CTF Qualifier: Memory Corruption & Heap Exploitation</a>
|
|
||||||
<p style="font-size: 0.78rem; color: var(--text-muted);">Deconstructing glibc malloc chunk metadata manipulation.</p>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="article-item">
|
|
||||||
<div class="article-date">2026-06-29 | #LINUX</div>
|
|
||||||
<a href="#" class="article-link">Custom Linux Kernel Compilation for BPF Network Tracing</a>
|
|
||||||
<p style="font-size: 0.78rem; color: var(--text-muted);">Configuring eBPF probe hooks for real-time socket inspection.</p>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="article-item">
|
|
||||||
<div class="article-date">2026-05-14 | #HYPRLAND</div>
|
|
||||||
<a href="#" class="article-link">Minimalist Dotfiles & Hyprland Keybindings Optimization</a>
|
|
||||||
<p style="font-size: 0.78rem; color: var(--text-muted);">Ergonomic modal editing & window tiling configuration setup.</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="Type :help, :open <service>, or press Ctrl+K for commands..." readonly>
|
|
||||||
</footer>
|
|
||||||
|
|
||||||
</body>
|
|
||||||
</html>
|
|
||||||
@@ -1,384 +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>
|
|
||||||
<span class="status-dot"></span>
|
|
||||||
<span>RIVER ROOKS // TREE EXPLORER</span>
|
|
||||||
</div>
|
|
||||||
<div>
|
|
||||||
<span>POSITION: /home/river/services/grafana.md</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, 'grafana')">grafana.md <span>[SVC]</span></div>
|
|
||||||
<div class="tree-item" onclick="selectItem(this, 'vault')">vault.md <span>[SVC]</span></div>
|
|
||||||
<div class="tree-item" onclick="selectItem(this, 'wireguard')">wireguard.md <span>[SVC]</span></div>
|
|
||||||
|
|
||||||
<div class="tree-folder">▾ /notes/</div>
|
|
||||||
<div class="tree-item" onclick="selectItem(this, 'traefik-note')">traefik-mtls.md <span>[BLOG]</span></div>
|
|
||||||
<div class="tree-item" onclick="selectItem(this, 'ctf-note')">defcon-ctf.md <span>[BLOG]</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: Grafana Service -->
|
|
||||||
<div class="doc-path">file:///home/river/services/grafana.md</div>
|
|
||||||
<h1 class="doc-title">Service: grafana.homelab</h1>
|
|
||||||
|
|
||||||
<p>
|
|
||||||
Primary telemetry and Prometheus monitoring dashboard. Aggregates host node resource usage, Docker container stats, and Traefik router throughput.
|
|
||||||
</p>
|
|
||||||
|
|
||||||
<div class="code-block">
|
|
||||||
<div class="code-header">docker-compose.yml</div>
|
|
||||||
<div class="code-content">
|
|
||||||
<span style="color: var(--accent-cyan);">services:</span>
|
|
||||||
<span style="color: var(--accent-cyan);">grafana:</span>
|
|
||||||
image: grafana/grafana-oss:latest
|
|
||||||
container_name: homelab_grafana
|
|
||||||
ports:
|
|
||||||
- "3000:3000"
|
|
||||||
restart: unless-stopped
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="tag-cluster">
|
|
||||||
<span>[#homelab]</span>
|
|
||||||
<span>[#prometheus]</span>
|
|
||||||
<span>[#telemetry]</span>
|
|
||||||
<span>[STATUS: ONLINE]</span>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
</div>
|
|
||||||
</main>
|
|
||||||
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<!-- Bottom Status Bar -->
|
|
||||||
<footer class="status-bar">
|
|
||||||
<div>UTF-8 | LF | POSIX Shell</div>
|
|
||||||
<div>Use Arrow Keys / Mouse to inspect workspace items</div>
|
|
||||||
</footer>
|
|
||||||
|
|
||||||
<script>
|
|
||||||
const docs = {
|
|
||||||
'grafana': `
|
|
||||||
<div class="doc-path">file:///home/river/services/grafana.md</div>
|
|
||||||
<h1 class="doc-title">Service: grafana.homelab</h1>
|
|
||||||
<p>Primary telemetry and Prometheus monitoring dashboard. Aggregates host node resource usage, Docker container stats, and Traefik router throughput.</p>
|
|
||||||
<div class="code-block">
|
|
||||||
<div class="code-header">docker-compose.yml</div>
|
|
||||||
<div class="code-content">
|
|
||||||
<span style="color: var(--accent-cyan);">services:</span>
|
|
||||||
<span style="color: var(--accent-cyan);">grafana:</span>
|
|
||||||
image: grafana/grafana-oss:latest
|
|
||||||
container_name: homelab_grafana
|
|
||||||
ports:
|
|
||||||
- "3000:3000"
|
|
||||||
restart: unless-stopped
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="tag-cluster"><span>[#homelab]</span><span>[#prometheus]</span><span>[#telemetry]</span><span>[STATUS: ONLINE]</span></div>
|
|
||||||
`,
|
|
||||||
'vault': `
|
|
||||||
<div class="doc-path">file:///home/river/services/vault.md</div>
|
|
||||||
<h1 class="doc-title">Service: vault.homelab</h1>
|
|
||||||
<p>HashiCorp Vault cluster managing secrets, SSH keys, internal PKI certificates, and mTLS auto-renewal for homelab nodes.</p>
|
|
||||||
<div class="code-block">
|
|
||||||
<div class="code-header">vault-config.hcl</div>
|
|
||||||
<div class="code-content">
|
|
||||||
storage "file" { path = "/vault/file" }
|
|
||||||
listener "tcp" { address = "0.0.0.0:8200" tls_disable = 0 }
|
|
||||||
ui = true
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="tag-cluster"><span>[#vault]</span><span>[#security]</span><span>[#mtls]</span><span>[STATUS: ONLINE]</span></div>
|
|
||||||
`,
|
|
||||||
'wireguard': `
|
|
||||||
<div class="doc-path">file:///home/river/services/wireguard.md</div>
|
|
||||||
<h1 class="doc-title">Service: wireguard.homelab</h1>
|
|
||||||
<p>Encrypted WireGuard mesh network ingress connecting offsite cloud VPS nodes directly to the internal homelab network.</p>
|
|
||||||
<div class="tag-cluster"><span>[#networking]</span><span>[#wireguard]</span><span>[#vpn]</span><span>[STATUS: INTERNAL]</span></div>
|
|
||||||
`,
|
|
||||||
'traefik-note': `
|
|
||||||
<div class="doc-path">file:///home/river/notes/traefik-mtls.md</div>
|
|
||||||
<h1 class="doc-title">Hardening Traefik Ingress with HashiCorp Vault mTLS</h1>
|
|
||||||
<p>Technical write-up detailing zero-trust certificate auto-renewal pipelines using Vault PKI backend and Traefik dynamic configuration reloads.</p>
|
|
||||||
<div class="tag-cluster"><span>[#blog]</span><span>[#traefik]</span><span>[#security]</span><span>[DATE: 2026-08-02]</span></div>
|
|
||||||
`,
|
|
||||||
'ctf-note': `
|
|
||||||
<div class="doc-path">file:///home/river/notes/defcon-ctf.md</div>
|
|
||||||
<h1 class="doc-title">DEFCON CTF Qualifier: Memory Corruption Write-Up</h1>
|
|
||||||
<p>Deep-dive analysis on exploitation techniques involving glibc malloc heap metadata corruption and arbitrary write primitives.</p>
|
|
||||||
<div class="tag-cluster"><span>[#ctf]</span><span>[#binary]</span><span>[#pwn]</span><span>[DATE: 2026-07-18]</span></div>
|
|
||||||
`,
|
|
||||||
'whoami': `
|
|
||||||
<div class="doc-path">file:///home/river/resume/whoami.md</div>
|
|
||||||
<h1 class="doc-title">River Rooks - Biography</h1>
|
|
||||||
<p>Cybersecurity student at the University of Alabama College of Engineering, focusing on network forensics, self-hosted infrastructure, and hardened kernel configs.</p>
|
|
||||||
<div class="tag-cluster"><span>[#cs]</span><span>[#cybersecurity]</span><span>[#resume]</span></div>
|
|
||||||
`,
|
|
||||||
'stack': `
|
|
||||||
<div class="doc-path">file:///home/river/resume/active_stack.conf</div>
|
|
||||||
<h1 class="doc-title">Active Engineering Stack</h1>
|
|
||||||
<p>System configuration & tech stack specifications:</p>
|
|
||||||
<div class="code-block">
|
|
||||||
<div class="code-header">stack.conf</div>
|
|
||||||
<div class="code-content">
|
|
||||||
LANGUAGES="POSIX sh, Python, C, Lua"
|
|
||||||
TOOLS="Docker, Traefik, WireGuard, HashiCorp Vault, Neovim"
|
|
||||||
OS="Arch Linux / POSIX Compliance"
|
|
||||||
</div>
|
|
||||||
</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,473 +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>
|
|
||||||
</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">AGY-Node-A2</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">Engine:</span>
|
|
||||||
<span class="status-value">Vanilla JS</span>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</aside>
|
|
||||||
|
|
||||||
<!-- Right Pane - Scrollable List of Cards -->
|
|
||||||
<main class="right-pane">
|
|
||||||
<div class="scroll-content">
|
|
||||||
<h2 class="section-title">Developer Workspace Projects</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</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.
|
|
||||||
</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</span>
|
|
||||||
</div>
|
|
||||||
<p class="tile-description">
|
|
||||||
Automated configuration generator for 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</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.
|
|
||||||
</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</span>
|
|
||||||
</div>
|
|
||||||
<p class="tile-description">
|
|
||||||
Minimalist boot sector and initial kernel bootstrap for ARM Cortex-M microcontrollers to handle memory map initialization 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</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.
|
|
||||||
</p>
|
|
||||||
</a>
|
|
||||||
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<footer class="pane-footer">
|
|
||||||
<span>Split Panel Spec Sample</span>
|
|
||||||
<span>© 2026 Developer System</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