Mischa Melkert

×

CSS — Een interactieve LP-speler in pure CSS

In dit project heb ik onderzocht hoe ver je kunt gaan met HTML en CSS door een interactieve LP-speler te ontwerpen en bouwen. Mijn doel was om een control panel te maken dat niet alleen functioneel is, maar ook een sterke visuele stijl heeft die aansluit bij het vintage karakter van een platenspeler.

De LP-speler bevat verschillende interactieve elementen, zoals een aan/uitknop, een RPM-instelling (met custom gestylede radio buttons) en een draaiknop voor het volume. Voor de draaiende plaat heb ik gebruikgemaakt van moderne CSS-features zoals :has() en animaties met @keyframes. Ook de geluidsvisualisatie is geanimeerd en reageert op een slider die met behulp van calc() de hoogte van de sound bars aanstuurt.

De draaiknop voor het volume is een van de meest visuele onderdelen. Hiervoor heb ik met behulp van clip-path, sin en cos een ribbelige structuur gegenereerd die een realistische, tastbare look geeft aan de knop. Een gradient en schaduw maken het effect compleet.

In de laatste fase heb ik gefocust op structuur, responsiveness en afwerking. Door slim gebruik te maken van container queries en een custom font met animatie, komt het geheel pas echt tot leven wanneer de speler aanstaat. Ook de code is opgeschoond met betere nesting en minder onnodige wrappers.

Dit project laat zien hoe krachtig CSS kan zijn, ook zonder zware frameworks of JavaScript. Het combineren van creatieve visuele oplossingen met technische nauwkeurigheid maakte dit een leerzaam en uitdagend proces.

×

Browser Tech - Responsive & accesible

Voor mijn WDD-BT-project ontwikkelde ik een erfbelasting-site met een focus op gebruiksvriendelijkheid en toegankelijkheid. Ik baseerde de huisstijl op die van NS en gebruikte CSS Grid voor een responsieve layout die zich aanpaste aan verschillende schermformaten.

Een belangrijk onderdeel was het implementeren van dynamische formuliervelden die zich aanpassen op basis van gebruikersinvoer. Dit werd bereikt met de :has selector, en ik zorgde voor een fallback-optie voor niet-ondersteunde browsers. Ook werden iconen toegevoegd voor validatie en invalidatie van formuliervelden, wat de toegankelijkheid vergrootte, vooral voor mensen met visuele beperkingen.

Daarnaast gebruikte ik local storage voor het opslaan van gebruikersgegevens, zodat voortgang bewaard bleef. Het project hielp me mijn vaardigheden in HTML, CSS en JavaScript te verbeteren, met een sterke focus op zowel technische uitvoering als gebruikerservaring.

×

Human Centered Design

In dit project ontwikkelde ik een aangepast toetsenbord voor Eric, die door een fysieke beperking moeite heeft met het gebruik van een traditioneel toetsenbord. Het doel was om hem te helpen met typen in de trein, waar veel beweging is.

Het prototype begon met een horizontaal swipen op het toetsenbord, maar na testfeedback werd besloten om verticaal te swipen, omdat dat beter werkte in een bewegende omgeving. Ik implementeerde een preview-div om de typinvoer goed zichtbaar te maken, en werkte de gevoeligheid van het toetsenbord bij om uitschieters te voorkomen.

In de laatste week heb ik extra functies toegevoegd, zoals spatie-, nummer-, shift- en backspace-knoppen, en heb de gevoeligheid verlaagd van het toetsenbord. Het project gaf me waardevolle inzichten in het ontwerpen voor gebruikers met fysieke beperkingen en het belang van feedback tijdens het testen.

×

Meesterproef

Met de meesterproef hadden we in een groep van vier de taak om het verhaal van de Oosterparkbuurt tijdens de Tweede Wereldoorlog te vertellen. We kozen ervoor om de gebruikers mee te nemen in persoonlijke verhalen met behulp van animaties. Deze animaties zijn gemaakt met GSAP en vertellen een gedetailleerder verhaal dan alleen platte tekst.

Ik heb mij vooral beziggehouden met de homepage van de website en het backend-gedeelte. Zo heb ik ervoor gezorgd dat er bij het openen van de homepage een drawSVG wordt geactiveerd en dat elke straat die we uitlichten klikbaar is, zodat de gebruiker zich steeds verder kan verdiepen in de tijd van toen.

×

Hackathon - Ode aan vrouwen in tech

Tijdens een intensieve hackathon hebben we met ons team een website ontwikkeld als lofuiting aan 50 inspirerende vrouwen uit de techwereld. De gegevens haalden we realtime uit een externe API, waardoor we actuele en dynamische informatie konden verwerken.

We kozen voor een speelse insteek: gebruikers konden via een Mario Kart-style selector een vrouw kiezen. Na selectie werd ze gepresenteerd in de vorm van een FIFA-kaart, compleet met naam, specialiteiten en statistieken. Deze unieke presentatie zorgde voor een interactieve ervaring waarin fun en bewondering samenkwamen.

Ik was verantwoordelijk voor het ontwerp van de FIFA-kaart en heb mezelf hierbij uitgedaagd om met 3D-effecten in CSS te werken. Het gaf me de kans om diepte en levendigheid aan het ontwerp toe te voegen. Daarnaast ontdekte ik een nieuw soort HTML select-component die ik volledig naar eigen wens kon stijlen — iets wat me eerder vaak beperkt voelde, maar nu perfect in het visuele totaalplaatje paste.