New personal website
This article is about an old version of the website, which is not online anymore.
My personal website was for many years just a placeholder page. I own the domain since ever but I was mostly using it for email purposes. When I was freelancing, all my professional work was shown on Kultmedia.com (my former one-man-company).
Now Kultmedia is not active anymore and I figured out that I could use my personal domain to show some of my personal projects. Stuff that I build in the extra-time, mainly for learning new things.
So I started thinking about a new website, and my requirements:
It will be a React project (obviously).
It will be mobile first.
I don’t have a lot of good imagery. Actually, I don’t have any imagery at all. So it must be minimal and good looking without relying on good pictures.
It needs to be FAST.
It needs to be SEO friendly, despite being a React project.
I want to manage the content in an easy way, ideally with a Headless CMS.
First of all I started thinking about the layout. I had this personal project, built some years ago, called "Triangles Matrix". It was basically a generator of canvases made with random multi-colored triangles. The color palettes were sourced from the COLOURlovers API and, even if it was a really simple project, in most cases the results were really impressive:
So I thought that this project could be the base of my layout. I picked a palette that I liked and started playing around with Sketch:
I was quite happy with this result, so I started coding it in React, starting a new project from scratch.
I also wanted the project names on the homepage to be animated when the website loads. So I started looking at possible solutions and I discovered React Spring, an amazing library for managing React Animations, with an alternative approach: instead of time-based animations, this library works in fact with a principle called "spring", that doesn't have a set duration. With this very nice library I built the homepage animation:
The project names were now hardcoded. What I wanted instead was to be able to manage this content in a dynamic way. I started looking into Headless CMS solutions and after checking out Contentful I decided that this was the best match for me. So I defined my projects data structure and started creating content. Then I integrated this content in the website, using APIs. This was incredibly simple to achieve using the Contentful Javascript SDK.
In a couple of days I had an homepage with real projects and the single project pages as well.
When the basic version of the website was done I was very satisfied with the result, but at the same time I realized that I was not taking full advantage of the capabilities offered by the triangles color matrix. What I liked in the original project was, in fact, the variety introduced by the different palettes. So I decided that I was going to apply the concept of variable palettes here as well, with a new feature: the Theme Switcher.
The idea was to allow the user to select the color scheme of the website. The change of scheme will re-generate the triangles matrix and apply the new color palette to the whole website.
For achieving this I created the themes as arrays of colors. These arrays are used to create the buttons on the Theme Switcher, generate the Triangles Matrixes and create the SASS variables in order to be able to alter the theme of the whole website. When a new theme is selected, it gets applied to the whole website by updating the Redux Store.
When the website was finally done I could finally focus on some optimizations:
Deploy
For the website deploy I've setup everything with Buddy. This allows me to have an automated deploy every time I merge something on the master branch on Github.
SEO / OG Tags
I used React Helmet for altering in real-time the <title> tag and the meta description. However I also needed a solution for pre-rendering static SEO content ad OG tags. For achieving this I created a script with good old PHP, fetching the dynamic info from the Contentful API and injecting the SEO content when the page is generated by the server.
In this way, the page contains static information even when accessed by scrapers or by the Facebook Sharing Debugger.
Images Lazy Loading
In order to optimise the loading of images, I'm using lazysizes. While the image is being loaded, the page will render placeholder images, with the same ratio of the original image.
Speed
The main adjustments for speed optimization were already mentioned above. Other than that I also configured the web server in order to provide all the content using gzip compression.
After these optimizations I managed to get a pretty satisfactory 99% score on Google Page Speed Insights :)