Een portfolio website maken voor jezelf als programmeur/developer is heel goed om jezelf beter in de markt te zetten, zowel voor beginnende als gevorderde programmeurs/developers. Je maakt meer kans op een goede baan als werknemer of werk als je een freelancer bent. Dit is een voorbeeld van een prachtige portfolio website voor programmeurs/developers en je kan het simpel inrichten naar je eigen smaak. Ben je bijvoorbeeld een (beginnende) web developer, Python developer, Java developer of een PHP developer? Dan is de portfolio website die we gaan maken echt voor jou geschikt. WordPress is het beste CMS (Contentmanagementsysteem) om een goede portfolio website te maken in een korte tijd en wij gaan dit ook gebruiken. Lees lekker verder en ga gelijk aan de slag!
Ja, ik wil alvast de beste hostingprovider van Nederland zien voor mijn portfolio website!
Een portfolio website (maken) vergroot je kans op een baan of werk als programmeur/developer
Ben je een programmeur/developer of wil je er één worden? Dan is het echt aan te raden om een portfolio website te gaan maken. Dit is voor jezelf leuk om te doen, maar ook goed om je werk aan de buitenwereld te laten zien.
Met de buitenwereld bedoelen we dan vooral werkgevers en klanten die eventueel van jouw diensten gebruik willen maken. Zowel als je bij een bedrijf wil solliciteren als dat je een freelancer bent die opdrachten binnen wil hengelen, een portfolio website is in beide gevallen zeer handig.
Stel je voor dat je als programmeur/developer gaat solliciteren bij een bedrijf. Dat bedrijf wil natuurlijk graag weten wat jij kan. Een portfolio website is de ideale manier om aan bedrijven te laten zien wat je allemaal kan.
In je portfolio website staan bijvoorbeeld projecten waar je zelf aan hebt gewerkt of bij vorige werkgevers. Een verwijzing naar je code op GitHub of een andere plek geven bedrijven en eventuele klanten de mogelijkheid om te zien hoe goed je code in elkaar zit.
Op deze manier krijgen bedrijven en/of klanten een goed beeld van wat je allemaal kan en is de kans groter dat je de baan of een opdracht krijgt.
Waarom een portfolio website maken met WordPress en een Neve Freelancer Starter Site?
Wij gaan een portfolio website maken met WordPress en een Neve Freelancer Starter Site. Laten we eerst beginnen met WordPress. WordPress is het beste en meest gebruikte CMS (Contentmanagementsysteem) ter wereld.
Meer dan 40% van alle websites wereldwijd is een WordPress website. Dit geeft wel aan dat het een goed, betrouwbaar en veilig CMS is. Met WordPress is het vrij eenvoudig om een website in elkaar te zetten, dus ook een portfolio website maken is niet lastig.
WordPress is open source en je kan er als programmeur/developer daarom ook lekker zelf aan sleutelen. Je zit niet vast aan veel beperkingen, wat bij veel andere CMS’en wel het geval is.
Een portfolio website maken met WordPress kost weinig tijd
Als programmeur/developer is het beter om veel aan je projecten te zitten en gave dingen te maken. Van projecten van jezelf en bijvoorbeeld op het werk leer je erg veel in de praktijk.
Daarom wil je eigenlijk niet te veel tijd besteden aan het maken van een portfolio website. Of je moet bijvoorbeeld een web developer zijn, dan kan je meer aandacht geven aan de opmaak van je portfolio website.
Het mooie aan WordPress is dat je beide kanten op kan gaan. Je kan snel en eenvoudig een portfolio website maken, waardoor je meer tijd hebt voor je projecten. Of je kan bijvoorbeeld als web developer een portfolio website maken en helemaal inrichten naar je eigen stijl. Hier gaat dan uiteraard meer tijd in zitten.
Portfolio website voorbeeld met een mooi en verfrissend design
Wij gaan de Neve Freelancer Starter Site gebruiken als portfolio website voorbeeld. Je bent natuurlijk vrij om je eigen WordPress theme en/of Starter Site te kiezen, maar de Neve Freelancer Starter Site is zeer geschikt als portfolio website voor programmeurs/developers.
De Neve Freelancer Starter Site is heel makkelijk om aan te passen. Dat is erg handig, zodat je niet veel tijd kwijt bent aan het maken van je portfolio website.
Ook heeft de Neve Freelancer Starter Site van zichzelf al een mooi en verfrissend design. Zonder al te veel aanpassingen is het zeker al een mooie portfolio website.
Voor bijvoorbeeld web developers zijn er genoeg mogelijkheden om je portfolio website met de Neve Freelancer Starter Site meer naar je eigen hand te zetten en je eigen opmaak te bepalen.
Neve Freelancer Starter Site zowel handig voor het zoeken naar een baan als opdrachten verkrijgen
Door de naam van deze Starter Site lijkt het net alsof het alleen bedoeld is voor freelancers, maar dat is zeker niet zo. Het is zowel geschikt voor programmeurs/developers die zoeken naar een baan als freelancers die zoeken naar opdrachten.
Je kan het namelijk inrichten op een manier die het beste bij jouw situatie past. Bij het inrichten hoef je niet perse code te gebruiken. Wil je meer in detail gaan? Dan is bijvoorbeeld het gebruik van CSS wel aan te raden.
Als freelancer richt je de portfolio website natuurlijk wel iets anders in dan als dat je naar een baan zoekt. Hier komen we later op terug als we daadwerkelijk de portfolio website aan het maken zijn.
Zo ziet het portfolio website voorbeeld eruit dat we gaan gebruiken
Ben je alvast nieuwsgierig naar hoe het portfolio website voorbeeld eruit ziet dat we gaan gebruiken? Wij hebben het voorbeeld namelijk online staan en je kan het makkelijk bekijken.
Later ga je leren hoe je onder andere alle voorbeeldteksten en -afbeeldingen verandert naar je eigen teksten en afbeeldingen. En bijvoorbeeld hoe je kleuren verandert, blokken verwijdert, de Customizer gebruikt, CSS code schrijft in een child theme en een contactformulier toevoegt.
In “Richt dit portfolio website voorbeeld in naar je eigen stijl” lees je daar alles over. Je kan dit portfolio website voorbeeld helemaal inrichten naar je eigen stijl en het hoeft niet veel werk te zijn.
Wat “hoort” er in een portfolio website van een programmeur/developer te staan?
Zoals eerder gezegd, richt je een portfolio website wel anders in als freelancer dan als dat je naar werk zoekt (als werknemer), maar er zijn wel een aantal dingen die “horen” in een portfolio website van een programmeur/developer.
Je mag natuurlijk zelf bepalen wat er op je portfolio website komt, maar de volgende dingen zijn wel handig om erop te hebben staan:
- Je naam
- Kleine uitleg over wie je bent
- Je vaardigheden
- Ervaring die je hebt opgedaan, bijvoorbeeld bij je ex-werkgevers of met vorige opdrachten
- Portfolio met je projecten
- Contactgegevens
In het portfolio website voorbeeld dat we gaan maken, zal je deze dingen ook terug zien komen. Laten we nu maar met het echte werk gaan beginnen. Op naar de eerste stap in het maken van je portfolio website!
Stap 1: Domeinnaam verzinnen
De eerste stap is het verzinnen van een domeinnaam. De domeinnaam ga je in stap 2 registreren, zodat het ook daadwerkelijk van jou is. Heb je al iets in gedachten?
De domeinnaam is het eerste wat een bezoeker ziet of invult, voordat het op je portfolio website terechtkomt. Het is dus zeker belangrijk en geeft een eerste indruk aan de bezoeker.
Veel programmeurs/developers gebruiken hun eigen naam of een iets andere vorm daarvan als domeinnaam voor hun portfolio website. Het is aan te raden om dit ook te doen.
Je portfolio website is namelijk van jezelf en je identificeert met je eigen naam beter je eigen werk. Ook zullen potentiële werkgevers en klanten je naam googelen bij interesse en dan komen ze op je portfolio website terecht.
Heet je bijvoorbeeld Henk Boer en is de domeinnaam henkboer.nl al bezet, dan kan je bijvoorbeeld hboer.nl als domeinnaam nemen. Er is altijd wel een variant van je voor- en achternaam die nog niet bezet is.
Door je volledige naam in je portfolio website te verwerken, zal je portfolio website goed gevonden worden als potentiële werkgevers en klanten je naam googelen.
Extra tips
Enkele andere extra tips om rekening mee te houden bij het verzinnen van je domeinnaam:
- Maak het niet te lang. Heb je bijvoorbeeld een “lastige” voornaam? Gebruik dan alleen de eerste letter van je voornaam en daarachter je achternaam, zoals hboer.nl.
- Een .nl extensie is aan te raden als je potentiële werkgevers of klanten in Nederland zitten. In België is een .be extensie aan te raden.
- Gebruik geen koppeltekens en getallen.
Alleen je voornaam of achternaam is natuurlijk ook een optie. Misschien wil je wel helemaal niet je naam verwerken in je domeinnaam? Het is natuurlijk geen verplichting, wij adviseren het alleen maar.
Ben je eruit en heb je een domeinnaam verzonnen? Ga dan naar stap 2.
Stap 2: Schaf een goedkoop webhostingpakket aan bij Cloud86
Als programmeur/developer wil je natuurlijk je portfolio website online hebben staan om aan de wereld en (toekomstige) werkgevers of klanten te laten zien. Daarvoor heb je een hostingprovider nodig. Wij raden aan om een webhostingpakket te nemen bij Cloud86.
Waarom Cloud86 de beste hostingprovider is
Cloud86 is in onze ogen de beste hostingprovider van Nederland. Wij gebruiken het zelf ook voor meerdere websites die we beheren en zijn erg tevreden. Dit zijn enkele redenen waarom Cloud86 de beste hostingprovider van Nederland is:
- Snelste hostingprovider van Nederland
- Ze werken met de nieuwste technologieën
- Zeer behulpzame, snelle en deskundige klantenservice
- Goedkoop
- Keuze uit meerdere pakketten
- Er wordt elke dag automatisch een back-up gemaakt van al je data en opgeslagen in een extern datacentrum, dat is superveilig
- 99,98% gemiddelde uptime
- Overzichtelijk Plesk Control Panel
- Mogelijkheid voor een maandcontract dat makkelijk elk moment opzegbaar is, er zitten geen addertjes onder het gras
Andere klanten zijn ook erg enthousiast over Cloud86:
Start webhostingpakket aanschaffen
Wij raden het Start webhostingpakket aan bij Cloud86. Op het moment van schrijven kost dit je €1,95 per maand (Exclusief BTW). Je portfolio website is door het Start webhostingpakket razendsnel en je hebt vele andere voordelen.
Ga naar de homepage van Cloud86, klik in het menu op “Hosting” en klik daarna op “Webhosting”:
Je ziet bij het Start webhostingpakket welke voordelen je allemaal hebt en wat je ervoor krijgt. Klik bij het Start webhostingpakket op “Direct bestellen”.
Registreer de domeinnaam die je in de eerste stap al hebt verzonnen. Vul de domeinnaam in en klik op “Controleer”. Als de domeinnaam nog vrij is met de extensie die je wil, bestel het dan.
Nu heb je de keuze om te kiezen tussen een contract per jaar of per drie jaar. Rechts zie je een duidelijk venster met de kosten.
Klik op “Doorgaan”. Als je anoniem wil blijven, dan kan je “Privacy Protect” erbij nemen. Klik weer op “Doorgaan” om verder te gaan. Je ziet een mooi overzicht van alle kosten.
Vul je contactgegevens in. Belangrijk is om te bepalen of je gebruik wil maken van automatische incasso of niet. Vink de optie uit als je niet van automatische incasso gebruik wil maken:
Kies een betaalmethode en klik op “Afrekenen”. Zo simpel is het, je hebt nu een Start webhostingpakket bij de beste hostingprovider van Nederland!
E-mails van Cloud86
Je krijgt een aantal e-mails van Cloud86. Belangrijk is om eerst je e-mailadres te bevestigen. Je hebt ook een mail gekregen met een nette factuur over de kosten die je hebt gemaakt. De factuur kan je ook altijd bekijken in het dashboard op Cloud86 als je ingelogd bent.
De mail met “Belangrijke inloggegevens” is belangrijk. Hierin staat ook duidelijk dat als je een nieuwe domeinnaam hebt besteld, dan kan het 1 tot 24 uur duren voordat je website bereikbaar is via het internet. Nog even geduld dus voordat je een portfolio website gaat maken.
Als je website bereikbaar is via het internet, dan kan je naar stap 3 toe en WordPress gaan installeren voor je portfolio website.
Stap 3: Installeer WordPress voor je portfolio website
We kunnen hier wel uitgebreid gaan beschrijven hoe je WordPress installeert bij Cloud86 voor je portfolio website, maar op de website van Cloud86 staat een hele goede uitleg over hoe je dat eenvoudig kan doen.
WordPress installeren bij Cloud86 is een fluitje van een cent! Met een paar muisklikken is het al gebeurd. Lees de duidelijke handleiding op de website van Cloud86 en installeer WordPress.
Bij het invullen van de installatieopties raden we het volgende aan:
- Zoekpad van installatie laat je leeg
- Bij “Plugin- of themaset” selecteer je “Geen”
- Het beste is om de laatste WordPress versie (huidig) te selecteren
- Bij “Instellingen automatische updates” selecteer je “Ja, maar alleen kleine (beveiligings)updates”
De titel en de taal van je website is je eigen keuze natuurlijk. Nederlands is voor nu aan te raden, want dan kan je de instructies in dit artikel beter volgen. Later kan je de taal altijd nog veranderen.
Bewaar je gebruikersnaam en wachtwoord goed van je WordPress website op een veilige plek. Hiermee moet je namelijk inloggen om aan je portfolio website te werken.
Voor de zekerheid is het ook goed om de databasegegevens te bewaren op een veilige plek. Zorg echt dat niemand erbij kan, anders kan je site gehackt worden.
Je hoeft nu nog geen plugins te installeren als daar naar gevraagd wordt door het systeem. Dit gaan we later zelf doen.
Ga nadat je WordPress hebt geïnstalleerd eens naar je portfolio website. Als het goed is zie je dat WordPress een standaard theme heeft geïnstalleerd. Wij gaan hier zo verandering in brengen!
Stap 4: Neve Freelancer installeren (Portfolio website voorbeeld)
Door de Neve Freelancer Starter Site heb je een geweldig portfolio website voorbeeld en dat kan je helemaal naar je eigen hand zetten. De Starter Site is uitermate geschikt voor programmeurs/developers.
Een portfolio website maken is vrij eenvoudig met Neve Freelancer. Eerst moeten we natuurlijk Neve Freelancer installeren en gelukkig is die stap ook niet lastig.
Ben je al ingelogd in WordPress op je portfolio website? Zo niet, dan moet je dat eerst doen om verder te kunnen. Vul /wp-admin in achter de URL van je portfolio website. Zoals hier: https://naamvanjeportfoliowebsite.nl/wp-admin
Op deze manier kom je in het inlogscherm terecht. Als het goed is heb je je gebruikersnaam en wachtwoord bewaard. Log daarmee in. Je komt als het goed is gelijk in het Dashboard terecht, de “achterkant” van je portfolio website.
Als je linksboven op het scherm op het huisje klikt of de titel van je website, dan kom je op de website zelf terecht. Klik weer linksboven in het scherm op de titel van je website om terug te gaan naar het Dashboard. Door /wp-admin achter je URL te zetten kom je ook weer in het Dashboard.
Het Neve WordPress theme downloaden
Je bent ingelogd en weet hoe dat werkt. Nu is het tijd om het Neve WordPress theme te downloaden. Op de website van Themeisle kan je het Neve WordPress theme gratis downloaden.
Je vraagt je misschien af waarom je het Neve WordPress theme moet downloaden en niet Neve Freelancer? Via het Neve WordPress theme kan je namelijk gratis de Neve Freelancer Starter Site importeren, dus daarom moet je eerst het Neve WordPress theme downloaden.
Download op de website van Themeisle de gratis versie van het Neve WordPress theme. Je hebt nu een zip bestandje gedownload. Dit zip bestandje ga je zo uploaden.
Neve WordPress theme uploaden
Heb je het zip bestandje gedownload? Dan kan je het namelijk gaan uploaden in je WordPress portfolio website. Ga weer terug naar het Dashboard van je portfolio website. Klik in het linkermenu op Weergave > Thema’s.
Klik boven in het scherm op de knop “Nieuwe toevoegen” om een nieuw WordPress theme toe te voegen.
Daarna klik je op “Thema uploaden”.
Kies het zip bestandje dat je eerder hebt gedownload en klik op “Nu installeren”. Wacht totdat het uploaden klaar is. Het installatieproces duurt normaal gesproken niet zo lang. Het Neve WordPress theme is echter nog niet geactiveerd.
Ga weer naar Weergave > Thema’s en activeer het Neve WordPress theme door op de “Activeren” knop te klikken.
Je hebt nu het Neve WordPress theme geactiveerd en je bent klaar om Neve Freelancer te importeren.
Neve Freelancer importeren
Er staat nu bijna een prachtig portfolio website voorbeeld, waar je lekker zelf aan kan sleutelen. Als laatste in deze stap moet je nog Neve Freelancer importeren.
Klik in het linkermenu in het Dashboard op Weergave > Neve Opties. In het menu dat verschijnt onder de titel “Neve opties” klik je op “Starter Sites”.
De plugin “Cloud Templates & Patterns Collection” moet actief zijn om startersites voor Neve te kunnen importeren, dus klik op “Install and Activate” om de plugin te installeren en activeren.
Als het goed is, ben je nu al in het juiste scherm om een startersite importeren. Zo niet, klik dan op Weergave > Starter Sites. Zoek in de zoekbalk naar “Freelancer” en importeer de Neve Freelancer Starter Site.
Laat de importopties zoals ze zijn en klik weer op “Import”.
Het importproces duurt meestal niet zo lang. Als het klaar is, ga dan eens naar je portfolio website en kijk hoe het eruit ziet. Je hebt nu een prachtig portfolio website voorbeeld geïmporteerd en kan het helemaal gaan inrichten naar je eigen stijl!
Stap 5: Child theme maken
Voordat je dit portfolio website voorbeeld gaat inrichten naar je eigen stijl, is het handig om eerst een child theme te maken.
Vooral als je bijvoorbeeld een web developer bent en met CSS en PHP aan de slag gaat en aanpassingen wil maken, dan is het handig om te doen.
Stel dat je als web developer CSS en PHP code gaat schrijven voor je portfolio website en er is een update van het Neve WordPress theme beschikbaar. Dan ga je het theme updaten en dan zijn al je aanpassingen opeens verdwenen en gaat je portfolio website misschien wel kapot.
Door de update verdwijnen de aanpassingen die je hebt gemaakt. Een child theme voorkomt dat. In “Child theme maken in WordPress” lees je meer over wat een child theme is, maar we gaan niet op die manier een child theme maken, zoals in dat artikel staat.
Een Neve child theme maken kan namelijk veel simpeler. Via de website van Themeisle download je gemakkelijk een Neve child theme zip bestandje. Deze child theme upload je en activeer je, net zoals je met het Neve WordPress theme hebt gedaan.
Heb je het Neve child theme geactiveerd? Dan zie je dat er niks veranderd aan je website. Als je bijvoorbeeld CSS code gaat schrijven in je child theme in het “style.css” bestand, dan overschijft dat de CSS code die staat in het parent theme. Hierdoor gaat je geschreven CSS code niet verloren bij een update van het Neve WordPress theme.
In het volgende hoofdstuk ga je zien hoe je CSS code schrijft in het “style.css” bestand in je child theme. Ben je klaar om naar de volgende stap te gaan en het portfolio website voorbeeld in te richten naar je eigen stijl?
Stap 6: Richt dit portfolio website voorbeeld in naar je eigen stijl
Je hebt nu een prachtig portfolio website voorbeeld staan, namelijk de Neve Freelancer Starter Site. Dat is allemaal leuk en aardig, maar je wil het natuurlijk inrichten naar je eigen stijl en je eigen content erop zetten.
Je hebt gemerkt dat een portfolio website maken met het Neve WordPress theme en de Neve Freelancer Starter Site heel eenvoudig is. Gelukkig is de portfolio website aanpassen en inrichten naar je eigen stijl ook niet lastig.
Bijvoorbeeld als web developer heb je ook genoeg mogelijkheden om je portfolio website met de Neve Freelancer Starter Site meer naar je eigen hand te zetten.
Hieronder staan onder andere een aantal voorbeelden over hoe je bepaalde elementen op je portfolio website kan aanpassen en hoe je CSS code schrijft in je child theme. Met Neve Pro heb je nog meer mogelijkheden en het is zeker interessant om te overwegen.
Doe lekker veel inspiratie op, zodat je zelf aan de slag kan gaan!
Customizer gebruiken
De Customizer is een hele handige plek om aanpassingen aan je portfolio website te verrichten. Ga naar het Dashboard van je portfolio website en klik op Weergave > Customizer.
Je bent nu in de Customizer omgeving. De aanpassingen die je in de Customizer maakt, zie je gelijk terug. Zo zie je eerst of je aanpassingen naar wens zijn en dan sla je het pas op of verwijder je de aanpassing weer.
Laten als voorbeeld twee aanpassingen verrichten in de Customizer omgeving. Klik in het menu in de Customizer omgeving eens op “Header” en dan op “Logo veranderen”.
Je ziet hier “Ondertitel”/”Slogan” staan. Pas de ondertitel aan naar wat je maar wil of verwijder het. Zie je live welke aanpassing je hebt gedaan? Klik daarna op de blauwe knop “Publiceren” om daadwerkelijk de aanpassing door te voeren. Zo simpel is dat dus!
Nog een voorbeeld. Ga weer terug naar het hoofdmenu van de Customizer omgeving. Klik op Typografie > Algemeen en pas de Font Family (Lettertype) aan van de body.
Je zal nu wel snappen hoe het werkt. Je ziet weer live je aanpassing en je kan het eventueel opslaan door op de blauwe knop “Publiceren” te klikken.
Met de Customizer is het heel makkelijk om aanpassingen aan je portfolio website te verrichten. Aanpassingen via de Customizer omgeving gaan ook niet verloren bij het updaten van het Neve WordPress theme.
Kijk eens naar de andere mogelijkheden in de Customizer en speel er een beetje mee. Met Neve Pro heb je nog meer mogelijkheden, daar lees je meer over in “Neve Pro”.
Tekst en kleur aanpassen
Nu staan er allemaal voorbeeldteksten op je portfolio website. Het is natuurlijk de bedoeling om daar je eigen teksten van te maken. Gelukkig is dit heel eenvoudig.
Als voorbeeld gaan we de introductietekst aanpassen op de homepage. Ga eens naar je homepage en klik boven in het scherm op “Pagina bewerken”.
Je bent nu in de editor terechtgekomen waar je de pagina eenvoudig kan bewerken. Klik op een tekst die je wil aanpassen en schrijf een nieuwe tekst. Wij hebben als voorbeeld deze aanpassing gemaakt:
Probeer ook eens wat teksten aan te passen en klik op de blauwe knop “Updaten” om je aanpassingen door te voeren. Op andere pagina’s werkt dit hetzelfde.
Zo kan je bijvoorbeeld ook eenvoudig de kleur aanpassen van het bovenstaande blok. Klik in de editor op het blok en klik bij de blok-instellingen op “Style”.
Dan zie je in het venster “Achtergrondkleur” staan en kan je de achtergrondkleur instellen naar elke kleur die je maar wil. Voor andere blokken op de homepage en andere pagina’s werkt dat hetzelfde. Ga eens op onderzoek uit en test verschillende kleuren uit, als je deze kleur niet mooi vindt.
Afbeeldingen veranderen
Net zoals bij de teksten, staan er nu ook allemaal voorbeeldafbeeldingen op je portfolio website. Deze wil je natuurlijk vervangen door je eigen afbeeldingen.
We gaan als voorbeeld een afbeelding vervangen op de homepage. Je weet nu hoe je in de editor terechtkomt, dus ga daar heen om de homepage te bewerken.
Klik op de afbeelding bij het “ABOUT ME” gedeelte en klik op “Vervangen”.
Op deze manier kan je heel makkelijk een afbeelding kiezen uit de mediabibliotheek of een nieuwe afbeelding uploaden. Klik weer op de blauwe knop “Updaten” om een wijziging door te voeren.
Bij de andere afbeeldingen op de homepage en andere pagina’s werkt dat hetzelfde, dus je kan makkelijk alle voorbeeldafbeeldingen vervangen door je eigen afbeeldingen.
Skills in procenten aanpassen en staaf toevoegen
Heb je al gezien dat (je) skills heel gaaf in procenten worden weergegeven in staven? Klik op je portfolio website in het menu op “Portfolio” en scroll naar beneden. Bij “WORKFLOW OVERVIEW” zie je de staven met skills aangegeven in procenten.
Klik weer op “Pagina bewerken” om deze staven aan te passen en er één toe te voegen als voorbeeld. Het aanpassen is eenvoudig. Klik op een staaf en in de blok-instellingen kan je het percentage makkelijk aanpassen.
Verander eventueel de tekst in de staaf naar een vaardigheid die jij beheerst en geef aan in procenten in hoeverre je dat beheerst. Ook gaaf is om onder het aanpassen van het percentage in de blok-instellingen de duur van de animatie aan te passen.
Je zal vast meer dan drie vaardigheden hebben en daarom is het handig om te weten hoe je een staaf toevoegt. In de WordPress editor van je portfolio website is de staaf eigenlijk een blok.
Klik op de onderste staaf en in het venster dat verschijnt klik je op de drie bolletjes en daarna op “Invoegen na”. Ctrl + Alt + Y is ook mogelijk.
Hiermee creëer je een nieuw blok van dezelfde grootte als de andere staven. Klik daarna op een staaf en kopieer het (Ctrl + C). Klik daarna weer op het nieuwe blok dat je net hebt aangemaakt en plak de gekopieerde staaf daarin (Ctrl + V).
Nu heb je een 4e staaf met een skill in procenten erbij en kan je het in de blok-instellingen aanpassen naar eigen wens. Speel er eens mee en pas het aan naar je eigen vaardigheden.
CSS code schrijven in je child theme
Door het child theme kan je zelf CSS code schrijven, zonder dat het verloren gaat bij een update van het Neve WordPress theme. In de Customizer omgeving zou je ook CSS kunnen schrijven, maar in onze ogen is het netter en overzichtelijker om dat in het “style.css” bestand te doen in een child theme.
Bovendien kan je met een child theme onder andere ook zelf PHP en JavaScript code schrijven, zonder dat het verloren gaat bij een update van het theme. In de Customizer is dat niet mogelijk.
Heb je nog geen kennis van CSS en heb je er wel interesse in om het te leren? Lees dan het artikel “CSS leren”. Hier leer je de basis van CSS op een makkelijke manier.
Ook interessant is om de volgende artikelen te lezen, als je later PHP en JavaScript code wil gaan schrijven in je child theme:
Als simpel voorbeeld gaan we de kleur van de titel van je portfolio website veranderen naar oranje. Dit doen we in het “style.css” bestand van je child theme.
Ga in het Dashboard naar Weergave > Thema editor. Als het goed is, ben je gelijk in het “style.css” bestand. De titel heeft een class, genaamd “site-title”. Deze class spreken we aan in CSS code en geven het de kleur oranje.
Hoe kom je achter de class van de titel? In Google Chrome kan je elementen van websites inspecteren. In deze video op YouTube en in “HTML leren” lees je daar meer over.
In de thema editor voegen we het volgende stukje CSS code toe, onder de laatste regel die er nu al in staat:
.site-title {
color: orange;
}
Klik op “Update bestand” om het op te slaan. Kijk nu eens op je website. De titel van je portfolio website is oranje! Je kan het natuurlijk weer verwijderen als je een oranje titel niks vindt.
Op deze manier heb je de mogelijkheid om bijvoorbeeld als web developer je portfolio website met CSS in detail meer naar je eigen stijl in te richten. Probeer het eens uit.
Blokken verwijderen
Dit is een portfolio website voorbeeld, namelijk de Neve Freelancer Starter Site, en er zullen best blokken in staan die je weg wil hebben. Bijvoorbeeld als je geen freelancer bent, staan er een aantal blokken in die overbodig zijn.
Een blok verwijderen is heel eenvoudig in de WordPress editor. Klik eens op een willekeurige pagina en bewerk de pagina. Als je op een blok klikt en daarna op de drie bolletjes, dan kan je een blok simpel verwijderen door op “Verwijder blok” (Shift + Alt + Z) te klikken.
Kijk eens goed welke blokken je niet nodig hebt en verwijder deze. Overbodige blokken die niet passen bij je portfolio website staan erg slordig.
Contactformulier
Er staat nu als het goed is nog geen contactformulier op je portfolio website in de “Contact” pagina. Daarvoor heb je de “WPForms” plugin nodig. Ga in het Dashboard naar Plugins > Nieuwe plugin. Installeer en activeer de “WPForms” plugin.
Om een nieuw contactformulier toe te voegen, ga je in het Dashboard naar WPForms > Nieuwe toevoegen. Geef je formulier een naam. Als voorbeeld klik je nu op “Eenvoudig contact formulier” om simpel een contactformulier te maken.
Klik na het aanmaken van het contactformulier op “Opslaan”. Je hebt de shortcode van dit contactformulier nodig en die kan je neerzetten op de plek in de “Contact” pagina waar nu een niet-werkende shortcode staat. Je mag het natuurlijk ook op een andere plek neerzetten.
Ga in het Dashboard naar WPForms > Alle formulieren. Daar zie je de shortcode van je aangemaakte contactformulier staan. Kopieer deze shortcode (Ctrl + C) en plak (Ctrl + V) het in de “Contact” pagina waar nu de niet-werkende shortcode staat of op een andere plek naar jou voorkeur.
Test het contactformulier uit en kijk of je een mailtje krijgt. Zo niet, duik dan iets dieper in de plugin en kijk hoe je dat kan fixen. WPForms heeft duidelijke handleidingen en tutorials.
Neve Pro
Zelf veel aanpassingen verrichten aan de lay-out van je portfolio website kan veel tijd kosten. Vooral als je bijvoorbeeld geen web developer bent en je snel je portfolio website naar je eigen hand wil zetten.
Misschien wil je wel meer de focus leggen op je projecten en minder op je portfolio website? Dan is Neve Pro aan te raden! Met Neve Pro heb je onder andere veel meer mogelijkheden in de Customizer.
Ga eens in het Dashboard naar Weergave > Neve (Child) Opties. Dan kan je in het menu op “Free vs Pro” klikken en zie je in een mooi schema wat voor voordelen Neve Pro allemaal heeft ten opzichte van de gratis Neve versie.
Zoals je daar ziet, heeft Neve Pro vele voordelen en het is aan te raden om je website op een snelle manier nog meer naar je eigen hand te zetten en mooier te maken!
Stap 7: Maak eigen projecten en zet ze in je portfolio website
Een eigen portfolio website maken als programmeur/developer is heel goed, maar daar moeten natuurlijk ook je eigen projecten in komen te staan.
Op de “Portfolio” pagina op je portfolio website staan nu wat voorbeeldprojecten. Deze kan je vervangen door je eigen projecten. Als je alles uit de vorige stap hebt gelezen, dan is het eenvoudig om de voorbeeldprojecten aan te passen naar je eigen projecten.
Ben je geïnteresseerd in Python? Dan is het bijvoorbeeld leuk om deze Python game te maken en in je portfolio website te zetten. Zorg er wel voor dat je alle code echt begrijpt en er ook je eigen draai aan geeft.
Ook goed is om door te linken bij je projecten naar GitHub, als je daar je code hebt staan, of een andere plek waar je code staat. Zo kunnen eventuele werkgevers en klanten zien hoe goed jouw geschreven code is.
Een andere tip is om de vaardigheden te benoemen die je hebt gebruikt bij je projecten. Deze staan nu ook al aangegeven bij de voorbeeldprojecten met vinkjes.
Op Pluralsight kan je heel veel leren en inspiratie opdoen voor het maken van je eigen projecten. Voor vrijwel elke programmeur/developer zijn daar wel geschikte videocursussen.
In “Pluralsight review en ervaringen” lees je meer over dit geweldige platform. Je kan het zelfs 10 dagen helemaal gratis uitproberen. Je hebt niks te verliezen.
Ga lekker aan de slag en maak gave projecten voor je portfolio website!
Tips om te solliciteren bij bedrijven met je portfolio website als programmeur/developer
We zijn aan het einde gekomen van dit artikel over een portfolio website maken voor programmeurs/developers. Heb je het portfolio website voorbeeld (Neve Freelancer Starter Site) inmiddels al online staan? Gelukkig is een portfolio website maken met WordPress niet lastig.
Als je een web developer bent, is het misschien wel leuk om je portfolio website helemaal in detail naar je eigen hand te zetten. Wil je snel je portfolio website naar je eigen stijl veranderen? Schaf dan Neve Pro aan, dat maakt het proces makkelijker.
Tot slot hebben we nog belangrijke tips voor je om met je portfolio website te solliciteren bij bedrijven:
- Solliciteer pas met je portfolio website als alle voorbeeldteksten en -afbeeldingen zijn aangepast naar je eigen teksten en afbeeldingen, anders staat dit slordig.
- Focus je bij de projecten die je plaatst op je portfolio website eerst op één programmeertaal en probeer daar heel goed in te worden. Uiteraard kunnen er bij projecten ook andere programmeertalen gebruikt worden, maar houd de hoofdfocus eerst op één programmeertaal als beginner.
- Zorg ervoor dat eventuele werkgevers en klanten makkelijk contact met je op kunnen nemen. Optimaliseer je “Contact” pagina.
- Wees er zeker van dat je goed kan uitleggen hoe de projecten in elkaar zitten (Qua techniek en code) die je op je portfolio website plaatst. Bij een sollicitatiegesprek is de kans groot dat werkgevers hier naar vragen.
- Update je portfolio website regelmatig en laat het niet verouderen.
Extra tip voor freelancers om opdrachten te krijgen
Voor freelancers is Fiverr een heel mooi platform om opdrachten te krijgen naast je portfolio website. Veel programmeurs/developers verdienen al een mooi inkomen op het platform.
In “Fiverr review” lees je meer over dit geweldige platform voor freelancers. Het is het zeker waard om Fiverr eens uit te proberen!
Hopelijk heb je een mooi portfolio website voorbeeld opgezet in WordPress met het Neve Theme en de Neve Freelancer Starter Site. Je hebt daarmee de handvatten om er echt een hele gave portfolio website van te maken die in de smaak gaat vallen bij eventuele werkgevers en klanten.
Ga lekker aan de slag en maak er iets moois van, succes!
Heb je nog vragen en/of opmerkingen? Laat dan hieronder een reactie achter of neem contact op.
Bedankt voor het uitgebreide artikel met handige info. Zeker nu is het cruciaal dat ondernemers online goed zichtbaar zijn en dus een mooi portfolio hebben.
Hoi Sander,
Dat is zeker belangrijk, ook voor programmeurs.
Geen dank hoor!
Gr. Bas