For this assignment, I developed GreenNest, a demo property search platform designed to streamline the discovery of homes. The primary objective was to move away from cluttered interfaces towards a layout that prioritises user intent and visual hierarchy.

A Two-Tiered Layout Strategy

The main design challenge was organising a high volume of search controls without overwhelming the user, and using iframe. By using Flexbox and CSS Grid, I was able to stack these complex components while maintaining a logical reading order.

Technical Implementation and CSS Grid

The interface relies on CSS Grid for the property listing columns and the integrated map view. This approach offers significant advantages for responsiveness. As the viewport narrows, the layout transforms to stack content vertically.

I utilised the object-fit: cover property for property images. This ensures that the photos, regardless of the source aspect ratio, is presented within the UI.

Visual Branding and Performance

I opted for a ‘Deep Green’ colour scheme, implemented using CSS variables.

Performance was considered throughout the build. By keeping the CSS modular and minimising external dependencies, the platform remains lightweight. The use of sticky positioning on the search bar shows that filtering options are always accessible to the user.

The demo site can be found here.

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.

Layout design is a core skill for any front-end developer. For this portfolio piece, I challenged myself to build a landing page for ‘Form & Flow’, a fictional architecture studio, using only CSS Flexbox.

The Challenge

The wireframe needed a complex masonry-style gallery at the top and a structured invitation form at the bottom. The goal was to keep a good visual hierarchy while ensuring the components remained easy to maintain.

The Technical Execution

The gallery was the most significant hurdle. Since Flexbox is primarily a single-axis layout tool, I used a nested strategy. I treated the gallery as a flexbox row containing four vertical columns. By setting each column to flex-direction: column, I could control the vertical stacking of the images.

To maintain a consistent look for the images, I used the object-fit: cover property. This ensures that every image fills the containers perfectly, regardless of its original aspect ratio. This prevents the images from looking stretched or distorted.

For the contact portal, I used Flexbox to manage the input fields. By applying flex-grow: 1 to the input elements, the typing area automatically expands to fill the available width. This pushes the action icons to the far edge, ensuring a consistent and clean look for the entire form.

Overall, building this project reinforced that Flexbox is a versatile tool for complex layouts, provided you are willing to nest containers well. The demo site can be found here.

Web forms can be tricky to style. For my latest portfolio challenge, I built a custom order form for Pixel Pizza, a fictional retro arcade pizzeria.

Semantic HTML as the Foundation

Before writing any CSS, I structured the form using semantic HTML. Every input is wrapped in a <fieldset> to group related data, and every input has a dedicated <label> linked via the id attribute.

This improves the user experience significantly. By linking the label, clicking the word “Pepperoni” ticks the box next to it.

Focus States and Visual Feedback

A crucial part of form design is letting the user know exactly where they are. I used the :focus pseudo-class to remove the browser’s default blue outline when a user clicks into a text box. I replaced it with a bright pink border that matches the Pixel Pizza branding.

Overall, this portfolio project really challenged me to really think about accessibility when designing for web browsers.

The full project can be found on my GitHub Pages. If you are interested in the build, the repository is linked here.

For my latest portfolio project, I decided to strip all of that away. The brief was simple but intimidating: build a visually engaging webpage using nothing but text.

To tackle this, I created ‘Syntax Coffee Co.’, a fictional specialty roastery. The goal was to guide the user’s eye down the page purely through font choices, scale, and spacing. Without images to lean on, every CSS rule had to be intentional.

Establishing the Hierarchy

I paired three Google Fonts to create a clear, tiered structure:

• The Anchor: Bebas Neue provided the massive, heavy, condensed impact needed for the primary hero text.
• The Accent: Playfair Display offered an elegant, italicised contrast for secondary focal points.
• The Foundation: Inter kept the dense body copy clean and highly legible.

The demo site can be found here.