# Utvecklarportfolio: design för en sajt med smak

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

En utvecklarportfolio bedöms efter koden du länkar till och omsorgen du synligt har lagt ner. Här får du en struktur, en hero-bakgrund att klistra in, projektkort som går snabbt att läsa och länkförhandsvisningar som ser färdiga ut.

## The short version

- En stark utvecklarportfolio har fyra delar: en kort hero som säger vad du bygger, tre till sex projektkort, ett kort avsnitt om dig och ett enkelt sätt att höra av sig.
- En hero-bakgrund av flera lager CSS-gradienter laddas direkt och visar visuell smak utan en tung bild.
- Varje projektkort bör beskriva problemet, vad du byggde och resultatet, med länkar till det körande projektet och koden.
- En Open Graph-bild på 1200×630 gör att portfolion ser färdig ut när länken delas i ansökningar, chattar och sociala inlägg.
- Färre, bättre förklarade projekt ger en starkare portfolio än ett långt rutnät av handledningar.

En bra **utvecklarportfolio** är en liten, snabb sajt med fyra delar: en hero som på en rad säger vad du bygger, tre till sex projektkort som förklarar problemet och din del i lösningen, ett kort avsnitt om dig och en kontaktlänk. Smaken syns i detaljerna: en lugn hero-bakgrund, enhetliga kort, läsbar text och en länkförhandsvisning som ser färdig ut när en rekryterare klistrar in din URL i en rekryteringskanal. Du behöver ingen skylt för ramverk. Du behöver en sida som uppenbart är omhändertagen.

## Strukturen i en utvecklarportfolio

| Avsnitt | Vad det gör | Håll det till |
| --- | --- | --- |
| Hero | Ditt namn och vad du bygger | En rad, en stödjande mening |
| Projekt | Bevis på att du kan leverera | Tre till sex kort |
| Om mig | Hur du arbetar och vad du vill göra härnäst | Ett kort stycke |
| Texter eller föredrag | Visar hur du tänker (valfritt) | Tre länkar |
| Kontakt | Gör nästa steg enkelt | E-post, GitHub, LinkedIn |

En sida räcker för de flesta utvecklare. Lägg bara till projektsidor för arbeten som förtjänar en längre berättelse.

Säg vad du bygger, inte vad du är. ”Jag bygger snabba kassaflöden för webbutiker” säger mer till en läsare än ”Fullstackutvecklare”. Om du är i början av karriären är ”Jag bygger tillgängliga webbappar med React och Postgres” ärligt och konkret. [Design av hero-sektion](https://gradiently.design/sv/guide/hero-section-design) har mer om hur du skriver den första raden.

## En hero-bakgrund som visar smak

Många portfolior har antingen en platt vit sida eller en tung animerad bakgrund som fördröjer allt annat. Mittenvägen är en CSS-gradient i flera lager: två eller tre mjuka radiella ljussken över en mörk eller blek botten. Det är några rader kod, kostar inget i nätverket och ser ändå genomtänkt ut. [Hero-bakgrund för webbplats](https://gradiently.design/sv/guide/website-hero-background) och [CSS mesh-gradient](https://gradiently.design/sv/guide/css-mesh-gradient) går längre.

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

Basskiktet: ett enda indigosken som tonar ut i nästan svart. Lugnt nog för vit text var som helst 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 två ljussken i ren CSS. Håll det ljusaste skenet borta från rubriken så att orden förblir läsbara.

Vill du ha rörelse, animera långsamt, håll orden stilla och respektera `prefers-reduced-motion`. [Reducerad rörelse](https://gradiently.design/sv/guide/reduced-motion) förklarar hur. Lite korn ovanpå döljer bandning i stora mörka gradienter, vilket tas upp i [CSS-brusstruktur](https://gradiently.design/sv/guide/css-noise-texture).

## Projektkort som förklarar effekten

Ett projektkort har några sekunder på sig att motivera ett klick. Ge varje kort samma fyra delar: en titel, ett problem i en mening, vad du byggde och utfallet, och sedan länkar till det körande projektet och koden. Utfallen behöver inte vara dramatiska. ”Används varje dag av vårt team på 30 personer” eller ”Minskade sidladdningen från 4 s till 1,2 s” går bra när det är sant och ditt.

### Svagt kort

- ”Väderapp” med en skärmbild
- En lista med åtta tekniker
- Ingen aning om vad du själv gjorde
- En död demolänk

### Starkt kort

- ”Rota: passbyten för ett kafféteam”
- Problemet i en mening
- Din del och ett mätbart resultat
- Fungerande länk och ett städat 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;
}
```

Ett responsivt kortrutnät. Ett fast bildformat gör att alla kort får samma form även när skärmbilderna skiljer sig åt.

Skärmbilder ser mer färdiga ut när de ligger på samma bakgrund. Lägg varje bild på din hero-botten med lite luft runt i stället för att visa råa webbläsarbilder i olika storlekar.

## Open Graph-bilder till din portfolio

Länken till din portfolio kommer att klistras in i jobbansökningar, meddelanden till rekryterare, Slack-kanaler och sociala inlägg. Alla visar **Open Graph-bilden** på 1200×630 pixlar. Ett tomt kort eller en beskuren skärmbild förstör den omsorg du lagt på sajten. Gör en för startsidan och, om du har projektsidor, en per projekt i samma layout. [Dynamiska OG-bilder](https://gradiently.design/sv/guide/dynamic-og-images) visar hur du genererar dem vid bygget, och [storlek på Open Graph-bild](https://gradiently.design/sv/guide/open-graph-image-size) går igenom beskärningarna.

En liggande Open Graph-bild för en utvecklarportfolio med utvecklarens namn och en beskrivning på en rad

Förhandsvisningen av startsidan: namnet och den enda raden, inget mer.

En matchande Open Graph-bild för ett portfolioprojekt som heter Rota på samma gradient

En förhandsvisning av en projektsida i samma layout och bakgrund.

## Att skriva avsnitten om dig och kontakt

Håll avsnittet om dig till ett kort stycke i jag-form: vad du gillar att bygga, hur du helst arbetar och vad du letar efter härnäst. En mening om livet utanför koden går bra, en hel biografi gör det inte. Avsluta sidan med ett tydligt sätt att nå dig, oftast en e-postadress utskriven i sin helhet, plus GitHub och LinkedIn. Ett kontaktformulär ger friktion för en rekryterare som bara vill kopiera din adress till ett meddelande. Söker du designnära roller hjälper [personligt varumärke](https://gradiently.design/sv/guide/personal-branding) dig att hålla sajt, CV och profiler i samma look.

## Små detaljer som läses som smak

- **En typsnittsfamilj**, två vikter. Ett bra sans-serif till allt och ett monospace bara för kod.
- **En radlängd på 60 till 75 tecken** för brödtext, så att styckena är bekväma att läsa.
- **Verklig kontrast**: brödtext bör klara WCAG AA mot sin bakgrund.
- **En favicon** som matchar hero-färgerna.
- **Snabb laddning**: en portfolio för en utvecklare som tar fyra sekunder att visas argumenterar emot sig själv.
- **Ett mörkt och ett ljust tema** bara om du kommer att underhålla båda ordentligt.

Vill du slippa rita förhandsbilderna och skärmbildsramarna för hand kan Gradiently göra dem på en Mark, en levande gradientbakgrund som håller dina ord läsbara, och med Pro ändrar du storlek på en design till länkförhandsvisning, LinkedIn-inlägg och X-header i ett enda steg. Den kan också kopplas till ChatGPT och Claude, så att du kan be om en uppsättning projektförhandsvisningar medan du skriver fallstudierna.

## FAQ

### Vad ska en utvecklarportfolio innehålla?

En hero på en rad om vad du bygger, tre till sex projektkort med problem, lösning och resultat, ett kort avsnitt om dig och kontaktlänkar. Länka till körande projekt och deras kod.

### Hur många projekt ska en utvecklarportfolio ha?

Tre till sex väl förklarade projekt är starkare än ett långt rutnät. Välj arbeten som visar vilken sorts jobb du vill ha härnäst.

### Vilken storlek ska en Open Graph-bild för en portfolio ha?

1200×630 pixlar. Håll namnet och beskrivningen på en rad i mitten så att inget beskärs i kvadratiska förhandsvisningar.

### Ska en utvecklarportfolio ha en animerad bakgrund?

Bara om den är subtil, inte fördröjer sidan och respekterar inställningar för reducerad rörelse. En CSS-gradient i flera lager ger samma finish till nästan ingen prestandakostnad.