Portfolio

Hello! Hallo!

I'm Aleid, a front-end web developer with an interest in fullstack, UX research & design, and contributing to applications for education, healthcare, environment, research domains (or similar).

Previously, I've worked as a front-end developer for 7 months on web applications, with Vue.js. Below you find some self-study projects, along with the tools used for them. Mijn naam is Aleid, een front-end web ontwikkelaar met interesse in fullstack, UX research & design, en in applicaties voor onderwijs, zorg, milieu of onderzoeksdoeleinden (of vergelijkbaar).

Voorheen heb ik met veel plezier gewerkt als front-ender, met onder andere Vue.js (7 maanden). Hieronder vind je een aantal zelfstudie projecten, samen met de tools die daarvoor gebruikt zijn.

Skills: Vaardigheden:

front-end web development (responsive) Web design wireframing programming design some back-end development data analysis research teamwork planning Front-end web ontwikkeling (responsive) Web design wireframing (prototyping) programmeren ontwerpen back-end development (beperkt) data analyse onderzoek teamwork planning

Tools I've worked with: Tools waar ik mee kan werken:

And more! Click to view En meer! Klik om te bekijken

Projects Projecten

The most elaborate project I worked on was an energy saving recommender system (Master thesis project), in which users could obtain personalized saving advice. The research demo (where you can change conditions and user ability) can be found here. A paper on this study can be found here. Het meest uitgebreide project waar ik aan gewerkt heb, was een energiebesparingshulp (Afstudeerproject master), waar gebruikers gepersonaliseerde bespaaradviezen konden krijgen. De onderzoeksdemo (waar je o.a. condities kan aanpassen) staat hier, en een paper over dit onderzoek vind je hier.

Saving Aid Besparingshulp 2023

HTML/CSS
JavaScript
React
PHP/SQL
FramerMotion

Graduation project afstudeerproject

I rebuilt this saving aid in React, PHP and SQL, based on screenshots and descriptions of an earlier system. (Supervised by Martijn Willemsen and Alain Starke.) Deze besparingshulp heb ik heropgebouwd in React, PHP en SQL, gebaseerd op screenshots en beschrijvingen van een eerder systeem. (Begeleid door Martijn Willemsen en Alain Starke.)

SQL database SQL database

For the back-end, I used PHP (mostly based on tutorials), and we had an (existing) SQL database with over 130 energy saving measures, of which participants got 20 personalized recommendations. Voor de back-end heb ik PHP gebruikt (grotendeels m.bv. tutorials), en hadden we een (bestaande) SQL database met meer dan 130 bespaarmaatregelen, waarvan participanten 20 aanbevelingen te zien kregen.

Rasch Scale Rasch Schaal

Recommendations were based on the number of items someone already performed (Rasch recommender system), u can test this yourself at besparingshulp.nl. I can show and discuss the code in a face-to-face meeting. Aanbevelingen waren gebaseerd op het aantal maatregelen dat iemand al uitvoerde, (Rasch aanbevelingssysteem). Je kunt dit op besparingshulp.nl zelf testen. Ik licht de code graag face-to-face toe.

Saving Goal Besparingsdoel

Half of the participants in my thesis research chose a saving goal. We wanted to know if this would lead to higher savings (was not the case). You can also read the full results in my thesis (below). De helft van de participanten in mijn afstudeeronderzoek koos een besparingsdoel. We wilden weten of dit zou leiden tot hogere besparing (dit was niet zo). Je kunt de volledige resultaten ook teruglezen in mijn thesis.

Research Onderzoek

We also tested a no-goal condition, and 3 different units for displaying savings (kWh, CO2, & Euro). The development menu you see here, I made to easily test pages and conditions during development We hebben ook een conditie zonder doel getest, en 3 verschillende eenheden van besparing (kWh, CO2, en Euro). Het 'development' menu wat je hier ziet had ik gemaakt om makkelijker dingen te kunnen testen.

User Experience Gebruikservaring

During the experiment, users got various questions about their personal values and user experiences. Most users indicated they were satisfied with the system and would recommend it to friends. Tijdens het experiment kregen gebruikers ook verschillende vragen over hun persoonlijke waardes en gebruikservaringen. De meeste van hen vonden het een fijn systeem om te gebruiken en zouden het aan vrienden aanbevelen.

thesis Visit Bezoek

One of the last projects I worked on was an app that shows weather, railway disruptions (Dutch Railways) and traffic data all at once. As a practice project for Angular and Typescript. This took around one week. More info can be found on the information page of this website; Weer Trein Verkeer Een van de laatste projecten waar ik aan gewerkt heb was een app waarop je weer, trein en verkeers-data tegelijk kunt zien. Als oefen-project voor Angular en Typescript. Dit kostte ongeveer een week. Meer info vind je op de info pagina van deze website: Weer Trein Verkeer

Weather-Trains-Traffic Weer-Trein-Verkeer 2025

Angular
Typescript
TailwindCSS
Leaflet.js
RainViewer

Weer-Trein-Verkeer Weer-Trein-Verkeer

App with weather, train and traffic data, all at once. And darkmode! By now, it has icons for the train delays (for better clarity), and an info page. For the design, I did that directly in code this time, without Figma. The (Tailwind primary) color palette is based on the water color of the map Visit with the button below;

App met weer, trein, verkeersdata tegelijk, en darkmode! Ondertussen staan er icoontjes bij de treinvertragingen om duidelijk te maken wat wat is, en is er een info pagina. Qua design ben ik direct aan de slag gegaan, dit keer zonder Figma. Het kleurenpalet (Tailwind primary kleuren), heb ik gebaseerd op de waterkleur op de kaart. Bezoek met de knop hieronder;

code Visit Bezoek

Before that, I worked on a full-stack spice-mix website to better learn Svelte and Laravel. This was a much more extensive project, and it took about 1.5 months. It has, amongst others, user login and user generated content; spicemixes.nl

Below is a basic process overview. For more detailed explanation, please refer to the Notion docs. . There, I explain in detail how this project is structured and with which tools, and how you can make something similar. Daarvoor heb ik aan een full-stack receptenwebsite gewerkt om Svelte en Laravel beter onder de knie te krijgen. Dit was een veel uitgebreider project en kostte (incl. leren van Svelte en Laravel) ongeveer 1.5 maand. Het heeft o.a. user login en upload-mogelijkheden; spicemixes.nl

Hieronder vind je een korte uitleg. Voor meer info, zie de Notion docs. Daarin vertel ik hoe dit project is opgebouwd en met welke tools, en hoe je zelf zoiets kunt maken.

Spicemixes Spicemixes 2025

Svelte
Laravel
Inertia

Homepage Homepage

Website for spice mixes. Swipe to view process and functionality-> Website voor spicemixes. Swipe voor proces en functies->

Design Design

First, I created some design foundations in Figma like color palettes, fonts and the logo. Ik heb om te beginnen wat design elementen met Figma uitgewerkt, zoals kleurenpaletten, logo en lettertypen

Figma design Figma Design

Then, one screen design for the recipes. From there, I just started to work out the screens with code. Daarna een schermontwerp in Figma voor de recepten gemaakt. Vanuit daar heb ik de rest direct met code uitgewerkt.

Main website Website

On the homepage there's around 15-20 mixes, divided amongst various cousines. Users can search and filter these, as well as flip through pages Op de homepage staan zo'n 15-20 mixen, verdeeld over verschillende categorieën. Gebruikers kunnen zoeken, filteren en naar een volgende pagina gaan

Adding mixes Zelf content toevoegen

You can create an account with email or oAuth (Google), create their own mixes, favorite mixes and share mixes based on email' Je kunt een account aanmaken met email of oAuth (Google), zelf mixen toevoegen, mixen aan favorieten toevoegen, en mixen delen op basis van email

Gimmicks Gimmicks

Users can see alternative ingredients, and change quantities Gebruikers kunnen hoeveelheden aanpassen en alternatieven zien voor ingrediënten die ze niet hebben, en de Nederlandse vertaling zien

Database structure Database structuur

This was the first proper full-stack app for me (excluding the saving aid with a simple CRUD API). This is the (approximate) database structure. Dit was de eerste 'echte' full-stack app die ik gemaakt heb (afgezien van de saving aid met simpele CRUD API). De back-end werkt met Laravel, en de communicatie tussen front-end en back-end met Inertia. Dit was de database structuur (ongeveer).

More info Meer info

The precise workings of this app are a bit too complex to explain here. To learn more about this app, checkout the Notion docs and the github code. There, I explain how everything works, and how to make something similar De precieze werking van deze app leg ik uit in de Notion docs. Daar vertel ik uitgebreid hoe alles werkt, en hoe je zelf zoiets kunt maken.

code Visit Bezoek

React

In 2022 I learned React (via Scrimba) to more easily re-use code with components. The recipe website below was made with this framework; In 2022 heb ik React geleerd (via Scrimba) om makkelijker code te kunnen hergebruiken (met components). De receptenwebsite hieronder is hier ook mee gemaakt;

Recipes Recepten 2022

HTML/CSS
JavaScript
React

Homepage Homepage

Recipe website, made to learn React Receptenwebsite, gemaakt om React beter te leren begrijpen

Ingredients and instructions Ingrediënten en instructies

Recipes and ingredients displayed side by side for a quick overview Recepten en ingrediënten staan naast elkaar voor een snel overzicht

Filtering Filteren

Filter option for vegan recipes Filter optie voor vegan recepten

Menu Menu

Menu automatically generated based on recipe categories in the database Menu was automatisch gegenereerd op basis van de recept categorieën in de database

Quantities Hoeveelheden

With react useStates, recipe quantities could easily be changed, and the number of people is remembered throughout the website. Met React useStates konden hoeveelheden makkelijk aangepast worden, en het aantal mensen wordt onthouden op alle pagina's

code Visit Bezoek

Javascript

In 2021, I made a drawing app to learn the basics of JavaScript. I tried to follow best coding practices, following a software development course. Hieronder zie je een teken app, gemaakt in Javascript, uit ~2019/2020 en later gerefactord. Om te zorgen dat de code bruikbaar blijft, ook voor anderen, probeer ik zoveel mogelijk best code practices te volgen en goed te documenteren.

Drawing App Teken-app 2021

HTML/CSS
HTML Canvas
JavaScript

Line drawing app made to learn JavaScript Lijn-teken app om JavaScript te beter te leren begrijpen

Users can choose various effects Gebruikers kunnen verschillende effecten kiezen

They can also change brush properties and save the image Ze kunnen ook een andere kleur/formaat penseel kiezen, de achtergrond aanpassen, dingen ongedaan maken en hun creatie opslaan.

code Visit Bezoek

Out-of-the-box?

I also enjoy creating out-of-the-box designs and experimenting with different techniques. The first version of this portfolio was 3D animated with blender animations: version 1 & version 2

When you have ideas about a unique design or element on a website, I gladly will explore if and how this would be possible! Heb je een idee voor een out-of-the-box ontwerp, dan denk ik daar graag over mee. De eerste versie van dit portfolio had bijvoorbeeld 3D animaties van de projecten, gemaakt met Blender: versie 1 & versie 2

3D Portfolio 3D Portfolio 2023

CSS+SCSS
Bootstrap
JavaScript
PHP
Blender
Anime.js

3D portfolio 3D portfolio

Recipes Recepten

Drawing app Teken-app

code Visit Bezoek

Figma & Design

A good website of course starts with a good design (and a good concept). Although I'm not a designer, I have read various books and experimented with some Figma. This tool makes it easier to test and discuss various designs before implementing them. Een goede website begint natuurlijk bij een goed design (en een goed concept). Hoewel ik geen designer ben, heb ik me daar wel wat in verdiept, door hier een aantal boeken over te lezen en te experimenteren met Figma. Figma maakt het wat makkelijker om verschillende designs te testen of te overleggen, voor je deze gaat implementeren.

Figma Designs Figma Designs 2024

Figma
Photopea

Smart bookmarks (Concept) Slimme bookmarks (Concept)

App to keep track of a product search with smart bookmarks. View project and process App om overzicht te houden bij de zoektocht naar een nieuw product Bekijk project en proces

Wireframes Wireframes

Some of the wireframes for the Smart Bookmarks app View project and process Een aantal van de wireframes voor de Smart Bookmarks app Bekijk project en proces

low fidelity design 'low fidelity' design

Low-fi design for Cake Maker app View project and process Low-fi design voor de Cake Maker app. Bekijk project en proces

Cake recipe generator (concept) Cakerecepten generator (concept)

Website to build a cake and then get the recipe. View project and process Website waar je een cake kan samenstellen en dan het recept krijgt. Bekijk project en proces

Green product search (concept) Duurzame producten zoektool (concept)

Website to find sustainable versions of common products. View project and process Website om duurzame versies van producten te vinden. Bekijk project en proces

Perspective (concept) Perspective (concept)

App to see how the same news is reported in different locations. View project and process App om te zien hoe over hetzelfde nieuws bericht wordt in verschillende locaties. Bekijk project en proces

Visit Bezoek

CONTACT

Interested in working together or just want to ask a question? Let's connect! → Benieuwd of we iets voor elkaar kunnen betekenen?

Ik ook! Laat iets van je horen →

Say Hello! Zeg hallo!

or connect via of vind me op;

View source code Bekijk source code