photo gallery

I present you the photo gallery! I programmed it by utilizing Astro’s content collections with dynamic path generation for each photo. This means all I need to do is add an image and a .yaml file and Astro generates the thumbnail in the correct category and the page the image is linked to. See example below.

title: b&w river I
slug: bw-river-i
photo: ./bw1.jpg
date: 2024

The more I code in Astro, the more I enjoy creating things I normally would make in React. This is because everything gets generated into html and css. No javascript client-side. I was close to making the gallery in React and hydrating it as an island in Astro, because it’s easier for me to do and there’s more flexibility. But I wanted to challenge myself to have no javascript client-side. I also like the fact that all the routes actually exist as folders w/ index.html files without having to fake it in React. It’s just very clear about what’s going on. Like the old days.