Photographer Portfolio
Photography Portfolio Website Built with Next.js
A portfolio website for a photographer, with category galleries, a full-screen photo viewer, and a contact form.
Overview
Objectif Créa is a French-language portfolio website for a photographer. It presents the photographer's work through dedicated galleries for wedding, maternity, newborn, and event photography, along with an about page and a contact form so visitors can request a photo session.
The problem
A photographer needs a professional online presence that shows their work in its best light, organizes it by type of session, and makes it easy for potential clients to get in touch. Generic website builders often limit how galleries are laid out and how photos are presented.
The solution
Objectif Créa provides a custom, image-focused website with category pages, responsive photo galleries, and a full-screen photo viewer. A built-in contact form sends inquiries directly to the photographer's inbox.
Key features
Category Galleries
Dedicated pages for wedding, maternity, newborn, and event photography, each with its own banner, introduction, and gallery.
Responsive Photo Layout
Photos are arranged in justified rows that adapt to the screen width while keeping each image's original proportions.
Lightbox Viewer
Click any photo to open it full screen, with thumbnails to browse the rest of the gallery.
Hover Effects
On larger screens, photos are shown with a sepia filter that fades to full color on hover.
Contact Form
Visitors can send a message with their name, email, and subject from the about page and get a confirmation once it is sent. A floating contact button links to the form from every page.
Mobile Navigation
A responsive navigation menu closes when clicking outside of it and locks page scrolling while open on mobile.
Tech stack
Technical implementation
Next.js App Router
Pages are built with the Next.js App Router and per-page metadata, while an API route handles sending emails.
Gallery Components
The galleries combine React Photo Album for the row layout with Yet Another React Lightbox and its thumbnails plugin, using a custom renderer to integrate next/image.
SEO and Structured Data
Open Graph metadata and FAQ structured data in JSON-LD, typed with schema-dts, improve how the site appears in search results.
Automated Deployment
A GitHub Actions workflow builds the project with the Vercel CLI and deploys it to production on every push to the main branch.
Challenges & engineering decisions
Presenting Photos of Different Sizes
Problem
Portrait and landscape photos of varying dimensions can look unbalanced in a standard grid, and large images slow down the page.
Solution
Used a justified row layout that respects each photo's aspect ratio, combined with next/image and responsive image sizes so smaller devices load lighter files.
Connecting the Gallery and the Viewer
Problem
The gallery and the full-screen viewer come from separate libraries but need to stay in sync when a photo is opened or closed.
Solution
Shared the same photo data between both components and kept the selected photo index in state to open the lightbox on the right image.
Sending Emails Without a Separate Backend
Problem
The site has no dedicated backend, but contact requests had to reach the photographer reliably.
Solution
Added a Next.js API route that calls Resend with a React email template, keeping the API key on the server.
Results & lessons learned
Results
Delivered a responsive, image-focused portfolio website with category galleries, a full-screen photo viewer, a working contact form, and automated deployment to Vercel.
Lessons learned
- Image-heavy pages stay fast when each device loads an image sized for its screen instead of one large file.
- Third-party libraries save time, but making them work together and with next/image takes deliberate integration.
- A Next.js API route is often enough for server-side tasks like sending email, without a separate backend.
- Metadata and structured data take little effort but noticeably improve how a site appears in search results.