Skip to main content

Pin Collection

A digital display case for my lapel-pin collection. Each pin is photographed, background-removed, and pinned (sorry) to a velvet-style backdrop with notes on where it came from.

Collection Astro TypeScript rembg Python
Cover image for Pin Collection

Overview

I collect lapel pins from museums, events, friends, and random vending machines, and the box of them was getting unwieldy. So I started photographing each one, running the photos through rembg to drop the background, and putting them on this page with notes on the provenance, materials, and where I picked them up.

It’s a digital version of the felt-board displays you see at pin-trading conventions, with the bonus that I can search and filter without touching the physical pile.

Features

  • Felt-style backdrop with each pin floating on a soft drop shadow
  • Click for a detail modal with full metadata and prev/next nav
  • Background-removal pipeline using Python’s rembg with the BiRefNet model
  • Filter by category, material, tag, or favorite
  • Sort by acquisition date, name, or category
  • Horizontal timeline of when each pin entered the collection
  • Stats (top categories, year-over-year additions, top tags)
  • Keyboard navigation; deep links via hash routing

Technology Stack

  • YAML files for pin metadata
  • Python rembg (BiRefNet model) for background removal
  • Astro for static generation
  • Tailwind CSS, TypeScript