# Portfolio voor ontwikkelaars: een site met smaak

[Canonical HTML page](https://gradiently.design/nl/guide/developer-portfolio-design)

Een ontwikkelaarsportfolio wordt beoordeeld op de code waar je naar linkt en de zorg die je zichtbaar hebt genomen. Hier is een structuur, een hero-achtergrond om te plakken, projectkaarten die snel lezen en linkpreviews die af ogen.

## The short version

- Een sterk ontwikkelaarsportfolio heeft vier delen: een korte hero die zegt wat je bouwt, drie tot zes projectkaarten, een korte over-mij-sectie en een makkelijke manier om contact op te nemen.
- Een hero-achtergrond van gelaagde CSS-verlopen laadt direct en toont visuele smaak zonder zwaar beeld.
- Elke projectkaart moet het probleem, wat je bouwde en het resultaat noemen, met links naar het live project en de code.
- Een Open Graph-afbeelding van 1200×630 laat de link naar je portfolio er af uitzien als hij wordt gedeeld in sollicitaties, chats en socialmediaposts.
- Minder, beter uitgelegde projecten maken een sterker portfolio dan een lang raster met tutorials.

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

| Sectie | Wat het doet | Houd het bij |
| --- | --- | --- |
| Hero | Je naam en wat je bouwt | Eén regel, één ondersteunende zin |
| Projecten | Bewijs dat je kunt opleveren | Drie tot zes kaarten |
| Over mij | Hoe je werkt, wat je hierna wilt | Een korte alinea |
| Schrijfwerk of talks | Toont hoe je denkt (optioneel) | Drie links |
| Contact | Maakt de volgende stap makkelijk | E-mail, GitHub, LinkedIn |

Eén pagina is voor de meeste ontwikkelaars genoeg. Voeg projectpagina’s alleen toe voor werk dat een langer verhaal verdient.

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](https://gradiently.design/nl/guide/hero-section-design) 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](https://gradiently.design/nl/guide/website-hero-background) en [CSS-mesh-verloop](https://gradiently.design/nl/guide/css-mesh-gradient) gaan verder.

Diepe indigo hero-ondergrond: `radial-gradient(ellipse at 20% 15%, #3b2a8f 0%, #0e1020 55%, #07080f 100%)`

De basislaag: één indigogloed die uitloopt in bijna-zwart. Rustig genoeg voor witte tekst overal erop.

```css
.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;
}
```

Een hero met twee gloeden in gewone CSS. Houd de felste gloed weg van waar de kop staat, zodat de woorden leesbaar blijven.

Wil je beweging, animeer dan langzaam, houd de woorden stil en respecteer `prefers-reduced-motion`; [beperkte beweging](https://gradiently.design/nl/guide/reduced-motion) legt uit hoe. Een beetje korrel erbovenop verbergt banding op grote donkere verlopen, behandeld in [CSS-ruistextuur](https://gradiently.design/nl/guide/css-noise-texture).

## 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.

### Zwakke kaart

- “Weer-app” met een screenshot
- Een lijst met acht technologieën
- Geen idee wat je zelf deed
- Een dode demolink

### Sterke kaart

- “Rota: dienstruil voor een caféteam”
- Het probleem in één zin
- Jouw aandeel en één meetbaar resultaat
- Werkende live link en een nette repository

```css
.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;
}
```

Een responsief kaartenraster. Een vaste beeldverhouding houdt elke kaart even vormgegeven, ook als screenshots verschillen.

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](https://gradiently.design/nl/guide/dynamic-og-images) laat zien hoe je ze tijdens de build genereert; [formaat van Open Graph-afbeeldingen](https://gradiently.design/nl/guide/open-graph-image-size) behandelt het bijsnijden.

Een liggende Open Graph-afbeelding voor een ontwikkelaarsportfolio met de naam van de ontwikkelaar en een beschrijving van één regel

De preview van de homepage: naam en de ene regel, niets anders.

Een bijpassende Open Graph-afbeelding voor een portfolioproject genaamd Rota op hetzelfde verloop

Een preview van een projectpagina in dezelfde opmaak en achtergrond.

## 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](https://gradiently.design/nl/guide/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.

## FAQ

### Wat hoort er in een ontwikkelaarsportfolio?

Een hero van één regel over wat je bouwt, drie tot zes projectkaarten met probleem, oplossing en resultaat, een korte over-mij-sectie en contactlinks. Link naar live projecten en hun code.

### Hoeveel projecten horen in een ontwikkelaarsportfolio?

Drie tot zes goed uitgelegde projecten zijn sterker dan een lang raster. Kies werk dat laat zien wat voor baan je hierna wilt.

### Welk formaat moet een Open Graph-afbeelding van een portfolio hebben?

1200×630 pixels. Houd de naam en de beschrijving van één regel in het midden, zodat niets wordt afgesneden in vierkante previews.

### Moet een ontwikkelaarsportfolio een geanimeerde achtergrond hebben?

Alleen als hij subtiel is, de pagina niet vertraagt en de instellingen voor beperkte beweging respecteert. Een gelaagd CSS-verloop geeft dezelfde finesse tegen vrijwel geen prestatiekosten.