Design af udviklerportfolio: en side, der viser smag

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

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 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 og CSS mesh-gradient 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 have bevægelse, så animér langsomt, hold ordene i ro og respektér prefers-reduced-motion; reduceret bevægelse forklarer hvordan. Lidt korn ovenpå skjuler bånddannelse på store mørke gradienter, som er beskrevet i CSS-støjtekstur.

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.

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

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 viser, hvordan du genererer dem under build; størrelse på Open Graph-billede gennemgår beskæringerne.

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