Overview
A digital display case showcasing my lapel pin collection. Each pin is photographed, background-removed, and displayed on a dark velvet-style surface with rich metadata about provenance, materials, and acquisition details.
Features
- Display Case UI: Dark felt background with pins floating with realistic shadows
- Detail Modal: Click any pin for full details with prev/next navigation
- Background Removal: Automated transparent PNG generation using Python rembg
- Filtering: Filter by category, material, tags, and favorites
- Sorting: Sort by date acquired, name, or category
- Timeline: Horizontal timeline showing acquisition history by year
- Collection Stats: Category breakdown, yearly trends, and top tags
- Keyboard Navigation: Arrow keys and Escape for modal control
- Deep Linking: Shareable URLs via hash routing
Technology Stack
- YAML-based pin metadata
- Python rembg with BiRefNet model for background removal
- Custom modal with keyboard navigation
- Astro for static generation
- Tailwind CSS for responsive design
- TypeScript for type safety
Design Philosophy
Inspired by collector display cases — pins float on a dark surface with subtle shadows, letting the enamel colors and details shine. The interface balances visual impact with practical browsing through filtering and sorting.