E-commerce / Beauty & Cosmetics
Full Stack Developer
Finnegan Monroe
Finnegan Monroe Photography is a high-performance portfolio website built for a professional freelance photographer based in New York. The site showcases curated photo albums, documentary and editorial photography services, a CMS-driven blog, client reviews, and a booking contact form. It features smooth-scroll animations, scroll-driven parallax effects, and animated stat counters, all powered by a custom headless CMS (Canopy) for real-time content management. Built with Next.js App Router and Incremental Static Regeneration, it delivers fast, SEO-optimised pages without sacrificing visual richness.
Industry
Creative / Photography
Role
Full Stack Developer
Tech Stack
Next.js 16 (App Router, ISR), React 19, TypeScript 5, Tailwind CSS 4, Motion (animation library), Lenis (smooth scroll), Phosphor Icons, Canopy CMS (headless, custom-built)
Year
2026
Live URL
https://finnegan.alinsafawi.com/
GitHub
https://github.com/AlinSafawi19/finnegan
View Live
Highlights
- Full-viewport sticky video hero with scroll-driven parallax scrim overlay
- CMS-driven album gallery with per-album metadata (camera, lenses, client, location, year)
- CMS-driven blog with tag-based related post suggestions and structured data
- Eight photography service categories with scroll-linked image cycling
- Auto-scrolling multi-column client review ticker
- Contact form with real-time validation wired to a Next.js API route
- Incremental Static Regeneration (60 s revalidation) for near-instant content updates
- Animated stat counters using spring physics (9K+ hours, 15+ years, 13+ awards, 200+ clients)
- YouTube video gallery extracted automatically from album data
- Custom 404 page and /blogs → /blog permanent redirect
Challenge
The client needed a photography portfolio that would stand out visually while remaining easy to update without developer involvement. Standard template solutions lacked the motion design fidelity required, and static sites made content updates slow. The project also needed to handle large, high-resolution images efficiently without sacrificing load performance.
Approach
I built the site on Next.js 16's App Router with Incremental Static Regeneration so pages are statically served but refresh automatically when CMS content changes — no rebuild required. Canopy CMS provides a structured API for albums and blog posts, meaning the client can publish new work and articles in minutes. Animations were implemented with the Motion library and Lenis smooth scroll, with scroll-position-driven effects (parallax scrim, service image cycling, stat counters) handled via Intersection Observer and custom hooks. Next.js Image with AVIF/WebP and CDN-level scale-down transforms keep image payloads minimal across all viewport sizes.
Outcome
The result is a production-ready, visually cinematic portfolio that the client can manage entirely through the CMS. Page load is fast despite heavy imagery thanks to ISR and aggressive image optimisation. The codebase is clean and modular, making future service additions or layout changes straightforward.
