# CLAUDE.md

This file provides guidance to Claude Code (claude.ai/code) when working with code in this repository.

## Project Overview

Presentation repository for "Elixir in the Real World: A Practical Introduction" — a ~50-minute talk at the GR Web Dev Meetup, February 23, 2026. Presenter: Torey Heinz (Vianet Management).

**Three parts:**
1. `slides/01-intro.html` — Reveal.js slideshow: Why Elixir?
2. `02-the-language.livemd` — LiveBook interactive demos (runs live during talk)
3. `slides/03-real-world.html` — Reveal.js slideshow: Production code from Vianet

No build step. Open HTML files directly in a browser. Press `S` for speaker notes view.

## Key Files

- `slides/shared.css` — All shared styles, component classes, color variables
- `slides/logos/` — Brand logos (SVG/PNG) for Vianet entities and companies
- `*.livemd` — Source outlines; `02-the-language.livemd` is the actual LiveBook presentation
- `outline.md` — Detailed narrative structure and timing

## Reveal.js Conventions

- **CDN:** unpkg, Reveal.js 5.1.0 — no local install needed
- **Theme:** `white` base + `shared.css` overrides
- **Plugins:** Highlight (Monokai), Notes, Markdown

### Slide Structure
```html
<section data-transition="fade">
  <h2>Title</h2>
  <li class="fragment">Progressive reveal</li>
  <aside class="notes">Speaker notes on every slide</aside>
</section>
```

- `class="section-divider"` + `data-transition="zoom"` for section breaks
- `class="fragment"` for progressive reveals
- `data-line-numbers="1-5|7-8"` for stepped code highlighting
- `class="small-code"` (0.45em) / `class="tiny-code"` (0.40em) for dense code

### CSS Variables
```css
--elixir-purple: #48205D;       /* Official Elixir brand purple */
--elixir-purple-light: #8D8390; /* Official Elixir brand light */
```

### Key CSS Classes
| Class | Purpose |
|-------|---------|
| `.section-divider` | Purple gradient section break |
| `.entity-card` / `.entity-grid` | Vianet company cards (3-col) |
| `.company-card` / `.company-grid` | External company cards (2-col) |
| `.small-code` / `.tiny-code` | Smaller code blocks |
| `.muted` / `.small` / `.smaller` | Text utilities |
| `.flow-diagram` / `.arch-diagram` | Monospace ASCII diagrams |
| `.callout` | Highlighted insight box |

## Audience Context

Mostly JS/Rails developers in West Michigan. Slides use comparisons to familiar tools (Node event loop, Sidekiq, React, Redis pub/sub) to explain Elixir/BEAM concepts.

## Related Repositories

Production code examples in Part 3 reference these Vianet projects (configured as additional working directories):
- `/Users/th/ViaNet/vianet-marketing` — Email marketing system
- `/Users/th/ViaNet/OrbitFour/OrbitFourV2` — Domain registrar
- `/Users/th/ViaNet/vianet-admin` — Internal admin app