# Brighton Ruby — Building with AI

Two browser-based slide decks for the event, plus a small landing page that
links to both:

- **Conference talk** — "You Matter More," a 20-slide keynote with a synced
  speaker-notes popout (presenter view).
- **Workshop** — "Building with AI," a 19-slide working session for engineering
  leaders. Same branding/fonts/icons; slides only, no presenter view.

## Present

Open `index.html` in a browser (Chrome recommended) and pick a deck — each opens
in a new window, ready for fullscreen. Or open `conference-talk.html` /
`workshop.html` directly.

- **Navigate:** `→` / `Space` / click = next · `←` = previous · `Home` / `End` = first / last
- **Speaker notes (conference talk only):** press `S` (or `P`) to open the presenter window
- **Fullscreen:** press `F`

Both decks are authored at 1920×1080 and scale to fit any window, letterboxed.

### Presenter / speaker-notes window (conference talk)

Pressing `S` opens `conference-presenter.html` in a second window — put it on
your laptop screen while the main deck is on the projector (fullscreen). It shows:

- a live preview of the **current** slide,
- a preview of the **next** slide,
- the **speaker notes** for the current slide,
- a time-of-day clock and an elapsed timer (click the timer to reset).

Both windows stay in sync: navigate from either one (arrow keys, or the
Prev/Next buttons in the presenter window) and the other follows.

> A deck opts into a presenter window by setting `window.DECK_PRESENTER` to its
> URL (see the bottom of `conference-talk.html`). The workshop deck leaves it
> unset, so it has no presenter view. Popout sync uses direct
> `window.postMessage`, so it works straight from disk (`file://`). If your
> browser blocks the popup, allow popups for this page and press `S` again.

## Files

| File | Purpose |
| --- | --- |
| `index.html` | Landing page linking to both decks |
| `conference-talk.html` | The keynote — 20 slides as `<section>` elements |
| `conference-presenter.html` / `presenter.js` | Speaker-notes popout window (conference talk) |
| `workshop.html` | The workshop — 19 slides as `<section>` elements |
| `deck.css` | Stage scaling, letterbox, HUD, progress bar |
| `deck.js` | Navigation, fit-to-screen, presenter sync (shared by both decks) |
| `tokens.css` | BM design-system color & type tokens |
| `assets/` | Avatars (Hank, Ada, Brian) |

Fonts (Onest, Cal Sans) load from CDNs, so an internet connection gives the
intended typography; without it the decks fall back to system sans-serif.
