Portfolio voor ontwikkelaars: een site met smaak

Een goed ontwikkelaarsportfolio is een kleine, snelle site met vier delen: een hero die in één regel zegt wat je bouwt, drie tot zes projectkaarten die het probleem en jouw aandeel in de oplossing uitleggen, een korte over-mij-sectie en een contactlink. Smaak zit in de details: een rustige hero-achtergrond, consistente kaarten, leesbare letters en een linkpreview die af oogt als een recruiter je URL in een wervingskanaal plakt. Je hoeft geen showcase van frameworks te geven. Je hebt een pagina nodig waar duidelijk zorg in zit.

De structuur van een ontwikkelaarsportfolio

Zeg wat je bouwt, niet wat je bent. “Ik bouw snelle checkoutflows voor webwinkels” zegt een lezer meer dan “Full stack developer”. Sta je aan het begin van je carrière, dan is “Ik bouw toegankelijke webapps met React en Postgres” eerlijk en specifiek. Ontwerp van een hero-sectie zegt meer over het schrijven van die eerste regel.

Een hero-achtergrond die smaak toont

Veel portfolio’s gebruiken een effen witte pagina of een zware geanimeerde achtergrond die al het andere vertraagt. Een middenweg is een gelaagd CSS-verloop: twee of drie zachte radiale gloeden over een donkere of lichte ondergrond. Het zijn een paar regels code, het kost geen netwerkverkeer en het ziet er toch doordacht uit. Hero-achtergrond voor websites en CSS-mesh-verloop gaan verder.

.hero {
  min-height: 70vh;
  color: #f4f4f8;
  background:
    radial-gradient(ellipse 60% 50% at 80% 10%, rgb(56 189 248 / 0.28), transparent 70%),
    radial-gradient(ellipse 50% 60% at 15% 20%, rgb(124 58 237 / 0.45), transparent 70%),
    linear-gradient(180deg, #0e1020 0%, #07080f 100%);
}

.hero h1 {
  font-size: clamp(2.25rem, 5vw, 4rem);
  line-height: 1.05;
  max-width: 18ch;
}

Wil je beweging, animeer dan langzaam, houd de woorden stil en respecteer prefers-reduced-motion; beperkte beweging legt uit hoe. Een beetje korrel erbovenop verbergt banding op grote donkere verlopen, behandeld in CSS-ruistextuur.

Projectkaarten die impact uitleggen

Een projectkaart heeft seconden om een klik te rechtvaardigen. Geef elke kaart dezelfde vier delen: een titel, het probleem in één zin, wat je bouwde en de uitkomst, plus links naar het live project en de code. Uitkomsten hoeven niet dramatisch te zijn. “Elke dag gebruikt door ons team van 30 mensen” of “Laadtijd van 4 s naar 1,2 s gebracht” zijn prima als ze waar en van jou zijn.

.projects {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(18rem, 1fr));
  gap: 1.5rem;
}

.card {
  border-radius: 1rem;
  padding: 1.5rem;
  background: linear-gradient(160deg, #161a2e 0%, #0f1222 100%);
  border: 1px solid rgb(255 255 255 / 0.08);
}

.card img {
  aspect-ratio: 16 / 10;
  width: 100%;
  object-fit: cover;
  border-radius: 0.5rem;
}

Screenshots zien er afgewerkter uit als ze op dezelfde achtergrond staan. Zet elk op je hero-ondergrond met wat witruimte in plaats van ruwe browseropnames van verschillende formaten te tonen.

Open Graph-afbeeldingen voor je portfolio

De link naar je portfolio wordt geplakt in sollicitaties, recruiterberichten, Slack-kanalen en socialmediaposts. Elk daarvan toont de Open Graph-afbeelding, 1200×630 pixels. Een lege kaart of een bijgesneden screenshot maakt de zorg die je in de site stak ongedaan. Maak er een voor de homepage en, als je projectpagina’s hebt, een per project in dezelfde opmaak. Dynamische OG-afbeeldingen laat zien hoe je ze tijdens de build genereert; formaat van Open Graph-afbeeldingen behandelt het bijsnijden.

De over-mij- en contactsecties schrijven

Houd de over-mij-sectie bij een korte alinea in de ik-vorm: wat je graag bouwt, hoe je graag werkt en wat je hierna zoekt. Een zin over het leven buiten code is prima; een volledige biografie niet. Sluit de pagina af met één duidelijke manier om je te bereiken, meestal een volledig uitgeschreven e-mailadres, plus GitHub en LinkedIn. Een contactformulier voegt wrijving toe voor een recruiter die je adres gewoon in een bericht wil kopiëren. Solliciteer je op functies met een ontwerpkant, dan helpt personal branding om site, cv en profielen in één look te houden.

Kleine details die als smaak lezen

• Eén lettertypefamilie, twee gewichten. Een goede schreefloze voor alles, een monospace alleen voor code.
• Een regelbreedte van 60 tot 75 tekens voor lopende tekst, zodat alinea’s prettig lezen.
• Echt contrast: lopende tekst moet WCAG AA halen tegen de achtergrond.
• Een favicon die past bij de kleuren van de hero.
• Snel laden: een portfolio van een ontwikkelaar dat vier seconden nodig heeft om te verschijnen, levert zelf het argument.
• Een donker en een licht thema alleen als je beide goed onderhoudt.

Wil je de previewafbeeldingen en screenshotkaders liever niet met de hand tekenen, dan kan Gradiently ze maken op een Mark, een levende verloopachtergrond die je woorden leesbaar houdt, en met Pro maak je één ontwerp in één stap passend voor de linkpreview, een LinkedInpost en een X-header. Het kan ook worden gekoppeld aan ChatGPT en Claude, zodat je om een set projectpreviews kunt vragen terwijl je de cases schrijft.