Bouw een portfoliowebsite in 30 minuten (zonder te coderen)

Wat je in 30 minuten zult bouwen

Aan het eind van deze snelle bouw heb je een nette, one-page portfoliowebsite die drie dingen goed doet: toont wat je maakt, legt uit wie je bent en maakt het makkelijk om contact op te nemen.

Wat je hebt als je op “Publiceer” drukt

Een simpele pagina met:

• Een bovenste sectie (je naam + wat je doet + een duidelijke call to action)
• Een projecten-sectie met 3–6 werkzaamheden, elk met een korte beschrijving
• Een Over-sectie die in minder dan een minuut leesbaar is
• Een Contact-sectie met de juiste links (e-mail, social, boekingslink of een formulier)

Dit is opzettelijk minimaal. Een one-page portfolio is sneller om te bouwen, makkelijker bij te werken en converteert vaak beter dan een multi-page site wanneer iemand snel door je werk scrolt.

Voor wie dit bedoeld is

Deze aanpak past bij freelancers, studenten, creatieven en werkzoekenden die snel iets professioneel nodig hebben—vooral als je solliciteert, klanten pitcht of je werk deelt op sociale platforms.

Wat je klaar moet hebben voordat je begint

Om binnen 30 minuten te blijven, verzamel het volgende:

• 3–6 projecten (afbeeldingen, links of korte case-study notities)
• 1 headshot (of een simpel logo/avatar)
• Een korte bio (2–4 zinnen)
• Links die je wilt dat bezoekers aanklikken (e-mail, LinkedIn, Behance, GitHub, Dribbble, etc.)

Het 30-minuten tijdsplan

• Setup (5 minuten): kies een builder, start een site, kies een startontwerp
• Content (15 minuten): voeg projecten toe, schrijf je headline en Over, voeg contactlinks toe
• Polish (10 minuten): spacing, leesbaarheid, mobiele check en één laatste controle op typefouten

Plan de site voordat je begint

Een 30-minuten build werkt alleen als je 3–5 minuten besteedt aan bepalen wat “klaar” betekent. Anders verlies je tijd aan lettertypen, secties herschikken en twijfelen over wat je moet opnemen.

1) Stel één duidelijk doel

Kies het primaire resultaat voor je portfolio:

• Aangenomen worden (recruiters en hiring managers)
• Klanten krijgen (mensen die klaar zijn jouw dienst af te nemen)
• Een specialisme tonen (bijv. “UX voor fintech-apps” of “foodfotografie”)

Dit doel bepaalt wat je eerst highlight: je rol en resultaten voor hiring, je aanbod en proces voor klanten, of je nichewerk voor een specialisme.

2) Kies een simpele structuur

Bepaal of je bouwt:

• Single-page site: het snelst, het beste voor de meeste creatieven en freelancers. Bezoekers scrollen, begrijpen je en nemen contact op.
• Multi-page site: nuttig als je veel case studies, artikelen of meerdere diensten hebt.

Als je tegen de klok racet, begin dan nu met een single page—je kunt later altijd pagina's splitsen.

3) Kies 1–2 calls to action (CTA)

Kies één primaire CTA en (optioneel) één secundaire CTA. Voorbeelden:

• “E-mail me”
• “Boek een gesprek”
• “Download cv”

Alles op de pagina moet deze acties ondersteunen.

4) Schrijf één zin positionering

Voordat je een template aanraakt, formuleer een simpele regel:

Ik help [wie] met [wat], zodat ze [resultaat] krijgen.

Voorbeeld: “Ik help SaaS-startups met het ontwerpen van onboardingflows die churn verminderen en activatie verbeteren.”

Houd deze zin zichtbaar tijdens het bouwen—het is jouw filter voor wat je moet opnemen en wat je weglaat.

Kies een builder (waar je op moet letten)

Je builder bepaalt hoe snel dit “30-minuten” project aanvoelt. Kies iets dat je laat publiceren zonder tegen menu's te vechten.

Veelvoorkomende opties (en voor wie ze geschikt zijn)

• Websitebuilders (algemeen): goed als je een eenvoudige multi-page site wilt en ruimte om later te groeien.
• Portfolio-specifieke tools: uitstekend voor galerijen, projecten en case studies—ideaal voor ontwerpers, fotografen, illustratoren en andere visuele creatieven.
• Landingpage-tools: perfect voor een one-page portfolio met een sterke CTA (zoals “Boek een gesprek” of “E-mail me”).

Als je een meer aangepast resultaat wilt zonder een traditioneel dev-traject, is Koder.ai een andere route: het is een vibe-coding platform waar je je portfolio in chat beschrijft en een echte React-webapp genereert (met Go + PostgreSQL beschikbaar als je later backendfuncties toevoegt). Je kunt broncode exporteren, deployen/hosten, een custom domein koppelen en snapshots/rollback gebruiken—handig als je iets flexibels maar toch snel wilt.

Waar je op moet letten (zodat je geen tijd verliest)

Begin met deze must-haves:

• Templates die je echt kunt bewerken: schone layouts, makkelijke secties herordenen en verstandige typografie-standaarden
• Afbeeldingsafhandeling: automatische compressie, mooie galerijen en snel laden zonder handmatig schalen
• Mobiele bewerking en previews: je kunt spacing, fontgroottes en afbeelding-cropping voor mobiel aanpassen
• Ondersteuning voor custom domein: publiceer als yourname.com (niet een lang subdomein)

Controleer limieten voordat je kiest

Veel tools lijken goedkoop totdat je tegen een betaalmuur aanloopt. Scan op:

• Pagina-limieten (1 pagina vs. 5+ pagina's)
• Opslag en bandbreedte (belangrijk voor beeldrijke portfolio's)
• Formulieren (is een contactformulier inbegrepen? e-mailmeldingen? spambescherming?)
• Analytics (basisverkeersstatistieken, of ondersteuning voor jouw trackingtool)
• Branding verwijderen (kun je het logo/footer van de builder weghalen?)

Als prijs belangrijk is, vergelijk dan de tiers op /pricing en kies het minimale plan dat een custom domein en de bovenstaande functies ondersteunt. Je kunt later upgraden wanneer je portfolio groeit.

Kies een template die je niet tegenwerkt

Een goed template voelt als een nuttig startpunt—niet als een puzzel die je eerst moet oplossen voordat je publiceert. Wanneer je mikt op een 30-minuten build, is het verkeerde template de snelste manier om tijd te verliezen.

Begin met een portfolio- (of persoonlijke) template

Kies een template die ontworpen is om werk te tonen: een duidelijke hero-sectie, een grid voor projecten, een korte Over-sectie en een duidelijke Contact-sectie. Begin je met een zakelijke landingspagina of event-template, dan ben je bezig met verwijderen en herschikken in plaats van publiceren.

Kies clean boven creatief

Geef prioriteit aan leesbare typografie, sterke spacing en witte ruimte. Uitbundige animaties, ongebruikelijke navigatie en “creatieve” scroll-effecten zien er misschien indrukwekkend uit in demo's—maar maken content vaak lastiger te scannen en lastiger te bewerken.

Je portfolio is het product. Het template moet uit de weg gaan.

Zorg dat het de benodigde secties ondersteunt

Controleer vooraf of het template deze basics aankan zonder hacks:

• Projecten-sectie (grid of lijst met afbeelding, titel en korte beschrijving)
• Contact-sectie (knop, e-maillink of simpel formulier)
• Responsieve layout (schikt mooi op telefoons)

Als het template dit niet van nature ondersteunt, ga je het forceren—en dat is waar builders frustrerend voelen.

Bekijk mobiel voordat je verliefd wordt

Open de mobiele preview en scan op drie dingen:

• Is de tekst leesbaar zonder inzoomen?
• Worden project-miniaturen raar gecropped?
• Gedraagt het menu zich simpel (geen verwarrende navigatie)?

Als de mobiele weergave rommelig is nu, lost dat zich later niet vanzelf op. Kies een eenvoudiger template en blijf doorgaan—je kunt het uiterlijk altijd upgraden zodra je portfolio live staat.

Stel je branding in in 5 minuten

Je portfolio hoeft geen volledige brandguide om professioneel te ogen. Je hebt een paar consistente keuzes nodig zodat elk element bij elkaar past.

1) Logo of woordmerk (optioneel) + één accentkleur

Als je al een logo hebt, upload het en gebruik het alleen in header en footer. Als je dat niet hebt, werkt een strak woordmerk (je naam in een goed lettertype) prima—vooral voor freelancers en creatieven.

Kies één accentkleur voor links, knoppen en kleine highlights (niet voor grote tekstblokken). Een makkelijke manier: haal een kleur uit je beste projectafbeelding.

2) Kies 1–2 fonts (leesbaarheid wint)

Beperk je tot één font voor koppen en één voor bodytekst. Veel templates zien er “rommelig” uit omdat ze te veel stijlvarianten mengen.

Houd het leesbaar:

• Bodytekst moet op het eerste gezicht comfortabel zijn (vermijd ultradunne of te gestileerde fonts)
• Gebruik een duidelijke hiërarchie: grote koppen, normale body, kleinere bijschriften

Als je twijfelt, houd de template-standaarden aan en verander alleen de accentkleur.

3) Zet spacing, knoppen en afbeeldingshoeken vast

Consistentie is wat een no-code portfolio er custom uit laat zien.

Snelle instellingen om standaard te maken:

• Spacing: gebruik dezelfde verticale ruimte tussen secties (bijv. “Groot” padding overal)
• Knoppen: kies één stijl (filled of outline) en gebruik die site-breed
• Afbeeldingshoeken: kies scherpe hoeken of één afgeronde radius en houd het overal hetzelfde

Dit is belangrijker dan fancy effecten en zorgt dat templates gepolijst in plaats van “template-achtig” aanvoelen.

4) Controleer toegankelijkheid: contrast en leesbaarheid

Doe een 10-seconden scan: kun je overal de tekst goed lezen?

• Vermijd lichtgrijze tekst op wit
• Als je tekst op een foto plaatst, voeg dan een subtiele overlay toe of plaats tekst in een effen blok

Mobiel is vaak waar contrastproblemen het eerst opvallen, dus bekijk de mobiele preview voordat je verder gaat.

Bouw de paginastructuur (snel en simpel)

Je hebt geen ingewikkelde sitemap nodig om een goede no-code portfoliosite te publiceren. Eén heldere pagina is vaak genoeg—vooral met het doel om in 30 minuten klaar te zijn.

De minimale secties die werken

Gebruik een simpele top-tot-bottom flow. Deze secties dekken wat de meeste bezoekers binnen een minuut zoeken:

• Hero (bovenaan de pagina)
• Werk (jouw projecten)
• Over (kort, menselijk, specifiek)
• Testimonials (optioneel)
• Contact (maak het moeiteloos)

Als je template standaard extra blokken heeft (blog, nieuwsbrief, pricing, lange feature-grids), verwijder die eerst. Je kunt ze later toevoegen.

Bouw een Hero die z’n werk doet

Je hero is de “waarom zou ik geven om jou?” sectie. Gebruik deze korte checklist:

• Wie je bent (naam + rol)
• Wat je doet (één zin)
• Bewijs (klantnamen, jaren ervaring, award, niche)
• CTA (bijv. “Bekijk mijn werk” of “Contact opnemen”)

Houd het scanbaar: korte zinnen, duidelijke koppen en ademruimte.

Navigatie: alleen als je het nodig hebt

Voeg een navigatiebalk alleen toe als de pagina lang is. Als de pagina in een paar scrolls past, laat dan de layout mensen natuurlijk gidsen.

Houd de structuur consistent

Gebruik hetzelfde patroon voor elke sectie: een kop, één korte introregel en dan de inhoud. Consistentie laat je portfolio doelbewust aanvoelen—zelfs als je het snel hebt gemaakt.

Voeg projecten toe die je vaardigheden duidelijk tonen

Je projecten zijn het punt van je portfolio. Streef naar 3–6 sterke stukken die laten zien wat je kunt, in plaats van alles wat je ooit hebt gemaakt.

Kies de juiste 3–6 projecten

Kies werk dat past bij het soort opdrachten dat je nu wilt. Als je ontwerper bent, toon ontwerpen; als je fotograaf bent, leid met je beste serie; als generalist, kies een samenhangende mix.

Een snelle filter: verwijder alles wat je niet zelf overtuigend kunt uitleggen in een kort gesprek. Als een project een lange uitleg nodig heeft (“Ik heb er eigenlijk niet veel aan gedaan”), verzwakt het de hele site.

Gebruik een simpel, herhaalbaar projectformat

Voor elk project, gebruik dezelfde kerngegevens zodat mensen snel kunnen scannen:

• Het probleem: wat moest opgelost worden?
• Jouw rol: waarvoor was jij verantwoordelijk (en wat niet)?
• Wat je opleverde: concrete output (screens, merkassets, shoot, edits, copy, etc.)
• Resultaat: uitkomsten, leerpunten of impact (alleen als je ze kunt delen)

Houd het kort—2–5 korte zinnen is meestal genoeg.

Leid met de beste visual

Gebruik 3–6 afbeeldingen per project of een korte video als motion belangrijk is. Zet de sterkste afbeelding eerst, want die wordt het vaakst aangeklikt.

Voeg indien mogelijk één “proces”-visual toe (wireframe, schets, voor/na, contactsheet) om te laten zien hoe je denkt—zonder dat de pagina verandert in een case-study-roman.

Maak elk project scanbaar

Gebruik duidelijke titels en labels (bijv. “Brand identity”, “Web redesign”, “Editorial shoot”). Als een project een link heeft, maak dat duidelijk en simpel: “Bekijk live site” of “Bekijk de final cut.”

Schrijf een Over-sectie die mensen écht lezen

Je Over-sectie heeft één taak: iemand snel laten beslissen of jij de juiste persoon bent om te contacteren.

Begin met een simpele foto (of avatar)

Gebruik een vriendelijke headshot of een schone illustratie/avatar. Houd de achtergrond rustig en de belichting natuurlijk. Drukke scènes, partyfoto's en zware filters maken het moeilijker om je te lezen.

Gebruik een bio in 3 delen die makkelijk te scannen is

Streef naar 4–6 regels totaal:

• Huidige focus: wat je nu doet en voor wie ("Ik ontwerp landingspages voor SaaS-teams")
• Vroegere hoogtepunten: één of twee geloofwaardige bewijsstukken (een klanttype, een resultaat, een bekend project)
• Wat je zoekt: het soort werk dat je wilt ("Beschikbaar voor contract productdesign, 2–3 dagen/week")

Voorbeeld:

Ik ben een freelance UI-designer gericht op cleane, conversievriendelijke landingspages voor early-stage SaaS. Eerder hielp ik een fintech-startup met een nieuwe onboardingflow waarmee activatie met 18% verbeterde. Ik zoek 1–2 nieuwe klantprojecten deze maand.

Voeg geloofwaardigheid toe (alleen als het waar is)

Noem tools die je echt gebruikt (Figma, Webflow, Notion), industrieën die je kent (health, fintech, education) en awards/certificeringen alleen als ze accuraat en relevant zijn.

Maak de volgende stap moeiteloos

Als het past bij je vakgebied, voeg dan een korte regel toe met een duidelijk gelabeld PDF:

“Download cv (PDF)”

Plaats dit dicht bij je contactknop zodat iemand je verhaal kan scannen, je kan vertrouwen en meteen kan handelen.

Maak contact opnemen makkelijk

Een mooie portfolio werkt alleen als iemand je snel kan bereiken. Je contactsectie moet duidelijk, kort en frictionless zijn—geen zoeken, geen gokken.

Bied 2–3 duidelijke manieren om je te bereiken

Streef naar twee opties, drie maximaal:

• Contactformulier (beste voor de meeste bezoekers)
• Directe e-maillink (voor mensen die liever hun eigen inbox gebruiken)
• Één social link (kies degene die je echt checkt)

Voeg niet teveel opties toe; bezoekers aarzelen dan. Label het (en in je nav) als “Contact”.

Stel verwachtingen (en bouw vertrouwen)

Een korte zin kan veel mailwisselingen schelen en betere aanvragen aantrekken. Bijvoorbeeld:

"Ik ben beschikbaar voor freelance brandingprojecten vanaf volgende maand. Typische reactietijd: binnen 1–2 werkdagen."

Zeg dit alleen als het klopt. Als je geen opdrachten aanneemt, vermeld dan waar je wel voor openstaat (samenwerkingen, fulltime rollen, spreken, etc.).

Boekingskalender: alleen als je hem bijhoudt

Een boekingslink kan top zijn voor servicewerk, maar voeg hem alleen toe als je hem actueel houdt en het oké vindt dat mensen direct een slot pakken zonder eerst te mailen. Als je agenda vaak verandert, houd het bij e-mail + formulier.

Vermeld je locatie of tijdzone

Als je met klanten werkt, voeg een korte notitie toe zoals “Gebaseerd in Berlijn (CET)” of “Werkt wereldwijd (UTC-5).” Het helpt bij het plannen van meetings en straalt professionaliteit uit—vooral bij remote werk.

Herhaal de contactlink ook in je footer. Mensen scrollen, beslissen en klikken daar vaak.

Mobiel, snelheid en laatste kwaliteitschecks

Je kunt een mooie portfolio hebben en toch mensen verliezen als hij onhandig op een telefoon werkt of lang duurt om te laden. Spendeer een paar minuten hier en je site voelt gepolijst aan—zonder extra pagina's toe te voegen.

Check mobiel eerst (dán alles anders)

De meeste bezoekers zien je portfolio op een telefoon. Open de mobiele weergave in de builder en scroll snel van boven naar beneden.

Bekijk meerdere schermformaten (mobiel, tablet, desktop) en let op:

• Tekst die te klein of te breed wordt
• Projecten die in een vreemde volgorde stapelen
• Secties met ongemakkelijke gaten of items die tegen de randen aanzitten
• Knoppen die moeilijk te tikken zijn

Oplossingen zijn meestal simpel: padding verkleinen, consistente spacing instellen of multi-column blokken op mobiel naar één kolom zetten.

Snelheid: snijd het zware eraf

Snelle sites voelen professioneler. De grootste snelheids-killers zijn te grote afbeeldingen en achtergrondmedia.

Comprimeer grote afbeeldingen (project-screenshots). Als vuistregel hebben portfolio-afbeeldingen zelden meer dan ~2000px breed nodig. Heeft je builder een “optimize” toggle, zet hem aan.

Vermijd enorme achtergrondvideo's. Wil je echt beweging, kies dan een lichte loop of klein embedded clipje—je werk is het belangrijkste, niet de header.

Knoppen en links: de “vertrouwens” test

Klik elke knop en link—social icons, projectcards en je e-mail/contactknop.

Zorg dat:

• Links naar de juiste plek gaan
• Labels duidelijk zijn (“Bekijk case study” is duidelijker dan “Klik hier”)
• Tap-targets groot genoeg zijn op mobiel (geen piepkleine iconen)

2-minuten polish checklist

Voordat je publiceert, doe een snelle pass:

• Spelling en interpunctie (vooral projecttitels en koppen)
• Consistente titels (zelfde hoofdlettergebruik door de site heen)
• Geen kapotte secties (lege blokken, placeholders of “Lorem ipsum”)
• Schone uitlijning (cards netjes op één lijn; padding voelt bewust)

Als je portfolio mobielvriendelijk is, snel laadt en vrij is van kleine fouten, voelt hij direct betrouwbaarder—ook al bouwde je hem in minder dan 30 minuten.

Publiceer en koppel een custom domein

Een custom domein maakt je portfolio afgerond—en makkelijker te delen op cv's, e-mailsignatures en sociale profielen. Publiceren is meestal één knop. Domein-koppeling kost een paar extra minuten, maar blijft overzichtelijk.

Kies een domeinnaam waar je geen spijt van krijgt

Houd het simpel en professioneel:

• Gebruik een simpele domeinnaam: yourname.com of yourname.design als beschikbaar

Als je naam al bezet is, probeer kleine, leesbare variaties (middeninitiaal, “studio” of je vakgebied). Vermijd streepjes en lange zinnen—mensen typen ze verkeerd.

Koppel het in je builder

De meeste builders begeleiden je met een checklist.

Koppel het domein in de builder-instellingen en volg de DNS-instructies nauwkeurig.

Meestal kopieer je één of twee DNS-records (vaak een A-record en/of CNAME) naar je domein-registrar (waar je het domein kocht). Controleer spelling, interpunctie en of het record naar de root (yourname.com) of “www” verwijst.

Zorg dat het veilig is en er goed uitziet

• Schakel SSL/HTTPS in als het platform dat automatisch ondersteunt
• Voeg een favicon en een duidelijke sitetitel toe voor browsertabs

Na DNS-wijzigingen kan het even duren. Sommige domeinen koppelen binnen enkele minuten; andere hebben een paar uur nodig. Zodra het werkt, open je site op zowel yourname.com als www.yourname.com (als je beide wilt gebruiken) en controleer je op beveiligingswaarschuwingen.

Stel ten slotte je voorkeursversie in (meestal non-www of www) als primair domein zodat je altijd één schone URL deelt.

Basis-SEO instellingen die je in minuten doet

SEO klinkt technisch, maar de basis voor een no-code portfolio zijn meestal simpele velden en heldere tekst. Besteed een paar minuten hier en je site wordt makkelijker te begrijpen voor mensen en zoekmachines.

Stel je paginatitel en meta description in

In de SEO-instellingen van je builder vind je vaak velden voor Paginatitel en Meta Description (onder “SEO”, “Pagina-instellingen” of “Search preview”).

Houd de paginatitel specifiek en leesbaar. Een sterke format is:

Jouw Naam — Rol | Portfolio

Voorbeeld: Jordan Lee — Product Designer | Portfolio

Voor de meta description schrijf je één korte zin die uitlegt wat je doet en wat bezoekers vinden.

Voorbeeld: “Product designer gespecialiseerd in mobiele apps en design systems. Bekijk geselecteerde projecten, proces en contactinformatie.”

Gebruik een duidelijke H1 en schone sectiekoppen

Je homepage moet één duidelijke H1 hebben—meestal je naam en rol. Dit helpt bezoekers direct te begrijpen wat je doet.

Goede H1 voorbeelden:

• “Jordan Lee — UX/UI Designer”
• “Sam Patel — Brand Photographer”

Gebruik daarna beschrijvende koppen voor secties zoals “Selected Work”, “About” en “Contact.” Vermijd vage labels als “Welcome” of “Stuff I’ve Done.” Duidelijke koppen maken je portfolio makkelijker te scannen en beter indexeerbaar.

Voeg alt-tekst toe aan belangrijke afbeeldingen

Portfolio-sites zijn beeldrijk, dus voeg alt-tekst toe waar het telt: project-thumbnails, hero-afbeeldingen en elke afbeelding die een resultaat communiceert.

Alt-tekst beschrijft wat iemand moet weten, niet elke pixel. Voorbeelden:

• “Voor- en na redesign van checkout-scherm”
• “Logo en verpakking voor cold brew-merk”

Dit verbetert toegankelijkheid en geeft zoekmachines context.

Deel of submit je sitelink

Sommige builders laten je connectie maken met zoektools of genereren automatisch een sitemap. Als dat kan, submit je site daar.

Als dat niet kan, wacht niet met lanceren: publiceer en deel de link direct op plekken die al verkeer hebben—je LinkedIn-bio, Instagram-profiel en elke directory/ community waar je actief bent.

Launch-checklist en hoe je het promoot

Voordat je je portfolio deelt, doe je één snelle pass om te controleren of alles werkt en professioneel aanvoelt. Een nette, functionerende site is beter dan een flashy site met kapotte links.

5-minuten launch-checklist

• Klik elke link (projectknoppen, social icons, e-maillink). Zorg dat niets naar een 404 gaat.
• Test je contactmethode: verstuur het formulier of klik de e-maillink en check of je het ook ontvangt.
• Scan op placeholdertekst: lorem ipsum, “Project Name”, standaard testimonials, enz.
• Proofread koppen en projecttitels: verbeter typefouten, inconsistent hoofdlettergebruik en onhandige regeleinden.
• Controleer mobiel: open op je telefoon en bevestig dat menu, knoppen en afbeeldingen makkelijk te tikken zijn.
• Bevestig je homepage-verhaal: in 10 seconden moet een bezoeker begrijpen wat je doet en wat te klikken.

Eenvoudige manieren om te promoten (zonder spammerig te voelen)

• Deel op LinkedIn en voeg de portfolio-link toe aan je profiel (Featured-sectie + contactinfo).
• Zet de site in je e-mailsignatuur en sociale bio's zodat hij altijd werkt.
• Maak een korte “featured project” post die probleem, jouw rol en resultaat uitlegt—link vervolgens naar de volledige case study op je portfolio.

Meet wat werkt

Gebruik basisanalytics om views, project-clicks en contactinzendingen te meten. Na een week markeer je het project met de meeste clicks en herschrijf je titels van projecten die weinig aandacht krijgen.