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 suser 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.

New focus

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:

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

This site is powered by Eleventy. I write my posts in Markdown and use Nunjucks as a templating engine.

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.

css
β”œβ”€β”€ blocks
β”‚ β”œβ”€β”€ _article.css
β”‚ β”œβ”€β”€ _breadcrumbs.css
β”‚ β”œβ”€β”€ _footnotes.css
β”‚ └── blocks.styles.njk
β”œβ”€β”€ compositions
β”‚ β”œβ”€β”€ _cluster.css
β”‚ β”œβ”€β”€ _repel.css
β”‚ └── compositions.styles.njk
β”œβ”€β”€ globals
β”‚ β”œβ”€β”€ _global-styles.css
β”‚ β”œβ”€β”€ _resets.css
β”‚ β”œβ”€β”€ _variables.css
β”‚ └── globals.styles.njk
β”œβ”€β”€ utilities
β”‚ β”œβ”€β”€ _content.css
β”‚ β”œβ”€β”€ _flow.css
β”‚ β”œβ”€β”€ _region.css
β”‚ └── utilities.styles.njk
└── style.njk

I do not add class names or id for styling. It’s a deliberate choice to enforce a clean HTML architecture where styling won’t suffer from not using them. My approach comes with maintainability pitfalls1 I intentionaly ignored given the other benefits.

Accessibility

Infrastructure

Source code of the site is on GitHub but not publically available yet. It is hosted on Netlify. The domain is registered via OVHCloud. A RSS feed is available for all posts.

Inspiration


  1. 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) β†©οΈŽ