1d3trees Blog
A blog for some miniature terrain pieces I made for our D&D campaign a few years ago. I show the process for building process for each piece, so the posts are very image heavy. I built this blog with Gatsby, mostly to take advantage of its convenient image features.
Created with
- Gatsby JS
- GraphQL
- React
- Netlify
Background
When my husband and I started our own D&D campaign with our friends, we were all completely new to tabletop games. We went all out on our setup and atmosphere, and I had a blast learning to build miniature environments for our dungeons. This blog was a great place for our play group to come and see what went into the pieces that we played with.
Performance features
Gatsby's image plugin does so many things for you out of the box, including:
- A blur-up technique that creates tiny images from the source images and displays them while the full images load
- Prevents cumulative layout shift (CLS) so the content does move around unexpectedly during load time
- Uses lazy loading by default, which is crucial for the posts on this site, as each has 20-50 high resolution photos on a single page
- Creates the different resolutions of your images to be served at different screen sizes
Gatsby also has a <Link> component that prefetches the resources for the pages that are linked to when the link enters the viewport or is moused over, so navigating around feels super fast.
Throttled to Fast 3G
