11 aug 2025·8 min
Bouw een portfoliowebsite in 30 minuten (zonder te coderen)
Maak in ongeveer 30 minuten een strakke portfoliowebsite — zonder te coderen. Volg een simpele checklist: kies een template, voeg werk toe, koppel een domein en publiceer.
Maak in ongeveer 30 minuten een strakke portfoliowebsite — zonder te coderen. Volg een simpele checklist: kies een template, voeg werk toe, koppel een domein en publiceer.
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.
Een simpele pagina met:
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.
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.
Om binnen 30 minuten te blijven, verzamel het volgende:
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.
Kies het primaire resultaat voor je portfolio:
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.
Bepaal of je bouwt:
Als je tegen de klok racet, begin dan nu met een single page—je kunt later altijd pagina's splitsen.
Kies één primaire CTA en (optioneel) één secundaire CTA. Voorbeelden:
Alles op de pagina moet deze acties ondersteunen.
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.
Je builder bepaalt hoe snel dit “30-minuten” project aanvoelt. Kies iets dat je laat publiceren zonder tegen menu's te vechten.
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.
Begin met deze must-haves:
Veel tools lijken goedkoop totdat je tegen een betaalmuur aanloopt. Scan op:
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.
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.
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.
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.
Controleer vooraf of het template deze basics aankan zonder hacks:
Als het template dit niet van nature ondersteunt, ga je het forceren—en dat is waar builders frustrerend voelen.
Open de mobiele preview en scan op drie dingen:
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.
Je portfolio hoeft geen volledige brandguide om professioneel te ogen. Je hebt een paar consistente keuzes nodig zodat elk element bij elkaar past.
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.
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:
Als je twijfelt, houd de template-standaarden aan en verander alleen de accentkleur.
Consistentie is wat een no-code portfolio er custom uit laat zien.
Snelle instellingen om standaard te maken:
Dit is belangrijker dan fancy effecten en zorgt dat templates gepolijst in plaats van “template-achtig” aanvoelen.
Doe een 10-seconden scan: kun je overal de tekst goed lezen?
Mobiel is vaak waar contrastproblemen het eerst opvallen, dus bekijk de mobiele preview voordat je verder gaat.
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.
Gebruik een simpele top-tot-bottom flow. Deze secties dekken wat de meeste bezoekers binnen een minuut zoeken:
Als je template standaard extra blokken heeft (blog, nieuwsbrief, pricing, lange feature-grids), verwijder die eerst. Je kunt ze later toevoegen.
Je hero is de “waarom zou ik geven om jou?” sectie. Gebruik deze korte checklist:
Houd het scanbaar: korte zinnen, duidelijke koppen en ademruimte.
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.
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.
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 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.
Voor elk project, gebruik dezelfde kerngegevens zodat mensen snel kunnen scannen:
Houd het kort—2–5 korte zinnen is meestal genoeg.
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.
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.”
Je Over-sectie heeft één taak: iemand snel laten beslissen of jij de juiste persoon bent om te contacteren.
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.
Streef naar 4–6 regels totaal:
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.
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.
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.
Een mooie portfolio werkt alleen als iemand je snel kan bereiken. Je contactsectie moet duidelijk, kort en frictionless zijn—geen zoeken, geen gokken.
Streef naar twee opties, drie maximaal:
Voeg niet teveel opties toe; bezoekers aarzelen dan. Label het (en in je nav) als “Contact”.
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.).
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.
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.
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.
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:
Oplossingen zijn meestal simpel: padding verkleinen, consistente spacing instellen of multi-column blokken op mobiel naar één kolom zetten.
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.
Klik elke knop en link—social icons, projectcards en je e-mail/contactknop.
Zorg dat:
Voordat je publiceert, doe een snelle pass:
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.
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.
Houd het simpel en professioneel:
Als je naam al bezet is, probeer kleine, leesbare variaties (middeninitiaal, “studio” of je vakgebied). Vermijd streepjes en lange zinnen—mensen typen ze verkeerd.
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.
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.
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.
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.”
Je homepage moet één duidelijke H1 hebben—meestal je naam en rol. Dit helpt bezoekers direct te begrijpen wat je doet.
Goede H1 voorbeelden:
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.
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:
Dit verbetert toegankelijkheid en geeft zoekmachines context.
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.
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.
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.
Ja. Een one-page portfolio is vaak beter voor snelle beslissingen omdat het gemakkelijk te scannen is.
Streef naar een duidelijke flow: Hero → Werk → Over → Contact. Je kunt later altijd projecten uitsplitsen naar aparte case-study pagina's zodra de site live staat.
Houd het minimaal zodat je het kunt afronden:
Als je geen 3 projecten hebt, publiceer dan met 1–2 sterke stukken en vul later aan.
Kies één primair doel en laat dat je keuzes bepalen:
Als je niet zeker weet wat je moet opnemen, neem alleen wat dit doel ondersteunt.
Kies de bouwer die wrijving wegneemt:
Controleer vooraf of er betaalmuren zijn rond custom domeinen, formulieren, opslag/bandbreedte, analytics en het verwijderen van branding (vaak vermeld op /pricing).
Kies een template dat al de secties heeft die je nodig hebt (hero, projecten grid, over, contact). Doe eerst een korte mobiele preview voordat je gaat personaliseren.
Vermijd templates die sterk leunen op zware animaties, ongewone navigatie of complexe layouts—daar verlies je tijd mee aan responsiviteit en leesbaarheid.
Beperk je “brand” tot een paar consistente keuzes:
Consistentie leest als “op maat gemaakt”, ook als je een template gebruikt.
Gebruik een herhaalbaar formaat zodat mensen snel kunnen scannen:
Houd het kort (2–5 korte zinnen) en leid met je sterkste visual.
Gebruik een eenvoudige structuur die snel antwoord geeft op “moet ik jou contact opnemen?”:
Houd het onder een minuut leeswerk en plaats een duidelijke volgende stap vlakbij (e-mail/contactknop, optioneel “Download CV (PDF)”).
Bied 2 opties (maximaal 3):
Voeg een korte verwachtingstijd toe (antwoordtermijn, beschikbaarheid) en vermeld je locatie/tijdzone als je remote werkt. Herhaal de contactlink in de footer zodat bezoekers hem makkelijk vinden.
Doe deze checks:
Na publicatie: deel de link op LinkedIn, in je e-mailsignatuur en op sociale profielen en kijk welke projecten clicks krijgen om je homepage te optimaliseren.