TL;DR: I built 7 fully interactive, cyberpunk-themed pages for primenetwork.me in a single evening. No React, no Tailwind, no build step. Just vanilla HTML, CSS, and JavaScript — 171KB total across all pages. I used Claude Code running 6 parallel agents to ship everything simultaneously. Here's the breakdown.
Why I Did This
My personal site primenetwork.me had a landing page and not much else. I wanted pages that felt like you were jacking into a terminal from a William Gibson novel — not a portfolio template from 2019.
The constraint: zero dependencies. No npm install. No framework. No build pipeline. Every page had to be a single self-contained HTML file that loads instantly.
The Design System
Before touching any pages, I locked down a design system using CSS custom properties. Every page shares the same DNA:
:root {
--bg: #0a0a0a;
--green: #00ff41;
--cyan: #00d4ff;
--dim: #1a3a1a;
--card-bg: #0d0d0d;
--border: #0f3d0f;
--text: #b0ffb0;
--muted: #3a6a3a;
--red: #ff3333;
--yellow: #ffaa00;
--magenta: #ff00ff;
}
JetBrains Mono for everything. Green-on-black as the base palette with cyan and magenta accents. Every page gets the same CRT scanline overlay:
body::after {
content: '';
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: repeating-linear-gradient(
0deg,
transparent,
transparent 2px,
rgba(0, 255, 65, 0.03) 2px,
rgba(0, 255, 65, 0.03) 4px
);
pointer-events: none;
z-index: 9999;
}
That pointer-events: none is critical — the overlay is purely visual and never blocks interaction. The scanlines are subtle enough (3% opacity) to add texture without hurting readability.
The 7 Pages
1. Digital Archives — /archives.html
20 curated links to the best retro internet archives still alive — Phrack Magazine (1985), 2600 The Hacker Quarterly, textfiles.com, Geocities mirror, Cult of the Dead Cow, Exploit-DB, and more. Organized into sections: Zines, Mega Archives, Security, Demoscene, BBS History. Each card has color-coded tags, numbered indexes, and a terminal glow on hover.
2. Hacker History Timeline — /timeline.html
30 events from 1963 to 2024 covering the most important moments in hacking history. MIT's first video game, Captain Crunch, the Morris Worm, DEF CON 1, Mitnick, Stuxnet, Snowden, WannaCry. Scroll-triggered fade-in animations using IntersectionObserver, color-coded category tags (HACK, CULTURE, MALWARE, LAW, LEAK), and a glowing vertical timeline with nodes.
3. Cyber Toolkit — /tools.html
10 browser-based security tools that actually work. All client-side, no data leaves your machine:
- Base64 encode/decode
- SHA-256 hashing (Web Crypto API)
- MD5 (pure JS implementation)
- JWT decoder
- ROT13, Hex/ASCII converter
- Subnet calculator
- URL encode/decode
- Unix timestamp converter
- Password generator (crypto.getRandomValues)
I actually use this page myself now instead of going to random websites.
4. The Wall — /wall.html
An ASCII graffiti wall. Type a message, pick a color (green, cyan, magenta, amber, red), hit SPRAY. Messages render as Unicode box-bordered cards with random rotation, anonymous handles, and timestamps. 16 pre-loaded classics: "HACK THE PLANET", "FREE KEVIN", "ALL YOUR BASE ARE BELONG TO US". localStorage persistence, no backend.
5. Pirate Radio — /music.html
This one's my favorite. A chiptune synthesizer built entirely on the Web Audio API. Four tracks generated procedurally using OscillatorNodes — square waves, sawtooth, triangle. No audio files exist. The browser IS the instrument.
The frequency visualizer pulls data from an AnalyserNode and renders bars on a canvas. Volume control, track switching, ON AIR indicator. FM 133.7 — unauthorized frequency.
6. Required Reading — /bookshelf.html
22 books styled as ls -la terminal output. File permissions, page counts as file sizes, publication years as dates. Click a file and cat neuromancer.txt expands with the review.
Categories as directories: CYBERPUNK/, HACKING/, SYSTEMS/, MIND/. Includes Neuromancer, The Cuckoo's Egg, Ghost in the Wires, Hacking: Art of Exploitation, and my own books highlighted as Author's Picks.
7. War Room — /threatmap.html
The crown jewel. A simulated global threat intelligence dashboard. ASCII world map on canvas with animated attack lines flying between countries. Live threat feed color-coded by severity. Stats dashboard with incrementing counters. Top attackers table. System status bars.
"UNCLASSIFIED — FOR OFFICIAL USE ONLY"
Leave it open on a second monitor. You're welcome.
The Numbers
| Metric | Value |
|---|---|
| Total size (all 7 pages) | 171KB |
| External dependencies | 0 |
| Build tools required | 0 |
| npm packages | 0 |
| Time to interactive | <0.5s |
For context, a bare create-react-app ships ~200KB of JavaScript alone before you write a single line of code.
The Build Process: 6 Parallel AI Agents
I used Claude Code to build all 7 pages. The key insight: Claude Code supports running multiple agents in parallel. I spun up 6 agents, each working on different pages simultaneously with the shared design system as their constraint.
The workflow:
- Define the CSS variables and shared patterns (scanlines, fonts, glow effects)
- Describe each page concept with specific API requirements (Web Audio for Radio, Canvas for War Room, etc.)
- Launch 6 agents in parallel
- Review, refine, ship
Total wall-clock time from concept to all 7 pages live: about 20 minutes. The parallel approach meant I was reviewing finished pages while others were still being generated.
What I Learned
Vanilla JS is fast enough. Every "you need a framework for that" instinct was wrong. The browser APIs — IntersectionObserver, Web Audio, Canvas, Web Crypto — are incredibly powerful.
CSS custom properties are the only design system you need. Change one variable, the entire site updates. No Sass. No styled-components. No theme provider.
Single-file pages are underrated. Each page is self-contained. No broken imports, no missing chunks, no hydration errors. Deploy by copying files.
Check It Out
All 7 pages are live at primenetwork.me:
View source on any of them. It's readable. That's the point.
Built with Claude Code and zero regrets about skipping the framework.
Top comments (0)