Hipsters Drinking Coffee

A playful exploration of coffee culture through photography

Astro.js Tailwind CSS Pexels API View Transitions API TypeScript
Visit Site →
Hipsters Drinking Coffee

About This Project

A photographic series documenting coffee culture and its intersection with modern urban life. It was inspired by a line from NSFW web address:

Sh**‘s legible and gets your f****g point across (if you had one instead of just 5mb pics of hipsters drinking coffee)

Technical Details

Built using Astro.js for static site generation and optimal performance. The site features:

  • Tailwind CSS for responsive styling
  • Integration with Pexels API for high-quality coffee-related imagery
  • View Transitions API for smooth page transitions
  • TypeScript for type safety
  • Optimized image loading and lazy loading
  • Minimal JavaScript footprint

Process

The project started as a response to a quote about minimalist web design but evolved into an exploration of coffee culture aesthetics. I learned a lot about rate limiting and how to work with APIs. The technical implementation focuses on performance and clean design, letting the images take center stage while maintaining fast load times through:

  • Automatic image optimization
  • Progressive image loading
  • Responsive image sizing
  • Efficient caching strategies