You have motion disabled. This will show a scroll-animation.
.

|

Reduced motion setting detected, animations are disabled.

Hello!

portrait

My name is Aleid. I'm an aspiring web developer / UX researcher, with an interest in design, and recent Msc. graduate Human Technology Interaction.

This portfolio has some previous projects along with the tools used for them. If you have any questions or are looking for a (junior) addition to your team, don't hesitate to contact me!


Click here to reduce motion
Projects

Saving Aid   2023

  • HTML/CSS
    ◆
  • JavaScript
    ◆
  • React
    ◆
  • PHP/SQL
    ◆
  • FramerMotion
    ◆

Graduation project Energy saving recommender system, in which study participants could obtain personalized saving advice. Master thesis graduation project, under supervision of Martijn Willemsen and Alain Starke.

SQL database We had an SQL database with over 130 energy saving measures, of which participants got 20 personalized recommendations.

Rasch Scale Recommendations were based on the number of items someone already performed, following the psychometric Rasch model.

User Experience During the experiment, users got various questions about their personal values and user experiences. User actions and answers to questions were saved using a simple CRUD API (php), connected to the database.

 Visit thesis
Show More
Scroll down!

screenshot
For my master's thesis in 2023, I rebuild an energy saving aid with guidance of Martijn Willemsen and Alain Starke.
screenshot
Rasch scale (phd thesis Alain)
In this system, participants could obtain personalized energy saving advice .
screenshot
We researched the effects of goal-setting and attribute translations on savings and user experience
The recommender logic was done with Javascript, and React allowed for easily styling the 135 measures
Redux was used for state-management and mySQL + a PHP API were used for the back end.


You can view the app version, a demo with conditions and screenshots + results.
 

Recipes   2022

  • HTML/CSS
    ◆
  • JavaScript
    ◆
  • React
    ◆

Recipe website, made to learn React

Recipes and ingredients displayed side by side

Filter option for vegan recipes

Menu automatically generated based on recipe categories

 Visit code
Show More
Scroll down!

screenshot
In 2022, I made a recipe website to learn the basics of React.
screenshot
Instructions and ingredients were displayed side by side for a quick overview
screenshot
and React useStates allowed for changing the number of people
screenshot
A button allowed for filtering vegetarian recipes.
And the menu was automatically generated based on recipe categories.


you can try it out here
 

Drawing App   2021

  • HTML/CSS
    ◆
  • HTML Canvas
    ◆
  • JavaScript
    ◆

Line drawing app made to learn Javascript

Users can choose various effects

They can also change brush properties and save the image

 Visit code
Show More
Scroll down!

In 2020, I made a drawing app to learn the basics of Javascript.


The app was based on a simple HTML canvas tutorial


One could choose from various effects like mirrored images, spirals and radials
screenshot
or change the brush size/color, background color, undo/redo , and save the image.
You can try it out Here and you can find the source code on github here
 

Art portfolio   2022

  • HTML/CSS
    ◆
  • JavaScript
    ◆
  • React
    ◆
  • FramerMotion
    ◆

Art portfolio Art portfolio made with React.js and the Framer Motion library.

Framer motion Framer Motion library.

Filtering Items can be filtered based on category, e.g. photos or pen&paper

Full images are loaded upon thumbnail click

 Visit code
Show More
Scroll down!

In 2022, I made an art portfolio in React
it uses the framer motion library to animate scrolling and filtering


One can click on thumbnails to enlarge them


and filter artworks by category; e.g. photography, fine art and digital art.


you can try it out here . and view the source code here
 

Web Portfolio   2023-2024

  • CSS+SCSS
    ◆
  • Bootstrap
    ◆
  • JavaScript
    ◆
  • PHP
    ◆
  • Blender
    ◆
  • Anime.js
    ◆

3D portfolio First version of this portfolio with 3D animations. You can activate these animations with the "show more" switches in the other projects, or use the link below to view all projects in 3D.

 Visit code

EDUCATION

Atlas building Atlas building I have a bachelors degree in Psychology & Technology (TU/e), and a master's degree in Human technology interaction (TU/e).

I learned web-development initially via W3schools, and the online Scrimba React course.

Next to that, I took several ICT-based courses at TU/e (Python, Python panda's / SCI-kit learn), as well as courses on ethics, research methods, data analytics, (UX) design, consumer behavior/marketing, built environment and lighting.

Overview of courses


Or scroll along to view tools and contact info

TOOLS

& SKILLS

The tools/technologies I have worked with in the past are:

Front end - Markup and styling

HTML ●●●●●
CSS ●●●●●
SASS/SCSS CSS preprocessing ●●●●●
Bootstrap ●●●●●
Tailwind CSS ●●●●●
Material UI ●●●●●

Front end - Js & React

Javascript ●●●●●
React.js
(Functional components) ●●●●●
React-Router-Dom
URL redirecting ●●●●●
Redux
react state management ●●●●●
jQuery ●●●●●
Three.js
3D library ●●●●●
Framer motion
animations ●●●●●

Back end (very limited)

Design

Adobe Photoshop ●●●●●
Adobe Illustrator ●●●●●
Adobe Lightroom ●●●●●
Photopea
(free Photo/vector editing) ●●●●●
Figma
(Interface design) ●●●●●
Blender
(3D modeling) ●●●●●
Sketchup ●●●●●
Dialux
(lighting design) ●●●●●

Data analytics

Software/Development



Tools used in this project

More about me + my workflow

CONTACT

I'm curious to learn what brought you here. Let's have a chat! Say Hello!

or connect via

Workflow


Here's some more information on how I currently work when designing/developing websites.

Design

If there is no design to work from, I usually start with a paper sketch or occasionally a Figma design. This was one I had for this website; Figma Design I like out-of-the-box, yet still useful, designs. For the Saving Aid, there were also some along-the-way iterations based on feedback: Iterations

React and file structure

So far I've worked with functional components in React and have used Redux for state management. To keep a good overview, I try to seperate files and stylesheets in a logical way: File structure For backing up code, I use GIT(lab/hub), and comment and document (complex) code so that it's hopefully still usable in the future, for me and for others:)

Responsive design

To ensure responsiveness, I usually use CSS flexboxes, breakpoints, and/or the (Bootstrap) grid system and continuously check the result, either via browser inspect, or by accessing localhost from phones/tablets on secure Wi-fi. Mobile Layout

Styling

I've recently started using SCSS (SASS) pre-processing to maintain a better overview of code, and use nested styles. In React I use style modules to avoid style clashes.

Back-end

I briefly worked with PHP/SQL for my master's thesis (based on tutorials), and for this portfolio I used php to separate code into smaller chunks; php

SEO

For basic 'search engine optimization' (as far as I'm familiar), I use relevant tags, check page sizes, loading speed, and use image compression/lazy loading where possible. SEO

Getting Feedback / user testing

I have limited experience with user testing (in general) from my studies, e.g. with paper prototypes or mock-ups.

This is what works well for me at the moment, but I'm hoping to learn better methods and work with and learn from others in the future, and be part of a larger team!


Back to Tools   Back to contact

Info

Courses taken

ICT

• Creative programming (Bsc.)
(Introduction to programming with Processing / Arduino)
• Software development for engineers (Bsc.)
Python with git version control, GITLAB, pair programming, coding practices e.g. writing clean/DRY code, naming conventions
• Intelligent buildings (Msc.)
Python panda's, SCI-kit learn (Predicting energy usage of a building based on weather data)
• Smart/healthy urban environments (Msc.)
Raspberry pi environment sensing - IOT/smart cities.

(UX) Design

• From Idea to Design (Bsc.)
• User Focus and Perspective Basics (Bsc.)
• Innovating by Design (Bsc.)
• Project 1 Design (Industrial design) (Bsc.)
• Human Factors (Msc.)
• User Experience Design (Msc.)

Psychology and Ethics

Marketing / consumer behavior

Research and Data Analytics

Lighting

Built environment





Back to Tools   Back to contact