Bouw een sollicitatiewebsite met Claude Code in een middag

Elke recruiter krijgt dezelfde stapel PDF's. Dezelfde fonts, dezelfde layout, hetzelfde twee-pagina-formaat. Wat bijna niemand toevoegt is een link naar een strakke, interactieve website die dezelfde informatie beter presenteert, op elk apparaat werkt, en aanvoelt als iets dat bewust is gebouwd. Je kunt er een maken in één middag met Claude Code Desktop, zonder zelf een regel code te schrijven.

Het concept

Je voegt je PDF-CV toe zoals gewoonlijk. Maar in de begeleidende brief zet je een korte URL, een wachtwoord en één regel uitleg.

De recruiter opent de link, voert het wachtwoord in en ziet je CV als een gestructureerde, interactieve pagina — duidelijk gescheiden secties, soepele navigatie, mobielvriendelijke layout, meerdere talen. Nog steeds je CV. Alleen gepresenteerd op een manier die sneller te scannen is en moeilijker te vergeten.

Bekijk onze voorbeeldwebsite voor Homer J. Simpson!

Waarom recruiters hierop reageren

Recruiters lezen geen CV's. Ze scannen. Binnen seconden beslissen ze of iemand past en of het een nadere blik waard is.

Een goed gebouwde website verandert die afweging onmiddellijk. Het springt eruit tussen identieke PDF's. Het toont initiatief zonder het te claimen. Het demonstreert digitale competentie op een praktische manier in plaats van een performatieve.

Het doel is geen complexiteit. Het is minder frictie en een sterkere eerste indruk.

Wat Claude Code voor je doet

Je bouwt niets handmatig. Geef Claude Code je CV als bestand en een duidelijke instructie. Het leest je content, structureert het in secties, bouwt de layout en het ontwerp, voegt navigatie en afwerking toe, en levert een complete website op.

Je beoordeelt het, vraagt om aanpassingen, itereert totdat het er goed uitziet.

De workflow

Upload je CV

Open Claude Code Desktop en plaats je CV-bestand in de werkdirectory. Meer is niet nodig.

Vraag om een websiteversie

Schrijf je prompt. Voeg instructies toe voor een strak professioneel ontwerp, duidelijke secties (Overzicht, Ervaring, Opleiding, Vaardigheden, Talen, Contact), navigatie, mobiele layout, subtiele animaties, wachtwoordbeveiliging en meertalige ondersteuning.

Hier is een bewezen prompt die je direct kunt gebruiken. Het bevat alles wat we in deze blogpost bespreken!

De belangrijkste instructie: vereist expliciet één zelfstandig HTML-bestand.

Output a single self-contained index.html file with all CSS and JavaScript
inline. No external dependencies, no separate asset files.

Die ene beperking verwijdert vrijwel alle technische frictie. Geen build tools, geen dependencies, geen hosting-complexiteit. Eén bestand dat je overal kunt uploaden en het werkt.

Itereren

Claude Code genereert de volledige site. Je stuurt het bij met gewone taal:

• "Maak het minimalistischer"
• "Verbeter de leesbaarheid van de ervaringssectie"
• "De ruimte tussen secties voelt te krap"
• "Maak vaardigheden duidelijker zichtbaar"

De meeste iteraties duren minder dan een minuut.

Exporteren

Je eindigt met één index.html. Content, ontwerp, gedrag — alles erin. Geen extra bestanden.

Features die het waard zijn om te vragen

Een goede versie van deze site bevat verschillende dingen die bewust geprompt moeten worden.

Wachtwoordbeveiliging

De site opent met een wachtwoordscherm. Het wachtwoord wordt nooit als platte tekst opgeslagen — alleen een SHA-256 hash staat in het bestand. Toegang blijft alleen bestaan voor de browsersessie.

Je deelt het wachtwoord in je begeleidende brief. Dit creëert een gecontroleerde ervaring en voegt intentionaliteit toe die generieke publieke CV's niet hebben.

De implementatie ziet er zo uit:

// Hash stored in the file, never the plain password
const PASSWORD_HASH = "5e884898da28047151d0e56f8dc6292773603d0d6aabbdd62a11ef721d1542d8";

async function checkPassword(input) {
  const hash = await crypto.subtle.digest(
    'SHA-256',
    new TextEncoder().encode(input)
  );
  const hashHex = Array.from(new Uint8Array(hash))
    .map(b => b.toString(16).padStart(2, '0')).join('');
  return hashHex === PASSWORD_HASH;
}

De recruiter typt het wachtwoord, de browser hasht het client-side en vergelijkt het met de opgeslagen hash. Match → CV-content wordt zichtbaar. Geen server nodig.

Een vastberaden persoon kan je CV-content uit de HTML-bron halen ongeacht de hash. Dit is geen kluiswaardige beveiliging — het is een poort die toevallige bezoekers buitenhoudt en de ervaring bewust laat aanvoelen. Voor een sollicitatie is dat voldoende.

Meertalige ondersteuning

Hetzelfde CV beschikbaar in het Duits, Engels en Frans. Wisselen gaat direct — geen herlading, geen aparte pagina's.

Bijzonder waardevol in Zwitserse of internationale contexten waar taalflexibiliteit iets echts uitstraalt over hoe je werkt.

Geef Claude Code de opdracht dit te implementeren als een taaltoggle met een content-object:

const content = {
  de: { title: "Erfahrung", intro: "..." },
  en: { title: "Experience", intro: "..." },
  fr: { title: "Expérience", intro: "..." }
};

Vaste navigatie

Een sticky bovenbalk laat recruiters direct naar de sectie springen die ze belangrijk vinden. De meesten gaan direct naar Ervaring — de navigatie maakt dat één klik in plaats van scrollen door content die ze nog niet nodig hebben.

Ervaring-tijdlijn

In plaats van een compacte lijst verschijnt ervaring als een verticale tijdlijn. Makkelijker te scannen, duidelijkere progressie, visueel gestructureerd. Het verschil in leesbaarheid is aanzienlijk vergeleken met een platte opsommingslijst.

Scroll-animaties

Kleine details verbeteren het gevoel zonder af te leiden. Secties faden in bij scrollen, elementen verschijnen met lichte vertraging, een typeffect introduceert je functie. Goed uitgevoerd voelt dit gepolijst aan in plaats van opzichtig.

Geef Claude Code de opdracht om Intersection Observer te gebruiken voor scroll-getriggerde animaties in plaats van zware libraries. Houdt het bestand zelfstandig en performant.

Zet het online

Je hebt één index.html. Het live krijgen duurt ongeveer vijf minuten — en je kunt een professionele URL, hosting en een bijpassend e-mailadres allemaal op één plek hebben voor $5 per maand.

De eenvoudige route: Fastmail

Fastmail is het bekendst als snelle, privacyvriendelijke e-mailprovider. Wat minder mensen weten: wanneer je een domein registreert via Fastmail, kun je er direct een statische website op hosten vanuit je Fastmail Files — geen server, geen configuratie, geen deploy-pipeline.

Dit is het hele proces:

1. Meld je aan bij Fastmail — $5/maand, 30 dagen gratis proberen, 10% korting op het eerste jaar via onze link.
2. Registreer je domein — kies jouwnnaam.com tijdens het aanmelden of voeg het later toe. Fastmail beheert de DNS voor je.
3. Upload je bestand — ga naar Files, maak een map aan, upload je index.html.
4. Schakel hosting in — wijs in de Fastmail-instellingen je domein naar die map. SSL wordt automatisch ingericht.
5. Klaar. Je CV staat live op jouwnaam.com.

Je e-mailadres — email@jouwnaam.com — zit inbegrepen in hetzelfde abonnement. Je kunt zoveel aliassen aanmaken als je wilt: jobs@jouwnaam.com bijvoorbeeld. Zet het op je CV. Zo'n premium e-mailadres met een persoonlijke domeinnaam ziet er bewust uit, niet toevallig.

Voeg een QR-code toe aan je begeleidende brief

Genereer een QR-code van je URL en plaats deze in je begeleidende brief met een regel zoals:

"Een interactieve versie van mijn CV is beschikbaar op jouwnaam.com. Je kunt ook de onderstaande QR-code scannen. Wachtwoord: morning47"

Moeiteloos toegankelijk, vooral voor recruiters die sollicitaties op hun telefoon lezen.

De beperking die het laat werken

Het grootste deel van deze post gaat over het resultaat. De beslissing die het bruikbaar maakt is de één-bestand-beperking.

Als je Claude Code om een React-app vraagt of een project met aparte CSS- en JS-bestanden, introduceer je deployment-complexiteit die het doel tenietdoet. Een recruiter kan een GitHub-repository-link niet op dezelfde manier openen als een directe URL.

Eén bestand. Alles inline. Overal uploaden. Werkt meteen. Dat is wat dit praktisch maakt in plaats van theoretisch.

Niet over technisch zijn

Deze aanpak werkt omdat het de perceptie verandert voordat de recruiter één woord van je ervaring leest. Het laat zien dat je verder gaat dan het minimum, informatie helder presenteert en moderne tools goed genoeg begrijpt om ze voor echte doeleinden in te zetten.

De inspanning is één middag. Het signaal is onevenredig sterk. En eenmaal gebouwd hergebruik je het bij alle sollicitaties — pas de content aan in index.html, upload opnieuw, klaar.

Plak de URL van deze post in Claude Code of je AI-assistent naar keuze voor context als je vastloopt tijdens het bouwen.

Waar je dit kunt draaien

Voor e-mail op je eigen domein kost Fastmail $5/maand, ondersteunt onbeperkte domeinen en aliassen, en heeft een 30 dagen gratis proefperiode met 10% korting op het eerste jaar. Beter dan worstelen met self-hosted SMTP voor een sollicitatiedomein.

(Affiliate links — we ontvangen een kleine vergoeding als je je aanmeldt, zonder extra kosten voor jou.)