The Data
For this portfolio, I wanted to take a different approach. Most importantly, I didn’t want to hardcode every page. Since I was already familiar with working with objects and JSON, I knew there had to be a more flexible way to load project content. However, constantly writing and updating JSON files quickly proved inefficient.
Through social media, I discovered Prepr, a headless CMS that offered exactly the kind of functionality I was looking for. Its intuitive model creation system, built-in media browser, and ease of use immediately won me over. Integrating it into my project was a new experience especially working with GraphQL queries but I managed to get it running smoothly.
While I’m not yet using the full capabilities of the CMS, it’s a solid foundation, and I can see myself expanding on it in the future.
Liquid templates for server sided rendering
The data from Prepr needed to be injected into the HTML but as the saying goes, a great dev is a lazy dev. Instead of hardcoding each page for every project, I used Liquid to build reusable templates that dynamically load content. This way, I could easily pull in custom data from Prepr and render it without repetitive code.
What came before?
This portfolio is the result of several iterations over the years. I started building portfolios in 2019, after my Game Development program emphasized the importance of having an online space to showcase my work to potential employers and collaborators.
My first version was a modified WordPress theme, but things changed when I started studying at the HvA and learned HTML, CSS, and JavaScript. From then on, I moved away from CMS platforms and began building custom portfolios from scratch to sharpen my skills and experiment.
After creating a couple of vanilla JS projects, I realized how important frameworks are in the industry. That’s when I started exploring React, which quickly became my next learning goal and the foundation for this portfolio.
