Portfolio website

Mijn portfolio website moet goed reflecteren wie ik ben. Omdat de startpagina de eerste pagina is die een bezoeker ziet, heb ik die iets meer bedazzled dan de andere pagina's. De andere pagina's zijn meer informatie pagina's en omdat de focus daar ook meer op moet liggen, zijn ze wat rustiger en meer straight to the point.

Ik heb de website zelf ontworpen en gemaakt met HTML, (S)CSS en vanilla JS. De illustratie op de startpagina heb ik in Photoshop getekend en de achtergrond strepen zijn gemaakt in Illustrator.

Ideeën

Ik wilde graag dat de website reflecteerde wie ik ben en wat ik leuk vind. Ik heb wat ideeën en schetsen gemaakt die hierbij pasten. Misschien ik achter een computer? Of buiten aan het wandelen? Of toch iets met mijn katten?

Na het maken van de schetsen vond ik zelf de versie waar mijn hoofd open "popt" het leukst. Het is een leuke start interactie voor mensen die de website bezoeken en is niet te druk en afleidend.

Code Snippets

Nadat ik had besloten welke elementen ik wilde gaan gebruiken werd het tijd om wat stukjes uit te proberen en te testen in code. De eerste code snippet was voor mijn ogen, dat die de muis volgen. Hier kan je de snippet bekijken.

De andere test die moest worden gedaan was voor mijn hoofd die opengaat. Waar moeten de "snijranden" komen in een illustratie en hoe werkt dit dan? De snippet daarvoor is hier te zien.

Illustratie

Voor de illustratie ben ik eerst begonnen met een ruige schets die ik steeds wat meer heb verfijnd.

Nadat de schets af was, heb ik de line art en shaduwen toegevoegd.

Hierna was het tijd voor de kleur en render laag van de illustratie, zonder de ogen. De ogen zijn een aparte illustratie die op de website op de juiste plek zijn geplaatst. De illustratie op de startpagina is in losse onderdelen geknipt.

Met alle stukken gereed moesten er alleen nog keuzes worden gemaakt over de achtergrond en het font.