MEMEX is an Astro-based static site that finds all the images in a directory and displays them on a page.
The goal of this project was to use a minimal amount of code to create a modern, robust gallery of visual inspiration.
How it works
Each gallery page is an Astro component that imports a shared Gallery component. The Gallery component receives a category slug, reads a pre-built JSON manifest of image metadata (generated at build time from files stored in Cloudflare R2), and renders the image grid.
Images are served directly from Cloudflare R2 object storage. A Node.js build script (using sharp) processes each image to generate a small thumbnail (≤ 600px W) alongside the full-size original. Thumbnails are displayed on the page; the full-size image loads only when clicked or tapped.
Images use the browser's native lazy loading (loading="lazy") — no JavaScript required. The entire site ships zero client-side JS.
The site is deployed to Cloudflare Pages and rebuilt whenever new images are added. Image files are synced to R2 using rclone.
A bare bones, starter kit version of this application is available on GitHub: memex core.
Design notes
The overall design is inspired by the principles of brutalism and minimalism.
Font: monospace
Colors:#FFFCFA#FFF5EF#A6B4C2#4F5F6E#140800#FA8335
A note on file naming
Whenever possible, files are named to give credit to (or at least hint at) the source and/or creator.
For example, a screenshot of a website: someurl.com/project-name becomes someurl_com__project-name.jpg
Tools used
Cloudflare Pages - hosting & deployment
Cloudflare R2 - image storage
Astro - static site framework
Node.js + sharp - image processing
rclone - file sync to R2
Figma - vector graphics and logo design
Photoshop - image preparation
Sublime Text - coding