# Utviklerportefølje: design av en side som viser smak

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

En utviklerportefølje bedømmes etter koden du lenker til og omsorgen du synlig har lagt i den. Her får du en struktur, en heltebakgrunn du kan lime inn, prosjektkort som leses raskt og lenkeforhåndsvisninger som ser ferdige ut.

## The short version

- En sterk utviklerportefølje har fire deler: en kort heltedel som sier hva du bygger, tre til seks prosjektkort, en kort om meg-del og en enkel måte å ta kontakt på.
- En heltebakgrunn laget av lagvise CSS-gradienter lastes umiddelbart og viser visuell sans uten et tungt bilde.
- Hvert prosjektkort bør si hva problemet var, hva du bygde og hva resultatet ble, med lenker til det levende prosjektet og koden.
- Et Open Graph-bilde på 1200×630 får porteføljelenken til å se ferdig ut når den deles i søknader, chatter og innlegg i sosiale medier.
- Færre prosjekter som er bedre forklart gir en sterkere portefølje enn et langt rutenett av veiledningsprosjekter.

En god **utviklerportefølje** er en liten, rask side med fire deler: en heltedel som på én linje sier hva du bygger, tre til seks prosjektkort som forklarer problemet og din del av løsningen, en kort om meg-del og en kontaktlenke. Smaken viser seg i detaljene: en rolig heltebakgrunn, konsekvente kort, lesbar tekst og en lenkeforhåndsvisning som ser ferdig ut når en rekrutterer limer inn adressen din i en ansettelseskanal. Du trenger ikke vise frem et rammeverk. Du trenger en side som åpenbart er tatt vare på.

## Strukturen i en utviklerportefølje

| Del | Hva den gjør | Begrens den til |
| --- | --- | --- |
| Heltedel | Navnet ditt og hva du bygger | Én linje, én støttesetning |
| Prosjekter | Bevis på at du leverer | Tre til seks kort |
| Om meg | Hvordan du jobber, hva du vil videre | Et kort avsnitt |
| Tekster eller foredrag | Viser hvordan du tenker (valgfritt) | Tre lenker |
| Kontakt | Gjør neste steg enkelt | E-post, GitHub, LinkedIn |

Én side er nok for de fleste utviklere. Legg bare til prosjektsider for arbeid som fortjener en lengre historie.

Si hva du bygger, ikke hva du er. «Jeg bygger raske kasseløsninger for nettbutikker» forteller leseren mer enn «Fullstackutvikler». Er du tidlig i karrieren, er «Jeg bygger tilgjengelige webapper med React og Postgres» ærlig og konkret. [Design av heltedel](https://gradiently.design/nb/guide/hero-section-design) har mer om å skrive den første linjen.

## En heltebakgrunn som viser smak

Mange porteføljer bruker enten en flat hvit side eller en tung animert bakgrunn som forsinker alt annet. En mellomvei er en lagvis CSS-gradient: to eller tre myke radiale lysflekker over en mørk eller blek bunn. Det er noen få kodelinjer, koster ingenting i nettverk og ser likevel gjennomtenkt ut. [Heltebakgrunn på nettsiden](https://gradiently.design/nb/guide/website-hero-background) og [mesh-gradient i CSS](https://gradiently.design/nb/guide/css-mesh-gradient) går videre.

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

Grunnlaget: én indigo lysflekk som toner ut i nesten svart. Rolig nok for hvit tekst hvor som helst.

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

En heltedel med to lysflekker i ren CSS. Hold den lyseste flekken unna overskriften så ordene forblir lesbare.

Vil du ha bevegelse, animer sakte, la ordene stå stille og respekter `prefers-reduced-motion`; [redusert bevegelse](https://gradiently.design/nb/guide/reduced-motion) forklarer hvordan. Litt korn på toppen skjuler stripedannelse i store mørke gradienter, som dekkes i [støytekstur i CSS](https://gradiently.design/nb/guide/css-noise-texture).

## Prosjektkort som forklarer effekt

Et prosjektkort har sekunder på seg til å fortjene et klikk. Gi hvert kort de samme fire delene: en tittel, problemet i én setning, hva du bygde og resultatet, deretter lenker til det levende prosjektet og koden. Resultatene trenger ikke være dramatiske. «Brukes hver dag av teamet vårt på 30 personer» eller «Kuttet lastetiden fra 4 s til 1,2 s» holder fint når de er sanne og dine.

### Svakt kort

- «Værapp» med et skjermbilde
- En liste over åtte teknologier
- Ingen anelse om hva du selv gjorde
- En død demolenke

### Sterkt kort

- «Rota: vaktbytter for et kaféteam»
- Problemet i én setning
- Din del og ett målbart resultat
- Fungerende lenke og et ryddig kodelager

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

Et responsivt kortrutenett. Et fast bildeformat gir alle kortene samme form selv når skjermbildene er ulike.

Skjermbilder ser mer ferdige ut når de ligger på samme bakgrunn. Plasser hvert av dem på heltebunnen med litt luft rundt i stedet for å vise rå nettleseropptak i ulike størrelser.

## Open Graph-bilder til porteføljen

Porteføljelenken din vil bli limt inn i jobbsøknader, meldinger fra rekrutterere, Slack-kanaler og innlegg i sosiale medier. Alle disse viser **Open Graph-bildet**, på 1200×630 piksler. Et tomt kort eller et beskåret skjermbilde ødelegger omsorgen du har lagt i siden. Lag ett for forsiden og, hvis du har prosjektsider, ett per prosjekt i samme oppsett. [Dynamiske OG-bilder](https://gradiently.design/nb/guide/dynamic-og-images) viser hvordan du genererer dem ved bygging; [størrelse på Open Graph-bilder](https://gradiently.design/nb/guide/open-graph-image-size) dekker beskjæringene.

Et liggende Open Graph-bilde for en utviklerportefølje med utviklerens navn og en beskrivelse på én linje

Forhåndsvisningen av forsiden: navn og én linje, ingenting annet.

Et matchende Open Graph-bilde for et porteføljeprosjekt kalt Rota på samme gradient

En forhåndsvisning av en prosjektside i samme oppsett og bakgrunn.

## Slik skriver du om meg- og kontaktdelen

Hold om meg-delen til et kort avsnitt i første person: hva du liker å bygge, hvordan du liker å jobbe og hva du ser etter videre. En setning om livet utenfor koden er fint; en full biografi er det ikke. Avslutt siden med én åpenbar måte å nå deg på, vanligvis en e-postadresse skrevet helt ut, pluss GitHub og LinkedIn. Et kontaktskjema gir friksjon for en rekrutterer som bare vil kopiere adressen din inn i en melding. Søker du stillinger med designfokus, hjelper [personlig merkevarebygging](https://gradiently.design/nb/guide/personal-branding) deg med å holde nettside, CV og profiler i ett uttrykk.

## Små detaljer som leses som smak

- **Én skriftfamilie**, to vekter. En god sans serif til alt, en monospace bare til kode.
- **En linjelengde på 60 til 75 tegn** for brødtekst, så avsnittene er behagelige å lese.
- **Ekte kontrast**: brødteksten bør bestå WCAG AA mot bakgrunnen sin.
- **Et favicon** som matcher fargene i heltedelen.
- **Rask lasting**: en utviklerportefølje som bruker fire sekunder på å dukke opp, argumenterer mot seg selv.
- **Et mørkt og et lyst tema** bare hvis du vil vedlikeholde begge ordentlig.

Vil du heller slippe å tegne forhåndsvisningsbildene og rammene rundt skjermbildene for hånd, kan Gradiently lage dem på en Mark, en levende gradientbakgrunn som holder ordene dine lesbare, og med Pro kan du endre størrelsen på ett design til lenkeforhåndsvisning, et LinkedIn-innlegg og en X-header i ett steg. Gradiently kan også kobles til ChatGPT og Claude, så du kan be om et sett med prosjektforhåndsvisninger mens du skriver casestudiene.

## FAQ

### Hva bør en utviklerportefølje inneholde?

En heltedel på én linje om hva du bygger, tre til seks prosjektkort med problem, løsning og resultat, en kort om meg-del og kontaktlenker. Lenk til levende prosjekter og koden deres.

### Hvor mange prosjekter bør en utviklerportefølje ha?

Tre til seks godt forklarte prosjekter er sterkere enn et langt rutenett. Velg arbeid som viser den typen jobb du vil ha neste gang.

### Hvilken størrelse bør et Open Graph-bilde for en portefølje ha?

1200×630 piksler. Hold navnet og beskrivelsen på én linje i midten, så ingenting beskjæres i kvadratiske forhåndsvisninger.

### Bør en utviklerportefølje ha animert bakgrunn?

Bare hvis den er diskré, ikke forsinker siden og respekterer innstillinger for redusert bevegelse. En lagvis CSS-gradient gir samme finish nesten uten ytelseskostnad.