📖 How this presentation was built — a Copilot origin story

## Meta: Building a Copilot Training with Copilot

> The most on-brand thing about this slide deck is that it was built almost entirely using GitHub Copilot. Here's the full story.

---

## The brief

The goal was a **tongue-in-cheek hackathon training** covering every place you can use GitHub Copilot: the GitHub UI, IDEs, the CLI, the desktop app, Custom Agents, and Agent Skills — all framed around winning a company hackathon.

---

## How it was built

### 1. Repository & GitHub Pages setup
The repo was created and configured entirely via the `gh` CLI:

```bash
gh repo create beardofedu/hackathon-winners --private --clone
gh api repos/beardofedu/hackathon-winners/pages --method POST --field "source[branch]=main" --field "source[path]=/"
```

### 2. The slide deck

**Framework:** [reveal.js](https://revealjs.com/) 5.1.0 loaded via CDN. The entire presentation lives in a single `index.html` — no build step, no dependencies.

**Initial generation:** Copilot drafted the full slide structure, CSS, and reveal.js configuration from a single prompt describing the brief.

**Fixing overflow/scaling:** The default reveal.js `night` theme sets a `40px` base font size. Everything is sized in `em`, so overriding `.reveal { font-size: 26px }` fixed all overflow issues proportionally. Explicit dimensions (`width: 1280, height: 720`) and `overflow: hidden` on slides were also added.

### 3. Bob's Burgers GIFs

Each section title slide got a Bob's Burgers GIF for comic effect. Sourced from Tenor's public API (`g.tenor.com/v1/search`) since Giphy embed pages are JS-rendered and unreliable for direct `` tags.

| Section | Character | GIF |
|---|---|---|
| 🌐 GitHub UI | Tina excited | `media.tenor.com/yT4-1VZRw5cAAAAC/...` |
| 💻 IDE | Bob "gotta go cook" | `media.tenor.com/1WjDfM2uUFgAAAAC/...` |
| ⌨️ CLI | Louise laughing | `media.tenor.com/8wpEhkk0WEIAAAAC/...` |
| 🖥️ Copilot App | Gene with accordion | `media.tenor.com/MfDj6dpplDAAAAAC/...` |
| 🚀 Strategy | Tina party time | `media.tenor.com/ix1_ykVg2P4AAAAC/...` |
| 🤖 Agents & Skills | Whole Belcher family | `media.tenor.com/fnfv7k8wSpMAAAAC/...` |

### 4. Content accuracy passes

Each section was reviewed against official GitHub docs and updated to fix gaps or outdated information:

**Copilot App** — reviewed against [github.com/features/ai/github-app](https://github.com/features/ai/github-app). Key correction: the app is a **downloadable desktop application** (macOS/Windows/Linux), not a web chat UI. Added: "My Work" dashboard, session isolation, parallel agents, Agent Merge.

**Agent Skills & Custom Agents** — new section added based on:
- [About agent skills](https://docs.github.com/en/copilot/concepts/agents/about-agent-skills)
- [About custom agents](https://docs.github.com/en/copilot/concepts/agents/cloud-agent/about-custom-agents)

Covers `.github/skills/`, `~/.copilot/skills/`, `gh skill install`, and `.github/agents/NAME.md` profiles.

**GitHub Copilot CLI** — reviewed against [CLI best practices docs](https://docs.github.com/en/copilot/how-tos/copilot-cli/cli-best-practices). Key correction: the old slides described the `gh copilot` extension (`suggest`/`explain` subcommands). The CLI is now a **standalone agentic tool** (`copilot` command) with:
- `/plan` — structured planning with `plan.md` checkpoint
- `/delegate` — async PR via cloud agent
- `/fleet` — parallel sub-agents
- `/model` — runtime model switching (Claude Opus 4.5 default)
- Infinite sessions, multi-repo (`/add-dir`), image input, autopilot mode

**IDE (Chat)** — reviewed against [Getting started with Chat in your IDE](https://docs.github.com/en/enterprise-cloud@latest/copilot/how-tos/chat-with-copilot/get-started-with-chat-in-your-ide). Additions:
- `#terminalLastCommand`, `#git`, `#editor` context variables
- `/new` and `/newNotebook` slash commands for instant scaffolding
- `@project` participant for JetBrains (not `@workspace`)
- Accurate feature tags per IDE (VS Code, JetBrains, Visual Studio, Eclipse)

---

## Commit history

Every content pass was committed with a descriptive message. The full history shows the evolution from initial generation → overflow fixes → GIFs → content accuracy passes.

```bash
git log --oneline
```

---

## Lessons learned (very on-brand for a Copilot training)

- **Fetch docs directly** — marketing pages are often JS-rendered and return empty content. Use the `/en/` docs URLs for reliable markdown.
- **Tenor > Giphy** for direct `` GIF embeds — Tenor's v1 API returns working media URLs.
- **One CSS override fixed everything** — reveal.js scales everything in `em`, so fixing the base font size cascades to all elements.
- **Copilot wrote ~95% of this slide deck** — the human contribution was mostly directing, fact-checking against docs, and adding Bob's Burgers jokes.

---

*This issue was also written by Copilot. We're in the matrix now.*

The issue describes an existing presentation in index.html, built with reveal.js and tracked in git history. Start by reading index.html and running git log --oneline to understand the current deck. No concrete documentation change or acceptance criteria is specified, so the intended definition of done needs clarification.

Written by the indexing model from the issue text.