DEV Community: Dipanshu Sahu

🎃 GhoulEats - A Spooky Restaurant Experience

Dipanshu Sahu — Sun, 09 Nov 2025 07:47:27 +0000

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

Hey everyone!

I’m excited to share my project - GhoulEats, a spooky and interactive restaurant website built with React, Vite, Tailwind, React router and Framer Motion.

This project is special to me because it pushed me to explore motion design, creative theming, and UI storytelling all in a short span of a few days. I started around November 6th, and from then till November 9th, I poured everything I had into bringing this haunted concept to life.

What is GhoulEats?

GhoulEats is a Halloween-themed restaurant website that blends creativity, design, and interactivity. It’s not just about pages it’s an entire spooky dining experience built for the web.

Each page has its own eerie charm from creepy AI-generated chefs to animated menus and ghostly motions that breathe life into every section.

Think of it as a restaurant run by ghosts and ghouls... but with great food and an even better design.

Demo

Best viewed on desktop - the eerie motions, animations, and effects truly come alive on larger screens.

Pages & Features

Here’s a look at what GhoulEats offers:

Home Page

Hero section with glowing visuals and subtle motion
About preview and character highlights

About Page

A story-driven explanation of what GhoulEats is and how it was created

Menu Page

20+ spooky dishes with category filters
Animated food cards and motion transitions

Join Us Page

A form where new ghouls (aka chefs and staff) can join the restaurant

Events Page

Fun upcoming Halloween events displayed in spooky-styled cards

Each element — from buttons to cards — uses Framer Motion for animation and Tailwind CSS for styling.

Tech Stack

React.js — for the structure
Vite — for fast builds
Framer Motion — for smooth, natural animation
Tailwind CSS — for utility-first styling
AI Assets — for generating spooky crew characters

What I Learned

This project made me learn a lot. From balancing design with motion to structuring reusable components — every part was a challenge and a joy.

Some key learnings:

Creating immersive motion effects using Framer Motion
Building category filters dynamically in React
Using gradient blending for eerie backgrounds
Maintaining component reusability with styled layouts

Closing Thoughts

This project reminded me why I love frontend — the ability to create experiences, not just interfaces. GhoulEats is more than a Halloween site — it’s a playful mix of motion, creativity, and effort packed into a few days.

If you enjoyed it, drop a like or leave your thoughts below. I'd love to hear what you think! 🎃

Made with code, creativity, and spooky vibes by Dipanshu Sahu

Halloween Night Scene - A Spooky CSS Art

Dipanshu Sahu — Wed, 05 Nov 2025 05:08:46 +0000

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

Inspiration

Classic Halloween tales, eerie silence, flickering lights, and that feeling of being watched these inspired the tone of the piece. The goal was not just to show a scene, but to create a mood, a blend of calm and unease, beauty and fear.

Demo

Note: For the best experience, view this on a desktop browser at 100% zoom. The layout and animations are handcrafted and may appear differently on other scales.

Journey

It’s pure CSS art brought to life through subtle animation and atmospheric storytelling. The idea was to create a scary Halloween night scene that feels alive, mysterious, and cinematic.

Sky & Stars: A deep night sky filled with stars that blinks and appear in random places using JavaScript simulating the twinkle of distant galaxies.
Glowing Moon: A full moon that pulses in brightness, casting its glow across the landscape.
Witch & Clouds: A witch glides across the moon, while clouds drift slowly to give the scene depth and life.
Haunted House: A chilling house with flickering window lights and in one window, a pair of blinking eyes watches you from within.
Graveyard: Five tombstones marked with R.I.P. quietly rest near the trees, wrapped in the ghostly glow of the night.
Ghosts: Two ghosts roam one hanging on the tree with red eyes, fading in and out; another wandering around the graveyard.
Pumpkins & Barricade: Five glowing pumpkins guard the entrance, their flickering light adding warmth to the darkness.
Trees & Owl: Bare trees stretch across the scene; an owl blinks occasionally, silently observing the world below.
Chimney Smoke: Wisps of animated smoke rise gently, bringing subtle realism to the haunted house.

License

MIT License, feel free to use or adapt with attribution.

Made with ❤️ by @dipanshu447
Let’s keep making divs do wild things.

DevHive - Office Culture Dashboard UI

Dipanshu Sahu — Sun, 27 Jul 2025 16:55:10 +0000

This is a submission for Frontend Challenge: Office Edition sponsored by Axero, Holistic Webdev: Office Space

What I Built

I created DevHive, a sleek and modern intranet homepage that reflects the rhythm of a developer’s digital workday. This dashboard captures a warm, productive, and cohesive office culture experience, designed to make every day at work start with clarity and ease.

The design focuses on essential workplace features:

Real-time greeting with current date and time
Quick access to essential tools (Dev Environment, HR, IT Support)
Company-wide announcements
Task manager with progress tracking
Team member spotlight to encourage recognition
Event cards to keep up with upcoming activities

Demo

GitHub : https://github.com/dipanshu447/company-intranet-ui
Live Preview : https://devhiveui.netlify.app/

Journey

While working on DevHive, I aimed to bring the idea of “office harmony” to the digital space. I wanted a design that looked clean and warm but also served core intranet functions. Starting with a rough wireframe, I built the app using React.js and Tailwind CSS via Vite, which offered great speed and flexibility during development.

I focused heavily on the little user moments, such as soft transitions, intuitive layout, and a developer-friendly dark theme. Adding components like spotlight sections and task management tools helped make the UI feel like a real daily companion, not just a page.

Key things I learned and enjoyed:

Managing reusable components for scalability
Styling with utility-first CSS and responsiveness
Building dynamic features like task lists

This project was fun and refreshing, and it gave me a new appreciation for UI that blends purpose with personality.

Made with 💙 by Dipanshu Sahu
🔗 GitHub · Dev.to

Thanks for checking it out! 😊

Office Vibes – A Dev’s Desk Brought to Life in CSS

Dipanshu Sahu — Sun, 20 Jul 2025 13:53:46 +0000

This is a submission for Frontend Challenge: Office Edition sponsored by Axero, CSS Art: Office Culture.

Inspiration

The developer life isn’t always about polished UIs and pixel-perfect components. It's the late-night coffee sips, whiteboards covered in ideas, and that one browser tab with a stubborn error.
Office Vibes is a CSS tribute to that chaotic beauty, capturing a dev’s workspace in its raw, relatable, and aesthetic form.

Demo

Note: For the best experience, view this in a desktop browser at 100% zoom. The layout is handcrafted and may distort on other scales.

Preview

Journey

This project began as a blank canvas, quite literally. No JavaScript, no libraries. Just raw HTML and CSS. My goal was to express what it's like to be a developer, not just build something for one.

From the skewed books we swear we’ll finish...
To the error tab sitting right next to our editor...
To the blinking cursor and cozy desk lights...

Every detail was crafted manually using nested divs, shadows, transforms, and pure CSS creativity. Inspired by VS Code’s dark UI and the vibe of late-night hacking, I played with gradients, layering, and subtle hover effects to simulate depth and personality.

Key Things I Explored

CSS-only animations (like blinking cursors)
skew() and translate() to give perspective
Dark mode palettes inspired by GitHub and macOS Terminal
Manual color picking to create warm lighting and shadows
Mimicking real UI elements with pure CSS

What I’m proud of most is staying within the boundaries (no JS!) while still conveying a scene that feels lived-in, cozy, and familiar to every dev.

License

MIT License, feel free to use or adapt with attribution.

Made with ❤️ by @dipanshu447
Let’s keep making divs do wild things.