166 lines
6.4 KiB
Markdown
166 lines
6.4 KiB
Markdown
# 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!
|