Les 2 Klas B — OpenCode Pro met AGENTS.md, worktrees & GSAP/Lenis

2026-05-18 14:30:00 +02:00
parent 0393976b23
commit b053fc7206
10 changed files with 2506 additions and 0 deletions
--- a/v2-klasB/Les02-OpenCode/Les02-Huiswerk.md
+++ b/v2-klasB/Les02-OpenCode/Les02-Huiswerk.md
@@ -0,0 +1,153 @@
+# Les 2 — Huiswerk
+## Bouw je eigen scroll-animatie landing page
+
+**Vak:** AI-Assisted Development
+**Opleiding:** NOVI Hogeschool Utrecht
+**Deadline:** Voor de volgende les (Les 3)
+**Inleveren:** GitHub repo URL + Vercel deploy URL + `WORKFLOW.md`
+
+---
+
+## Doel
+
+Bouw een **kleine scroll-animatie landing page** met OpenCode, gebruikmakend van AGENTS.md, opencode.json en worktrees. Deploy hem op Vercel.
+
+Dit is geen design-opdracht — focus is op de **workflow** en de **technologie**. Een simpele maar werkende site is genoeg.
+
+---
+
+## Voorbeeld-thema (kies zelf!)
+
+Suggesties:
+- **Mini portfolio** (over jou — projects, contact)
+- **Restaurant landing** (menu, story, reserveer)
+- **Product launch** (features, prijs, signup)
+- **Conferentie / event** (speakers, schedule, register)
+- **Fitness app marketing** (hero, features, testimonials)
+
+Eigen idee mag ook — even checken met Tim als 't iets totaal anders is.
+
+---
+
+## Eisen (verplicht)
+
+### Code
+- [ ] Next.js 16 (App Router, TypeScript, Turbopack)
+- [ ] Eigen **`AGENTS.md`** (mag onze als basis)
+- [ ] Eigen **`opencode.json`** met permissions + (optioneel) plugin config
+- [ ] **Minimaal 3 secties** met scroll-animaties
+- [ ] **Minimaal 3 verschillende animatie-technieken** (bv. fade-in, parallax, SplitText, horizontaal, stagger)
+- [ ] **Lenis** smooth scroll werkt (geen "harde" scroll)
+- [ ] TailwindCSS voor styling
+- [ ] Werkt zonder console-errors of hydration warnings
+
+### Workflow
+- [ ] **Minstens 2 worktrees** gebruikt (mag via plugin of handmatig)
+- [ ] Branches gemerged naar `main`
+- [ ] Worktrees opgeruimd
+- [ ] Code op GitHub gepushed
+
+### Deployment
+- [ ] **Vercel deploy** werkend, URL in README
+- [ ] Geen broken pages / 500's
+
+### Documentatie
+- [ ] **`WORKFLOW.md`** in repo-root met:
+  - Welke prompts werkten goed?
+  - Welke regels heb je later toegevoegd aan AGENTS.md (en waarom)?
+  - Hoe heb je worktrees georganiseerd?
+  - Wat zou je anders doen volgende keer?
+  - Screenshot van `git worktree list` tijdens het werk
+  - Max 400 woorden — concreet, geen fluff
+
+---
+
+## Bonus (optioneel, geen extra punten — wel meer leren)
+
+- **Eigen sub-agent** definieren in `~/.config/opencode/` (bv. een "animation-reviewer")
+- **MCP server** toevoegen (bv. context7 voor up-to-date docs in agent context)
+- **GSAP advanced**: horizontale scroll met pin + scrub, of SplitText met stagger
+- **Custom Lenis options** experimenteren (`lerp`, `duration`, etc.)
+- **Lighthouse score** > 90 op alle 4 metrics
+- **Reduced motion respecteren** (`prefers-reduced-motion` media query)
+- **Eigen `ocx` plugin** schrijven (zie kdcokenny/ocx docs)
+
+---
+
+## Tijd-indicatie
+
+- Setup (Next.js + deps + AGENTS.md + opencode.json): 30 min
+- 3 scroll-secties bouwen via opencode (3× ~30 min): ~90 min
+- Polish + responsiveness: 30 min
+- Deploy op Vercel: 15 min
+- `WORKFLOW.md`: 15 min
+
+**Totaal: ~3 uur.** Loop je vast? Vraag in Brightspace of plan een korte 1-op-1 met Tim.
+
+---
+
+## Tips
+
+### Workflow tips
+
+- **Begin met een werkende `SmoothScroll` wrapper** — zonder dat doet niks goed.
+- **Eén sectie per worktree** — niet alles in main mengen.
+- **Plan-mode eerst** voor elke nieuwe sectie. Krijg een plan, geef feedback, dan pas Build.
+- **AGENTS.md update tijdens werk** — loop je tegen iets aan dat de agent steeds verkeerd doet? Voeg een regel toe.
+
+### Technische tips
+
+- **`useGSAP` heeft een `scope` prop** — gebruik 'm met `useRef` zodat je `gsap.from(".class")` selectors scoped zijn aan je component.
+- **`ScrollTrigger.refresh()`** als je dynamisch content laadt — anders triggert het niet.
+- **`prefers-reduced-motion`** kun je checken met een media query in CSS én in JS (`window.matchMedia('(prefers-reduced-motion: reduce)')`).
+- **Lenis `lerp`** is "hoe smooth" — lager = soepeler maar trager. Default `0.1` is goed.
+- **Pin-secties** mogen niet inside flex/grid die hun height anders berekenen — pas op met layout.
+
+### Deploy tips
+
+- Vercel pakt je Next.js automatisch op
+- `npm run build` lokaal eerst om te checken of er geen TS errors zijn
+- Environment vars (als je ze hebt) in Vercel dashboard zetten
+
+---
+
+## Inleveren
+
+1. **GitHub repo** — push alle code naar `main`
+2. **Vercel deploy URL** in README van je repo
+3. **`WORKFLOW.md`** in root
+4. **Brightspace inlevering**:
+   - GitHub URL
+   - Vercel URL
+   - Korte note (1-2 zinnen): wat is je trots-punt?
+
+---
+
+## Beoordeling
+
+| Criterium | Punten |
+|-----------|--------|
+| 3+ scroll-animaties, verschillend qua techniek | 3 |
+| `AGENTS.md` aanwezig + concreet | 1 |
+| `opencode.json` met permissions/plugin | 1 |
+| Minstens 2 worktrees gebruikt (zichtbaar in git log) | 1 |
+| Vercel deploy werkt | 1 |
+| `WORKFLOW.md` concreet + screenshot | 2 |
+| Geen console errors / hydration warnings | 1 |
+| **Totaal** | **10** |
+
+Voldoende = 6+. Bonus telt mee bij twijfelgevallen.
+
+---
+
+## Veelvoorkomende valkuilen (uit eerdere groepen)
+
+- **AGENTS.md te vaag** — "gebruik clean code" werkt niet. Concrete regels werken.
+- **Te veel willen** — beter 3 secties goed dan 7 half. Schaal omlaag bij twijfel.
+- **Worktrees na merge laten staan** — opruimen, anders chaos.
+- **`Lenis` van oude package importeren** — `@studio-freight/lenis` werkt niet meer. Gebruik `lenis`.
+- **`useEffect` voor GSAP code** — gebruik `useGSAP` van `@gsap/react`. Anders Strict Mode bugs.
+- **Next.js 16 async params vergeten** — `cookies()`, `headers()`, `params`, `searchParams` zijn nu async. Altijd `await`.
+- **Geen Vercel deploy testen vóór deadline** — minstens 1 dag van tevoren deployen.
+
+Succes!