This is a submission for Frontend Challenge — Comfort Food Edition, Perfect Landing.

What I Built

I built Miso & Memory, a landing page for an imaginary late-night ramen counter.

The concept is inspired by the feeling of coming home to a hot bowl after a long, rainy day: slow broth, springy noodles, warm light, and the good kind of quiet.

The visual direction combines editorial typography, an earthy restaurant-inspired palette, Japanese print-inspired details, and a steaming ramen bowl illustrated with custom CSS.

The landing page includes:

  • A responsive CSS-art ramen hero
  • Animated steam and a scrolling kitchen-principles banner
  • A curated menu of comfort bowls
  • The story behind the imaginary restaurant
  • An interactive “build your comfort bowl” experience
  • Dynamic topping selection and price calculation
  • Keyboard-friendly controls and accessible labels
  • Visible selected and confirmation states
  • Reduced-motion support
  • Responsive mobile, tablet, and desktop layouts

Demo

Open Miso & Memory

Source Code

View the source code on GitHub

Journey

I wanted this landing page to feel handcrafted rather than relying on conventional restaurant photography.

The hero illustration is constructed from CSS shapes, borders, clipping paths, shadows, and animation. The bowl contains noodles, a jammy egg, mushrooms, greens, narutomaki, chopsticks, and rising steam.

One of my favorite parts is how the illustration and interface share the same visual language. The rust-red sun becomes the primary action color, broth-inspired gold highlights selected toppings, and forest green carries through the typography and bowl outlines.

I also wanted the page to be functional rather than purely decorative. Visitors can choose from three bowls, add or remove toppings, see the total update immediately, and save their selection.

The interactive controls use semantic buttons, aria-pressed states, and a status message when the bowl is saved. The page also respects prefers-reduced-motion for visitors who prefer a calmer experience.

The project is built with React, TypeScript, Vinext, Vite, and custom CSS. It is deployed publicly on Cloudflare Workers.

What I Learned

This project reminded me how much atmosphere can be created with a restrained color palette, expressive typography, and carefully composed CSS.

I also learned more about:

  • Constructing detailed illustrations from CSS primitives
  • Balancing animation with accessibility
  • Designing responsive editorial layouts
  • Building keyboard-friendly selection controls
  • Deploying a Vinext application and its static assets to Cloudflare Workers

AI Assistance

I used Codex as a collaborative development tool for design exploration, implementation, accessibility improvements, troubleshooting, and deployment guidance.

I reviewed and refined the project’s creative direction, interface, content, and interactions before submitting it. The social-preview image was created using an AI image-generation tool. The ramen illustration visible in the website’s hero section is implemented with CSS.

License

The source code is available under the MIT License.

Thanks for stopping by. Your seat at the counter is waiting. 🍜