A portrait and lifestyle photographer needed a site that showcased his vibrant, colorful style and booked sessions. We built a gallery-like experience with filmstrip layouts, image trail cursors, and warm editorial design.
Gabriel Michael is a portrait and lifestyle photographer known for vibrant, colorful work — bold backdrops, natural light, expressive subjects. His Instagram was doing the heavy lifting, but he had no website. Potential clients couldn't see his full portfolio, compare packages, or book a session without DM conversations.
The brief: build a site that feels like walking through a curated gallery of his best work. The photography had to be the undeniable hero. Everything else — navigation, copy, booking — needed to support the images without competing with them.
Target audience: young professionals, couples, and creatives looking for portrait sessions, brand photography, or lifestyle shoots. They discover Gabriel on Instagram and need a website that confirms he's the real deal.
We studied photographer portfolios that actually book sessions (not just win design awards) and found the best ones share a principle: let the photography be the hero. The website is a frame, not a canvas.
Warm cream (#FAF7F2) creates a gallery-like backdrop that makes Gabriel's saturated, colorful portraits pop without the harshness of pure white. The filmstrip layout references analog photography — a nod to craft that photographers and their clients both appreciate.
Coral and peach accent tones were pulled directly from Gabriel's portrait work — the warm skin tones, the golden-hour lighting, the vibrant backdrops. The design feels like it belongs to this specific photographer, not a template anyone could use.
1. Photography as hero. Warm cream backdrop, generous whitespace, and full-bleed images ensure the work speaks first.
2. Analog reference. The filmstrip portfolio section references film negatives — a tactile, craft-oriented aesthetic that signals artistry over automation.
3. Interactive delight. The image trail cursor effect rewards exploration. As visitors move their mouse, photos follow like a visual echo of Gabriel's portfolio.
4. Clear path to booking. Package pricing and a session booking form are always within reach, turning admirers into paying clients.
Dark/moody themes. Gabriel's work is warm and vibrant — a dark site would fight the photography instead of supporting it. We reserved dark sections only for the portfolio gallery, where images glow against a black backdrop like prints in a darkroom.
We also rejected grid-only layouts. A uniform image grid (3x3, 4x4) makes every photo feel the same size and importance. The filmstrip + varied sizing gives editorial hierarchy — hero shots get hero treatment.
Warm, gallery-inspired tones. Cream for the backdrop, deep charcoal for text, coral accent pulled from Gabriel's portrait lighting, and dark sections for portfolio contrast.
The page flows like a gallery walk, building from introduction to portfolio to booking:
Hero (large "Gabriel Michael" with signature portrait) → About (split text + image) → Filmstrip Portfolio (horizontal scroll with real photography) → Image Trail Gallery (cursor-driven interactive section) → Packages (session types + pricing) → Testimonials → Booking Form
Single-file HTML with GSAP for scroll-driven animations. The filmstrip and image trail cursor are custom-built — no plugins, no libraries beyond GSAP and ScrollTrigger. This keeps the site fast and the images the focus.
Filmstrip portfolio. A horizontal-scrolling section triggered by vertical scroll. Images are sized to fill the viewport height with consistent spacing, creating the feel of pulling a film strip through a projector. GSAP ScrollTrigger maps scroll progress to horizontal translation.
Image trail cursor. On desktop, moving the mouse across the gallery section spawns a trail of portfolio images that follow the cursor, scale up, then fade out. Each image is absolutely positioned and animated with GSAP — a maximum of 8 images exist in the DOM at any time for performance.
Warm/dark section transitions. The page alternates between warm cream (#FAF7F2) and dark (#1A1A1A) sections. ScrollTrigger triggers a smooth background-color transition on the body as the user enters the portfolio section, making images glow against the dark backdrop.
AI-generated placeholder imagery. Concept images were generated with GPT Image 2 to match Gabriel's warm, vibrant portrait style. These serve as placeholders until the photographer provides his actual portfolio shots.
The finished site gives Gabriel a portfolio that matches the quality of his photography. The filmstrip layout and image trail cursor create moments of delight that keep visitors exploring, while clear package pricing and a booking form turn that exploration into sessions.
Visit the live site →Tell us about your project. We'll come back with a first idea within hours.