Designing an image gallery often leads to rigid layouts where every photograph is forced into identical square containers. For my latest portfolio challenge, I wanted to avoid this constraint by constructing a custom landing page for Velvet Paw Portraits, a fictional pet photography studio.

The primary challenge was balancing an asymmetric, creative design with clean, maintainable code.

CSS Grid as the Foundation

Before writing any styles, I established a clear HTML structure complete with a top navigation bar and a semantic gallery container. Rather than relying on Flexbox for a two-dimensional layout, I utilised CSS Grid.

The key feature of this build is the use of grid-template-areas. By mapping out the rows and columns directly within the CSS, I could precisely place which photograph occupied a vertical slot and which occupied a horizontal space.

Smooth Micro-Interactions

A professional portfolio website should provide visual feedback when a user interacts with elements. I incorporated a subtle zoom effect for each gallery item using the CSS transform property combined with a smooth transition duration. When hovering over a portrait, the image scales up gently, offering immediate feedback without disrupting the page structure or causing layout shifts.

You can find the demo website here.