jeffrey mcmahon art

Client Work

Jeffrey McMahon Art is a spatial gallery web application built to browse thousands of artworks.

Jeffrey - a life-long artist - needed a gallery that enabled viewers to explore his work on their own terms. Traditional online gallery formats railroad the viewer into looking at “series” of similar works, and popular website platforms such as Squarespace or Wix did not have the flexibility needed to view his art in the capacity he wanted. A custom-built solution was the only option.

I built this gallery system with simplicity, usability, and longevity in mind, understanding that his ability to manage his own portfolio without needing to pay for costly subscriptions, learn new web tools, or rely on a webmaster is integral to his user experience and satisfaction.

His entire portfolio is displayed on one single, infinite webpage. By leveraging GPU-accelerated WebGL rendering through PixiJS, client-side filtering with in-memory search, and asynchronous batch loading, the application displays thousands of images with minimal load times and instant search results. Cloudflare CDN and Backblaze B2 storage provide global content delivery at scale, while progressive rendering and texture caching keep animations smooth even under load. The architecture minimizes API calls through single-fetch pagination and stateful client caching.

Jeffrey can log in from anywhere to upload images, and all upload functionality is behind a Google OAuth layer for security. He can retroactively attribute metadata, upload entire batches at one time, and has full control over the organization and management of his portfolio. There is no complicated UI to learn - simply a “+” button and an upload modal - and the entire ecosystem runs at maximum user capacity for less than $5/mo.

Find it at http://jeffrey.bijou-st.com

Key Features

Infinite Canvas Navigation

  • Pan and zoom interface for exploring artwork at scale
  • Grid-based layout with deterministic organic jitter for visual interest
  • GPU-accelerated rendering handles thousands of images efficiently
  • Client-side AND search across titles, descriptions, and tags
  • Zero API latency - filters from loaded dataset instantly
  • Search index cached per image for performance

Progressive Loading

  • Batch loading system (8 images per batch, 25ms intervals)
  • Texture caching prevents redundant network requests
  • Automatic retry logic with failure tracking
  • Timeout protection (8s per image)

Full-Screen Preview

  • Lightbox modal triggered by click detection
  • Displays full image with metadata (title, description, tags)
  • Smart click differentiation from drag gestures

Architecture

Data Layer (useGalleryData)

  • Supabase PostgreSQL via REST API
  • Paginated fetches (1000 records/page)
  • Client-side search filtering

Rendering Layer (usePixiCanvas)

  • PixiJS 6.5 WebGL canvas
  • Sprite-based image rendering
  • Viewport management and interaction handling

Storage Stack

  • Images on Backblaze B2
  • Cloudflare CDN delivery
  • Metadata in Supabase

Technical Characteristics

  • No server-side rendering or backend API needed
  • Scales to thousands of images for ~$5/month infrastructure cost
  • Mobile-responsive with touch gesture support
  • Built for decades of independent maintainability by non-technical user