Skip to main content
Back to Work
Photography Studiomainereasonphotography.com

Maine Reason Photography

A photography studio needed their work to sell itself online. We built a blazing-fast portfolio that loads in under 2 seconds, showcases their best shots, and turns browsers into booked clients.

Maine Reason Photography website homepage showing professional photo gallery and booking options

The Challenge

Maine Reason Photography specializes in wedding, family, and portrait photography. They needed a website that would let their work speak for itself, with a gallery that loads fast despite showcasing dozens of high-resolution images.

The site also needed reliable contact forms that wouldn't get buried in spam, a mobile experience that worked perfectly for clients browsing on their phones, and smooth animations that felt premium without slowing anything down.

What We Built

Pinterest-Style Photo Gallery

A beautiful grid layout showcases photos in their natural proportions without cropping. The gallery adapts from a single column on phones to three columns on desktops, with smooth loading transitions.

Lightning-Fast Images

Every photo is automatically compressed and optimized so galleries load in seconds, not minutes. Returning visitors see images instantly from their browser cache, and a soft blur preview appears while photos stream in.

Spam-Protected Contact Forms

Smart contact forms that block bots while letting real customers through. No annoying puzzles or checkboxes for visitors — spam gets stopped invisibly, so every submission is a genuine lead.

Instant Email Confirmations

When a client submits an inquiry, both the photographer and the client get an instant confirmation email. No wondering if the message went through — reliable delivery every time.

The Impact

Work Speaks for Itself

The gallery puts photos front and center. Potential clients browse stunning images that load instantly — no waiting, no pixelation — and see exactly what they'll get.

Inquiries Without Spam

Invisible spam protection blocks bots while real clients submit inquiries effortlessly. Every form submission is a genuine lead — no time wasted sorting through spam.

Perfect Performance Scores

98 Performance, 100 Accessibility, 100 Best Practices, 100 SEO on Lighthouse. For a photo-heavy site, that's exceptional — and it means visitors stay instead of bouncing.

Mobile-First Experience

Most photography clients browse on their phones. The gallery adapts from 1-3 columns seamlessly, and every image loads with blur placeholders so the experience feels premium on any device.

Technical Decisions

Next.js 16 with React 19: Server-side rendering for fast initial loads. Image optimization built into the framework with automatic format negotiation.
shadcn/ui Component System: Pre-built, accessible UI components from Radix UI primitives. Consistent design language across every page without reinventing the wheel.
react-masonry-css Gallery: Pinterest-style masonry grid displays photos in their natural aspect ratios. Responsive columns adapt from 1 on mobile to 4 on desktop with smooth loading transitions.
Cloudflare Turnstile over reCAPTCHA: Privacy-respecting bot protection that runs invisibly. No Google tracking, no annoying "select all buses" challenges for visitors.

Image Pipeline

For a photography site, images are everything, and they're the biggest performance risk. Here's how we solved it:

1
Optimize: Sharp compresses and resizes images at build time, with quality tuned per format (JPEG mozjpeg, PNG compression level 9).
2
Serve: Next.js Image component handles format negotiation, serving WebP to modern browsers with JPEG fallback.
3
Load: Gallery images lazy-load with blur placeholders so visitors see content immediately while full images stream in.
4
Cache: 1-year cache TTL means returning visitors load images instantly from their browser cache.

Performance

Lighthouse Scores

98
Performance
100
Accessibility
100
Best Practices
100
SEO

Scores measured via Google Lighthouse on the live production site.

Tech Stack

Next.js 16React 19TypeScriptTailwind CSS v4shadcn/uireact-masonry-cssSharpResendCloudflare Turnstile

Start the conversation

Want results like this?

Every engagement starts with a scoped conversation about the work, the timeline, and what success looks like.

See More Work
Call (540) 225-2263