diff --git a/.claude/agents/presentation-learning-journey.md b/.claude/agents/presentation-learning-journey.md index e5a81fc..67b01c0 100644 --- a/.claude/agents/presentation-learning-journey.md +++ b/.claude/agents/presentation-learning-journey.md @@ -142,6 +142,7 @@ _Findings from previous executions are recorded here. Add new entries as bullet - **2026-04-18 single-slide insertion at position 3 (vocabulary slide "What is Claude Code?")**: inserted one slide between old slide 2 (Boris GIF) and old slide 3 (Vibe Coding vs Agentic Engineering, now slide 4). Method: sed descending renumber for data-slide="3" through data-slide="37" (35 expressions), then separate sed for TOC goToSlide targets (7→8, 13→14, 19→20, 24→25, 30→31), then sed for all banner comments, then Edit to insert the new slide div. New slide has no `data-level` — journey bar shows 0%/empty for slides 3-7 (pre-arc vocabulary slides), which is correct. Three-column layout uses inline `grid-template-columns: 1fr 1fr 1fr` grid (not `.two-col`) since no three-column class exists in the deck. Icons used: 🧠 Model (purple), 💪 Harness (blue), 🤜 Tools (green). Color-coded with existing deck border-left convention: purple=#9c27b0, blue=#2196f3, green=#4caf50. New section-divider positions after insertion: **Agents=8, Skills=14, Context=20, CLAUDE.md=25, Commands=31, Workflow=34**. TOC goToSlide targets updated to match. Total slide count: **38**. - **2026-04-18 sed-vs-Edit sequencing rule confirmed**: after the sed renumber pass, waited for each sed to fully complete before running the Edit for the new slide. Running sed and Edit in parallel on the same file causes Edit to fail with "file modified since read" — confirmed this is the safe sequencing order. +- **2026-04-19 scoped per-slide scroll override — below-fold legend pattern**: to make one slide scrollable while keeping all others as single-viewport: (1) expand the chip-cloud container from a fixed `height: calc(100vh - 420px)` to `min-height: calc(100vh - 130px)` (subtracting only the title + subtitle height) — chips use `%`-based `top`/`left` so they redistribute cleanly to fill the larger container; (2) add a "scroll for glossary ↓" affordance as a `position: absolute; bottom: 0` div inside the container with `pointer-events: none` — it overlays without interfering with chip interaction; (3) the legend div after the container needs `margin-top: 32px; padding: 28px 0 40px 0; border-top: 2px solid #e5e5e5` to read as a distinct section when scrolled to; (4) add `window.scrollTo(0, 0)` inside `showSlide()` — this resets scroll on every slide transition, giving slide 2 a clean entry every time and preventing scroll position from bleeding into adjacent slides. No CSS class changes needed — `body` and `.slide` already allow overflow by default (`.slide` has `min-height: 100vh`, not `height: 100vh`, and there is no `overflow: hidden` on any ancestor). Arrow keys still fire `e.preventDefault()` so they navigate slides, not scroll — scrolling on slide 2 requires mouse wheel or trackpad only. - **2026-04-19 legend-footer with color-coded terms (slide 2)**: to add a definition reference table below a large absolute-positioned chip cloud, (1) shrink the cloud container's `height` from `calc(100vh - 200px)` to `calc(100vh - 420px)` and its `min-height` from `480px` to `300px` — this frees ~220px at the bottom of the slide without changing chip positions (they are `%`-based inside the container); (2) add a two-column `display: grid; grid-template-columns: 1fr 1fr` div with a `border-top` separator immediately after the cloud's closing tag; (3) color-code each term with `term` using the same hex values as the chip backgrounds (blue `#1565c0`, purple `#7b1fa2`, green `#2e7d32`, amber `#e65100`); (4) use `font-size: 0.82rem` with `line-height: 1.4` and `gap: 5px` between rows — fits 9 rows per column without overflow at typical presentation viewport heights. Column distribution: left = 6 blue hero + first 3 purple (9 items); right = last purple + 4 green + 4 amber (9 items). This balances the color mix so neither column is mono-hued. The cloud stays visually dominant because the chips are 1.5-1.6rem and bold while legend rows are 0.82rem plain weight. - **2026-04-19 word-cloud / jargon slide pattern**: absolute-positioned chips inside a `position: relative; width: 100%; height: calc(100vh - 200px)` container produces a true sticker-wall layout with no JS required. Each chip is a `` with `position: absolute; top: N%; left: N%; transform: rotate(Xdeg)` plus pill styling (`border-radius: 24px`, `padding`, `font-weight: 600`, `white-space: nowrap`). Use `%`-based top/left so the layout scales with viewport height. Organize chips into 5 conceptual rows (top % bands: 2-8%, 17-20%, 33-37%, 50-54%, 67-70%) with 3-4 chips per row, staggering left % values so chips spread horizontally without overlapping. Keep `white-space: nowrap` on every chip — line-wrapping inside a rotated pill breaks the visual. The container's `overflow: hidden` clips any chip that accidentally runs off the right edge. Verify chip count by grepping for `box-shadow` (each chip has exactly one). The slide has no `data-level` so journey bar shows 0%/empty — correct for a pre-arc slide. Total slide count after this insertion: **39**. Section-divider positions: Agents=9, Skills=15, Context=21, CLAUDE.md=26, Commands=32, Workflow=35. TOC goToSlide targets: Agents=9, Skills=15, Context=21, CLAUDE.md=26, Commands=32.