Velvet Gallery is a small visual-archive project. Its repository also uses the name VelvetHumming. The interface emphasizes an image grid and a restrained presentation around the artwork.
Implementation focus#
My implementation focus is the image-content pipeline. Gatsby, React, GraphQL, Gatsby Source Filesystem, Gatsby Plugin Image, and Sharp turn a directory of source images into renderable gallery data.
The inspected Gatsby configuration registers the image directory. The gallery page queries the resulting file nodes and renders the processed images.
Let the file graph supply the gallery#
The gallery query selects files from the images source and requests child image data. Processing includes a width of 400, a blurred placeholder, and automatic, WebP, and AVIF formats.
The page maps those nodes through GatsbyImage. A responsive grid uses repeated columns with a 200-pixel minimum, letting the available container width determine the column count.
Separate processing from editorial information#
The current implementation uses filenames for image alternative text. That is an available fallback, but a filename may not explain the artwork to someone who cannot see it. A richer content model could supply authored descriptions and titles alongside file references.
Result and publication status#
The source demonstrates a file-driven gallery and image-processing pipeline. There is no verified public gallery deployment linked here, and no measured loading-speed improvement is claimed. This portfolio case study provides a permanent public explanation of the implementation.
The companion article follows Gatsby's file graph into the gallery.