⏴ Back to drewkkennedy.com
README.TXT — How This Site Was Built

How this site was built

A colophon • because the site is the work sample

This whole thing is a handful of small files with zero dependencies — one HTML page, one stylesheet, a few plain scripts. No framework, no build step, no libraries, nothing loaded from a CDN. Everything you've clicked, heard, or played is vanilla HTML, CSS, and JavaScript. Here's what's actually under the hood.

$ stack — HTML5 • CSS3 • vanilla JavaScript • Canvas 2D • Web Audio API
$ dependencies — 0
$ build step — none. what ships is exactly what's in the repo.

♫ A MIDI synthesizer, from scratch

The background music isn't an MP3 — it's real .mid files. I wrote a binary MIDI parser (tracks, tempo maps, running status, variable-length quantities) and a Web Audio synth that voices each channel with its own oscillator waveform, synthesizes drums from filtered noise, and schedules notes ahead of the clock with a polyphony guard. The Winamp-style deck shuffles a playlist and only crawls the track title when it overflows the display.

Binary parsingWeb AudioReal-time scheduling

🕹 DEFEND.EXE — a full arcade game

Hidden behind any window's × button (or the Konami code) is a complete fixed-shooter: enemy entrance choreography, dive-bombers, a between-wave shop with a currency, bosses, a persistent hi-score leaderboard with arcade initials entry, and WebAudio sound effects. Runs on a fixed-timestep loop, renders to canvas, and plays with keyboard or touch.

Game loopCanvas renderingState machinelocalStorage

🌈 Canvas particle systems

The nyan cats are animated SVG sprites that shed an interpolated rainbow trail on canvas — click one and it divides (mitosis, capped at eight; leave them alone and they merge back). Plus a cursor sparkle trail, physics-based confetti, and five full-screen weather modes (pixel snow, rain, TV static, an aurora, and a MIDI-note flurry). Every canvas renders at capped DPI so it stays smooth on high-resolution displays.

Canvas 2DParticle simPerf budgeting

🖥 A Windows-9x UI kit

Every beveled window, title bar, inset terminal, chunky scrollbar, and pressed-button state is bespoke CSS — outset/inset borders, drop shadows, the works. The window controls are live: minimize collapses, maximize protests, and closing one has consequences. There's also a draggable popup engine, a Netscape-style status bar, a real visitor counter, and a Firebase-backed guestbook.

CSS systemsDOMFirebase

♿ Built responsibly

All of it respects prefers-reduced-motion (animations and effects stand down), has a print stylesheet, uses semantic landmarks and focus styles, gates hover-only effects behind the right media queries, and pauses animation work when the tab is hidden. Personality doesn't have to cost accessibility.

A11yReduced-motionPrint CSS

How this was actually built

Full transparency: I built this with AI coding agents in the loop. I didn't hand-type every character — and I don't think that's the flex it used to be. The honest version of the process is the part I actually find interesting.

Execution got cheap. Judgment got expensive.

For most of my career the ceiling on what I could build was whatever I could personally execute: to ship in a language I had to know it cold, and my own hands were the constraint. That constraint is mostly gone. What replaced “how fast can I type” is “how well can I direct” — and those are very different limits.

So the work that shipped this wasn't typing. It was deciding what to build, breaking it into clean pieces, holding the architecture in my head while the parts got written, and — the part that matters most — catching the output when it was confidently, plausibly wrong. Agents fail in specific, predictable ways, and the leverage you get from one scales with your ability to tell correct from merely plausible. That judgment is the one input the tool can't supply, and it's the thing years of building this stuff by hand actually bought me. Every line here was read, steered, and shipped on purpose.

Things worth finding

A few rewards for the curious: the Konami code does something. So does clicking the × on a window you like. The weather menu on the toolbar is real. The DKK Store sells exactly one thing, for free, and it prints. And the console has a note for whoever opens it.

Curious how a specific piece works? The whole thing is readable in view-source, and I'm always happy to talk shop — hello@drewkkennedy.com.