A simple recipe card built around one of my favourite comfort foods — macaroni & cheese. I wanted to take something fairly simple and turn it into a clean, interactive, and easy-to-use experience.
The site includes the full recipe, cooking times, ingredients, instructions, and a serving size selector that automatically updates the ingredient quantities based on the number of servings.
The goal of this project was to build something that was more than just a static recipe page. I wanted to practice creating interactive functionality while keeping the overall experience simple and intuitive.
I focused on making the recipe easy to follow, with the important information clearly laid out and the serving size feature making it easy to adjust the recipe depending on how many people you're cooking for.
For the design, I wanted to keep things clean and straightforward while still giving the project some whimsy. One of the main visual elements I created for the page is the custom SVG frame around the recipe content. Using SVG instead of a standard CSS border gave me more control over the shape and styling.
The frame also had to work across different screen sizes, so I designed the layout to adapt as the available space changes. On larger screens, the recipe has more room to breathe and the frame creates a strong visual focus around the content. As the screen gets smaller, the layout adjusts while keeping the frame, typography, and content readable and balanced. On mobile devices, the SVG frame is replaced with a simple, responsive Flexbox.
A big focus of the project was making sure the experience worked well across desktop, tablet, and mobile. Rather than designing for one specific screen size, I built the layout to respond to different viewport widths, with the content and spacing adjusting naturally as the screen gets smaller.
I also kept the interface relatively minimal so that the recipe itself remains the focus. The ingredients, cooking information, serving selector, and instructions are clearly separated, making the page easy to scan and use whether you're viewing it on a desktop or checking the recipe from your phone while cooking.
Aa Bb Cc 123
Aa Bb Cc 123
This project was a fun way to combine UI design with JavaScript functionality. It gave me the opportunity to work with dynamic content and build an interaction that changes the recipe based on the user's input.
Overall, it's a relatively simple project that I completed quite quickly, but it demonstrates how I like to approach development — taking a straightforward idea and turning it into something that feels polished, functional, and enjoyable to use.
