Ik heb naar heel veel andere portfolios gekeken op het internet. De meester waren in beeldverslag vorm. Hier heb ik inspiratie op gedaan vooral voor de "over mij" pagina. Ik ben begonnen met het maken van een aantal schetsen. eerst heb ik heel erg simpele schetsen gemaakt waarin alleen de vakken te zien zijn. Ik heb steeds een iets meer gedetailleerde wireframe gemaakt. Uit eindelijk heb ik deze in Figma helemaal uitgewerkt.

In Figma heb ik alleen prototypes gemaakt voor desktop omdat ik al wist dat ik het niet responsief zou maken. Ik had de home pagina al heel snel af omdat ik een visie had van hoe ik het precies wilde hebben. Echter de projecten en leeruikomsten pagina waren niet zo makkelijk. Ik heb op de home page vakken waar tekst in staat. Dit wilde ik eerst overal doen, maar ik zal al snel dat het dan te druk zou worden. Im had van Dirk ook de feedback gekregen dat het dan een gevangen gevoel overbrengt. Ik heb er dus voor gekozen om alleen lijnen toe te voegen om secties te scheiden. De leeruitkomsten vond ik heel moeilijk om te realiseren omdat ik niet precies wist wat mijn docenten verwachten. Ik heb het dus gevraagd aan ze. Mijn coach heeft het mij uitgelegd met tekeningen. Dat heb ik dus toegepast en dan weer feedack gevraagd. Het is precies gemaakt zoals hij het mij heeft verteld dus hij was tevreden.

De home page heeft een simpele opmaak met drie sections. Wat ik het moeilijkste vond was de gradient border. Ik heb hier veel tijd aan besteed maar nu snap ik het helemaal en ik kan zien dat het een heel erg makkelijk oplossing is. Ik heb geen idee hoe ik de vectoren van de project container zou kunnen maken. Om hier geen tijd aan te verliezen heb ik deze toegevoegd als afbeeldingen. Bij de leeruitkomsten klopte de border niet. Ik kwam hier totaal niet uit dus had ik het zo gelaten om er later terug naar te kijken. Een maandje later met mijn nieuwe kennis heb ik deze probleem binnen enkele seconden opgelost. De plaatsing van de wrapper klopte niet, ik had "justify-content:center" nodig om het goed te zetten. Op de leeruitkomsten pagina is elk section automatisch dichtgeklapt in de dropdown. Ik heb in de Javascrip extra code toegevoegd. Als de gebruiker op de home page op LO1 klikt, is de eerste dropdown als geopend zodat zij/hij meteen kan beginnen te lezen.

Ook voor de "about me" pagina geldt hetzelfde. Een maandje geleden lukte sommige dingen mij niet, wat nu een snelle fix is. In GitHub zijn alle veries makkelijk te zien. Ook is de datum daar te vinden. Zo kunt u ook de daadwerkelijke progressie zien. Omdat ik deze pagina helemaal op het begin al had gemaakt waren mijn development skills nog niet heel goed. Ik had veel AI gebruikt. Ik had helaas niet de hele chat linken omdat ik afbeeldingen heb gebruikt. Wanneer ik gebruik maar van chatGPT zorg ik er voor dat ik ook altijd uitleg krijg zodat ik de code kan snappen. Ik doe ook nooit direct de hele code kopieren en plakken, ik typ het altijd zelf uit zodat ik aandachtig moet lezen.

Ik had in eerste instantie alle afbeeldingen op de pagina geplaatst zodat het er uitziet als een standaard verslag op papier. Maar ik zag al snel dat dit niet te doen zou zijn. De plaatsingen kloppen niet altijd en het is heel moeilijk om alles juist te plaatsen. Toen zei mijn docent dat alleen linkjes naar de afbeeldingen beter zijn. Dat heb ik dus gedaan en het ziet er nu veel cleaner uit. Ik had eerst een marge van 90px aan de zijkanten van de tekstvakken. Mijn docent heeft gezegd dat het fijner is om te lezen als de tekst iets compacter is. Daarom heb ik alle teksten een marge van 200px gegeven.
Bij projectX heb ik 'vorige' en 'volgende' buttons gebruikt. Ik heb deze gekopieerd en geplakt op de project pagina's van mijn portfolio website. ik heb hierbij de afbeeldingen veranderd zodat het bij de stijl past. De scheidingslijn heb ik tussen deze twee pijlen geplaats, het is nu echt een geheel geworden.

Voor de leeruitkomsten wilde ik niet per doel een aparte pagina hebben omdat dit dan voot verwarring zou zorgen. Maar te veel op een pagina wil ik ook niet. Daarom heb ik hetzelfde dropdown functie gebruitkt die ik bij de development project voor Zekur ook had. Zo kan de bezoeker elk onderdeel apart bekijken of allemaal tegelijk. Ik heb alle bewijsmateriaal in een lijst gezet en daar onder de tekst van met een kort reflectie per leerdoel. Omdat dit een van de laatste is was ik nog moest doen, ging het heel snel. Ik kan nu een hele pagina maken zonder iets op te moeten zoeken of hulp te vragen bij anderen.

Op het begon vond het heel moeilijk om zelf een hele website te moeten maken. Maar het is mij gelukt, ik ben super erg trots op wat ik heb geleverd. Ik heb zelf progressie kunnen zien in mijzelf. In het begin van dit semester dacht ik dat ik niks kan en dat coderen helemaal niks voor mij is. Maar nu zijn mijn gedachtes veranderd. Ik vind coderen echt heel leuk. Ontwerpen gaat eigenlijk altijd al goed bij mij. Ik vond dit een leuk opdracht om te doen omdat ik de basics heb kunnen leren. Omdat ik aan het einde weer een stuk heb gecodeerd, heb ik kunnen laten zien dat ik het nu helemaal zelf kan.
De volgende keer wil ik een website helemaal responsief maken. Ook wil ik meer aandacht besteden aan usability testing. Ik vind deze website heel erg passen bij kijn persoonlijkheid. Het is kleurrijk en vibrant, maar ook heel simpel en rustig tegelijk. Ik ben blij met elke keuze die ik heb gemaakt in deze proces.