Senast granskad: 8 februari 2026
En portfölj-webbsida är ofta det första en rekryterare eller potentiell kund ser av ditt arbete. Till skillnad från ett CV visar portföljen inte bara vad du har gjort utan hur du löser problem, strukturerar kod och presenterar resultat. För utvecklare, designers och andra inom techbranschen är en välbyggd portfölj ofta skillnaden mellan att få en intervju och att hamna i högen.
Den här guiden går igenom hur du skapar en professionell portfölj-webbsida från grunden, med fokus på teknikval, struktur och prestanda.
Varfor du behover en portfolio
Arbetsmarknaden inom tech präglas av hård konkurrens. Enligt Stack Overflows årliga undersökning anger 68 procent av rekryterare att de prioriterar kandidater som kan visa konkreta projekt framför dem som enbart listar tekniker på sitt CV. En portfölj fungerar som bevis på din kompetens.
Men portföljen handlar inte bara om att imponera på rekryterare. Den tvingar dig att reflektera över ditt arbete, dokumentera dina processer och presentera dig själv på ett professionellt sätt. Dessutom är själva byggandet av portföljen ett projekt som visar dina kunskaper i praktiken.
Tre tydliga fördelar med en egen portfölj:
- Kontroll över narrativet: Du bestämmer vilka projekt som syns och hur de presenteras
- Teknisk demonstration: Portföljens kod, prestanda och design visar din kompetens direkt
- SEO-synlighet: En egen sajt kan ranka på ditt namn och dina specialområden
Valj plattform for din portfolio
Valet av plattform beror på dina tekniska kunskaper, tidbudget och syfte. Här är de tre vanligaste alternativen med sina för- och nackdelar.
WordPress med eget tema
WordPress driver över 40 procent av alla webbplatser och erbjuder tusentals portföljteman. För dig som inte vill koda allt själv är det ett snabbt alternativ. Nackdelen är att standardinstallationer ofta är långsamma och kräver optimering för att prestera bra i Lighthouse-tester.
Passar: Designers, marknadsförare och utvecklare som prioriterar snabbhet i uppsättning framför fullständig kontroll.
Statiska generatorer med hosting
Next.js, Astro, Hugo och Gatsby genererar statiska sidor som laddas blixtsnabbt. Du skriver innehållet i Markdown eller MDX och deployer till Vercel, Netlify eller Cloudflare Pages. Resultatet blir en sajt med Lighthouse-poäng på 95 till 100.
Passar: Frontendutvecklare och fullstackutvecklare som vill visa sin tekniska kompetens genom själva sajten.
GitHub Pages med Jekyll
GitHub Pages är gratis och integrerar direkt med ditt repository. Du pushar ändringar och sajten uppdateras automatiskt. Jekyll är inbyggt, men du kan även använda egna byggprocesser via GitHub Actions.
Passar: Utvecklare som vill ha en minimalistisk setup utan extra kostnad och som redan arbetar i GitHub.
| Plattform | Kostnad | Teknisk nivå | Prestanda | Flexibilitet |
|---|---|---|---|---|
| WordPress | Hosting från 50 kr/mån | Låg till medel | Medel | Hög med plugins |
| Next.js/Astro | Gratis (Vercel/Netlify) | Hög | Mycket hög | Total kontroll |
| GitHub Pages | Gratis | Medel | Hög | Begränsad |
Doman och hosting
En egen domän kostar ungefär 100 till 200 kronor per år för en .se-adress. Välj ditt namn, ditt användarnamn eller en kombination som är lätt att komma ihåg. Undvik långa domäner med bindestreck.
Bra domänval:
- fornamn.se eller fornamnefternamn.se om tillgängligt
- dittgithubnamn.dev för .dev-domäner riktade mot utvecklare
- portfolio.fornamn.se som subdomän om du redan har en personlig sajt
För hosting rekommenderas Vercel eller Netlify för statiska sajter. Båda har generösa gratisplaner som räcker för de flesta portföljer. Om du väljer WordPress finns svenska hostingleverantörer som Loopia, One.com och Oderland med bra support.
Struktur och navigation
Håll strukturen enkel. En portfölj behöver inte mer än fyra till sex sidor. Besökaren ska hitta det viktigaste inom tre klick.
Rekommenderad sidstruktur:
- Startsida: Kort presentation, ditt specialområde och länk till projekten
- Projekt: Galleri eller lista med dina bästa arbeten
- Om mig: Din bakgrund, erfarenhet och vad du söker
- Kontakt: Formulär eller direktlänkar till e-post och LinkedIn
- Blogg (valfritt): Tekniska artiklar som visar djupare kunskap
Navigationen bör vara synlig på alla sidor, antingen som en fast header eller en hamburger-meny på mobil. Undvik dropdown-menyer om du inte har mer än tio sidor.
Visa dina basta projekt
Kvalitet trumfar kvantitet. Välj tre till sex projekt som representerar dina starkaste sidor. Varje projekt bör ha en dedikerad undersida med följande element:
- Projektnamn och kort beskrivning: En mening som förklarar vad det är
- Problemet: Vilken utmaning löste du?
- Lösningen: Hur angrep du problemet tekniskt?
- Teknikstack: Ramverk, språk och verktyg du använde
- Resultat: Mätbara resultat om möjligt (prestanda, användare, konvertering)
- Skärmdumpar eller demo: Visuella bevis på arbetet
- Länk till kod: GitHub-repo om det är ett open source-projekt
Ett vanligt misstag är att bara visa slutresultatet. Rekryterare vill förstå din tankeprocess. Beskriv varför du valde en viss lösning, vilka alternativ du övervägde och vad du lärde dig.
Om mig-sidan
Om mig-sidan är din chans att bli mer än en lista med tekniker. Här kan du berätta din historia, men håll det relevant för din karriär.
Inkludera:
- Ett professionellt foto: Ansiktet skapar förtroende
- Din bakgrund: Utbildning och tidigare roller i korthet
- Dina specialområden: Vad du är bäst på och vad du vill jobba med
- Personliga intressen: En till två meningar som gör dig mänsklig
- Ladda ner CV: PDF-länk för dem som vill ha det formatet
Undvik klichéer som ”passionerad problemlösare” eller ”brinner för kod”. Visa istället genom konkreta exempel.
Kontaktmojligheter
Gör det enkelt att kontakta dig. Varje extra steg minskar sannolikheten att någon hör av sig.
Tre alternativ som fungerar:
- Kontaktformulär: Enkelt formulär med namn, e-post och meddelande. Använd Formspree eller Netlify Forms för statiska sajter
- Direktlänk till e-post: En mailto-länk om du föredrar att slippa spam-filter
- Sociala länkar: LinkedIn, GitHub och eventuellt Twitter/X i sidfoten
Inkludera aldrig ditt telefonnummer offentligt om du inte vill ha säljsamtal. LinkedIn-meddelanden fungerar som ett filter.
SEO-grunderna for din portfolio
En portfölj som inte hittas är värdelös. Grundläggande sökmotoroptimering säkerställer att du rankar på ditt eget namn och dina specialområden.
Teknisk SEO
- Laddningstid: Sikta på under två sekunder. Optimera bilder, använd lazy loading och minimera JavaScript. Testa med Pagespeed.se för att identifiera flaskhalsar
- Mobilanpassning: Google indexerar mobilversionen först. Testa på olika skärmstorlekar
- HTTPS: Obligatoriskt. Alla seriösa hostingleverantörer erbjuder gratis SSL
- Strukturerad data: Använd Schema.org Person-markup för att hjälpa Google förstå vem du är
Innehållsoptimering
- Sidtitlar: Inkludera ditt namn och roll, till exempel ”Anna Andersson – Frontendutvecklare Stockholm”
- Meta-beskrivningar: Skriv unika beskrivningar för varje sida med relevanta sökord
- Alt-texter: Beskriv alla bilder för tillgänglighet och SEO
- Intern länkning: Länka mellan projektsidor och tillbaka till startsidan
Off-page SEO
- GitHub-profil: Länka till din portfölj från din GitHub-bio
- LinkedIn: Lägg till portföljlänken i kontaktuppgifter och utvalda avsnitt
- Gästblogga: Skriv tekniska artiklar på andra sajter med länk tillbaka
Vanliga fragor
Hur lang tid tar det att skapa en portfolio?
Med en färdig mall och förberett innehåll kan du ha en grundläggande portfölj uppe på en helg. En mer genomarbetad version med egenutvecklad design tar två till fyra veckor på kvällar och helger.
Maste jag kunna koda for att skapa en portfolio?
Nej. WordPress och Squarespace erbjuder drag-and-drop-byggare. Men om du söker jobb som utvecklare är det en fördel att bygga den själv för att visa dina kunskaper.
Vilka projekt ska jag visa om jag ar nyexaminerad?
Skolprojekt, hobbyprojekt och open source-bidrag räknas. Det viktigaste är att visa att du kan slutföra något och förklara dina val. Ett väldokumenterat sidoprojekt imponerar mer än tio halvfärdiga.
Hur ofta ska jag uppdatera min portfolio?
Minst var sjätte månad, eller när du avslutar ett projekt du är stolt över. En inaktuell portfölj med projekt från tre år tillbaka signalerar att du inte utvecklas.
Ska jag ha en blogg pa min portfolio?
Bara om du planerar att skriva regelbundet. En blogg med tre inlägg från två år tillbaka ser sämre ut än ingen blogg alls. Om du skriver, sikta på minst ett inlägg i månaden.
Vad ar viktigast for en utvecklarportfölj?
Tre saker: snabb laddningstid (visar teknisk kompetens), tydlig presentation av projekt (visar kommunikationsförmåga) och tillgänglig kod på GitHub (visar transparens). Rekryterare kollar ofta källkoden.