A modern, conversion-focused landing page for a fictional boutique cupcake bakery, built with React and designed to highlight craftsmanship, flavor variety, and catering services while maintaining a refined, editorial aesthetic. The experience emphasizes typography, spacing, and subtle motion to create a premium feel without sacrificing performance or accessibility.

The site features an interactive Cupcake Workshop that allows users to build and preview a custom cupcake in real time, reinforcing product quality while inviting playful exploration.

Fully responsive and optimized for desktop and mobile, the site includes smooth section-based navigation, tasteful reveal animations, and clear calls to action for ordering, customization, and catering inquiries.

PROCESS

Cupcake Workshop

The Cupcake Workshop was designed as a modular, data-driven system rather than a set of hard-coded visual states. Each cupcake is assembled from independent visual layers: base, frosting, and toppings.

To keep the system scalable, images are auto-loaded using Vite’s import.meta.glob, which means new flavors or toppings can be added simply by exporting correctly named image files into the project structure. No JSX updates are required when the menu expands, making the system easy to maintain and extend over time. Layering is handled using z-index control, ensuring predictable stacking order and clean visual composition as elements are swapped.

Assets are prepared in a single master PSD and exported at consistent sizes so they align perfectly in the interface. The UI reflects the design exactly as intended while remaining responsive and fast as users explore different combinations.

Overall, the approach prioritizes visual stability, flexibility, and long-term usability, creating a customization experience that feels polished, intuitive, and easy to expand over time.

Add to Cart

The Cupcake Workshop includes a fully functional add-to-cart flow designed to support custom-built cupcakes. Each cupcake build is treated as structured configuration data rather than a static product, allowing the cart to accurately reflect a user’s selections for base, frosting, toppings, and garnish.

When a user adds a custom cupcake, the current configuration is captured and stored in a centralized cart context, along with quantity and pricing. This state is shared across the application, enabling the cart icon to update in real time and the cart page to render a clear, readable summary of each build.

Animated Cupcake

For the animated cupcake, I designed four layered SVG assets in Illustrator, animated them in After Effects, and exported the motion using the Bodymovin plugin as a lightweight Lottie JSON file.