CONTEXT

RESULTS

The entire portfolio was created in HTML, CSS, Vanilla JavaScript and JSON. The decision to choose these is explained research document "How to make the portfolio scalable?".

The deliverable page is partitioned with a card element that repeats as many times as the number of arrays in the JSON file. This JSON file contains all the data visible on the card. Including the title, image, description, project type and the texts that appear on each project page. This allows for clear editing of the text in the JSON file and changes in all locations of the website. 

Because the JSON file takes longer to load, I used a Javascript EventListener that shows a loading icon until all data has been loaded.

Later during the project, more and more deliverables were added. This created a long list of tiles on the deliverables page. To make it easier for the user, I added a filter that filters by project type. 

Because I was using JSON, this was not as easy as I expected. I couldn't find a solution on the internet that helped me. I therefore asked chatGPT for help in writing the code. The generated code only needed to partially modified to make it work.

To avoid problems, I worked with a version control system. With each component completed and fully working, I pushed it to GitHub. Here the code is safely stored, and I can always go back to an older version.

CONCLUSION

LEARNING OUTCOME

Learning outcome 3: Software design and realisation
By creating and reusing software components and libraries to build a working product with code. And using Github as version control.