From 3584a9ae759588a54ce7c8b1d66848cbd372330a Mon Sep 17 00:00:00 2001 From: Tim Rijkse Date: Sat, 7 Feb 2026 09:49:48 +0100 Subject: [PATCH] fix: add page --- Les02-OpenCode/Les02-Bijlage-A-Lesopdracht.md | 68 ++++++++----------- Les02-OpenCode/Les02-Docenttekst-Notes.md | 12 ++-- Les02-OpenCode/Les02-Docenttekst.md | 12 ++-- Les02-OpenCode/Les02-Lesplan.md | 13 ++-- Les02-OpenCode/Les02-Slide-Overzicht.md | 9 +-- Samenvattingen/Les02-Samenvatting.md | 19 +++--- readme.md | 4 +- 7 files changed, 62 insertions(+), 75 deletions(-) diff --git a/Les02-OpenCode/Les02-Bijlage-A-Lesopdracht.md b/Les02-OpenCode/Les02-Bijlage-A-Lesopdracht.md index 899c88c..2f70102 100644 --- a/Les02-OpenCode/Les02-Bijlage-A-Lesopdracht.md +++ b/Les02-OpenCode/Les02-Bijlage-A-Lesopdracht.md @@ -73,55 +73,40 @@ opencode Check dat je in Plan mode zit (📋 icoon). ``` -Analyseer dit project. Welke componenten zijn er? -Waar zou ik een testimonials sectie kunnen toevoegen? +Analyseer dit project. Hoe werkt de routing? +Hoe maak ik een nieuwe pagina in Next.js? ``` -### Fase 2: Bouw (Build Mode) +### Fase 2: Maak een nieuwe pagina (Build Mode) Druk `Tab` om naar Build mode (🔨) te gaan. -**Kies minimaal 2 van deze opdrachten:** +**Opdracht: Maak een nieuwe pagina met componenten** -#### Optie A: Testimonials Sectie +#### Stap 1: Kies je pagina +Kies ÊÊn van deze opties: +- **About** - Over ons pagina +- **Services** - Diensten pagina +- **Contact** - Contact pagina + +#### Stap 2: Maak de pagina aan ``` -@src/components/ -Maak een Testimonials component met: -- 3 testimonial cards naast elkaar -- Foto placeholder, quote, naam, functie -- Responsive: onder elkaar op mobile -- Voeg toe aan de homepage onder de hero +Maak een nieuwe pagina /about (of /services of /contact). +De pagina moet minimaal 2 componenten bevatten: +- Een hero sectie met titel en beschrijving +- Een content sectie (bijv. team cards, diensten lijst, of contact info) +Gebruik Tailwind CSS voor styling. ``` -#### Optie B: Pricing Sectie +#### Stap 3: Voeg navigatie toe ``` -@src/components/ -Maak een Pricing component met: -- 3 pricing tiers (Basic, Pro, Enterprise) -- Features lijst per tier -- CTA button per tier -- Highlight de middelste (Pro) +@app/page.tsx +Voeg een link toe naar de nieuwe pagina. +De link moet zichtbaar zijn in de hero of header. +Gebruik Next.js Link component. ``` -#### Optie C: FAQ Sectie -``` -@src/components/ -Maak een FAQ component met: -- Minimaal 5 vragen -- Accordion style (klik om te openen) -- Smooth animatie -``` - -#### Optie D: Verbeter bestaande componenten -``` -@src/components/[ComponentNaam].tsx -Verbeter deze component: -- Betere mobile responsiveness -- Hover effecten toevoegen -- Animaties bij scroll -``` - -**Checkpoint:** ✅ Nieuwe sectie(s) toegevoegd +**Checkpoint:** ✅ Nieuwe pagina gemaakt + link op homepage --- @@ -193,7 +178,8 @@ Maak de heading groter en gebruik een gradient Aan het einde van de les: - [ ] Website draait lokaal -- [ ] Minimaal 1 nieuwe sectie toegevoegd +- [ ] Nieuwe pagina aangemaakt (bijv. /about) +- [ ] Link op homepage naar nieuwe pagina - [ ] Minimaal 2x gepusht naar Vercel - [ ] Wijzigingen zijn live @@ -201,7 +187,7 @@ Aan het einde van de les: ## Bonus (als je klaar bent) +- [ ] Voeg een tweede pagina toe +- [ ] Maak een navbar component met links naar alle pagina's - [ ] Voeg dark mode toggle toe -- [ ] Implementeer smooth scroll navigatie -- [ ] Voeg contact formulier toe -- [ ] Maak een aparte pagina (About, Contact) +- [ ] Implementeer smooth scroll animaties diff --git a/Les02-OpenCode/Les02-Docenttekst-Notes.md b/Les02-OpenCode/Les02-Docenttekst-Notes.md index 4a01df6..8e8d3b6 100644 --- a/Les02-OpenCode/Les02-Docenttekst-Notes.md +++ b/Les02-OpenCode/Les02-Docenttekst-Notes.md @@ -105,14 +105,14 @@ npm run dev ### Slide 12: Demo - Plan Mode - **DEMO:** -- "Analyseer dit project. Waar kan ik testimonials toevoegen?" +- "Analyseer dit project. Hoe werkt de routing?" - AI leest alleen, verandert niets --- ### Slide 13: Demo - Build Mode - Tab → 🔨 -- **DEMO:** "Maak Testimonials component" +- **DEMO:** "Maak nieuwe pagina /about met hero en link op homepage" - Toon resultaat in browser --- @@ -125,7 +125,7 @@ npm run dev - **DEMO:** ```bash git add . -git commit -m "Add testimonials" +git commit -m "Add about page" git push ``` - Of: GitHub Desktop @@ -152,11 +152,11 @@ git push --- ### Slide 17: Opdracht (09:50-09:55) -- **Breid je v0 website uit:** +- **Maak nieuwe pagina in je v0 project:** 1. Clone/pull repo 2. npm install + npm run dev - 3. Voeg secties toe met OpenCode - 4. Push → live op Vercel + 3. Maak nieuwe pagina (/about, /services, /contact) + 4. Voeg link op homepage + push → live op Vercel - **Doel:** minimaal 2x deployen - "Kwart over 10 pauze!" diff --git a/Les02-OpenCode/Les02-Docenttekst.md b/Les02-OpenCode/Les02-Docenttekst.md index 3abf351..9e41b19 100644 --- a/Les02-OpenCode/Les02-Docenttekst.md +++ b/Les02-OpenCode/Les02-Docenttekst.md @@ -146,7 +146,7 @@ _[LIVE DEMO]_ "Nu start ik OpenCode in dit project. Ik zit in Plan mode - zie het klembord." -"Ik vraag: 'Analyseer dit project. Welke componenten zijn er en waar zou ik een testimonials sectie kunnen toevoegen?'" +"Ik vraag: 'Analyseer dit project. Hoe werkt de routing? Hoe maak ik een nieuwe pagina?'" _[Wacht op response]_ @@ -162,11 +162,11 @@ _[LIVE DEMO]_ "Tab om naar Build mode te gaan. Nu vraag ik:" -"@src/components/ Maak een Testimonials component met 3 cards, responsive, en voeg toe aan de homepage." +"Maak een nieuwe pagina /about met een hero sectie en een team sectie. Voeg ook een link toe op de homepage naar /about." _[Wacht op generatie]_ -"Het maakt bestanden aan, past imports aan. Kijk in de browser - refresh - daar is de nieuwe sectie!" +"Het maakt de pagina aan, de componenten, past de homepage aan. Kijk in de browser - refresh - daar is de link! En als ik klik... de nieuwe pagina!" --- @@ -228,11 +228,11 @@ _[Toon Vercel dashboard]_ **[09:50 - 09:55]** _(5 minuten uitleg)_ -"Jullie gaan nu jullie eigen v0 website uitbreiden." +"Jullie gaan nu een nieuwe pagina toevoegen aan jullie v0 website." -"Stap 1: Clone je repo of pull latest. Stap 2: npm install, npm run dev. Stap 3: Voeg nieuwe secties toe met OpenCode. Stap 4: Push naar GitHub, bekijk live op Vercel." +"Stap 1: Clone je repo of pull latest. Stap 2: npm install, npm run dev. Stap 3: Maak een nieuwe pagina met OpenCode - about, services, of contact. Voeg componenten toe en een link op de homepage. Stap 4: Push naar GitHub, bekijk live op Vercel." -"Doel: minimaal 2 keer deployen. Je mag kiezen wat je toevoegt - testimonials, pricing, FAQ, of verbeteringen aan bestaande componenten." +"Doel: minimaal 2 keer deployen. Je leert hoe routing werkt in Next.js Ên hoe je navigatie toevoegt." "Kwart over 10 hebben we een korte pauze van 15 minuten. Begin!" diff --git a/Les02-OpenCode/Les02-Lesplan.md b/Les02-OpenCode/Les02-Lesplan.md index 50cd17d..d9c76e0 100644 --- a/Les02-OpenCode/Les02-Lesplan.md +++ b/Les02-OpenCode/Les02-Lesplan.md @@ -102,14 +102,14 @@ Na deze les kan de student: | 10:15-10:30 | ☕ **PAUZE** | - | | 10:30-11:30 | Studenten werken (60 min) | - | -**Opdracht:** Breid je v0 website uit met OpenCode +**Opdracht:** Maak een nieuwe pagina in je v0 project 1. Clone je v0 repo (of gebruik GitHub Desktop) 2. Run lokaal met `npm install` + `npm run dev` -3. Voeg toe met OpenCode: - - Nieuwe sectie (Testimonials, Pricing, FAQ) - - Verbeteringen aan bestaande componenten - - Mobile responsiveness fixes +3. Met OpenCode: + - Maak nieuwe pagina (/about, /services, of /contact) + - Voeg minimaal 2 componenten toe aan de pagina + - Voeg link op homepage toe naar de nieuwe pagina 4. Push naar GitHub → bekijk live op Vercel **Tijdens het werken:** @@ -120,9 +120,10 @@ Na deze les kan de student: **Tussentijdse check (10:45):** - "Wie heeft lokaal draaien?" -- "Wie heeft al gepusht naar Vercel?" +- "Wie heeft een nieuwe pagina aangemaakt?" **Check (11:15):** +- "Wie heeft de link op de homepage?" - "Wie heeft 2x gepusht?" --- diff --git a/Les02-OpenCode/Les02-Slide-Overzicht.md b/Les02-OpenCode/Les02-Slide-Overzicht.md index ce86b97..d57b842 100644 --- a/Les02-OpenCode/Les02-Slide-Overzicht.md +++ b/Les02-OpenCode/Les02-Slide-Overzicht.md @@ -221,14 +221,15 @@ Of gebruik GitHub Desktop! ### Slide 17: Aan de slag! -**Opdracht:** Breid je v0 website uit met OpenCode +**Opdracht:** Maak een nieuwe pagina in je v0 project **Stappen:** 1. Clone je repo (of pull latest) 2. `npm install` + `npm run dev` -3. Voeg toe met OpenCode: - - Nieuwe sectie (Testimonials, Pricing, of FAQ) - - Verbeteringen aan bestaande componenten +3. Met OpenCode: + - Maak nieuwe pagina (/about, /services, of /contact) + - Voeg minimaal 2 componenten toe aan de pagina + - Voeg link op homepage toe naar de nieuwe pagina 4. Push naar GitHub → bekijk live! **Doel:** Minimaal 2 keer deployen naar Vercel diff --git a/Samenvattingen/Les02-Samenvatting.md b/Samenvattingen/Les02-Samenvatting.md index c55fe87..dc239c4 100644 --- a/Samenvattingen/Les02-Samenvatting.md +++ b/Samenvattingen/Les02-Samenvatting.md @@ -99,7 +99,7 @@ Voor nieuwe projecten (niet gekoppeld via v0): ## Lesopdracht (85 min hands-on) ### Doel -Breid je v0 website uit met OpenCode. Leer de volledige workflow: lokaal draaien, uitbreiden met AI, deployen via git push. +Maak een nieuwe pagina in je v0 project. Leer de volledige workflow: lokaal draaien, pagina maken met AI, deployen via git push. ### Stap 1: Project Lokaal Draaien (15 min) @@ -123,27 +123,26 @@ Selecteer gratis AI model: 2. Kies "OpenCode Zen" 3. Selecteer "GLM 4.7" -### Stap 3: Uitbreiden met OpenCode (45 min) +### Stap 3: Nieuwe Pagina Maken (45 min) **Fase 1 - Plan mode (📋):** ``` -Analyseer dit project. Welke componenten zijn er? -Waar zou ik een testimonials sectie kunnen toevoegen? +Analyseer dit project. Hoe werkt de routing? +Hoe maak ik een nieuwe pagina in Next.js? ``` **Fase 2 - Build mode (🔨):** -Kies minimaal 2 van deze opdrachten: -- **Testimonials sectie** - 3 cards, responsive -- **Pricing sectie** - 3 tiers, highlight middelste -- **FAQ sectie** - accordion style, animaties -- **Verbeter bestaande componenten** - hover effecten, scroll animaties +Maak een nieuwe pagina: +- Kies: **/about**, **/services**, of **/contact** +- Voeg minimaal 2 componenten toe (hero + content) +- Voeg link op homepage toe naar de nieuwe pagina ### Stap 4: Deploy naar Vercel (10 min) ```bash git add . -git commit -m "Add testimonials section" +git commit -m "Add about page" git push ``` diff --git a/readme.md b/readme.md index 64dc20e..baccf0d 100644 --- a/readme.md +++ b/readme.md @@ -103,10 +103,10 @@ Kennismaking met AI, LLMs en de basis van AI-assisted development. - Korte terugblik op Les 1 (v0 workflow) - OpenCode installeren en OpenCode Zen configureren - Bestaand v0 project clonen en lokaal draaien -- Met OpenCode nieuwe secties toevoegen +- Met OpenCode een nieuwe pagina maken + link op homepage - Deployen via git push → Vercel -**Lesopdracht:** Breid je v0 website uit met OpenCode. Clone je repo, draai lokaal, voeg nieuwe secties toe (testimonials, pricing, FAQ), deploy minimaal 2x naar Vercel. +**Lesopdracht:** Maak een nieuwe pagina in je v0 project. Clone je repo, draai lokaal, maak een pagina (/about, /services, of /contact) met componenten, voeg link op homepage toe, deploy minimaal 2x naar Vercel. **Huiswerk:** - Maak nieuw project vanaf scratch met `create-next-app`