Maruf's Portfolio

Ever feel like your emotions run as deep as the ocean? That was pretty much the idea behind DeepSeaFeels, a little side project where you pick your mood, and it shows you a sea creature that captures your vibe. No accounts, no data tracking just a bit of fun and a chance to sharpen my frontend skills.

In this post, I’ll share what I built, what I learned, and a few challenges I ran into.

🌊 What’s DeepSeaFeels?

Here’s how it works:

You pick how you’re feeling (like happy, stressed, or tired).
The app reveals an underwater creature along with a short, friendly blurb.
That’s it just pure, mood-based ocean energy. 🐙

It’s meant to be simple and a little bit whimsical.

🔧 Tech Stack

React (TypeScript) – for all the component logic and state handling.
Tailwind CSS – to quickly style everything without leaving my markup.
Framer Motion – for smooth, subtle animations.
Mock Data – I created a simple mapping of moods to creatures instead of using an API.

🧠 What I Learned

1. Hooks and State Management

This was one of my first times leaning heavily on useState and useEffect in a project. I got comfortable with conditional rendering, resetting state, and lifting state up to keep everything in sync.

2. Building Modular Components

I split the UI into clear, reusable components: one for mood selection, one for the result, and a few smaller ones for layout and animations. This helped me think more intentionally about separation of concerns.

3. Tailwind Workflow

Tailwind turned out to be a huge time-saver. Being able to tweak styles right in the markup made me much faster, and I learned a lot about how consistent spacing and typography improve the feel of an app.

4. Animations with Framer Motion

Even basic fade-ins and slides made the UI feel more polished. It was a good intro to how animation libraries can add life to React projects without much overhead.

🤯 Challenges

Making the experience feel natural without any real-time API data.
Figuring out which creatures matched each mood (it took more brainstorming than I expected).
Not overcomplicating the project keeping it small on purpose.

🐳 Sneak Peek

DeepSeaFeels Screenshot

🔗 Check It Out

💬 Final Thoughts

Sometimes, the simplest projects are the most rewarding. DeepSeaFeels gave me space to practice the basics, try out some animation, and remind myself that learning can be playful. I’m already thinking about what other “vibe-based” ideas I could build next.

Thanks for reading! If you have feedback, ideas, or just want to say hi-drop me a message.

— Maruf