fix: les 2 v2

2026-06-09 14:22:55 +02:00
parent dc284db9b6
commit ee69da1665
14 changed files with 2588 additions and 0 deletions
--- a/Les02-OpenCode-v2/Les02-Slide-Overzicht.md
+++ b/Les02-OpenCode-v2/Les02-Slide-Overzicht.md
@@ -0,0 +1,430 @@
+# Les 2: OpenCode — AI Code Assistants (Klas B)
+
+> **Deel 1: AI Foundations** (Les 1–4)
+> **Totale slides:** 23
+> **Lesvorm:** online — Tim deelt scherm met slides + code, leest letterlijk voor uit docenttekst
+
+---
+
+## Blok-structuur
+
+| Blok | Onderwerp | Slides |
+|------|-----------|--------|
+| 1 | Welkom & Terugblik | 1–4 |
+| 2 | AI-CLI landschap (NIEUW) | 5–7 |
+| 3 | Introductie OpenCode | 8–14 |
+| 4 | LIVE DEMO — scroll-landingpage | 15–18 |
+| 5 | Git & Vercel Workflow | 19–20 |
+| 6 | Hands-on Opdracht | 21 |
+| – | ☕ PAUZE | – |
+| 7 | Afsluiting | 22–23 |
+
+---
+
+## BLOK 1: WELKOM & TERUGBLIK
+
+### Slide 1: Welkomstslide
+**Titel:** Les 2 — OpenCode: AI Code Assistants
+**Subtitle:** Lokaal werken met een AI-pair
+
+---
+
+### Slide 2: Planning vandaag
+
+| Blok | Onderwerp |
+|------|-----------|
+| 1 | Welkom + Nieuwe manier van werken |
+| 2 | AI-CLI landschap: Claude Code, Codex, OpenCode |
+| 3 | Introductie OpenCode |
+| 4 | **LIVE DEMO** — scroll-storytelling landing page |
+| 5 | Git push → Vercel auto-deploy |
+| – | Pauze ☕ |
+| 6 | Hands-on |
+| 7 | Resultaten + afsluiting |
+
+---
+
+### Slide 3: Een nieuwe manier van werken
+
+**Wat we niet meer doen:**
+- Browser-gebaseerde tools zoals v0.dev (waar je copy/paste tussen browser en editor)
+- Eén AI-chat-venster zonder zicht op je echte project
+
+**Wat we vandaag doen:**
+- Lokaal werken in een echt project
+- AI direct in je editor — geen copy/paste
+- Lokale dev-server zien wijzigingen meteen
+- Volledige controle over wat de AI doet (Plan → Build → Accept per file)
+
+**Browser AI tools** zoals v0.dev blijven nuttig voor snelle UI-experimenten. Maar voor echt bouwen: lokaal + AI-pair.
+
+---
+
+### Slide 4: Vandaag — De volgende stap
+
+**Drie dingen vandaag:**
+
+1. We kijken naar het **AI-coding-CLI landschap**: Claude Code, Codex, OpenCode
+2. We bouwen LIVE een **scroll-storytelling landing page** vanuit een starter-zip — met Lenis + GSAP en vol micro-animaties
+3. We zetten alles online: git init → nieuwe GitHub repo → nieuw Vercel project → live op het internet
+
+Aan het einde heb je iets dat er écht uitziet, gepubliceerd via je eigen repo en eigen Vercel project. En je weet welke AI-coding tools er zijn en wanneer je welke kiest.
+
+---
+
+## BLOK 2: AI-CLI LANDSCHAP (NIEUW)
+
+### Slide 5: Drie spelers op de markt
+
+**Het AI-coding-CLI landschap medio 2026:**
+
+| Tool | Maker | Karakter |
+|------|-------|----------|
+| **Claude Code** | Anthropic | Opinionated, safety-first, beste raw capability |
+| **Codex** | OpenAI | Autonoom, token-efficiënt, minder safety-rails |
+| **OpenCode** | Open-source community | Open, BYO-model, mooiste TUI, prachtige DX |
+
+**Wat ze gemeen hebben:** allemaal terminal-based agents die in je repo werken — geen IDE nodig.
+
+**Wat ze onderscheidt:** filosofie, prijsmodel, model-keuze, autonomie.
+
+> Bron: NeuralNine, "Claude Code VS Codex VS OpenCode" (2026)
+
+---
+
+### Slide 6: Vergelijking op 7 assen
+
+| As | Claude Code | Codex | OpenCode |
+|----|-------------|-------|----------|
+| Safety / approval flow | ⭐ vraagt altijd toestemming | autonoom, weinig checks | configureerbaar |
+| TUI / aesthetics | functioneel | functioneel | ⭐ mooiste |
+| Model-flexibiliteit | alleen Anthropic | alleen OpenAI | ⭐ elke provider + lokaal |
+| Undo / rewind / voice | ⭐ alle drie aanwezig | geen undo | rewind aanwezig |
+| Token-efficiency | hoog verbruik | ⭐ zuinigste | hangt af van model |
+| Usage-transparantie | ⭐ zichtbaar per call | minder transparant | hangt af van model |
+| Open-source | nee | nee | ⭐ ja, MIT |
+
+**Praktijk-benchmark uit de video:** alle drie bouwen een werkende Sudoku-game. Claude Code en Codex en OpenCode-met-GPT zijn vergelijkbaar. OpenCode op gratis open-source modellen (Kimi K2.5, DeepSeek) is duidelijk minder, maar wél gratis.
+
+---
+
+### Slide 7: Waarom OpenCode in deze cursus?
+
+**Vier redenen:**
+
+1. **Gratis te beginnen** — Kimi K2.5 Free of lokale modellen. Geen creditcard.
+2. **Open-source** — je leert hoe deze tools van binnen werken.
+3. **BYO-model** — later switchen naar Claude of GPT = 30 seconden werk.
+4. **Beste TUI** — een interface die niet in de weg zit.
+
+**Eindconclusie uit de video:** *"OpenCode is filosofisch mijn favoriet. Voor zwaar engineering-werk pak ik Claude Code met Opus."*
+
+**Vertaling:** start vandaag met OpenCode + Kimi. Schakel later naar Claude Code als jullie werkgever betaalt.
+
+---
+
+## BLOK 3: INTRODUCTIE OPENCODE
+
+### Slide 8: Wat is OpenCode?
+
+- Open-source AI coding agent (60.000+ GitHub stars)
+- Werkt met **elke** AI: OpenCode Zen, Groq, Ollama, OpenAI, Anthropic
+- Terminal-versie én Desktop App met ingebouwde terminal
+- Privacy-first: jouw code blijft op jouw machine
+
+**Vandaag gebruiken we:** Desktop App + Kimi K2.5 Free (zero cost).
+
+---
+
+### Slide 9: Installatie
+
+**Terminal-versie:**
+```bash
+npm i -g opencode-ai@latest
+```
+
+**Desktop App (aanbevolen vandaag):**
+- Download: **opencode.ai/download**
+- Installeer voor Mac of Windows
+
+**Gratis AI model instellen:**
+- `Ctrl+X M` → OpenCode Zen → **Kimi K2.5 Free**
+
+---
+
+### Slide 10: Plan vs Build mode
+
+| Mode | Icoon | Wat het doet |
+|------|-------|--------------|
+| **Plan** | 📋 | Analyseert je codebase, verandert **niets** |
+| **Build** | 🔨 | Schrijft code, maakt bestanden aan |
+
+**Wisselen:** `Tab`
+
+**Tip:** Eén prompt = één taak.
+- ❌ "Maak een complete website met header, hero en footer"
+- ✅ "Maak een Header component" → "Voeg hero toe" → "Maak footer"
+
+Kleinere prompts = betere output + makkelijker reviewen.
+
+---
+
+### Slide 11: Keyboard shortcuts
+
+| Shortcut | Actie |
+|----------|-------|
+| `Ctrl+P` | Command menu |
+| `Tab` | Wissel Build/Plan |
+| `@` | Zoek bestanden in je repo |
+| `@explore` | Codebase verkennen (read-only subagent) |
+| `Ctrl+X M` | Switch model |
+
+---
+
+### Slide 12: `@explore` — codebase verkennen
+
+**Wat:** read-only subagent die door je code leest zonder iets te wijzigen.
+
+**Voorbeelden:**
+```
+@explore find all authentication code
+@explore how does the routing work?
+@explore where are the API endpoints?
+```
+
+**Wanneer:** nieuwe codebase leren kennen, vóór een refactor, code zoeken zonder grep.
+
+---
+
+### Slide 13: De deployment-workflow (from scratch)
+
+```
+1. Wijzig code met OpenCode
+2. git init + commit lokaal
+3. GitHub: nieuwe lege repo aanmaken
+4. git remote add + git push
+5. Vercel: nieuw project → Import repo → Deploy
+6. Volgende keren: git push → Vercel auto-deploys
+```
+
+We doen vandaag de **complete setup**: van lege starter naar live URL. Geen bestaand project nodig.
+
+---
+
+### Slide 14: Optioneel — andere modellen
+
+**Wil je later wisselen?**
+
+- **OpenAI (GPT-4):** platform.openai.com → API Keys → kopieer key → `Ctrl+X M` → OpenAI → plak
+- **Anthropic (Claude):** console.anthropic.com → idem
+- **Lokaal (Ollama):** `ollama pull llama4` → `Ctrl+X M` → Ollama
+
+**Let op:** OpenAI en Claude zijn betaald. Kimi K2.5 Free is gratis maar minder krachtig.
+
+---
+
+## BLOK 4: LIVE DEMO — scroll-storytelling landing page
+
+### Slide 15: Wat we live bouwen
+
+**Project:** een AI-startup landing page van een fictieve naam — bijv. *"Polderwave"*.
+
+**Eindresultaat krijgt:**
+- Smooth scroll over de hele pagina (Lenis)
+- Hero met grote naam die op scroll schaalt
+- Features sectie met staggered fade-in (GSAP ScrollTrigger)
+- Sticky horizontal scroll-sectie met 4 "panels" (storytelling)
+- Parallax-blobs op de achtergrond
+- Micro-interacties: hover-scale, color transitions
+
+**Werkwijze:** vijf prompts → 5 fade-ins → één klikbare productie-deploy.
+
+---
+
+### Slide 16: Demo Overzicht (blijft op scherm)
+
+```
+┌──────────────────────────────────────────────────────────────┐
+│  STAP 1: STARTER UITPAKKEN                                   │
+│  ──────────────────────────────────────────────────────────  │
+│  Unzip opencode-ui-starter.zip                               │
+│  cd opencode-ui-starter                                      │
+│  npm install                                                 │
+│  npm run dev                                                 │
+│  → localhost:3000                                            │
+├──────────────────────────────────────────────────────────────┤
+│  STAP 2: OPENCODE DESKTOP APP OPENEN                         │
+│  ──────────────────────────────────────────────────────────  │
+│  File → Open Folder → opencode-ui-starter                    │
+│  Ctrl+X M → OpenCode Zen → Kimi K2.5 Free                    │
+├──────────────────────────────────────────────────────────────┤
+│  STAP 3: PROMPT 1 — Smooth scroll + Hero                     │
+│  STAP 4: PROMPT 2 — Features sectie + staggered reveals      │
+│  STAP 5: PROMPT 3 — Sticky horizontal storytelling           │
+│  STAP 6: PROMPT 4 — Parallax-blobs                           │
+│  STAP 7: PROMPT 5 — Micro-interactions (hover, CTA)          │
+├──────────────────────────────────────────────────────────────┤
+│  STAP 8: GIT PUSH → VERCEL AUTO-DEPLOY                       │
+└──────────────────────────────────────────────────────────────┘
+```
+
+---
+
+### Slide 17: De 5 prompts (blijft op scherm tijdens demo)
+
+> **Prompt 1 — Smooth scroll + Hero**
+> Installeer `lenis` en `gsap`. Maak in `app/page.tsx` een hero-sectie met als titel "POLDERWAVE" in extreem groot serif font. Centreer alles, donkere achtergrond, cream tekst. Initialiseer Lenis voor smooth scroll over de hele pagina via een client component wrapper.
+
+> **Prompt 2 — Features sectie**
+> Voeg onder de hero een features sectie toe met 4 cards: "AI-powered", "Privacy-first", "Open-source", "Built for speed". Elk met een korte beschrijving. Op scroll: stagger fade-in van onder via GSAP ScrollTrigger. Tailwind grid 2 kolommen, op mobile 1.
+
+> **Prompt 3 — Sticky horizontal storytelling**
+> Voeg een sticky sectie toe met 4 horizontale panels die op scroll van rechts naar links bewegen. Gebruik GSAP ScrollTrigger pin + horizontal translate. Elk panel toont een stap: "1. Idea", "2. Prompt", "3. Build", "4. Ship". Grote nummers, korte tekst.
+
+> **Prompt 4 — Parallax-blobs**
+> Voeg drie kleurrijke blob-cirkels toe als parallax-achtergrond — een blauwe, een roze, een gele. Ze bewegen met verschillende snelheden mee op scroll (y-translate per scroll-progress). Blur-filter erop voor zachte gloed.
+
+> **Prompt 5 — Micro-interactions**
+> Voeg onderaan een sticky CTA-knop toe met tekst "Get early access". Op hover: schaal naar 1.05, kleur-transition van pink naar yellow. Voeg ook hover-scale toe op de features-cards.
+
+---
+
+### Slide 18: Tijdens de demo — wat te uitleggen
+
+**Sleutelmomenten om hardop te benoemen:**
+
+- Plan-mode eerst (📋) — laat OpenCode een plan terugschrijven voor we Build doen
+- Tab → Build (🔨) — bevestig de diff per file, kijk wat de AI doet
+- Refresh browser tussen prompts — zie de progressie
+- Eén prompt = één commit = één deploy moment
+
+**Als iets misgaat:**
+- Build-error? Plak de error in OpenCode, vraag om fix
+- Animatie schokkerig? Vraag: "maak deze animatie smoother met ease-out"
+- Layout breekt op mobile? Vraag: "fix de mobile layout voor de features sectie"
+
+---
+
+## BLOK 5: GIT & VERCEL WORKFLOW
+
+### Slide 19: Live online zetten — van lokale repo naar Vercel
+
+**Stap 1: lokaal init + commit (in Desktop App terminal):**
+```bash
+git init
+git add .
+git commit -m "Initial Polderwave"
+git branch -M main
+```
+
+**Stap 2: nieuwe GitHub repo aanmaken** (github.com → New → `polderwave` → Public → Create).
+
+**Stap 3: remote toevoegen + push:**
+```bash
+git remote add origin https://github.com/JOUWNAAM/polderwave.git
+git push -u origin main
+```
+
+**Stap 4: Vercel nieuw leeg project** (vercel.com → Add New → Project → Import GitHub repo `polderwave` → Deploy).
+
+Wacht ongeveer een minuut → live URL.
+
+**Vanaf dat moment:** `git push` = automatische re-deploy.
+
+---
+
+### Slide 20: Preview deployments
+
+**Branches = preview URLs**
+
+```
+main branch       → polderwave.vercel.app
+feature/parallax  → polderwave-git-feature-parallax.vercel.app
+```
+
+**Waarom handig:**
+- Test wijzigingen zonder productie te breken
+- Deel preview link met team of klant
+- Automatisch bij elke branch-push
+
+**Demo:**
+```bash
+git checkout -b feature/extra-blob
+# wijziging maken via OpenCode
+git add . && git commit -m "Extra parallax blob"
+git push -u origin feature/extra-blob
+```
+→ Check Vercel: nieuwe preview deployment verschijnt.
+
+---
+
+## BLOK 6: HANDS-ON OPDRACHT
+
+### Slide 21: Aan de slag! (blijft op scherm)
+
+```
+┌──────────────────────────────────────────────────────────────┐
+│  STAP 1: STARTER UITPAKKEN                                   │
+│  ──────────────────────────────────────────────────────────  │
+│  Unzip opencode-ui-starter.zip uit lesbestanden              │
+│  npm install + npm run dev                                   │
+├──────────────────────────────────────────────────────────────┤
+│  STAP 2: OPENCODE OPENEN                                     │
+│  ──────────────────────────────────────────────────────────  │
+│  Desktop App → Open Folder → je project                      │
+│  Ctrl+X M → OpenCode Zen → Kimi K2.5 Free                    │
+├──────────────────────────────────────────────────────────────┤
+│  STAP 3: BOUW MINSTENS 3 VAN DE 5 DEMO-PROMPTS NA            │
+│  ──────────────────────────────────────────────────────────  │
+│  □ Smooth scroll + Hero                                      │
+│  □ Features sectie                                           │
+│  □ Sticky horizontal panels                                  │
+│  □ Parallax-blobs                                            │
+│  □ Micro-interactions                                        │
+│  💡 Of bedenk eigen variant — zelfde stack (Lenis + GSAP)    │
+├──────────────────────────────────────────────────────────────┤
+│  STAP 4: ONLINE ZETTEN (FROM SCRATCH)                        │
+│  ──────────────────────────────────────────────────────────  │
+│  git init && git add . && git commit -m "Initial"            │
+│  github.com → New repo (leeg)                                │
+│  git remote add origin <repo-url> && git push -u origin main │
+│  vercel.com → Add New → Import repo → Deploy                 │
+│                                                              │
+│  Daarna: git push = automatische re-deploy                   │
+└──────────────────────────────────────────────────────────────┘
+```
+
+**Doel:** minimaal 2x deployen | ☕ **Pauze:** halverwege
+
+---
+
+## BLOK 7: AFSLUITING
+
+### Slide 22: Samenvatting + Huiswerk
+
+**Vandaag gezien:**
+- Het CLI-landschap: Claude Code, Codex, OpenCode
+- Plan vs Build mode + `@explore`
+- Live demo: scroll-storytelling landing page met Lenis + GSAP
+- Git push → Vercel auto-deploy + preview per branch
+
+**Huiswerk:**
+1. Bouw je eigen scroll-landing page (eigen merknaam, eigen kleurpalet)
+2. Minimaal 3 van de 5 demo-features
+3. Bonus: voeg één eigen animatie toe (dark mode, cursor-trail, etc.)
+4. Inleveren: link naar Vercel + link naar GitHub in Teams
+
+---
+
+### Slide 23: Volgende les
+
+**Les 3 — Cursor Setup & Basics**
+
+- VSCode-achtige IDE met AI ingebouwd
+- Tab autocomplete, Composer, Chat
+- Debug-challenges live oplossen
+- Cursor rules
+
+OpenCode is laagdrempelig en open. Cursor is professioneler en heeft meer agentic features. Beide zijn waardevol op verschillende momenten.
+
+Tot volgende week!