Utviklerportefølje: design av en side som viser smak

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

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 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 og mesh-gradient i CSS går videre.

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

Vil du ha bevegelse, animer sakte, la ordene stå stille og respekter prefers-reduced-motion; redusert bevegelse forklarer hvordan. Litt korn på toppen skjuler stripedannelse i store mørke gradienter, som dekkes i støytekstur i CSS.

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.

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

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 viser hvordan du genererer dem ved bygging; størrelse på Open Graph-bilder dekker beskjæringene.

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