Vibe-code je fotografenportfolio

01Waarin dit verschilt van een sjabloonkiezer

Sjabloongalerijen tonen je een afgewerkt ontwerp en vragen of je het mooi vindt of niet. Deze tool gaat een laag dieper: elk van de zes richtingen hieronder is gebaseerd op een echt, werkend fotografenportfolio dat echt is bekeken (screenshots, live layout, berekende kleuren, berekende lettertypen), geen palet dat iemand heeft verzonnen om er mooi uit te zien in een staal. De Editorial-richting gebruikt bijvoorbeeld EB Garamond omdat dat letterlijk het lettertype is waarin de site van een echte modefotograaf is gezet, gevonden door de pagina rechtstreeks te inspecteren.

Twee patronen kwamen vrijwel overal terug op de echte sites waarop dit is gebaseerd, en ze zitten in elke richting hier ingebakken: navigatie verborgen achter één hamburgericoon zonder zichtbare linklijst, zelfs op desktop, en telkens één groot beeld in plaats van een raster. De kleur van de interface blijft overal bijna nul: de fotografie levert de kleur, niet de interface.

02Wat je aan het eind krijgt

Eén gestructureerde prompt die de algemene richting beschrijft, exacte hexkleuren, lettertypenamen en combinatie, paginalijst, navigatiegedrag, galerij-indeling en beeldkadrering, welke functies erbij komen, een hostingadvies met echte kostenafwegingen en een vaste set kwaliteitseisen voor de bouw (toegankelijke alt-teksten, responsieve breekpunten, geen hardgecodeerde geheimen, lazy-loaded beelden). Plak hem in de AI-codeerapp van je keuze en die heeft alles wat hij nodig heeft om te beginnen.

03Van prompt naar live site: de volledige route

De prompt is de ontwerpopdracht, niet de finish. Hier is elke stap tussen het kopiëren ervan en een echte URL die je op een visitekaartje kunt zetten, gratis of bijna gratis.

Kopieer de prompt en open een AI-codeerapp

Claude, Cursor, Claude Code, Windsurf of de AI-agent van Replit werken allemaal, alles wat bestanden voor je kan schrijven en opslaan, niet alleen chatten. Heb je er nog nooit een gebruikt, dan hoeft een browseroptie zoals claude.ai of Replit niets te installeren: plak de prompt als je eerste bericht.

Laat hem bouwen en kijk dan echt naar wat hij heeft gemaakt

Vraag hem de site te bouwen als statische HTML/CSS/JS (of wat het hostinggedeelte van de prompt ook voorschreef) en je een voorbeeld te laten zien. Controleer de zes dingen waar de prompt om vroeg (kleuren, lettertypen, galerijgedrag, navigatie, kadrering, pagina’s) voordat je verdergaat. Het is veel goedkoper om nu een verkeerde accentkleur te herstellen dan nadat de foto’s erin zitten.

Zet je echte foto’s, bio en contactgegevens erin

Vervang elk plaatsvervangend beeld en elke regel opvulltekst. Vraag je AI-app om gaandeweg voor elke foto een echt, specifiek alt-attribuut te schrijven, niet ‘image1.jpg’ maar een echte beschrijving, want dat is zowel een toegankelijkheidseis als een kleine SEO-boost. Dit is ook het moment om te controleren of het contactformulier echt naar een e-mailadres wijst dat je leest.

Zet hem live bij een gratis host

Als je de laag ‘Statisch & gratis’ hebt gekozen, vraag je AI-app je te begeleiden bij het koppelen van de projectmap of GitHub-repo aan een van de hosts op de pagina Hosting in het menu hierboven. Alle vier bouwen en deployen automatisch telkens als je een wijziging pusht; zodra het gekoppeld is, is er geen handmatige upload meer.

Koppel een eigen domein (optioneel, maar de moeite waard)

Een gratis subdomein (zoals yourname.netlify.app) werkt prima om mee te beginnen. Als je klaar bent voor yourname.com, is het een domeinaankoop plus één DNS-wijziging, verderop uitgebreid beschreven.

04Welke gratis host moet je gebruiken?

Elk van deze brengt een statische site kosteloos live, met gratis HTTPS en een gratis laag die het verkeer van een persoonlijk portfolio ruim aankan. De limieten van gratis lagen veranderen vrij vaak, dus beschouw de cijfers op de pagina Hosting als een algemeen beeld in plaats van exacte actuele getallen, en controleer de eigen prijspagina van elke aanbieder voordat je kiest.

Vraag je AI-codeerapp om de eigenlijke deploystappen samen met je te doen: ‘koppel dit project aan Netlify’ is een volkomen normale vraag, en meestal kan hij je binnen een paar minuten door het aanmaken van een account en de eerste deploy leiden.

05Een eigen domein koppelen

Een domein kost een klein jaarbedrag (meestal 10 tot 20 dollar per jaar, afhankelijk van de extensie), los van hosting, dat gratis blijft. De drie onderdelen:

1. Koop het domein. Namecheap, Cloudflare Registrar of de opvolger van Google Domains (Squarespace Domains).
2. Voeg een DNS-record toe. Een CNAME (of A-record) die je domein naar je host laat wijzen, toegevoegd in het dashboard van de registrar. Het zijn twee regels in de tabel van de registrar: een CNAME voor www die wijst naar het adres dat je host je geeft, zoals your-portfolio.netlify.app, en een A-record voor het kale domein dat naar het IP van de host wijst.
3. Voeg het toe bij je host. Plak hetzelfde domein in de instellingen voor ‘eigen domein’ van je host; HTTPS regelt zichzelf.

Elke host op de pagina Hosting heeft een tabblad ‘Custom domain’ of ‘Domains’ met het exacte record dat je moet toevoegen: kopieer het, voeg het toe bij je registrar en wacht. DNS-wijzigingen duren meestal minuten tot een paar uur, soms tot 24 à 48 uur. Je AI-codeerapp kan je door het dashboard van jouw registrar loodsen als je vastloopt; maak een screenshot van de instellingenpagina en vraag waarop je moet klikken. Hangslot zichtbaar, geen waarschuwing ‘niet beveiligd’: dat is de finish.

06Checklist voor de lancering

Vijf minuten met deze lijst vangt het meeste af wat een portfolio onaf doet ogen. De controles zijn de pagina Before launch in het menu hierboven; vink ze af terwijl je bezig bent.

07Veelgestelde vragen