The thesis: HTML-ization

Stop sending dead files. Every report, pitch, audit, deck, and analysis ships
as a live interactive HTML artifact on a deployed link — not a PDF attachment
that started rotting the second it was exported. The link is current because
the repo is. People forward links; they archive PDFs unread.

This repo is the proof. The book about building this kind of artifact is,
itself, this kind of artifact — a private GitHub repo deployed to a public
link, updated by commit, with two real interactive case studies embedded and
clickable inside it.

→ Read the thesis + click the embeds: dive.vladyslavpodoliako.com/html-first

Read it (the site is the book)

The repo is how it's built. The site is what it IS.

Press ⌘K anywhere on the site — search every chapter, page, section
anchor, glossary term, and research note from one box.

The 3 case studies, embedded and clickable

The HTML-ization page doesn't describe the method — it shows it, with three
real artifacts the operator-Claude workflow produced:

• AFC — the pitch deck. Vlad's "Autonomous Fighting Championship" — a
  dinner-table idea ("robots in an octagon"); friends asked for a deck; one got
  spun up fast as interactive HTML before the next meeting did. (open it)
• AFC — the robot stable. Companion doc: every humanoid platform shipping
  in 2026, filterable, with a profit-per-fighter calculator. (open it)
• The 90-domain deliverability audit (sanitized sample). A real Folderly
  external audit of a ~90-domain / ~5K-mailbox cold-email estate — swarmed in
  days, delivered as a clickable interactive doc instead of a 40-page PDF.
  Client, every domain, every infra fingerprint de-identified before
  publication. (open it)

What's in this repo (the receipts)

• 39 chapters in src/content/chapters/*.mdx
• 25 React/Astro widgets in src/widgets/ (live LMArena leaderboard, sortable tier list, command palette, token-burn calculator, swarm visualizer, persona-agent walkthrough, …)
• 25 standalone pages in src/pages/ (the surfaces in the table above + the journey, sections index, showcase, vault starter, weekend builds, and more)
• 52 glossary terms in src/lib/glossary.ts
• 9 dated research notes in src/lib/research-notes.ts
• 3 embedded interactive artifacts in public/artifacts/ — single-file, self-contained, sandboxed-iframe-embedded on /html-first
• 18 copy-paste prompt templates + 9 hook templates + 5 CLAUDE.md skeletons + 8 SKILL.md templates in src/lib/snippets.ts

The auto-updated LMArena leaderboard widget
pulls live from the HuggingFace datasets-server API — the rest of the site is
static HTML.

How it's built (5 bullets)

1. Astro 5 static site generator (astro build). Server components by
   default; React 18 islands only where interaction needs them.
2. MDX for chapter content with custom Astro components
   (<Callout>, <PullQuote>, <TLDR>, <ScreenshotPlaceholder>,
   <GlossaryTooltip>).
3. Tailwind 3 with project design tokens
   (--accent: #FF6B2C, --paper, --line, etc.).
4. GitHub Pages auto-deploy via .github/workflows/deploy.yml — push to
   main, live in ~90 seconds at dive.vladyslavpodoliako.com.
5. Built by a swarm of Claude Code agents in parallel — content migration,
   widget builds, design system, security scrubbing, deploy pipeline. The
   process is the technique the book describes; the artifact IS the technique.

Run locally

npm install
npm run dev      # http://localhost:4321
npm run build    # static output → dist/
npm run preview  # serve dist/ locally

Requires Node 20+.

Add a chapter

1. Drop a new MDX file into src/content/chapters/ matching the schema in
   src/content/config.ts.
2. Add the chapter to the ordered list in src/lib/chapters.ts.
3. The dynamic route at src/pages/chapters/[slug].astro picks it up.

To add a whole new page (resources, /tier-list-style surface, etc.), the
six wiring surfaces are codified in the
playbook-new-page skill: page
file · ⌘K index · chapter cross-link · glossary term · homepage tile ·
changelog.

Credits

Written and built by Vlad Podoliako — Founder & CEO of Belkins,
founder of Folderly, and operator across a portfolio
of others.

• 📬 Vlad's Newsletter (10K+ subscribers)
• 🌐 vladyslavpodoliako.com
• 🎧 Spotify (AI-native music side project)

The book teaches the technique. The artifact IS the technique. The repo is
how it's built — but the site is what it IS.

→ dive.vladyslavpodoliako.com

License

• Code — MIT. Copy the Astro + Tailwind + widget structure into your own
  living-link artifacts; that's the entire point.
• Content — CC BY-NC-SA 4.0. Read it, share it, quote it, credit it; don't
  resell it.

See LICENSE.