I Turned Staff Interview Prep Into a Midnight Ramen Bowl 🍜

#frontendchallenge #devchallenge #javascript #webdev

Frontend Challenge CSS Art Submission 🍲🥧

This is a submission for Frontend Challenge - Comfort Food Edition, CSS Art.

Inspiration

Late-night ramen is one of my favourite comfort foods: warm, flexible, and somehow exactly right after a long day.

I wanted to turn that feeling into something useful for engineers preparing for interviews. Interview prep can feel overwhelming when you see every possible topic at once, so I imagined it as a bowl instead: start with the broth, add the noodles, choose the toppings, and make a plan that fits what you need right now.

Each ingredient represents a different part of preparation:

Broth: system-design principles and trade-offs
Noodles: focused repetition and practice
Toppings: role, company context, and personal stories

Demo

🍜 Build your interview prep bowl

A peek at the CSS

The bowl is made from layered HTML elements—no images, SVGs, canvas, or generated artwork in the demo. Gradients create the broth and ceramic shading; borders and border-radius create the bowl, noodles, egg, and toppings.

.bowl {
  position: absolute;
  bottom: 4rem;
  left: 50%;
  width: min(27rem, 86%);
  height: 20rem;
  transform: translateX(-50%);
  filter: drop-shadow(0 1.4rem 1rem rgba(20, 21, 15, 0.25));
}

.bowlLip {
  position: absolute;
  top: 0;
  width: 100%;
  height: 11rem;
  border: 0.85rem solid #f3e1bb;
  border-radius: 50%;
  background: #d8b17c;
  box-shadow:
    inset 0 0 0 0.35rem #7a2e22,
    0 0.35rem 0.1rem rgba(84, 32, 20, 0.24);
}

.broth {
  position: absolute;
  top: 0.95rem;
  left: 5%;
  width: 90%;
  height: 9rem;
  overflow: hidden;
  border-radius: 50%;
  background:
    radial-gradient(circle at 64% 38%, #f1ad4c 0 4%, transparent 4.5%),
    radial-gradient(circle at 34% 70%, #e47e34 0 5%, transparent 5.5%),
    radial-gradient(circle at 53% 45%, var(--soup) 0 58%, var(--deep-soup) 100%);
}

.noodles i {
  position: absolute;
  width: 6.8rem;
  height: 1.7rem;
  border: 0.45rem solid #f5d784;
  border-bottom: 0;
  border-radius: 100% 100% 0 0;
  transform: rotate(var(--angle));
}

I also used a small CSS-only steam animation, with a reduced-motion fallback:

.steam span {
  position: absolute;
  bottom: 0;
  width: 2.55rem;
  height: 10.5rem;
  border: 3px solid transparent;
  border-left-color: rgba(248, 237, 207, 0.42);
  border-radius: 50%;
  animation: drift 4s ease-in-out infinite;
}

@keyframes drift {
  0%, 100% {
    opacity: 0.15;
    transform: translateY(0) rotate(13deg);
  }

  50% {
    opacity: 0.65;
    transform: translateY(-1.25rem) rotate(3deg);
  }
}

Choose a focus and a timeline, then the bowl recommends a personalized roadmap using the interview-prep resources already on Interviews Vector.

Journey

I wanted this to be more than a one-off illustration. The visual had to work as CSS art for the challenge, but it also needed to give visitors a useful first step when they arrive from the post.

The ramen bowl is built entirely with CSS—no images, SVGs, canvas, or generated artwork. I used gradients, border radii, layered shapes, box shadows, pseudo-elements, and a small animated steam effect to build the bowl, broth, noodles, egg, nori, scallions, tofu, chili oil, chopsticks, moon, and table.

The interactive part was the most satisfying piece. Visitors can choose one of four prep directions—Staff systems, Staff frontend, AI Architect, or Staff generalist—plus the amount of time they have. That choice changes the bowl’s visual treatment and creates a roadmap link with the selected track and number of weeks already filled in.

A few details I am especially proud of:

The art stays responsive instead of being a fixed desktop composition.
The page supports prefers-reduced-motion for the steam animation.
A “Copy this bowl” action creates a shareable link with the selected recipe.
The final call to action sends people to a real, useful plan instead of a generic sign-up wall.

I hope to keep expanding little “prep rituals” like this: memorable, low-pressure ways to help engineers start preparing without feeling like they need to solve everything at once.

The code is available as part of the InterviewsVector project.