fix: add les 11
This commit is contained in:
@@ -43,10 +43,10 @@
|
||||
| Welkom + Terugblik | 10 min |
|
||||
| **Theorie 1** — Waarom OpenCode + kern features | 20 min |
|
||||
| **Live Demo 1** — Desktop tour | 10 min |
|
||||
| **Theorie 2** — AGENTS.md + opencode.json + plugin + stack | 15 min |
|
||||
| **Live Demo 2** — Setup + worktree + bouw SmoothScroll | 15 min |
|
||||
| **Theorie 2** — AGENTS.md + config + plugin + stack + Vercel | 17 min |
|
||||
| **Live Demo 2** — Setup + worktree + bouw + Vercel preview | 20 min |
|
||||
| **Pauze** | 15 min |
|
||||
| Lesopdracht: bouw scroll-sectie | 35 min |
|
||||
| Lesopdracht: bouw scroll-sectie + preview | 28 min |
|
||||
| Huiswerk + Afsluiting | (eind) |
|
||||
|
||||
**Visual:** Timeline met YELLOW pauze-rij + PINK demo-rijen
|
||||
@@ -298,32 +298,66 @@ scroll storytelling. Kies GSAP voor timing-precisie + GPU-perf.
|
||||
|
||||
---
|
||||
|
||||
## Slide 13: LIVE DEMO 2 — Setup + Worktree + SmoothScroll
|
||||
### Wat je nu gaat zien (~15 min)
|
||||
## Slide 13: Vercel + Preview Deployments
|
||||
### Feature branches = automatische preview URLs
|
||||
|
||||
**Het idee:**
|
||||
Elke push naar GitHub → Vercel maakt automatisch een **unieke preview URL** voor die branch. Geen handmatige deploys, geen "stuur me een screenshot".
|
||||
|
||||
**Setup (eenmalig per project):**
|
||||
1. `npx vercel link` — koppelt repo aan Vercel project (of via dashboard)
|
||||
2. Git remote staat → Vercel installeert eigen GitHub App
|
||||
3. Klaar — elke `git push` triggert deploy
|
||||
|
||||
**Hoe het werkt:**
|
||||
| Branch | Wat krijgt Vercel? | URL |
|
||||
|--------|-------------------|-----|
|
||||
| `main` | Production deploy | `jouw-app.vercel.app` |
|
||||
| `feature-hero` | Preview deploy | `jouw-app-git-feature-hero-jij.vercel.app` |
|
||||
| `feature-gallery` | Preview deploy | `jouw-app-git-feature-gallery-jij.vercel.app` |
|
||||
|
||||
**Waarom dit goud is voor scroll-storytelling:**
|
||||
- Stuur preview URL naar designers/stakeholders per feature
|
||||
- Vergelijk verschillende secties side-by-side
|
||||
- Geen "het werkt op mijn machine"
|
||||
- Comment in PR direct met working URL
|
||||
|
||||
**Combinatie met onze worktrees:**
|
||||
- 1 worktree = 1 branch = 1 Vercel preview
|
||||
- 3 features parallel = 3 live previews
|
||||
|
||||
**Bronnen:** [20] [21]
|
||||
|
||||
---
|
||||
|
||||
## Slide 14: LIVE DEMO 2 — Setup + Worktree + Vercel preview
|
||||
### Wat je nu gaat zien (~20 min)
|
||||
|
||||
**Wat ik laat zien:**
|
||||
1. **AGENTS.md** invullen met onze projectregels
|
||||
2. **opencode.json** maken met permissions
|
||||
3. Tonen dat `rm -rf` geblokkeerd wordt
|
||||
4. **`ocx` + worktree plugin** installeren (was al klaar — kort tonen)
|
||||
4. **`ocx` + worktree plugin** verifiëren (was al klaar)
|
||||
5. Via prompt: **worktree feature-hero** aanmaken
|
||||
6. **+ New Session** → openen op worktree-folder
|
||||
7. In feature-hero: **SmoothScroll wrapper** laten bouwen
|
||||
8. Bewijs dat **AGENTS.md regels gevolgd worden** (useGSAP, geen Framer Motion, etc.)
|
||||
7. **SmoothScroll wrapper** laten bouwen — agent volgt AGENTS.md
|
||||
8. **`git push origin feature-hero`** vanuit worktree
|
||||
9. Open Vercel dashboard → toon **preview URL** verschijnt automatisch
|
||||
10. Open preview URL → scroll-animatie werkt live
|
||||
|
||||
**Visual:** Mockup Sessions sidebar + diff-viewer. PINK badge "LIVE DEMO".
|
||||
**Visual:** Mockup Sessions sidebar + Vercel preview URL. PINK badge "LIVE DEMO".
|
||||
|
||||
---
|
||||
|
||||
## Slide 14: Pauze
|
||||
## Slide 15: Pauze
|
||||
### Pauze!
|
||||
|
||||
**Visual:** "Pauze" groot, "15 minuten"
|
||||
|
||||
---
|
||||
|
||||
## Slide 15: Lesopdracht
|
||||
### Bouw een scroll-sectie — 35 minuten
|
||||
## Slide 16: Lesopdracht
|
||||
### Bouw een scroll-sectie + preview — 28 minuten
|
||||
|
||||
**Setup (al klaar in starter):**
|
||||
- Next.js 16 starter
|
||||
@@ -332,22 +366,27 @@ scroll storytelling. Kies GSAP voor timing-precisie + GPU-perf.
|
||||
- SmoothScroll wrapper bestaat al
|
||||
|
||||
**Jouw taak:**
|
||||
0. Fork starter naar **jouw** GitHub + `vercel link`
|
||||
1. `/init` runnen — check AGENTS.md
|
||||
2. Vraag agent: maak worktree voor jouw feature
|
||||
3. Open de worktree in nieuwe Sessions tab
|
||||
4. Plan-mode → review → Tab → Build
|
||||
5. Test op `npm run dev`
|
||||
6. Commit + push
|
||||
5. Test lokaal op `npm run dev`
|
||||
6. `git push origin <jouw-branch>` — Vercel deployt automatisch
|
||||
7. Open preview URL → animatie werkt live → plak in chat
|
||||
|
||||
> **Niet klaar in de les?** Geen probleem — je werkt thuis in dezelfde fork
|
||||
> verder. Het huiswerk bouwt voort op dit punt.
|
||||
|
||||
**Sectie keuze:** hero (SplitText) · features-grid (stagger) · testimonials (horizontaal) · gallery (parallax)
|
||||
|
||||
---
|
||||
|
||||
## Slide 16: Huiswerk
|
||||
### Bouw je eigen scroll-animatie site
|
||||
## Slide 17: Huiswerk
|
||||
### Bouw verder in je les-repo
|
||||
|
||||
**Voor volgende week:**
|
||||
Bouw een **kleine landing page** met 3-4 scroll secties.
|
||||
Doorbouwen in dezelfde fork als in de les — eerst sectie 1 afmaken (indien nog niet), dan 2-3 extra secties tot een **kleine landing page** met 3-4 scroll secties.
|
||||
|
||||
**Eisen:**
|
||||
- [ ] Eigen `AGENTS.md` (onze mag als basis)
|
||||
@@ -355,16 +394,16 @@ Bouw een **kleine landing page** met 3-4 scroll secties.
|
||||
- [ ] **2+ worktrees** gebruikt (Sessions sidebar)
|
||||
- [ ] **3 verschillende scroll-animaties**
|
||||
- [ ] Lenis smooth scroll
|
||||
- [ ] Deploy op Vercel
|
||||
- [ ] `WORKFLOW.md` reflectie (max 400 woorden)
|
||||
- [ ] **Vercel gekoppeld** — main = productie, branches = previews
|
||||
- [ ] `WORKFLOW.md` reflectie (max 400 woorden) met **screenshots van preview URLs per feature**
|
||||
|
||||
**Lever in:** GitHub URL + Vercel URL + screenshot van `git worktree list`
|
||||
**Lever in:** GitHub URL + Production URL + minstens **2 preview URLs** (per worktree-branch) + screenshot `git worktree list`
|
||||
|
||||
**Bonus:** Eigen sub-agent · MCP server (context7) · Lighthouse 90+
|
||||
|
||||
---
|
||||
|
||||
## Slide 17: Afsluiting
|
||||
## Slide 18: Afsluiting
|
||||
### Volgende les — Introductie Cursor
|
||||
|
||||
**Vandaag gedaan:**
|
||||
@@ -374,6 +413,7 @@ Bouw een **kleine landing page** met 3-4 scroll secties.
|
||||
- opencode-worktree plugin via ocx
|
||||
- Live: Next.js 16 + GSAP + Lenis scroll-site
|
||||
- Parallel agents via Sessions sidebar
|
||||
- Vercel preview deployments per branch
|
||||
|
||||
**Volgende keer — Cursor:**
|
||||
- De commerciele tegenhanger van OpenCode
|
||||
@@ -401,11 +441,12 @@ Bouw een **kleine landing page** met 3-4 scroll secties.
|
||||
| 10 | Worktree plugin | Theorie | [12] [13] |
|
||||
| 11 | Demo stack | Theorie | [14]–[18] |
|
||||
| 12 | Onze AGENTS.md | Theorie | [14] [15] [19] |
|
||||
| 13 | **LIVE DEMO 2** | Demo | — |
|
||||
| 14 | Pauze | Break | — |
|
||||
| 15 | Lesopdracht | Praktijk | alle |
|
||||
| 16 | Huiswerk | Praktijk | alle |
|
||||
| 17 | Afsluiting | Closing | — |
|
||||
| 13 | Vercel preview deployments | Theorie | [20] [21] |
|
||||
| 14 | **LIVE DEMO 2** | Demo | — |
|
||||
| 15 | Pauze | Break | — |
|
||||
| 16 | Lesopdracht | Praktijk | alle |
|
||||
| 17 | Huiswerk | Praktijk | alle |
|
||||
| 18 | Afsluiting | Closing | — |
|
||||
|
||||
---
|
||||
|
||||
@@ -439,3 +480,7 @@ Bouw een **kleine landing page** met 3-4 scroll secties.
|
||||
|
||||
**Lenis:**
|
||||
- [19] Lenis GitHub — https://github.com/darkroomengineering/lenis
|
||||
|
||||
**Vercel:**
|
||||
- [20] Vercel Preview Deployments — https://vercel.com/docs/deployments/preview-deployments
|
||||
- [21] Vercel + Git Integration — https://vercel.com/docs/git
|
||||
|
||||
Reference in New Issue
Block a user