# 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!