Portfolio

Idea: The assignment was to build your own Cheat Sheet using HTML tables and a customized color scheme.

Approach: As I am more visually focused I chose to add an illustration as a banner. The color scheme was adjusted to this illustration.

Challenges: As it was my first time working with a banner background image, I had some issues getting it to stay centered and not repeating itself in larger screens.

Idea: This page was made as a ‘challenge project’ for the front-end engineer path of Codecademy. The assignment was to build a responsive website for a club group using relative units, percentages and media queries.

Approach: I decided to build a website for a running group that does not exist (yet) in Deventer. CSS flexbox was used to set up the page and one section uses CSS grid. Next to that there are several media query break points.

Challenges: My first version of this website was responsive, but the use of many breaking points meant that transitions were not fluid. In the second version of this website I have used more relative size units and percentages to indicate width/heights etc. This highly improved the transitions.

Room to improve: Many illustrations used for the page are relatively large. To improve the loading time of the website these can be made smaller. Next to that the site still has room to improve aesthetically.

Idea: This game was made as a ‘challenge project’ for the front-end engineer path of Codecademy. The assignment was to build an interactive terminal game with JavaScript classes and using user input in Node.js.

Approach: The player sees a field with a few holes and one hat. The goal is to find your hat using your keyboard.

Challenges: This whole assignment was pretty challenging as it was the first time the assignment only included functionalities and I had to come up with the necessary functions and how they would interact by myself. Once I had the game working the last challenge was to ensure that the console would not reprint the whole field every time you made a move. With the help of some co-students at the Codecademy forum I added code to ensure the player would keep seeing the same field with only his/her move updated.

Room to improve: This game can be made more exiting by adding more rows and columns. I would also like to make it possible to play this game online. Therefore, I would like to rebuild this game using React to ensure the field would not have to be reloaded after each move.

Idea: This idea came from a personal frustration, as I had to dive into the depths of the internet to find good quality eighties' workout video’s. I decided to build a website to collect my finds and make them easily accessible to others.

Approach: This site continues to grow together with my skills. The first version was build with some basic HTML and CSS knowledge. Over time, I created version 2 (responsive) and version 3 (new design and improved responsiveness).

Challenges: The main challenge of this website was deciding on the design and color scheme, as the eighties can be a bit...well, colorful.

Room to improve: Next to more content, I plan to purchase a domainname and improve the SEO of the page. This will enable people to find the page and kick those feet up.

Idea: This page was made as a final assignment for the 'Learn Bootrstrap' course of Codecademy. The assignment was to build a website using Bootstrap based on a design spec sheet. The spec sheet included two designs with the breakpoint of >992px.

Approach: My approach was to first set up the basic rows of the page (mobile first). Then I worked my way down row by row, first creating the mobile design and then adding breakpoints to create the desktop design.

Challenges: The great thing about Bootstrap is the very accesible documentation. As I worked my way down through the design I could find almost every answer within the documentation. Therefore there were very little challenges.

Room to improve: The website only has one breakpoint, it would be nice to include extra breakpoints. And of course the page only consists of a homepage. Extra pages can be added.

Idea: This webapp was made as a ‘challenge project’ for the front-end engineer path of Codecademy. The assignment was to make a React web application using your knowledge of React components, passing state and requests with the Spotify API. The app should enable users to search for songs in the search bar, see the results of the search and add songs to a ‘new playlist’. Once your playlist has the perfect tunes, save it in your Spotify account.

Approach: The assignment gave instructions on the set up of the app and the way the components should interact. It still left it up to the student to write the correct code. Once the app was running as it should, I build an extra feature to organize search results based on popularity.

Challenges: The interaction between different React components was a new way of working for me. I found it incredibly interesting, but also difficult, especially in combining this with the correct syntax.

Room to improve: There are many ideas for new features in this app. However, it made me realize that more than improving this specific app, I want to follow more courses on React and build more apps to further improve my React skills.