Acht originele layouts voor een developerportfolio die u live kunt bekijken, waarvoor elk het beste past, en een kopieerbare HTML- en CSS-template die u gratis host op GitHub Pages.
Een sterk developerportfolio laat snel drie dingen zien: wat u bouwt, bewijs dat het werkt en hoe men u bereikt. De acht layouts hieronder zijn originele voorbeelden om te bekijken en aan te passen, van een lijst met casestudy's op één pagina tot een site in terminalstijl, gevolgd door een eenvoudige HTML- en CSS-template die u vandaag nog publiceert.
Kies een layout op basis van uw doel
Doel
Layout om te proberen
Waarom
Eerste juniorfunctie
Casestudy's van projecten
Laat uw denkwerk zien, niet alleen screenshots
Freelanceklanten
Diensten en resultaten
Begint met wat een klant krijgt
Open-sourcewerk
Raster van repositories
Zet echte code op één klik afstand
Frontend of design engineering
Interactieve showcase
De site zelf is het bewijs
Senior- of staffuncties
Schrijven voorop
Lange artikelen tonen uw oordeelsvermogen
De meeste lijsten met developerportfolio's zijn screenshots van sites van anderen, die u niet kunt kopiëren en die snel verouderen. Hier is elke layout een origineel wireframe dat voor deze pagina getekend is. Wissel ertussen om de structuur te zien, lees wanneer elk past en begin dan met de template onderaan.
Kies in de tabel het doel dat past bij uw volgende baan of klant.
Bekijk de bijbehorende layout in de switcher en noteer de onderdelen in volgorde.
Kopieer de template, vul uw naam, projecten en links in en verwijder onderdelen die u niet nodig hebt.
Publiceer hem gratis op GitHub Pages of een andere statische host en link ernaar vanuit uw cv en profielen.
Drie afgeronde projecten met een korte toelichting zijn beter dan twaalf halve.
Noem bij elk project het probleem, uw rol, de stack en één resultaat waar u achter staat.
Link naar een live demo en de broncode; beoordelaars bekijken de code vaak vóór de screenshots.
Zet een gewone e-maillink in de header en footer zodat niemand ernaar hoeft te zoeken.
Haal uw eigen portfolio door een toegankelijkheids- en snelheidstest, want beoordelaars doen dat ook.
Veelgestelde vragen
Wat hoort er in een developerportfolio?
Een samenvatting in één regel van wat u doet, drie tot zes projecten met probleem, rol, stack en links, een korte over-mij-sectie en een duidelijke manier om contact op te nemen. Een cv om te downloaden en een sectie met artikelen zijn handige extra's, geen vereisten.
Moet ik mijn portfolio vanaf nul bouwen?
Nee. Recruiters vinden de projecten belangrijker dan of u het frame met de hand gecodeerd hebt. Zelf bouwen is een goed klein project voor frontendfuncties, terwijl een template of sitebuilder prima is voor backend-, data- of mobiele developers.
Waar kan ik een developerportfolio gratis hosten?
GitHub Pages publiceert HTML, CSS en JavaScript rechtstreeks vanuit een repository op een adres zoals yourname.github.io. Andere statische hosts werken op dezelfde manier, en u kunt later uw eigen domein toevoegen.
Hoeveel projecten moet ik laten zien?
Drie tot zes. Kies de projecten die het dichtst bij het werk liggen dat u hierna wilt doen en zet de sterkste bovenaan, want veel bezoekers scrollen nooit tot het eind van de lijst.
Moet ik school- of tutorialprojecten opnemen?
Alleen als u ze wezenlijk hebt aangepast. Een tutorialkloon die veel sollicitanten delen, zegt een beoordelaar weinig; voeg een functie, een testsuite of een echte dataset toe en leg uit wat u veranderde.
Schrijf projecten als kleine casestudy's
Een screenshot bewijst dat u een screenshot kunt maken. Twee of drie zinnen over het probleem, het lastige deel en hoe u het oploste laten zien hoe u denkt, en dat is wat sollicitatiegesprekken testen.
Houd elke casestudy goed scanbaar: een titel, een samenvatting in één regel, stacktags en dan het korte verhaal en de links. Bezoekers kunnen de details openen als ze die willen.
Maak van de site zelf een goed voorbeeld
Uw portfolio is het enige project dat elke beoordelaar gegarandeerd ziet. Semantische koppen, zichtbare focusstijlen, snel laden en een layout die op een telefoon werkt tellen allemaal als bewijs.
Vermijd zware introanimaties en laadschermen. Ze vertragen de inhoud waarvoor beoordelaars kwamen en kunnen hinderlijk zijn voor mensen die liever minder beweging zien.
Houd het actueel met weinig moeite
Sla projecten op als een eenvoudige lijst in één bestand, zodat een nieuw project toevoegen een paar minuten kost. Verwijder projecten die uw niveau niet meer weergeven.
Zet een regel met de laatste update in de footer. Die vertelt bezoekers ongemerkt dat de informatie actueel is.
Checklist voor projectkaarten
Waar elk projectitem antwoord op moet geven
Veld
Voorbeeld
Titel
App om diensten te ruilen voor een kleine kliniek
Samenvatting in één regel
Laat medewerkers diensten ruilen zonder dat een manager het rooster opnieuw invoert
Uw rol
Alleen gebouwd, of de onderdelen waarvoor u in een team verantwoordelijk was
Stack
React, Node, Postgres
Lastig deel
Voorkomen dat twee mensen tegelijk dezelfde dienst claimen
Resultaat
Iets dat klopt en controleerbaar is, zoals slagende tests of echte gebruikers
Links
Live demo en bronrepository
Gratis template voor een developerportfolio
Eén HTML-bestand met inline CSS. Er is geen buildstap, het werkt op telefoons en schakelt over naar donkere kleuren als het systeem van de bezoeker daarom vraagt.
Portfoliotemplate in één bestand
Bewerk de code en het voorbeeld werkt mee. Vervang de voorbeeldnaam, projecten en het e-mailadres en sla het bestand op als index.html.
Casestudy's van projecten
Het beste voor: Werkzoekenden op junior- en mediorniveau
Naam en rol in één regel
Drie casestudykaarten
Kort over mij
Contact
Elke kaart opent een pagina met probleem, aanpak, stack en resultaat.
Diensten en resultaten
Het beste voor: Freelancers
Wat ik voor klanten bouw
Lijst met diensten
Geselecteerd werk
Werkwijze in drie stappen
Contactformulier of e-mail
Richt zich op kopers, dus begint met resultaten in plaats van programmeertalen.
Raster van repositories
Het beste voor: Open-sourcebijdragers
Intro
Raster van repositories met taal en doel
Presentaties of artikelen
Contact
Elke tegel linkt direct naar de code en de live demo.
Terminalstijl
Het beste voor: Backend-, DevOps- en toolingfuncties
Header in promptstijl
whoami-samenvatting
ls-lijst met projecten
cat contact
Leuk zolang elke regel leesbaar blijft en de pagina ook met een muis werkt.
Interactieve showcase
Het beste voor: Frontend- en creatieve developers
Interactieve hero over het hele scherm
Projectreel
Technische notities
Contact
Respecteer de voorkeur voor minder beweging en houd een route in platte tekst naar de projecten.
Schrijven voorop
Het beste voor: Senior engineers
Korte bio
Nieuwste artikelen
Geselecteerde projecten
Spreken
Contact
Artikelen tonen oordeelsvermogen en communicatie, en daar weegt werving op seniorniveau zwaar op.
Cv op één pagina
Het beste voor: Iedereen met weinig tijd
Header met links
Tijdlijn met ervaring
Projecten
Vaardigheden
Cv downloaden
Een webversie van het cv die op een telefoon makkelijker leest dan een pdf.
Gesplitst scherm
Het beste voor: Developers die ook ontwerpen
Vaste linkerkolom met naam en links
Scrollende rechterkolom met projecten
Contactlinks blijven zichtbaar terwijl bezoekers door het werk bladeren.