fix: add page
This commit is contained in:
Tim Rijkse
@@ -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
|
||||
|
||||
@@ -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!"
|
||||
|
||||
|
||||
@@ -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!"
|
||||
|
||||
|
||||
@@ -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?"
|
||||
|
||||
---
|
||||
|
||||
@@ -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
|
||||
|
||||
@@ -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
|
||||
```
|
||||
|
||||
|
||||
@@ -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`
|
||||
|
||||
Reference in New Issue
Block a user