An image-first photography portfolio with full-screen lightbox, category filters, contact form, and a sign-in protected admin page to upload and manage photos.
e.g. Jane Doe
e.g. Wedding & lifestyle photographer based in Lisbon
e.g. Weddings, Portraits, Travel, Landscapes
e.g. Pricing page, testimonials, Instagram feed embed
“A wedding and travel photographer portfolio with full-bleed image grid and a private admin page to upload photos”
Create an image-first photography portfolio for {person_name}. Tagline: {tagline}. Categories: {categories}. Visual style: {style}. Pages: Home (full-bleed hero + featured grid), Gallery (filterable masonry grid, click opens lightbox), Project/Collection detail, About, Contact, and a sign-in protected /admin page for the owner to upload and manage photos. Use GenMB File Storage for photo uploads (window.genmb.storage), GenMB Auth for the /admin gate (window.genmb.auth - only the owner email can see admin), and a GenMB PostgreSQL projects table (window.genmb.db.projects) with fields id, title, slug, category, description, hero_image_url, gallery_urls (JSON array of strings), display_order, published_at. Use the <genmb-uploader accept='image/*' multiple folder='gallery'> web component on /admin; on upload, persist URLs to the projects row. Lightbox requirements: full-screen overlay, Esc to close, ArrowLeft/ArrowRight to navigate, swipe left/right on touch, preload neighbours, fade-in transitions, backdrop click closes. Build it inline in React (no external lightbox library). Gallery: CSS grid with aspect-ratio to prevent layout shift, <img loading="lazy" decoding="async">, hover zoom, URL-synced ?category= filter so deep links work. Seed the database with 8 placeholder photos using these exact Picsum URLs so the site looks real on first load - the owner replaces them via /admin: - https://picsum.photos/seed/photo-wedding-1/1600/1000 - https://picsum.photos/seed/photo-wedding-2/1600/1000 - https://picsum.photos/seed/photo-portrait-1/1600/1000 - https://picsum.photos/seed/photo-portrait-2/1600/1000 - https://picsum.photos/seed/photo-travel-1/1600/1000 - https://picsum.photos/seed/photo-travel-2/1600/1000 - https://picsum.photos/seed/photo-landscape-1/1600/1000 - https://picsum.photos/seed/photo-landscape-2/1600/1000 Contact form posts to the GenMB contact form endpoint. Dark mode with system detection + toggle. Responsive, mobile-first, 44x44 minimum tap targets. {extra}
Highlighted values like {variable} will be replaced with your inputs.
Fill in the fields and generate your app instantly