This website

This year I have redesigned my website from the ground up with a new focus in mind.

There are a couple of things I find interesting in web development: page transitions, animations, 3D designs which I overtly implemented to the previous version of this website. It brought an extra oomph

Combining all those pieces regardless of their purpose can be detrimental to the user experience. That’s especially the case when you don’t provide ways disable it. Even the most commonly used patterns (e.g: Dark mode) can harm the experience.

Focusing on accessibility

My focus definitely shifted from when I first built my website. I want this iteration to provide a simple introduction of who I am, some personal projects, writings and past working experiences. No clutter or fancy patterns. In its ideal form this website should follow a couple of rules.

This website should:

It loads fast and does not track visitors
It respects device preferences (motion, animations)
It provides elements to enhance the usage of assistive technologies

In a nutshell, I want future visitors of this website to explore it without feeling excluded by the choices I am making now.

Production process

Built with Eleventy, Netlify, and Github.

Typography

At the time of writting, I use a mix of serif and monospace typefaces available in most operating systems by default. I decided against using custom fonts¹. System fonts are good enough, reliable and reduce the loading time.

Styling

I use CSS. The architecture I adopted is derived from CUBE CSS and provide a nice way to organize styles. Using Nunjucks all files are then merged into a single one and minified.

There are no class names or id used for styling². It’s a deliberate choice to enforce a clean and more semantic HTML architecture. This approach comes with maintainability pitfalls³ which does not apply with the small scope of this website.

Misc

Uses semantic HTML whenever possible
Ensuring accessible color contrasts
Enforcing alternative descriptions to non descriptive visuals
Minify HTML/CSS and avoid using any Javascript
Generate appropriately-sized images in next-gen formats (AVIF)
Uses SVG sprites to reduce network requests

Credits

It is now July 21th 2024 and I decided to use the Figtree font. ↩︎
A few classes or ids might appear now and then before I hunt them down into oblivion. However, if their usage is motivated by a tangible benefit for the user they might be spared. ↩︎
By not using classes and ids I overtly rely on nesting to target my elements. This in turn increase the specificity of my declarations which can be an issue in projects with bigger scope (which is not the case here so we are good) ↩︎