Inleiding

Het ontwikkelingsproces van mijn portfolio is gebaseerd op mijn ontwerp waarin een combinatie van twee stijlen voorkomen: een Matrix-thema en elementen uit Windows XP. Dit verslag beschrijft hoe het ontwerp tot stand is gekomen en hoe dit tijdens de ontwikkeling is doorgevoerd in functionaliteiten, visuele stijl en interactie.

Opdracht

Het maken van het portfolio was het grootste onderdeel van dit semester de opdracht hiervoor was; maak een portfolio die aantoond hoe je de leerdoelen hebt bereikt. Dit portfolio zorgt ervoor dat mijn persoonlijke ontwikkeling in beeld wordt gebracht. Daarnaast wordt er ook beschreven binnen de projecten pagina hoe de leerdoelen zijn bereikt. Ten slotte is er een overzicht van de bewijstlast op de leeruitkomsten pagina.

Ontwerp en Concept

Het uitgangspunt van mijn portfolio was het creëren van een website die overzichtelijk, interactief en persoonlijk is. Om dit te bereiken, heb ik gekozen voor een combinatie van twee stijlen: Matrix-thema: Deze stijl weerspiegelt mijn interesse in technologie en codering. Het ontwerp bevat donkere kleuren zoals zwart en groen met vloeiende code-achtige patronen en symbolen op de achtergrond. Dit geeft de website een moderne, technische uitstraling.
Windows XP-elementen: De retro look van Windows XP zorgt voor een nostalgische sfeer. Dit zie je in klassieke desktopiconen, een startbalk, en bekende geluidseffecten zoals het opstart- en afsluitgeluid van Windows XP. Door deze twee elementen te combineren ontstaat een unieke en authentieke stijl die zowel modern als retro aanvoelt, wat precies past bij mijn persoonlijkheid en interesses. De combinatie van een modern en retro ontwerp laat goed zien wie ik ben en waar mijn interesses liggen. Het retro-element, gebaseerd op Windows XP, laat mijn liefde voor nostalgie en oude technologie zien. Tegelijkertijd laat het moderne matrix-achtige ontwerp zien dat ik graag bezig ben met nieuwe ideeën, programmeren en futuristische thema’s.

Feedback sessies

Gedurende de ontwikkelingsperiode van mijn portfolio heb ik deelgenomen aan meerdere feedbacksessies van mijn accesoren, waarin hun inzichten en suggesties hebben gedeeld. Deze feedback was essentieel om mijn portfolio naar een hoger niveau te tillen. Deze feedback heb ik na elke ronde geimplementeerd om zo mijn portfolio stuk voor stuk op te bouwen.

Implementatie

De implementatie staat volledig in Git hier is al mijn code te vinden.

De HTML-structuur zorgt voor de navigatie en interactie. Belangrijke onderdelen zijn:

Desktopomgeving: Een nagebootste desktop met iconen die linken naar verschillende onderdelen van mijn portfolio, zoals "Over Mij", "Leeruitkomsten", en "Projecten". Startbalk: De startbalk bootst het uiterlijk en de functies van Windows XP na, inclusief een startknop en een taakbalk voor snelle navigatie.

CSS-Styling De styling speelt een cruciale rol in het tot leven brengen van het ontwerp:
Matrix-elementen: Donkere kleuren en code-achtige patronen zijn gebruikt om het Matrix-thema te benadrukken.
Windows XP-elementen: Het gebruik van retro-iconen en het klassieke XP-lettertype dragen bij aan de retro-look.

JavaScript-functionaliteiten Om de website interactief en dynamisch te maken, zijn verschillende functies geïmplementeerd:
Laadscherm: Bij het openen van de website verschijnt een animatie met geluidseffecten, wat een authentieke Windows XP-ervaring simuleert.
Realtime klok: Een klok in de taakbalk toont de actuele tijd, die elke seconde wordt bijgewerkt.
Shutdown- en restart-simulatie: Door op de startknop te klikken, kunnen gebruikers een "shutdown" of "restart" simuleren, inclusief visuele en audio functies.
Fullscreen functie: door een "tab" te openen kan deze op fullscreen worden gezet door op het fullscreen symbool te klikken.

Reflectie

Mijn portfolio is uniek door de combinatie van een Matrix-thema en elementen van Windows XP. Dit zorgt voor een persoonlijke stijl die zowel modern als nostalgisch aanvoelt. Het project laat mijn vaardigheden in webontwikkeling zien, zoals het werken met HTML, CSS en JavaScript. Ook laat het zien dat ik een ingewikkeld ontwerpidee kan omzetten in een werkende en aantrekkelijke website. Tijdens dit portfolio heb ik veel geleerd over hoe ik een goed gestructureerd portfolio moet opbouwen om mijn groeiprocess te weergeven, daarnaast heb ik mijzelf ook meer ontwikkeld op het gebied van documenteren.