Portfolio Website (WIP)

Een portfolio laat het werk zien van de eigenaar, simpel gezegd. Maar eigenlijk is een portfolio veel meer dan dat; het laat zien wie de eigenaar is, wat die kan en waar die goed in is. Een portfolio is een visitekaartje van een designer en developer. Mijn eigen portfolio was inmiddels al weer een jaar oud en nodig toe aan vervanging.

Met mijn nieuwe portfolio wilde ik niet alleen mijn werk zien maar ook laten zien waar ik goed in ben, wat mijn ontwerp principes zijn maar ook wat van mezelf laten zien dat niet per se werk gerelateerd is. Het doel van dit project? Een portfolio maken dat weer fris aanvoelt, meer informatie geven dan alleen wat ik gedaan heb en wat ik zoek en (als ik dan toch bezig ben) ook meteen maar wat nieuwe technieken uitproberen en toepassen.

Dit project heb ik aangepakt zoals ik elk ander project zou gaan aanpakken. Beginnen met de content; wat is mijn doel en welke content helpt om dat doel te realiseren? In deze fase kwam ik er al snel achter dat ik wilde gaan uitleggen op welke vakgebieden ik actief ben en wat hierin mijn principes zijn; wat vindt ik belangrijk bij die vakgebieden en wat maakt mij daarin uniek vergeleken met andere ontwerpers? Op die manier ben ik de content gaan schrijven wat uiteindelijk ook op de website moest komen te staan.

Met de content in 'the pocket' en een grof idee met wat ik ongeveer wilde gaan bereiken ben ik begonnen met het ontwerpen. De website moet uiteindelijk ook responsive worden (één van de technische uitdagingen die ik aan ben gegaan met dit project) en met dat in het achterhoofd ben ik begonnen met het schetsen van de website. Tientallen schetsen later kwam er uiteindelijk een grof ontwerp uit waar ik mee aan de slag kon gaan.

Het visuele ontwerp ben ik aangegaan door ook weer verschillende ontwerpen te maken. In deze fase ben ik ook regelmatig terug gegaan naar het schetsen, soms kom je er namelijk achter dat je oorspronkelijke idee niet helemaal mooi uit komt in een visueel ontwerp. Foto's zijn uiteindelijk een belangrijke rol gaan spelen in het ontwerp, dit heeft uiteraard te maken met mijn hobby; foto's maken. Alle foto's op deze website zijn gemaakt door mijzelf en hebben als doel om wat meer te laten zien van mij als persoon (wat mijn interesses zijn bijvoorbeeld) maar ook om de bezoeker een warm gevoel te geven.

De laatste fase van dit project is het ontwikkelen van de website. In deze fase ben aan de slag gegaan met HTML5, CSS3 en jQuery. Ik heb gebruik gemaakt van een redelijk nieuw CSS3 element genaamd Flex-Box. Hiermee kan je makkelijk onderdelen op de website plaatsen die anders heel lastig of onmogelijk waren. Flex-Box heb ik gebruikt omdat ik twee onderdelen in het midden van elkaar wou uitlijnen. Door verschillende andere onderdelen op de website was dit onmogelijk om goed voor elkaar te krijgen zonder gebruik te maken van Flex-Box. Uiteindelijk heeft dit ook veel andere onderdelen op de website veel eenvoudiger gemaakt qua code. Het enige nadeel is dat oudere browsers dit niet ondersteunen. Echter verwacht ik wel dat toekomstige werkgevers wel over de nieuwste browser beschikken, uiteraard is deze oplossing dan ook niet geschikt voor een ander project.

De website is nog niet helemaal klaar! Dit is de eerste versie en er moet qua code nog het één en ander aan gebeuren. Op dit moment zijn (zo goed als) alle foto's op deze website nog van een groot formaat (1920 pixels breed), uiteraard niet heel erg handig voor mobiele devices. Daarnaast moeten een aantal onderdelen nog responsive gemaakt worden, sommige onderdelen (zoals het menu en het vaardigheden deel) zijn al responive, de rest volgt spoedig.