DEV Community: Pawan Satoshi

The Comfort Table — Food That Remembers

Pawan Satoshi — Sun, 16 Aug 2026 05:36:33 +0000

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

What I Built

I built The Comfort Table, an interactive food-memory experience inspired by the meals that make an ordinary day feel like home.

Instead of creating a traditional restaurant landing page, I wanted to make the landing page itself feel like a small digital dining room.

The experience combines:

A responsive editorial-style landing page
An interactive Comfort Finder based on mood and moment
A searchable world menu
Country filtering
Detailed dish cards with ingredients, preparation, taste and serving notes
A dish-details modal with keyboard-accessible interaction
Multilingual UI support for English, Hindi, Spanish, French, Japanese, Korean and Arabic
Responsive layouts for mobile, tablet and desktop
CSS-generated hero artwork
Reduced-motion support
Semantic HTML and accessibility-focused interaction

The central idea is simple:

Comfort food has no passport.

Whether it is khichdi in India, ramen in Japan, pasta in Italy or tacos in Mexico, food can carry memory, place and emotion.

Demo

Live Demo:

https://the-comfort-table.vercel.app/

Source Code:

https://github.com/pawansatoshi/the-comfort-table

Journey

I started with the idea of building something that felt more personal than a conventional food website.

The challenge was not only to make the page visually polished, but to make the experience useful and enjoyable to interact with.

The Comfort Finder became the core interaction: users can choose how their day feels and the moment they are eating, and the interface recommends a dish from the collection.

I also spent significant time on responsive behavior because the experience should work equally well on a phone, tablet and desktop.

One part I am particularly proud of is the accessibility work around the dish-details modal. A visually attractive modal is not enough if keyboard users can escape into the background content or lose their place after closing it.

The modal interaction was therefore hardened with:

focus management
focus restoration
Tab and Shift+Tab containment
Escape-to-close behavior
inert background content
proper modal lifecycle handling

This made accessibility part of the interaction model rather than an afterthought.

Another challenge was keeping the interface expressive without making it dependent on a large frontend framework. The project uses semantic HTML, CSS and purposeful JavaScript to keep the experience lightweight and understandable.

What I Learned

This project reinforced an important frontend lesson for me:

A landing page is not just a visual composition. It is an interaction system.

Typography, spacing, responsive layout, keyboard behavior, focus management, loading behavior and content hierarchy all contribute to whether the experience actually works.

I also learned that small details can have a large impact. A remembered focus target, a properly contained modal, a reduced-motion fallback or a thoughtful empty state can make the difference between something that merely looks good and something that feels finished.

What I'm Proud Of

I'm particularly proud of combining visual storytelling with practical frontend engineering.

The project is intentionally designed to feel like a warm editorial food experience while still behaving like a real interactive product.

The goal was not to build the biggest food website.

It was to build a small experience that makes people want to explore one more dish.

What's Next

I'd like to continue expanding the experience with richer food stories, more regional dishes, stronger discovery interactions and additional accessibility testing.

Ultimately, I'd like The Comfort Table to become less like a collection of recipes and more like a digital map of the memories people associate with food.

Thanks for checking it out.This is a submission for Frontend Challenge - Comfort Food Edition, Perfect Landing

What I Built

Demo

Journey

No Passport Required — Comfort Food Around the World

Pawan Satoshi — Sun, 16 Aug 2026 03:59:05 +0000

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

Inspiration

Comfort food does not need a passport.

Everywhere in the world, there is a dish that means something more than food. It can mean home, family, a long day ending, a celebration, or simply someone taking care of you.

For this challenge, I wanted to turn that idea into a single CSS artwork.

No Passport Required is a CSS-only celebration of comfort food around the world.

The scene brings together familiar comfort foods from different cultures around one shared table:

Italy — Margherita pizza
Japan — ramen
Mexico — tacos
India — khichdi
USA — mac and cheese
France — French onion soup
Korea — tteokbokki

Different dishes.

Different kitchens.

Different traditions.

One feeling.

Comfort.

Demo

View the live CSS Art

The artwork is rendered directly in the browser using HTML and CSS.

No food photographs, canvas drawings, or external illustration libraries are used for the artwork.

Source Code

View the project on GitHub

What I Built

I created a warm late-evening dining table where different comfort foods meet in one visual composition.

The scene uses CSS shapes, gradients, shadows, pseudo-elements and responsive positioning to create:

plates and bowls
pizza
ramen
tacos
rice
soup
noodles
cheese
herbs and toppings
utensils
steam
table lighting
shadows and depth
a warm kitchen atmosphere

The goal was not photorealism.

The goal was to make the viewer immediately understand the feeling behind the food.

Why CSS?

CSS is usually treated as the layer that makes an interface look good.

For this challenge, I wanted to push it further and use CSS as the illustration medium itself.

Instead of placing photographs of food on a page, I built the visual language from scratch using:

gradients
border-radius
pseudo-elements
box-shadow
transforms
layered positioning
CSS animation
responsive media queries

The artwork is intentionally asset-light so the shapes, composition and CSS techniques remain visible.

The Idea

The title is No Passport Required because comfort is universal.

A person does not need to know the complete history of a dish to recognize what it represents.

Warm food.

A familiar smell.

A table.

Someone waiting.

A place that feels like home.

Responsive Design

The composition is designed to adapt across:

desktop
laptop
tablet
mobile
portrait layouts
landscape layouts

The artwork scales and repositions instead of simply shrinking the desktop composition.

It also supports prefers-reduced-motion so users who prefer reduced motion are not dependent on the steam animation.

What I Learned

The hardest part was not creating individual food shapes.

It was making different foods from different cultures feel like part of one coherent visual scene.

The solution was to focus on the shared experience rather than making every dish perfectly realistic.

CSS became the tool for creating atmosphere rather than just decoration.

What I'm Proud Of

I'm proud that the artwork starts with a simple idea:

Comfort food is different everywhere, but the feeling is familiar.

The visual then turns that idea into one shared table.

What's Next

I would love to expand this into a larger interactive collection where visitors can select a country and discover the comfort food, ingredients, preparation and story behind it.

That idea also became the foundation for The Comfort Table, the larger interactive landing-page experience accompanying this CSS artwork.

Built With

HTML + CSS

No framework.

No external illustration library.

No canvas.

Challenge

Frontend Challenge — Comfort Food Edition

Thanks for taking a seat at the table.This is a submission for Frontend Challenge - Comfort Food Edition, CSS Art.

Inspiration

Demo

Journey

I Built BARKVERSE: What If Dogs Had Their Own Internet? 🐶

Pawan Satoshi — Sat, 15 Aug 2026 09:23:57 +0000

What If Dogs Had Their Own Internet?

Every dog has a personality.

They have their own habits, moods, favourite things, secret missions, suspicious refrigerator investigations, and an impressive ability to understand humans without saying a single word.

But what if dogs had their own internet?

That question became BARKVERSE.

🐶 BARKVERSE is an AI-powered interactive dog world where a real dog photo becomes the beginning of a playful digital identity.

Instead of building another static AI image analyzer, I wanted to create something people could actually explore, play with, and come back to.

🐾 Meet BARKVERSE

[WATCH THE DEMO VIDEO]
https://youtu.be/v2fX4cu7eRA

👉 Live Demo: https://barkverse.vercel.app/

👉 GitHub: https://github.com/pawansatoshi/barkverse

The experience starts with one simple thing:

A dog.

You can take a photo using your camera