01 — GRID GALLERY
Click to Enlarge
A responsive CSS Grid of images. Click any image to open a lightbox overlay with prev/next arrows. The grid uses auto-fill + minmax so it wraps automatically on smaller screens.
Responsive Grid + Lightbox GRID
02 — FEATURE LAYOUT
Hero + Sidebar Thumbnails
One big featured image on the left with smaller thumbnail cards on the right. Great for portfolios where one piece is the star and others support it.
Featured Card + Thumbnail Grid FEATURE
Your Main Portfolio Piece
This is the primary image visitors see first. Use this space to explain what it is and why it matters to your project.
Wireframes
UI Layout
Early layout sketches before building the final design.
Video Edit
Video
Screenshot of the editing timeline for the project video.
Detail Shot
Close-Up
Close-up showing texture, color, and fine design details.
03 — IMAGE SLIDER
Swipe Through
An image-only slider with arrow buttons, dot navigation, and a progress bar. Uses CSS transform to slide and JavaScript for the controls.
Image Slider — arrows + dots + progress
04 — SLIDER + TEXT
Image + Caption
A split card with the image on the left and a title, description, and navigation arrows on the right. Each slide tells a story.
Split Slider — image left, text right, prev/next
05 — MARQUEE
Auto-Scrolling Strip
A horizontal strip of images that scrolls continuously using a CSS animation. Duplicate the images so the loop is seamless.
Horizontal Marquee — infinite CSS scroll MARQUEE
06 — MASONRY GRID
Asymmetric Layout
Use CSS Grid span classes to make some images wider or taller. Mixing sizes creates visual rhythm and keeps the gallery from feeling like a boring spreadsheet.
3-Column Masonry with span classes MASONRY
07 — APPLE-STYLE GRID
Large Cards with Hover
Big, clean cards that zoom slightly on hover. Inspired by Apple product pages. The image scales inside the card using overflow:hidden so it doesn't break the layout.
Apple-Style Cards — hover zoom + shadow APPLE
Portfolio Homepage
The main landing page with a full-width hero, project cards, and a contact section.
Code Editor Setup
My VS Code workspace showing the HTML structure and live preview side by side.
Responsive Testing
Testing the layout on multiple devices to make sure it works at every breakpoint.
08 — POLAROID GRID
Tilted Memories
Each photo rotates slightly for a hand-pinned scrapbook feel. On hover, the card snaps straight and scales up. Perfect for personal photography or event recaps.
Polaroids — rotated + hover straighten POLAROID
Sunrise, 5 AM
Northern lights
Still lake
Foggy valley
09 — HOVER REVEAL
Caption on Hover
Editorial-style gallery where the title slides up from the bottom on hover and the image gently zooms. Great for portfolios where context matters — the visitor sees the image first, then discovers the story.
Reveal on hover — slide-up caption REVEAL
Nature
First light on the ridge
Portfolio
Late-night build session
Process
Workshop whiteboard
10 — FILMSTRIP
Analog Scroll
A nostalgic auto-scrolling filmstrip with perforated edges drawn in pure CSS using
repeating-linear-gradient. Hover to pause the animation and inspect a frame.Filmstrip — perforated edges + auto scroll FILM
11 — PHOTO SERIES
Hero + Supporting Frames
One big lead image on the left with a stacked column of three supporting frames on the right. Hover the hero for a slow Ken Burns-style zoom. Ideal for photographers presenting a series with one anchor shot.
Series — hero + 3 supporting frames SERIES
"Golden Hour" — Yosemite, 2025
01
02
03