Portfoliowebsite
Dit is de website waar je nu naar aan het kijken bent! Deze website is oorspronkelijk gemaakt voor het vak User Interfaces van het graduaat programmeren en omvat de belangrijkste zaken die een potentiële werkgever over mij zou willen weten. De focus van dit project ligt op het bouwen van een statische website met HTML en CSS met gebruik van semantisch correcte HTML en basis designprincipes.
Fase 1: User Interfaces
Bij aanvang van dit project had ik vrij snel een visie voor het design: een eenvoudige, propere layout met groene en paarse pastelkleuren. Echter bleek dit al snel te simpel te zijn, en een uitbreiding volgde snel met blauwe en rode tinten, een zelf getekende bloem als decoratief logo en een subtiele Truchet tiling als tileable achtergrondafbeelding. Hiermee was het al snel mogelijk om een aangenaam ogende layout te bekomen door eenvoudige experimentatie met CSS.
Eenmaal de layout een functioneel punt bereikt had, begon het werk aan de inhoud te schrijven. Na eerst de "Over Mij" pagina geschreven te hebben (met wat inspiratie van vriendinnen), volgde de rest van de website vrij vlot.
Op het portfoliocafé in de herhalingsweek volgden nog enkele belangrijke stappen naast het krijgen van feedback: de website online zetten via Combell en het contactformulier functioneel krijgen, naast een refactoring en verfijning van de CSS. Hiervan was het contactformulier het moeilijkste om volledig zoals bedoeld werkend te krijgen gezien mijn (voorlopige) gebrek aan kennis van PHP. De output die de form doorstuurt is nog steeds niet perfect, maar dit valt buiten het bestek van de huidige versie van dit project.
Fase 2: Responsive Design
In het vak Responsive Design, volgend op het vak User Interfaces, werden de eisen voor deze website verstrengd. De website moet responsive zijn en zich aanpassen aan het display waar het op bekeken wordt; hierbij dient mobile first design gebruikt te worden zodat de website zeker correct bruikbaar is op smartphones.
De voornaamste aanpassingen hiervoor zijn de responsive navbar, die collapsed en expandable is op schermen met een kleine viewport, alsook de grid layout van de gehele website die zich hiernaar aanpast en de volledige breedte aanneemt op kleinere schermen. Ook kleinere verbeteringen werden toegepast, waaronder het gebruik van subgrids voor linkblocks (cards). Bij al deze aanpassingen heb ik de focus gelegd op het behoud van de originele algemene uitstraling van de website omdat ik hier zeer tevreden mee ben en vind dat deze redelijk goed mijn karakter reflecteert.