My Portfolio

Built in 2020

HTML CSS Sass Webpack Handlebars

TL ; DR

For that project, I created a frontend development environment setup that you can find here.

I used Handlebars and handlebars-webpack-plugin to automate the generation of the projects' thumbnails and the projets pages' header from a json file.

My portfolio screenshot My portfolio screenshot My portfolio screenshot

Context

I hadn't much time to build this website and I wanted it to be evolutive; I wanted to be able to add my future projects easily. I had already used Handlebars templating in an SPA project, where templates were dinamically generated in JS. But here, I wanted to use it for development and serve a static page to the client.

I found the handlebars-webpack-plugin, which was perfectly suited for my needs. I added it to my usual Webpack config. I also added Sass, which I had never used but fell in <3 with. With that config, I created a frontend development environment setup that you can find here. I will probably re-use that setup for future projects.

Room for improvement

I should add a tool to automate image optimisation, like converting them to .webp and serving multiple resolutions.

Edit: After trying to reinvent the wheel by combining Handlebars, Babel, Sass, Sharp and other tools, I learned to use static site generators like Gatsby. So if I had to build this website again, I would use Gatsby.