fix: add les 11

v2-klasB/Les02-OpenCode/Les02-Docenttekst.md

@@ -60,8 +60,18 @@ npm install gsap @gsap/react lenis
 git init
 git add .
 git commit -m "init: next 16 + gsap + lenis"
+
+# GitHub remote (maak repo eerst via gh CLI of dashboard)
+gh repo create scroll-demo --public --source=. --remote=origin --push
+
+# Vercel CLI + koppelen + eerste deploy
+npm i -g vercel
+vercel link        # koppelt repo aan een Vercel project
+vercel             # eerste deploy naar productie URL
 ```
 
+**Check:** open Vercel dashboard → project bestaat → productie-URL werkt. Open GitHub → repo staat er → Vercel preview comment in PR werkt.
+
 ### 4. Test je setup
 
 - Open OpenCode Desktop → File → Open Folder → `~/scroll-demo`
@@ -228,7 +238,7 @@ Dat was de theorie. Nu zien jullie het live."
 
 ---
 
-### Blok 4 — THEORIE 2: AGENTS.md + opencode.json + plugin + stack (15 min)
+### Blok 4 — THEORIE 2: AGENTS.md + config + plugin + stack + Vercel (17 min)
 
 **Slides 8, 9, 10, 11, 12. Achter elkaar, zonder switchen.**
 
@@ -290,10 +300,11 @@ Framer Motion is uitstekend — voor app UI. Modals, page transitions, micro-int
 
 Daarom staat in onze AGENTS.md: 'Geen Framer Motion'. Het is geen anti-Framer, het is pro-GSAP voor dit type werk."
 
-#### Slide 12 — Onze AGENTS.md — 3 min
+#### Slide 12 — Onze AGENTS.md — 2 min
 
 **Vertel:**
 "Hier zie je onze concrete regels voor dit project. Let op de structuur:
+- Why this stack — context voor de agent
 - Stack — versies expliciet
 - Hard rules — niet onderhandelbaar
 - Patterns — hoe we organiseren
@@ -307,9 +318,35 @@ Regels die opvallen:
 
 Deze regels heb ik uit ervaring. In de volgende demo zet ik dit in, en zie je dat de AI ze volgt."
 
+#### Slide 13 — Vercel + Preview Deployments — 3 min
+
+**Vertel:**
+"Laatste theorie-stuk voor we gaan demoen. Hoe sluiten we onze worktree-workflow goed af? Met **Vercel preview deployments**.
+
+Het idee: je hoeft niet handmatig te deployen. Elke `git push` triggert Vercel om automatisch een deploy te maken. En het mooie — voor élke branch krijg je een eigen unieke URL.
+
+- Push naar `main` → productie URL (`jouw-app.vercel.app`)
+- Push naar `feature-hero` → preview URL (`jouw-app-git-feature-hero-jij.vercel.app`)
+- Push naar `feature-gallery` → andere preview URL
+
+Stel je voor: je werkt aan een hero-sectie. Je pusht naar je feature-branch. Twee minuten later heb je een live URL die je naar je designer kunt sturen voor feedback. Geen 'het werkt op mijn machine'. Geen screenshots. Live.
+
+**Voor scroll-storytelling is dit goud** — animaties moet je zien om over te oordelen. Preview URLs maken die feedback-loop razend snel."
+
+**Setup (kort uitleggen — komt zo in demo):**
+- `npx vercel link` koppelt je repo aan een Vercel project
+- Vercel installeert eigen GitHub app
+- Vanaf nu: elke push = deploy
+
+**Combinatie met onze workflow:**
+"En hier komt 't mooi samen: 1 worktree = 1 branch = 1 Vercel preview. Drie features parallel? Drie live preview URLs. Verschillende stakeholders kunnen verschillende features tegelijk reviewen."
+
+**Demo aankondiging:**
+"In Live Demo 2 ga ik niet alleen onze SmoothScroll bouwen, maar ook pushen naar de feature-branch en zien dat Vercel automatisch een preview URL maakt."
+
 ---
 
-### Blok 5 — LIVE DEMO 2: Setup + Worktree + SmoothScroll (15 min)
+### Blok 5 — LIVE DEMO 2: Setup + Worktree + SmoothScroll + Vercel preview (20 min)
 
 **Slide 13.**
 
@@ -411,6 +448,45 @@ scroll storytelling. Kies GSAP voor timing-precisie + GPU-perf.
 
 **Zeg:** "Zie je? Met goede AGENTS.md krijg je consistente output. Zonder zou de AI waarschijnlijk Framer Motion pakken of useEffect gebruiken. Schrijf je regels op, krijg je betrouwbare resultaten."
 
+#### Stap 6 — Push naar feature-branch + Vercel preview (4 min)
+
+**Pre-setup check:** repo is al gekoppeld aan Vercel (deed je vóór de les). Open Vercel dashboard naast OpenCode op je scherm.
+
+**In de feature-hero Session:**
+- Type in chat: `Commit deze wijzigingen en push naar de feature-hero branch.`
+- Of typ zelf in ingebouwde terminal:
+  ```bash
+  git add .
+  git commit -m "feat: SmoothScroll wrapper"
+  git push origin feature-hero
+  ```
+- Wacht 5-10 seconden
+
+**Switch naar Vercel dashboard:**
+- Refresh — zie je nieuwe deploy verschijnen voor `feature-hero` branch
+- Status: "Building" → "Ready" (duurt ~30-60 sec)
+- Klik op de deploy → toon **preview URL** (iets als `jouw-app-git-feature-hero-jij.vercel.app`)
+
+**Open de preview URL:**
+- Laat zien: ja, het werkt live
+- Scroll erdoorheen — smooth scroll werkt
+- "Deze URL is publiek, je kunt 'm nu doorsturen naar een designer of stakeholder."
+
+**Vertel:**
+"Zie wat hier gebeurde:
+- Lokaal: ik bouwde een feature met OpenCode
+- Push: één commando
+- Vercel: automatische deploy, eigen URL voor deze branch
+- Designer/PM: kan reviewen zonder Git of localhost
+- Iedere nieuwe push naar deze branch overschrijft deze URL
+
+En als ik nu een tweede worktree maak voor 'feature-gallery'? Krijgt die zijn eigen preview URL. Drie features parallel = drie live previews. Dat is professionele scroll-storytelling workflow."
+
+**Optioneel — toon git workflow visueel:**
+- Open GitHub in browser
+- Toon de feature-hero branch op repo
+- Toon Vercel comment in PR (als er een PR is) met preview URL
+
 ---
 
 ### Blok 6 — Pauze (15 min)