Image Gallery Portfolio

About This Blueprint

Build a stunning, fully responsive image gallery portfolio with smooth lightbox previews, filterable category tabs, and a polished upload placeholder interface. Perfect for photographers, designers, and creatives who want to showcase their work in a clean, modern layout. Includes masonry grid, keyboard navigation, and mobile-optimized touch interactions — all in pure HTML, CSS, and JavaScript.

What's Included

• Masonry/CSS grid image gallery with 12 placeholder images across 3 columns (responsive to 1 on mobile)
• Lightbox overlay with previous/next arrow navigation, keyboard (Escape/Arrow) support, and image counter
• Category filter tabs (All, Nature, Architecture, Portrait, Abstract) with animated active underline indicator
• Upload placeholder card with dashed border, upload icon, and drag-and-drop hint text
• Sticky header with logo placeholder, nav links, and a 'Upload' CTA button
• Smooth hover effects on gallery cards: scale transform, overlay with title and category label
• Color-coded category badges on each image card using distinct pastel accent pills
• Footer with social icon links and copyright placeholder
• CSS custom properties for easy theme recoloring
• Mobile-first media queries for 320px, 768px, and 1200px breakpoints

Compatible AI Tools

This blueprint has been tested and produces reliable results with: