novi-lessons/v2-klasB/Les02-OpenCode/Les02-Huiswerk.md

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!