Portfolio

Hello!

My name is Aleid. I'm an aspiring front-end web developer/researcher, 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!

Eindhoven

Projects

(Or skip to overview of tools)

Saving Aid

https://www.besparingshulp.nl/

For my master's thesis in 2023, I rebuild an energy saving aid with guidance of Martijn Willemsen and Alain Starke.

Rasch scale (phd thesis Alain)

In this system, participants could obtain personalized energy saving advice .

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.

Recipe app

https://www.aleidsuzan.com/recipes

In 2022, I made a recipe website to learn the basics of React.

Instructions and ingredients were displayed side by side for a quick overview

and React useStates allowed for changing the number of people

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

https://www.aleidsuzan.com/canvas

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

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

https://www.aleidsuzan.com/artportfolio

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

EDUCATION

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

In 2019, I began learning web development (HTML, CSS, JS) via W3schools, and in 2022 I completed 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

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

Front end

HTML

●●●●●

CSS

●●●●●

Javascript

●●●●●

React.js
(Functional components)

●●●●●

React-Router-Dom
URL redirecting

●●●●●

Redux
react state management

●●●●●

Bootstrap

●●●●●

Tailwind CSS

●●●●●

Material UI

●●●●●

jQuery

●●●●●

Three.js
3D library

●●●●●

Framer motion
animations

●●●●●

Back end (very limited)

PHP

●●●●●

mySQL

●●●●●

Firebase

●●●●●

Design

Adobe Photoshop

●●●●●

Adobe Illustrator

●●●●●

Adobe Lightroom

●●●●●

Photopea
(free Photo/vector editing)

●●●●●

Figma
(Interface design)

●●●●●

Blender
(3D modeling)

●●●●●

Sketchup

●●●●●

Dialux
(lighting design)

●●●●●

Data analytics

Stata

●●●●●

SPSS

●●●●●

Excel

●●●●●

Python Panda's

●●●●●

SCI-kit Learn
machine learning

●●●●●

Software/Development

Python

●●●●●

GIT
(-hub&lab)

●●●●●

PyCharm

●●●●●

Visual studio code

●●●●●

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!

For information on this particular website, refer to info

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;

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:

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; Mobile Layout

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

The projects you see here were mostly not elaborately tested, but I do have some experience with user testing (think-aloud method for example) with paper prototypes or mock-ups from my studies.

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:)

Despite these projects being mostly individual ones, I do very much enjoy working with others and would love to join a team with other developers/designers!:)

Back to Tools Back to contact

Info

This website was made with HTML, CSS and JS, Bootstrap for the navigation menu, and PHP for separating and re-using code snippets. Animations were made with Blender

You can view the source code here.

•Animate on scroll (AOS) library (Michał Sajnóg, MIT license) https://michalsnik.github.io/aos/

•Play video on scroll from codepen by Malte (MIT license) - https://codepen.io/Maltsbier/pen/dyYmGGq

• Typing effect via Codepen by Saqib Kifayat (MIT license) https://codepen.io/lscsaqib/pen/xwPwmY

• Blinking animation by Lucas Dombrowski (MIT licence) https://codepen.io/Lucas-Dombrowski/pen/wvRoWzL

• Blender with BlenderKit for laptop and stylus (RF/CC0 licenses) https://www.blenderkit.com/docs/licenses/

• Book flip made with help of tutorial by Octopus effects https://www.youtube.com/watch?v=2hqxJUlft5k&ab_channel=OctopusEffects/

• Recipe cover photo (Unsplash licence) - Brooke Lark https://unsplash.com/photos/08bOYnH_r_E/

• Blender easel model- (CC0 licence) - Asterlil https://blendswap.com/blend/19011

• Wood texture for easel (CC0 licence) - Charlotte Baglioni https://polyhaven.com/a/bark_willow_02

• Icons from Font awesome (Dave Gandy, SIL OFL 1.1. license) https://fontawesome.com/

• Logo based on 'Nothing you could do' font (Figma/Google - Open source licence)

• Favicons with favicon generator https://favicon.io/favicon-converter/

• Background image by Nazar Synytsia (Unsplash Licence) via https://unsplash.com/photos/0ybIsh4UPYk

• Lazy image loading by Verlok (MIT License) https://github.com/verlok/vanilla-lazyload

• Free Bulk image resizing while retaining transparency: RedKetchup https://redketchup.io/bulk-image-resizer

• Automatically prefixing CSS for other browsers: Autoprefixer https://autoprefixer.github.io/

Back to Tools Back to contact

Courses taken (TU/e)

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.)

Hello!

Saving Aid

Recipe app

Drawing App

Art portfolio

EDUCATION

TOOLS

Front end

Back end (very limited)

Design

Data analytics

Software/Development

CONTACT

Workflow

Design

React and file structure

Responsive design

Back-end

SEO

Getting Feedback / user testing

Info

Courses taken (TU/e)

ICT

(UX) Design

Psychology and Ethics

Marketing / consumer behavior

Research and Data Analytics

Lighting

Built environment