How I built my website

Website history

Like many developers, my personal website has probably seen more iterations than visitors. I started with a Ghost-powered website, then a TailwindUI template, and then a custom static website built with Zola.

This current iteration is based on Astro which I find more functional than Zola. Astro is very powerful while being simple to grasp. I bought a template which I modified to my taste.

Tech stack

• Astro to build the static website.
• Netlify for hosting.
• Cloudflare for content caching.
• S3 for assets.

My photography workflow

The images used in my collections of photography are stored on S3 behind Cloudfront.

I store a few variants made in Lightroom for each image (500px wide, 1000px, 1500px, 3000px) so each browser can render the best image available while being fast enough.

Here’s an example of the markup to render an image:

<img
   srcset="https://photos.matthieuchabert.com/bauges/1-500.jpg,
      https://photos.matthieuchabert.com/bauges/1-1000.jpg 2x,
      https://photos.matthieuchabert.com/bauges/1-1500.jpg 3x,
      https://photos.matthieuchabert.com/bauges/1-3000.jpg 6x" 
   src="https://photos.matthieuchabert.com/bauges/1-3000.jpg"
   width="510" height="341">

There is also a script that calculates the width of each image in a specific row based on aspect ratio, so each image is rendered responsively.