The mega project. Where everything led.
195 CSS design system showcases, 34 interactive stories, 47 tech guides, 19 browser games, a chiptune music studio, a daily AI newspaper, and creative tools. Zero build tools. Zero frameworks. Pure vanilla HTML/CSS/JS on GitHub Pages.
What started as a CSS style guide collection grew into a creative playground encompassing every form of web content imaginable. Each piece is self-contained, works without a build step, and deploys directly to GitHub Pages. The project proves that vanilla HTML/CSS/JS can do everything -- no React, no Webpack, no npm install. Just open a file in your browser.
Eight distinct content sections, each with its own aesthetic, purpose, and index page. Together they form an encyclopedic collection of creative web development.
The entire project runs on vanilla web technologies. No React, no Vue, no Angular, no Svelte. No Webpack, no Vite, no Rollup. No npm, no node_modules. Just HTML, CSS, JavaScript, and Google Fonts.
A flat file structure with section-based organization. Each section has its own index.html hub page with a card grid. Style guides and tech guides are single-file; stories, games, and tools can use multiple files. Shared modules prevent duplication across casino games and music videos.
/ +-- index.html // Master index (links to all sections) +-- styles/ 195 files // CSS design system showcases +-- stories/ 34 stories // Interactive educational stories | +-- briefs/ // Research briefs (Markdown) | +-- audio/ // Optional narration MP3s | +-- [story-name]/ // Each story in its own folder +-- techguides/ 47 guides // Styled developer reference docs +-- music/ // Chiptune music studio | +-- audio-tracker/ // FamiTracker-inspired sequencer | | +-- songs/ 76 songs | +-- visualizer/ 73 renderers | +-- base-renderer.js // Shared renderer factory | +-- video-utils.js // Shared helpers +-- games/ 19 games // Browser games | +-- casino-audio-engine.js // Shared casino audio | +-- casino-theme.css // Shared Vegas palette +-- tools/ 17 tools // Creative tools | +-- animator/ // Stick figure animation studio | +-- slides/ // HTML presentation viewer +-- news/ // The AI Dispatch (daily) +-- portfolio/ // Project showcases (you are here)
htmlstyleguides is the largest repository by a significant margin.
195 style guides, 19 games, a chiptune studio, and a daily newspaper -- all without a single npm package. The browser's built-in APIs (Canvas, Web Audio, IntersectionObserver, CSS Variables) are absurdly powerful. Most projects do not need React.
When every file just works by opening it in a browser, development velocity is unlimited. No waiting for compilers, no debugging build configs, no version conflicts. The constraint of "no build tools" became a creative accelerator.
Writing CSS from scratch for 195 different design systems is pure creative expression. Each style guide is a blank canvas. No fighting against component libraries or overriding framework defaults. Just you, CSS, and an idea.
As the project scaled past 400+ files, shared modules (casino-audio-engine.js, base-renderer.js, video-utils.js) kept things maintainable. The key insight: share infrastructure, not components. Let each file own its presentation.