🎨 Office Coolors: A Colorful Intranet for Creative Productivity

#devchallenge #frontendchallenge #css #javascript

Frontend Challenge Holistic Webdev Submission

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

What I Built

Office Coolors is a creative intranet designed for illustrators, visual artists, and anyone who prefers a more visual and interactive approach to organizing tasks.

The main idea is to turn task completion into a visually rewarding process: each completed task unlocks a color that can be used to paint parts of an interactive SVG drawing.

It’s like a digital artistic workspace where motivation grows as your progress brings color to your creations.

✨ Key Features:

Choose a themed workspace: Nature, Office, Beach, or Trailer
Visual tasks unlock exclusive colors
Interactive SVG painting with visual feedback (color explosion effect)
Dark mode with persistent storage
Bounce animations and custom sound effects
Local storage to save your progress

Demo

🖥️ Try the live demo:
https://office.jamesrmoro.me

📁 View the source code on GitHub:
https://github.com/jamesrmoro/office-coolors

📺 Watch in action:

Journey

The idea behind the project came from this simple question:

What if completing each task felt like coloring a piece of a drawing?

As both an artist and a front-end developer, I wanted to explore this fusion of productivity, aesthetics, and gamification.

🧠 Key Design Decisions:

Using SVGs as a base for coloring gave users artistic freedom. Colors are only unlocked after task completion — turning progress into a reward.
Tasks are grouped into "floors," like sections of a creative building.
With ambient sounds, colorful particles, and visual themes, the experience becomes fun and immersive.