# Design af udviklerportfolio: en side, der viser smag

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

En udviklerportfolio bedømmes på den kode, du linker til, og den omhu, man kan se, du har lagt i den. Her er en struktur, en hero-baggrund du kan sætte ind, projektkort der læses hurtigt og linkforhåndsvisninger, der ser færdige ud.

## The short version

- En stærk udviklerportfolio har fire dele: en kort hero, der siger, hvad du bygger, tre til seks projektkort, en kort om-sektion og en nem måde at kontakte dig på.
- En hero-baggrund lavet af lagdelte CSS-gradienter indlæses med det samme og viser visuel smag uden et tungt billede.
- Hvert projektkort bør angive problemet, hvad du byggede og resultatet, med links til det live projekt og koden.
- Et Open Graph-billede på 1200×630 får dit portfolio-link til at se færdigt ud, når det deles i apps, chats og opslag på sociale medier.
- Færre, bedre forklarede projekter giver en stærkere portfolio end et langt gitter af tutorials.

En god **udviklerportfolio** er en lille, hurtig side med fire dele: en hero, der med én linje siger, hvad du bygger, tre til seks projektkort, der forklarer problemet og din rolle i løsningen, en kort om-sektion og et kontaktlink. Smag viser sig i detaljerne: en rolig hero-baggrund, ensartede kort, læselig typografi og en linkforhåndsvisning, der ser færdig ud, når en rekrutterer indsætter din URL i en jobkanal. Du behøver ikke vise frameworks frem. Du behøver en side, som tydeligvis er passet.

## Strukturen i en udviklerportfolio

| Sektion | Hvad den gør | Hold den til |
| --- | --- | --- |
| Hero | Dit navn og hvad du bygger | Én linje, én understøttende sætning |
| Projekter | Bevis på, at du kan levere | Tre til seks kort |
| Om | Hvordan du arbejder, hvad du vil videre med | Et kort afsnit |
| Tekster eller foredrag | Viser, hvordan du tænker (valgfrit) | Tre links |
| Kontakt | Gør næste skridt nemt | Email, GitHub, LinkedIn |

Én side er nok for de fleste udviklere. Tilføj kun projektsider til arbejde, der fortjener en længere historie.

Sig, hvad du bygger, ikke hvad du er. »Jeg bygger hurtige betalingsforløb til webshops« fortæller en læser mere end »Full stack-udvikler«. Er du tidligt i karrieren, er »Jeg bygger tilgængelige webapps med React og Postgres« ærligt og konkret. [Design af hero-sektion](https://gradiently.design/da/guide/hero-section-design) har mere om at skrive den første linje.

## En hero-baggrund, der viser smag

Mange portfolioer bruger enten en flad hvid side eller en tung animeret baggrund, der forsinker alt andet. En mellemvej er en lagdelt CSS-gradient: to eller tre bløde radiale skær over en mørk eller lys bund. Det er få linjer kode, koster ingenting i netværk og ser stadig gennemtænkt ud. [Hero-baggrund til hjemmesiden](https://gradiently.design/da/guide/website-hero-background) og [CSS mesh-gradient](https://gradiently.design/da/guide/css-mesh-gradient) går videre.

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

Grundlaget: ét indigoskær, der toner ud i næsten sort. Roligt nok til hvid tekst overalt på det.

```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 hero med to skær i ren CSS. Hold det klareste skær væk fra, hvor overskriften står, så ordene forbliver læselige.

Vil du have bevægelse, så animér langsomt, hold ordene i ro og respektér `prefers-reduced-motion`; [reduceret bevægelse](https://gradiently.design/da/guide/reduced-motion) forklarer hvordan. Lidt korn ovenpå skjuler bånddannelse på store mørke gradienter, som er beskrevet i [CSS-støjtekstur](https://gradiently.design/da/guide/css-noise-texture).

## Projektkort, der forklarer effekt

Et projektkort har få sekunder til at begrunde et klik. Giv hvert kort de samme fire dele: en titel, et problem i én sætning, hvad du byggede og udbyttet, og derefter links til det live projekt og koden. Udbyttet behøver ikke være dramatisk. »Bruges hver dag af vores team på 30 personer« eller »Skar sidens indlæsningstid fra 4 s til 1,2 s« er fint, når det er sandt og dit eget.

### Svagt kort

- »Vejr-app« med et skærmbillede
- En liste med otte teknologier
- Ingen idé om, hvad du selv har lavet
- Et dødt demolink

### Stærkt kort

- »Rota: vagtbytte til et caféhold«
- Problemet i én sætning
- Din del og ét målbart resultat
- Fungerende live link og et ryddeligt 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;
}
```

Et responsivt kortgitter. Et fast billedformat holder alle kort i samme form, selv når skærmbillederne er forskellige.

Skærmbilleder ser mere færdige ud, når de ligger på samme baggrund. Læg hvert enkelt på din hero-bund med lidt luft rundt om i stedet for at vise rå browseroptagelser i forskellige størrelser.

## Open Graph-billeder til din portfolio

Dit portfolio-link bliver indsat i jobansøgninger, beskeder til rekrutterere, Slack-kanaler og opslag på sociale medier. Hver af dem viser **Open Graph-billedet** på 1200×630 pixel. Et tomt kort eller et beskåret skærmbillede ødelægger den omhu, du har lagt i siden. Lav ét til forsiden og, hvis du har projektsider, ét pr. projekt i samme layout. [Dynamiske OG-billeder](https://gradiently.design/da/guide/dynamic-og-images) viser, hvordan du genererer dem under build; [størrelse på Open Graph-billede](https://gradiently.design/da/guide/open-graph-image-size) gennemgår beskæringerne.

Et liggende Open Graph-billede til en udviklerportfolio med udviklerens navn og en beskrivelse på én linje

Forsidens forhåndsvisning: navnet og den ene linje, ikke andet.

Et tilsvarende Open Graph-billede til et portfolioprojekt kaldet Rota på samme gradient

En forhåndsvisning af en projektside i samme layout og med samme baggrund.

## Sådan skriver du om- og kontaktsektionerne

Hold om-sektionen til et kort afsnit i første person: hvad du nyder at bygge, hvordan du kan lide at arbejde, og hvad du leder efter som det næste. En sætning om livet uden for koden er fint; en fuld biografi er ikke. Afslut siden med én tydelig måde at nå dig på, som regel en e-mailadresse skrevet fuldt ud, plus GitHub og LinkedIn. En kontaktformular giver friktion for en rekrutterer, der bare vil kopiere din adresse ind i en besked. Søger du designorienterede roller, hjælper [personligt brand](https://gradiently.design/da/guide/personal-branding) dig med at holde siden, cv'et og profilerne i ét udtryk.

## Små detaljer, der læses som smag

- **Én skriftfamilie**, to vægte. En god sans-serif til alt, en monospace kun til kode.
- **En linjelængde på 60 til 75 tegn** til brødtekst, så afsnit er behagelige at læse.
- **Reel kontrast**: brødtekst bør bestå WCAG AA mod sin baggrund.
- **Et favicon**, der passer til heroens farver.
- **Hurtig indlæsning**: en portfolio for en udvikler, der tager fire sekunder at vise, argumenterer imod sig selv.
- **Et mørkt og et lyst tema** kun hvis du vil vedligeholde begge ordentligt.

Vil du hellere slippe for at tegne forhåndsvisningsbillederne og skærmbilledrammerne i hånden, kan Gradiently lave dem på en Mark, en levende gradientbaggrund, der holder dine ord læselige, og med Pro kan du ændre størrelsen på ét design til linkforhåndsvisning, et LinkedIn-opslag og en X-header i ét trin. Den kan også forbindes til ChatGPT og Claude, så du kan bede om et sæt projektforhåndsvisninger, mens du skriver casene.

## FAQ

### Hvad bør en udviklerportfolio indeholde?

En hero på én linje om, hvad du bygger, tre til seks projektkort med problem, løsning og resultat, en kort om-sektion og kontaktlinks. Link til live projekter og deres kode.

### Hvor mange projekter bør en udviklerportfolio have?

Tre til seks velforklarede projekter er stærkere end et langt gitter. Vælg arbejde, der viser den slags job, du vil have næste gang.

### Hvilken størrelse skal et Open Graph-billede til en portfolio have?

1200×630 pixel. Hold navnet og beskrivelsen på én linje i midten, så intet bliver beskåret i kvadratiske forhåndsvisninger.

### Skal en udviklerportfolio have en animeret baggrund?

Kun hvis den er diskret, ikke forsinker siden og respekterer indstillinger for reduceret bevægelse. En lagdelt CSS-gradient giver den samme finish til næsten ingen ydelsesomkostning.