☕ Tuesday Morning Mug – A Vaporous CSS Surprise for the Office Intranet

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

What I Built

I created "Tuesday Morning Coffee", a playful CSS Art scene that embodies a familiar workplace ritual — that first magical sip of the day.

This isn’t just a mug:

• ☕ Pure CSS steam animation
• 🎉 A surprise confetti Easter egg
• 🌗 Smooth dark mode toggle
• ♿ Fully accessible (ARIA labels, keyboard-friendly, motion-safe)
• 📦 Zero dependencies – just clean HTML, CSS, and JavaScript

Demo

📽️ Watch Demo (Google Drive Video):
👉 https://drive.google.com/file/d/1B-GJgOgyHgbXHtuqLUQkO7-VKckzcDGu/view?usp=sharing

📁 GitHub Repo:
👉 https://github.com/poowa-gg/axero-frontend/tree/master

Journey

I challenged myself to build something charming without frameworks or complexity — just expressive, readable code that anyone could learn from.

What I used:

• data-theme attribute for dark/light mode switching
• clamp() + flexbox for responsive design
• Confetti generated dynamically with JavaScript
• @media (prefers-reduced-motion) for accessibility

✅ Feature Highlights

• Semantic HTML + ARIA
• Keyboard interaction (Enter/Space on mug)
• Mobile responsive
• Confetti logic in ~50 lines
• Toggleable dark mode with CSS variables

💬 Let's Talk

Imagine this on your company’s intranet homepage — what other fun little elements would you add?

🧩 A daily quote widget?

💡 A light/dark mood meter?

🎯 A countdown to the weekend?

Drop your ideas or feedback below — I’d love to hear what would bring joy to your workday interface.

Thanks to Axero and the DEV team for sparking this challenge! ☕💻