245 lines
13 KiB
Markdown
245 lines
13 KiB
Markdown
# Project Logboek - Claude Code Workshop Sales Page
|
|
|
|
**Totaal gedocumenteerde tijd:** ~370 min (geschat)
|
|
|
|
---
|
|
|
|
## 2026-04-27 - Sessie 9: Worksheet en PDF update (~10 min)
|
|
|
|
### Wat is gedaan
|
|
- Superpowers downloadlink in `content/worksheet.md` gewijzigd van lokale zip naar directe GitHub URL (`https://github.com/obra/superpowers/archive/refs/heads/main.zip`)
|
|
- PDF `public/20260313-Cursus-Claude-Code.pdf` toegevoegd aan de public assets
|
|
|
|
### Technische beslissingen
|
|
- GitHub directe archief-URL gebruikt zodat altijd de laatste versie van Superpowers gedownload wordt, zonder lokale kopie bij te houden
|
|
|
|
---
|
|
|
|
## 2026-04-17 - Sessie 8: Migratie naar workshopclaudecode.nl (~240 min)
|
|
|
|
### Wat is gebouwd
|
|
- Volledige migratie van `https://frankmeeuwsen.com/workshopclaudecode/` naar `https://workshopclaudecode.nl`
|
|
- Hosting verhuisd van subdirectory in WordPress Docker container naar aparte Coolify static-app container (zelfde Hetzner server, 37.27.183.46)
|
|
- Multi-stage Dockerfile: node:20-alpine bouwt Vite output, nginx:alpine serveert dist/
|
|
- nginx.conf met `try_files $uri $uri/ /index.html` voor correcte SPA-routing
|
|
- Public Forgejo repo aangemaakt: https://forgejo.dutchstack.nl/frankmeeuwsen/workshopclaudecode
|
|
- Vite `base` pad gewijzigd van `/workshopclaudecode/` naar `/`
|
|
- 301 redirect `.htaccess` in WordPress container: `/workshopclaudecode/*` -> `https://workshopclaudecode.nl/*` (met pad-behoud)
|
|
- Nieuwe Mollie payment link aangemaakt met redirect naar `https://workshopclaudecode.nl/bedankt`
|
|
- Tally form `kd7y81` bijgewerkt met nieuwe redirect URL
|
|
- `deploy.sh` verwijderd, vervangen door auto-deploy via Coolify webhook
|
|
- `availableSpots` bijgewerkt naar 5 (3 plekken verkocht)
|
|
- `CLAUDE.md` bijgewerkt met nieuwe deploy-flow en Forgejo URLs
|
|
|
|
### Technische beslissingen
|
|
- Coolify static-app via Dockerfile build pack (niet Static of Nixpacks) voor maximale controle over SPA-fallback in nginx
|
|
- Public repo gekozen boven private + deploy key na een uur SSH-key debuggen: code bevat geen secrets en wordt sowieso publiek geserveerd
|
|
- Coolify webhook: juiste URL is de Source Webhook onder de Webhooks tab (niet de "Deploy via API" URL)
|
|
- `.htaccess.bak` opgeslagen als backup van originele .htaccess in WordPress container
|
|
|
|
### Geverifieerde werking productie
|
|
- Homepage HTTP 200, HTTP/2 + HTTP/3, geldig SSL
|
|
- SPA routes `/inschrijven`, `/bedankt`, `/voorwaarden`, `/privacy` werken correct
|
|
- OG/canonical tags wijzen naar workshopclaudecode.nl
|
|
- Test-inschrijving via Tally -> Mollie -> /bedankt werkt end-to-end
|
|
- 301 redirect oude URL met pad-behoud werkt
|
|
- Webhook Forgejo -> Coolify triggert auto-deploy bij git push
|
|
|
|
### Commits deze sessie
|
|
- `feat: migratie naar workshopclaudecode.nl als root domein`
|
|
- `feat: Docker setup voor Coolify deploy (nginx + SPA fallback)`
|
|
- `chore: deploy.sh verwijderen (vervangen door Coolify auto-deploy)`
|
|
- `fix: content/ niet uitsluiten in Dockerfile build context`
|
|
- `chore: availableSpots naar 5 (3 plekken verkocht)`
|
|
- `docs: CLAUDE.md bijwerken naar nieuwe Coolify deploy-flow`
|
|
- `test: availableSpots tijdelijk naar 6 voor webhook deploy-test` + revert
|
|
|
|
### Volgende sessie
|
|
- [ ] `www.workshopclaudecode.nl` toevoegen als 2e domein in Coolify (geeft nu SSL-fout, niet kritisch)
|
|
- [ ] Cloudflare/Forgejo URL-eenheid uitzoeken (SSH op git.dutchstack.nl vs HTTPS op forgejo.dutchstack.nl)
|
|
- [ ] Over ~1 maand: oude statische bestanden uit WordPress container opruimen, alleen .htaccess laten staan
|
|
- [ ] Signup.jsx regel ~75: hardcoded datum/tijd/locatie nog naar WORKSHOP_CONFIG migreren
|
|
|
|
---
|
|
|
|
## 2026-03-04 - Sessie 7: Installatiepagina voor deelnemers (40 min)
|
|
|
|
### Wat is gebouwd
|
|
- Nieuwe `/installatie` pagina aangemaakt (`src/pages/Installatie.jsx`) voor workshop deelnemers
|
|
- OS-tabs (Mac/Windows) met conditional rendering voor OS-specifieke instructies
|
|
- Accordion component voor terminal informatie (uitklapbaar)
|
|
- Numbered steps layout voor stapsgewijze installatie-instructies
|
|
- 5 screenshots geintegreerd in `public/images/installatie/` met correcte `BASE_URL` paden
|
|
- OS-afhankelijke welcome screenshots (Mac vs Windows)
|
|
- Route toegevoegd in `src/main.jsx` (`/installatie`)
|
|
- Content markdown bestanden toegevoegd: `content/installatie-desktop.md` en `content/installatie-workshop.md`
|
|
- `preflight.sh` regex fix voor subdirectory asset paden (`public/images/submap/`)
|
|
|
|
### Technische beslissingen
|
|
- OS-tab state via `useState` in Installatie.jsx (geen extra library)
|
|
- Accordion toggle via lokale state per sectie
|
|
- Screenshots via `${import.meta.env.BASE_URL}images/installatie/...` (consistent met bestaand patroon)
|
|
- Preflight regex uitgebreid zodat subdirectory paden in `public/` correct gedetecteerd worden
|
|
|
|
### Volgende sessie
|
|
- [ ] Installatiepagina link mailen naar deelnemers voor de workshop (6 maart)
|
|
- [ ] Final check: alle links werken op productie
|
|
- [ ] Opening herwerken met sterkere pain point hook
|
|
|
|
---
|
|
|
|
## 2025-01-29 - Sessie 1: Initiële setup en content aanpassingen (~25m)
|
|
|
|
### Wat is gebouwd
|
|
- Hero sectie uitgebreid met twee-kolommen layout (tekst links, afbeelding placeholder rechts)
|
|
- Workshop details (datum, tijd, locatie) prominent gemaakt met grote iconen en labels
|
|
- Testimonials sectie verplaatst naar boven "Wat je meeneemt naar huis"
|
|
- React Router toegevoegd voor pagina navigatie
|
|
- Privacy pagina aangemaakt (/privacy) met standaard tekst
|
|
- Algemene Voorwaarden pagina aangemaakt (/voorwaarden) met standaard tekst
|
|
- Footer bijgewerkt met werkende links naar juridische pagina's
|
|
|
|
### Content aanpassingen
|
|
- Lunch tekst: "Wonders of Work heeft een heerlijke lunch voor ons klaarstaan..."
|
|
- Kleuren omgewisseld: "Wat je nodig hebt" = groen (teal), "Wat je niet nodig hebt" = rood (coral)
|
|
- Social links toegevoegd: LinkedIn (linkedin.com/in/frankmeeuwsen), Website (frankmeeuwsen.com)
|
|
- Prijs: €449 excl. BTW (was incl. BTW)
|
|
- Verwijderd uit inbegrepen: werkboek en community access
|
|
- "Vol is vol" tekst verwijderd
|
|
- FAQ "geld terug" vraag verwijderd
|
|
- Footer: "Claude Code Hands-on Sessie" + email contact + LinkedIn
|
|
- Contact: alleen email (frank@frankmeeuwsen.com) en LinkedIn, geen telefoon
|
|
|
|
### Technische beslissingen
|
|
- React Router DOM toegevoegd voor multi-page support
|
|
- Aparte pages folder aangemaakt voor Privacy en Terms componenten
|
|
- Link componenten gebruikt voor interne navigatie (SEO-vriendelijk)
|
|
|
|
### Volgende sessie
|
|
- [x] Echte afbeelding toevoegen in Hero placeholder
|
|
- [x] Bio tekst invullen in Trainer sectie
|
|
- [x] Privacy en Voorwaarden teksten finaliseren
|
|
- [x] Testimonials content toevoegen (echte quotes)
|
|
- [ ] Inschrijfformulier/betaallink toevoegen
|
|
|
|
## 2026-02-10 - Sessie 2: Content sync, juridische pagina's en cookiebanner
|
|
|
|
### Wat is gebouwd
|
|
- Content gesynchroniseerd van workshop-sales-page.md naar alle JSX componenten
|
|
- Prijs aangepast: €449 → €399 excl. BTW (in Pricing, StickyBar, Terms)
|
|
- Max deelnemers aangepast: 7 → 8
|
|
- Echte testimonial toegevoegd (Floor van Riet)
|
|
- Privacybeleid volledig uitgeschreven (AVG-compliant, met Umami analytics en Google Fonts vermelding)
|
|
- Algemene Voorwaarden volledig uitgeschreven (14 artikelen, herroepingsrecht-uitzondering, getrapt annuleringsbeleid)
|
|
- CookieBanner component gebouwd met localStorage persistentie
|
|
- FAQ uitgebreid met annuleringsvraag (consistent met getrapt beleid)
|
|
- KvK-nummer (98386247) en vestigingsplaats (Utrecht) ingevuld in Privacy en Terms
|
|
|
|
### Technische beslissingen
|
|
- CookieBanner gebruikt localStorage om "Begrepen" keuze te onthouden
|
|
- Herroepingsrecht expliciet uitgesloten (art. 6:230p lid 1 sub l BW) - workshops met vaste datum
|
|
- Bewaartermijn factuurgegevens: 7 jaar (fiscale bewaarplicht)
|
|
|
|
## 2026-02-10 - Sessie 3: Hero titel en workshop foto
|
|
|
|
### Wat is gebouwd
|
|
- Nieuwe hero headline: "Bouw zelf wat je nu huurt - met Claude Code" (business-gericht)
|
|
- Headline hiërarchie aangepast: nieuwe titel als h1, "Van dit moet ik uitzoeken naar dit werkt gewoon" als subheadline
|
|
- Trainer sectie: placeholder SVG vervangen door echte foto + 4 bio-alinea's
|
|
- Workshop foto geüpdatet (frank-workshop-claude-code.jpg)
|
|
|
|
### Technische beslissingen
|
|
- Hero twee-kolommen layout: tekst links, foto rechts (verborgen op mobile)
|
|
- CSS filters op foto: brightness(1.12) contrast(1.05) saturate(0.95)
|
|
- Workshop details (datum/tijd/locatie) compact weergegeven met iconen
|
|
|
|
### Volgende sessie
|
|
- [x] Inschrijfformulier/betaallink toevoegen
|
|
- [x] Deploy naar productie
|
|
- [x] SEO meta tags toevoegen (Open Graph, Twitter Cards)
|
|
- [x] Formulier validatie en betalingsflow
|
|
|
|
## 2026-02-10 - Sessie 4: Mollie betaalflow, SEO en deploy
|
|
|
|
### Wat is gebouwd
|
|
- Mollie Payment Links aangemaakt (test + live) voor workshop betaling
|
|
- Tally formulier geintegreerd voor e-mailverzameling voor inschrijving
|
|
- Inschrijfpagina (/inschrijven) met embedded Tally formulier
|
|
- Bedankt-pagina (/bedankt) voor na succesvolle betaling
|
|
- Payment config bestand (src/config/payment.js) voor centrale URL configuratie
|
|
- CTA-knoppen (Pricing, FinalCTA, StickyBar) gelinkt naar inschrijfpagina via React Router Link
|
|
- Hero CTA scrollt nog steeds naar pricing sectie
|
|
- OpenGraph en Twitter Card meta tags in index.html
|
|
- OG-afbeelding (1200x630) gemaakt in Canva met site-kleuren en headline
|
|
- SVG favicon (coral CC icoon)
|
|
- Umami analytics script toegevoegd (zelfde ID als frankmeeuwsen.com)
|
|
- Canonical URL ingesteld
|
|
- Base path config (/workshopclaudecode/) alleen voor production builds
|
|
- .htaccess voor SPA-routing in submap
|
|
- Deploy script (deploy.sh) voor build + upload naar Coolify Docker container
|
|
- Site live gedeployd op https://frankmeeuwsen.com/workshopclaudecode/
|
|
|
|
### Technische beslissingen
|
|
- Tally als tussenstap voor e-mailverzameling (geen backend nodig, AVG-compliant, gratis)
|
|
- Betaalflow: CTA -> /inschrijven (Tally embed) -> Mollie betaalpagina -> /bedankt
|
|
- Vite base path conditioneel: / voor dev, /workshopclaudecode/ voor build
|
|
- React Router basename via import.meta.env.BASE_URL (werkt automatisch in beide modes)
|
|
- Hero afbeelding pad via import.meta.env.BASE_URL voor correcte submap-verwijzing
|
|
- Deploy via rsync + docker cp naar WordPress container op Coolify
|
|
|
|
### Volgende sessie
|
|
- [ ] Testimonials toevoegen zodra beschikbaar
|
|
- [ ] Structured data (JSON-LD Event schema) toevoegen
|
|
- [ ] Eerste testbetaling via live link verifiëren
|
|
|
|
## 2026-02-23 - Sessie 6: Wachtlijst flow en sold-out logica (duur: onbekend)
|
|
|
|
### Wat is gebouwd
|
|
- `availableSpots` bijgewerkt van 7 naar 3 (5 stoelen verkocht)
|
|
- Centrale workshop config aangemaakt: `src/config/workshop.js` met `totalSpots`, `availableSpots` en `isSoldOut`
|
|
- "Nog X plekken beschikbaar" toegevoegd aan StickyBar (desktop + mobile) en FinalCTA
|
|
- Wachtlijst flow gebouwd: `WaitlistSignup.jsx` + `WaitlistThankYou.jsx`
|
|
- Tally wachtlijst formulier ID `kdyPJZ` gekoppeld (https://tally.so/r/kdyPJZ)
|
|
- Twee nieuwe routes: `/wachtlijst-inschrijven` en `/wachtlijst-bedankt`
|
|
- Conditionale CTA's in Hero, FinalCTA, StickyBar en Pricing: schakelen automatisch om bij `isSoldOut: true`
|
|
- Testimonial Jefta Bade foto toegevoegd
|
|
- Alles gecommit en live gezet op https://frankmeeuwsen.com/workshopclaudecode/
|
|
|
|
### Technische beslissingen
|
|
- Centrale config in `src/config/workshop.js` zodat sold-out status op één plek te beheren is
|
|
- `isSoldOut` als boolean: bij `true` verdwijnen inschrijf-CTA's en verschijnt wachtlijst-flow overal
|
|
- Wachtlijst via Tally embed (zelfde patroon als inschrijfformulier)
|
|
|
|
### Volgende sessie
|
|
- [ ] Aanbeveling 1: Opening herwerken met sterkere pain point hook
|
|
- [ ] Aanbeveling 2: Specifieke tools/voorbeelden toevoegen aan Benefits sectie
|
|
- [ ] Aanbeveling 3: Flow optimaliseren (PainPoints -> Testimonials -> Benefits)
|
|
- [ ] Aanbeveling 4: CTA buttons verfijnen (consistente button-teksten)
|
|
- [ ] Aanbeveling 5: Pre-workshop checklist toevoegen
|
|
|
|
## 2026-02-12 - Sessie 5: Concurrentieanalyse en annuleringsbeleid (20 min)
|
|
|
|
### Wat is gebouwd
|
|
- Concurrentieanalyse AI Automation Society salespagina vergeleken met onze workshop pagina
|
|
- Rapport met 6 concrete aanbevelingen (content/analyse-ai-automation-society.md)
|
|
- Annuleringsbeleid zichtbaar gemaakt in Pricing sectie met shield-icoon en compacte tekst
|
|
- Todo-lijst aangemaakt (todos.md) met 5 openstaande optimalisaties
|
|
- Firecrawl CLI geïnstalleerd en geauthenticeerd voor web scraping
|
|
|
|
### Content aanpassingen
|
|
- Pricing component: annuleringsbeleid direct onder CTA-button getoond
|
|
- Visueel: shield-check icoon (teal) + grijze tekst met link naar voorwaarden
|
|
- Tekst: "Tot 2 weken voor start: volledige restitutie. Bekijk annuleringsbeleid"
|
|
|
|
### Analyse inzichten
|
|
- AI Automation Society gebruikt testimonials met concrete resultaten (€220k+ ROI)
|
|
- Hun flow: probleem-stelling -> live demo -> testimonials -> programma -> CTA
|
|
- Onze sterktes: duidelijke timing/locatie, concrete leerdoelen, kleinschalig karakter
|
|
- Verbeterpunten: meer concrete voorbeelden, sterker pain point, social proof met resultaten
|
|
|
|
### Volgende sessie
|
|
- [ ] Aanbeveling 1: Opening herwerken met sterkere pain point hook
|
|
- [ ] Aanbeveling 2: Specifieke tools/voorbeelden toevoegen aan Benefits sectie
|
|
- [ ] Aanbeveling 3: Flow optimaliseren (PainPoints -> Testimonials -> Benefits)
|
|
- [ ] Aanbeveling 4: CTA buttons verfijnen (consistente button-teksten)
|
|
- [ ] Aanbeveling 5: Pre-workshop checklist toevoegen
|