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 verder in de repo van de les. Maak van je eerste sectie een complete kleine landing page met 3-4 secties. Deploy + previews lopen al via Vercel.

Dit is geen design-opdracht — focus is op de workflow en de technologie. Een simpele maar werkende site is genoeg.

Doorbouwen, niet herstarten. Je werkt verder in dezelfde fork als in de les. AGENTS.md, opencode.json, Vercel — staat allemaal al. Je voegt secties toe.

---

Vertrek vanuit je les-werk

Je begint niet opnieuw. Open je laptop, ga naar je scroll-demo fork, en bouw verder.

Thema kiezen (als nog niet gedaan)

Heb je in de les een type sectie gekozen? Bouw daaromheen je thema. Of kies nu:

• 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 (bouwt voort op les)

• Doorgewerkt in dezelfde fork als in de les (Next.js 16, TS, Tailwind)
• AGENTS.md aanwezig — uitgebreid waar nodig (regels die je tijdens werk leerde)
• opencode.json aanwezig (uit starter, mag aangepast)
• Eerste sectie afgemaakt (uit lesopdracht) + 2-3 extra secties = totaal 3-4 scroll-secties
• Minimaal 3 verschillende animatie-technieken (fade-in, parallax, SplitText, horizontaal, stagger…)
• Lenis smooth scroll werkt
• Werkt zonder console-errors of hydration warnings

Workflow

• Totaal minstens 2 worktrees gebruikt (de lesopdracht-worktree telt mee)
• Elke feature-branch gepushed → Vercel preview URL bekeken
• Branches gemerged naar main
• Worktrees opgeruimd na merge
• Code op GitHub gepushed

Deployment & previews

• Vercel gekoppeld aan repo (vercel link of via dashboard)
• Production URL werkt (deploy van main)
• Minstens 2 preview URLs (van twee feature-branches) — Vercel maakt deze automatisch bij elke push
• 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?
  • Screenshots van minstens 2 preview URLs (Vercel dashboard view + browser view)
  • 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 is al klaar (gedaan in de les). Je begint bij sectie 2.

• Sectie 1 afmaken (als niet klaar in les): 15-30 min
• 2 extra secties bouwen via opencode (2× ~30 min): ~60 min
• Polish + responsiveness: 20 min
• Vercel previews checken + screenshots: 10 min
• WORKFLOW.md: 15 min

Totaal: ~2 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 production URL in README van je repo
3. WORKFLOW.md in root met preview URL screenshots
4. Brightspace inlevering:
   • GitHub URL
   • Production URL
   • Minstens 2 preview URLs (van feature-branches)
   • 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!