Voor dit semester is het de bedoeling dat ik een digitaal portfolio maak. Om het leerdoel "Development" op verschillende momenten te laten zien, kies ik ervoor een portfolio website te bouwen. Hierin presenteer ik het hele proces van het ontwikkelen van de site.
Idee
De eerste stap die ik heb genomen, was het bekijken van andere portfolio’s om inspiratie op te doen en te ontdekken wat echt bij mij past. Ik heb verschillende afbeeldingen verzameld om zo de stijl van mijn eigen portfolio te bepalen. Voor het samenbrengen van deze beelden heb ik Figma gebruikt. Al snel kwam ik erachter dat ik iets met wimpers en volle lippen wilde verwerken in het ontwerp. Aangezien ik veel bezig ben met mijn uiterlijk, vond ik het een leuk idee om dit persoonlijke aspect in mijn portfolio terug te laten komen.
Prototype
Daarna ben ik in Figma begonnen met het maken van prototypes. Ik had al een duidelijk idee in mijn hoofd van wat ik wilde, dus ik kon snel aan de slag. Ik wilde een simpele maar strakke pagina ontwerpen, met een moderne uitstraling die overzichtelijk en stijlvol is. Het moest niet te druk worden, zodat de inhoud goed naar voren komt. Uiteindelijk is het gelukt om een minimalistisch maar toch opvallend ontwerp te maken dat echt bij mij past. In het begin had ik bedacht om elk onderwerp op een aparte pagina te zetten, waarbij je met 'vorige' en 'volgende' knoppen kon navigeren. Toen ik feedback kreeg van mijn docenten, gaven ze aan dat dit misschien niet zo handig is. Ze vroegen zich af: "Waarom zou iemand op 'volgende' klikken als die niet weet wat er op de volgende pagina staat?" Dat zette me aan het denken, en ik besloot de navigatie in de code aan te passen. Nu is de inhoud makkelijker te vinden en voelt de site logischer aan voor de gebruiker.
Home pagina
Het coderen van de homepagina was echt een hele klus. Vooral het voor elkaar krijgen dat de wenkbrauwen, ogen en mond op dezelfde hoogte en breedte stonden, bleek lastiger dan ik dacht. Ik heb verschillende afbeeldingen geprobeerd, maar elke afbeelding had net andere verhoudingen. Daardoor was het lastig om alles mooi recht te krijgen. Het probleem zat vooral in het feit dat sommige afbeeldingen meer witruimte hadden dan anderen, waardoor het lastig was om ze precies goed uit te lijnen. Ik heb de code meerdere keren moeten aanpassen voordat het eindelijk goed zat. Ik had vooral veel struggles met de CSS. Het was lastig om de juiste instellingen te vinden met flexbox en grid om alles precies goed te positioneren. Soms leek het alsof alles perfect stond, maar zodra ik het schermformaat veranderde, versprongen de elementen weer. Ook het spelen met marges en padding was een flinke uitdaging; het voelde soms alsof ik eindeloos aan het tweaken was zonder dat het echt beter werd. Maar na veel proberen en prutsen is het uiteindelijk gelukt. Alles staat nu netjes uitgelijnd, en de homepagina heeft precies de strakke uitstraling die ik in gedachten had. Het kostte wat moeite, maar ik ben blij met het resultaat!
Projecten
Bij het onderdeel Projecten had ik eerst bedacht dat je, zodra je op een project klikte, steeds op 'volgende' moest klikken om naar het volgende onderdeel van dat project te gaan. Ik dacht dat het een handige manier was om de informatie stap voor stap te tonen. Maar na feedback kreeg ik al snel door dat dit niet echt handig was. Mensen wisten niet wat ze konden verwachten op de volgende pagina, en dat maakte het navigeren onduidelijk. Dus heb ik het aangepast en ervoor gekozen om alles van een project op één pagina te zetten. Achteraf ben ik daar eigenlijk veel blijer mee, het ziet er overzichtelijker uit en werkt gewoon fijner. Wat ik wel jammer vond, is dat ik best veel tijd had gestoken in de knoppen die ik daarvoor had gemaakt. Ik had ze precies goed gepositioneerd op elke pagina, en dat was nog best wat werk. Uiteindelijk heb ik die knoppen helemaal verwijderd, wat zonde voelde omdat ik er zoveel tijd in had gestoken. Maar goed, het hoort erbij, en het eindresultaat is er echt beter op geworden. Dus al met al ben ik toch tevreden!
leeruitkomsten
Voor de leeruitkomsten heb ik ervoor gekozen om ze allemaal gewoon onder elkaar te zetten. Bij elke leeruitkomst heb ik een lijstje gemaakt met de belangrijkste punten en daarna een reflectie toegevoegd waarin ik vertel wat ik heb geleerd en hoe ik me heb ontwikkeld. Ik heb dezelfde stijl aangehouden als in mijn prototype, omdat ik het belangrijk vond dat alles er consistent en netjes uitziet. Het voelde logisch om die lijn door te trekken, en zo blijft het ontwerp simpel, strak en overzichtelijk.
Over mij
Voor deze pagina heb ik het gewoon simpel en zakelijke gehouden, ik heb ervoor gekozen om een deel te vertellen. Zodat de lezers van mijn portofolio mij beter leren kennen.