# How this website was vibe coded

This very site is a vibe coding project. Below is the actual prompt that
started it, followed by the decisions made along the way. Steal the
approach: describe what you want, answer the clarifying questions, then
let the build happen.

---

## The initial prompt (verbatim, voice-dictated)

> I would like to make a website here called steal my vibe code that
> would provide vibe code examples and helpers and snippets for people
> to be able to use, period. My main focus is education, and so I want
> an educational section, but I also want tabs at the top for small
> apps. games and fun. websites, then education. Or, actually, you can
> call it online education. How I want it to be set up is, um, with a
> spot for a a screenshot or a preview of what the app is, a link to
> the working app if there is one, and then a place where an accordion
> can be popped down to be able to see the code and ability to copy the
> code and area if there's any kind of file helper, like an MD file or
> something like that that somebody could download to to use as part of
> their vibe coding. maybe the space for the name and the purpose. So
> I'm picturing all that information on the left and then the thumbnail
> of it on the right hand side. Like, a good way to organize things
> both on screen and as a website, period. I'm wondering about
> organizing it like a Jekyll website with MD files. Please map out
> this whole project, ask questions for clarification, and to get a
> clear picture of how to proceed before building anything.

Notice what the prompt does well:

- Names the thing and its audience (people learning to vibe code)
- Describes the layout in plain words ("info on the left, thumbnail on
  the right", "an accordion can be popped down")
- Lists the required pieces: preview, live link, viewable/copyable
  code, downloadable helper files, name, purpose
- Suggests a technical direction (Jekyll + Markdown files) without
  demanding it
- Asks for a plan and clarifying questions **before** any building

## The clarifying questions, and the decisions

The AI came back with a full project map and four questions. These were
the answers that shaped the site:

**1. Where should it be hosted and built?**
Decision: **GitHub Pages + Jekyll.** Free hosting, and the site
rebuilds automatically on every push. Each project on the site is one
Markdown file with settings at the top — adding a project never means
editing HTML.

**2. Placeholder content or working examples?**
Decision: **Build real working apps for every category** — heaviest on
online education (knowledge check, flip cards, crossword), plus games
and small apps — and add "coming soon" placeholder cards for projects
to be shared later.

**3. What visual personality?**
Decision: **Playful & bold.** Bright category colors, chunky rounded
cards, big friendly type, a little humor. It fits the cheeky name and
an audience of beginners.

**4. Is the Online Education tab something special?**
Decision: **Same card format as every other tab**, holding
education-themed projects — consistency over complexity.

## The architecture that came out of it

- `_projects/` — one `.md` file per project (title, category, purpose,
  thumbnail, live link, code files, helper downloads)
- `code/<slug>/index.html` — each app is a single self-contained HTML
  file that doubles as its own live demo
- Four category pages generated from one shared card component
- Code accordions fetch the real source file on demand, with syntax
  highlighting and a copy button
- Every app keeps its editable content (questions, decks, settings) in
  a clearly-marked "EDIT ME" section so learners can remix without
  touching the engine

## The lesson

One clear voice-dictated prompt, four answered questions, and the
whole site — layout, categories, eight working apps, and the deploy —
followed from there. Vibe coding works best when you describe the
destination and make the decisions, and let the AI handle the road.