I’m trying out a new approach to sharing my photos here on my website at /photos.

I’ve been considering divesting from social media for some time, for mental health, ethics, and to own my content. I feel like Instagram reached a tipping point this summer, where it shifted from a positive place to share what my friends are up to, to a platform that amplifies outrages and meme sharing.

My approach is heavily inspired by Tom MacWright’s /photos, as are a few other aspects of this site’s design. I want it to be fast and simple, with low management overhead.

To post a photo, I run it through a script to process, resize, and upload to DigitalOcean spaces for long term storage. The script also creates a new post that I add some details to (location, title, description…), and all that’s left is to publish.

I spent quite a bit of time refining the user experience and trying out some fun new web technologies for the first time.

I generate custom CSS to keep the images centered and constrained within the window. I use CSS scroll snapping to snap to and center on them as you scroll through. The page uses no JavaScript.

The fanciest feature is a custom placeholder displayed as the images load. My script extracts average colors for the top, left, right, and bottom of the image, then injects them into an inlined SVG background image for the <picture> element. The SVG is made of four radial shapes of the extracted average colors, with a blur applied on top of it to form a geometric approximation of a downsampled version of the image.

Overall, it was a fun project to show off some of my favorite photos. I hope you like them too.