Utvecklarportfolio: design för en sajt med smak

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

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 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 och CSS mesh-gradient går längre.

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

Vill du ha rörelse, animera långsamt, håll orden stilla och respektera prefers-reduced-motion. Reducerad rörelse förklarar hur. Lite korn ovanpå döljer bandning i stora mörka gradienter, vilket tas upp i CSS-brusstruktur.

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.

.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ä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 visar hur du genererar dem vid bygget, och storlek på Open Graph-bild går igenom beskärningarna.

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