venus/blog
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

initial commit

Browse Source
This commit is contained in:
venus
2026-07-24 07:10:18 -05:00
commit 0434835762
14 changed files with 3065 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

5
.dockerignore Normal file
View File

@@ -0,0 +1,5 @@
.git
.gitignore
Dockerfile
docker-compose.yml
*.md

15
Dockerfile Normal file
View File

@@ -0,0 +1,15 @@
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;"]

17
docker-compose.yml Normal file
View File

@@ -0,0 +1,17 @@
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

270
index.html Normal file
View File

@@ -0,0 +1,270 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>River Rooks | Systems Architecture & Cybersecurity</title>
<style>
@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:ital,wght@0,400;0,500;0,700;1,400&family=Inter:wght@400;500;700&family=JetBrains+Mono:ital,wght@0,400;0,500;1,400&display=swap');
:root {
--bg-canvas: #0d0f12; /* Deep slate/charcoal */
--bg-surface: #121417; /* Lighter surface background */
--border-color: #2b303b; /* Low-contrast 1px border */
--text-primary: #e0e6f0; /* Off-white prose */
--text-muted: #8a95a5; /* Monospaced metadata gray */
--accent: #00f0ff; /* High-visibility Cyan terminal accent */
}
* {
box-sizing: border-box;
margin: 0;
padding: 0;
}
body {
background-color: var(--bg-canvas);
color: var(--text-primary);
font-family: 'Inter', sans-serif;
line-height: 1.65;
min-height: 100vh;
display: flex;
justify-content: center;
align-items: center;
padding: 40px 24px;
}
.standalone-container {
width: 100%;
max-width: 65ch; /* Capped reading density */
}
/* Identity Header */
.author-name {
font-family: 'IBM Plex Mono', monospace;
font-size: 2.2rem;
font-weight: 700;
color: var(--text-primary);
margin-bottom: 8px;
letter-spacing: -0.02em;
}
.status-line {
display: flex;
align-items: center;
gap: 10px;
font-family: 'IBM Plex Mono', monospace;
font-size: 0.85rem;
color: var(--text-muted);
}
/* 8x8px Solid Active State Indicator Dot */
.status-dot {
width: 8px;
height: 8px;
background-color: var(--accent);
display: inline-block;
flex-shrink: 0;
}
/* 1px Solid Dividers */
.section-divider {
border: 0;
border-top: 1px solid var(--border-color);
margin: 32px 0;
}
/* Terminal Status Block */
.terminal-block {
border: 1px solid var(--border-color);
border-radius: 4px;
background-color: var(--bg-surface);
font-family: 'JetBrains Mono', monospace;
overflow: hidden;
margin-bottom: 32px;
}
.terminal-header {
background-color: var(--bg-canvas);
border-bottom: 1px solid var(--border-color);
padding: 8px 16px;
display: flex;
justify-content: space-between;
font-size: 0.78rem;
color: var(--text-muted);
}
.terminal-title {
color: var(--text-primary);
font-weight: 500;
}
.terminal-body {
padding: 16px;
font-size: 0.85rem;
line-height: 1.5;
}
.cmd-line {
color: var(--text-muted);
margin-bottom: 8px;
}
.prompt {
color: var(--accent);
font-weight: 700;
}
.cmd-output {
color: var(--text-primary);
}
.cursor-block {
display: inline-block;
width: 8px;
height: 15px;
background-color: var(--text-primary);
margin-left: 4px;
vertical-align: middle;
animation: blink 1s steps(2, start) infinite;
}
@keyframes blink {
to { visibility: hidden; }
}
/* Sections */
.section-title {
font-family: 'IBM Plex Mono', monospace;
font-size: 1.1rem;
font-weight: 700;
color: var(--text-primary);
margin-bottom: 12px;
}
.bio-section {
margin-bottom: 32px;
}
.bio-text {
font-size: 0.98rem;
color: var(--text-primary);
}
.stack-section {
margin-bottom: 32px;
}
.tag-cluster {
display: flex;
flex-wrap: wrap;
gap: 10px;
font-family: 'IBM Plex Mono', monospace;
font-size: 0.85rem;
}
.tag {
color: var(--text-muted);
}
/* Standalone Footer Links */
.footer-links {
font-family: 'IBM Plex Mono', monospace;
font-size: 0.85rem;
color: var(--text-muted);
display: flex;
flex-wrap: wrap;
gap: 12px;
align-items: center;
}
.footer-link {
color: var(--text-primary);
text-decoration: none;
padding: 2px 6px;
transition: none; /* Instant snap */
}
.footer-link:hover {
background-color: var(--accent);
color: var(--bg-canvas);
}
.footer-link:focus {
outline: 2px solid var(--accent);
outline-offset: -2px;
}
.pipe {
color: var(--border-color);
}
</style>
</head>
<body>
<main class="standalone-container">
<!-- Identity Header -->
<header class="identity-header">
<h1 class="author-name">River Rooks</h1>
<div class="status-line">
<span class="status-dot"></span>
<span class="status-text">SYSTEMS ARCHITECTURE &amp; CYBERSECURITY</span>
</div>
</header>
<hr class="section-divider">
<!-- Under Construction Terminal Block -->
<section class="terminal-section" aria-label="Status Terminal">
<div class="terminal-block">
<div class="terminal-header">
<span class="terminal-title">/var/log/status.txt</span>
<span>STDOUT</span>
</div>
<div class="terminal-body">
<div class="cmd-line"><span class="prompt">$</span> cat /var/log/status.txt</div>
<div class="cmd-output">
Under construction. Full site infrastructure is currently being provisioned. Routing traffic to temporary landing page...<span class="cursor-block"></span>
</div>
</div>
</div>
</section>
<!-- Biography -->
<section class="bio-section">
<h2 class="section-title">whoami</h2>
<p class="bio-text">
Cybersecurity student at the University of Alabama College of Engineering, focusing on network forensics, self-hosted infrastructure, and systems architecture.
</p>
</section>
<!-- Active Stack Tags -->
<section class="stack-section">
<h2 class="section-title">active_stack</h2>
<div class="tag-cluster">
<span class="tag">[#network-forensics]</span>
<span class="tag">[#docker-traefik]</span>
<span class="tag">[#arch-linux]</span>
<span class="tag">[#neovim]</span>
<span class="tag">[#wireguard]</span>
<span class="tag">[#posix-sh]</span>
<span class="tag">[#python]</span>
</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
nginx.conf Normal file
View File

@@ -0,0 +1,34 @@
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;
}

470
samples/companion.html Normal file
View File

@@ -0,0 +1,470 @@
<!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>

81
samples/design-specification.md Normal file
View File

@@ -0,0 +1,81 @@
# 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.

604
samples/document-flow.html Normal file
View File

@@ -0,0 +1,604 @@
<!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>

498
samples/homepage.html Normal file
View File

@@ -0,0 +1,498 @@
<!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>

85
samples/index.html Normal file
View File

@@ -0,0 +1,85 @@
<!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</title>
<style>
body {
background-color: #0d0f12;
color: #e0e6f0;
font-family: 'IBM Plex Mono', 'JetBrains Mono', monospace;
max-width: 600px;
margin: 80px auto;
padding: 20px;
}
h1 {
font-size: 1.5rem;
border-bottom: 1px solid #2b303b;
padding-bottom: 10px;
margin-bottom: 30px;
}
ul {
list-style-type: none;
padding: 0;
}
li {
margin: 20px 0;
padding: 15px;
border: 1px solid #2b303b;
border-radius: 4px;
background-color: #121417;
}
a {
color: #ffb000;
text-decoration: none;
font-weight: bold;
}
a:hover {
text-decoration: underline;
}
p {
color: #8a95a5;
font-size: 0.9rem;
margin-top: 8px;
margin-bottom: 0;
line-height: 1.5;
}
</style>
</head>
<body>
<h1>Design Spec Samples</h1>
<ul>
<li>
<a href="homepage.html">Sample 1: Developer Homepage (Terminal/Minimalist Spec)</a>
<p>
A premium, dark-mode native developer homepage modeled after modern, high-density terminal setups and IDEs. Adheres strictly to the guidelines: no glassmorphism, no rounded blobs, and pure solid color layouts.
</p>
</li>
<li>
<a href="split-panel.html">Sample 2: Split Panel Layout (ASCII Animation & Scrollable Tiles)</a>
<p>
A dashboard/panel layout with a sticky site nav header, a left panel featuring an animated terminal ASCII character, and a right panel containing a scrollable feed of developer project cards.
</p>
</li>
<li>
<a href="companion.html">Sample 3: Companion Layout (Interactive Daemon & Ultra-Minimal Cards)</a>
<p>
A 50/50 vertical split layout page where the left column contains content cards and the right column houses a persistent, reactive ASCII companion. Employs ultra-minimal borders and discrete state updates.
</p>
</li>
<li>
<a href="document-flow.html">Sample 4: Document Flow Layout (Scroll-Tracker Daemon & Seamless Document Stream)</a>
<p>
A continuous document reading flow that removes 4-sided bounding boxes and master-detail click affordances. Features a fixed left pane with an IntersectionObserver scroll-tracker daemon.
</p>
</li>
<li>
<a href="portfolio.html">Sample 5: River Rooks Portfolio (Single-Page Landing Page)</a>
<p>
A temporary, single-column digital business card and landing page conforming strictly to portfolio-spec.md. Features a 65ch centered flow, 8x8px active status dot, terminal stdout block, active stack tags, and piped link footer.
</p>
</li>
</ul>
</body>
</html>

49
samples/portfolio-spec.md Normal file
View File

@@ -0,0 +1,49 @@
# 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.

358
samples/portfolio.html Normal file
View File

@@ -0,0 +1,358 @@
<!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 &amp; CYBERSECURITY</span>
</div>
</header>
<hr class="section-divider">
<!-- B. Under Construction Terminal Block -->
<section class="terminal-section" aria-label="Status Terminal">
<div class="terminal-block">
<div class="terminal-header">
<span class="terminal-title">/var/log/status.txt</span>
<span>STDOUT</span>
</div>
<div class="terminal-body">
<div class="cmd-line"><span class="prompt">$</span> cat /var/log/status.txt</div>
<div class="cmd-output">
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>

106
samples/sample3-spec-sheet.md Normal file
View File

@@ -0,0 +1,106 @@
# 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.

473
samples/split-panel.html Normal file
View File

@@ -0,0 +1,473 @@
<!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>