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.

project 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.

Map View

The collection also has a map view for pins with known coordinates. It turns the collection into a loose travel diary: brewery pins, museum pins, gifts, national parks, and roadside finds all land back where I picked them up.

Pin collection world map view
Pin collection world map view

Zooming in keeps the pin artwork front and center while labels appear only where they can fit. The result feels more like browsing a physical display case than scanning a spreadsheet of places.

Pin collection North America map view
Pin collection North America map view

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
  • Map view for pins with known coordinates
  • Cluster-aware map labels and thumbnail markers
  • 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
  • Leaflet for the interactive map view
  • Tailwind CSS, TypeScript