🖼️ Frontend Challenge Submission: Cubicle Chronicles – A Slice of Office Life

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

🎨 Inspiration
"Cubicle Chronicles" is a CSS art piece that captures the essence of everyone's office life — the desk clutter, the glowing screen, coffee breaks, the water cooler by the side, and the never-ending meetings, mostly stand-up calls. I wanted to recreate a scene that feels both familiar and fun for anyone who’s worked in an office (remote or IRL).

🧪 Demo
👉 Live Demo: CodePen – https://codepen.io/creative-coder/pen/bNVEbPR

Here's a preview of the scene:

🛠️ Journey
Creating this CSS artwork was a blend of creativity and challenge. I started by sketching a basic layout of an office cubicle and then built it piece-by-piece using only HTML and CSS.

✏️ Process Highlights:
Cubicle Structure: Designed with divs representing the walls and desk layout

Monitor & Code: Simulated a developer’s screen showing a loop of writeCode() and drinkCoffee()

Water Cooler & Coffee Mug: Added animated bubbles and subtle styling for realism

Post-it Notes: Used absolute positioning to place floating sticky notes with reminders

Animated Plant & Clock: Brought life to the cubicle with subtle plant movement and ticking clock hands

Keyboard: Dynamically generated with JavaScript for added interactivity

👩‍💻 Sample HTML Structure:

<div class="monitor">
  <div class="monitor-screen">
    <div class="screen-content">
      <div class="code-line">function work() {</div>
      <div class="code-line"> while(true) {</div>
      <div class="code-line"> writeCode();</div>
      <div class="code-line"> drinkCoffee();</div>
      <div class="code-line"> attendMeeting();</div>
      <div class="code-line"> }</div>
      <div class="code-line">}</div>
    </div>
  </div>
</div>

🎯 What I Learned
Deepened my understanding of CSS positioning, transformations, and animations

Gained appreciation for how small design touches (like shadows, reflections, or sticky notes) can elevate an entire scene

Practiced writing clean, component-like HTML structure even in pure CSS art projects

🧑‍🤝‍🧑 Team
This was a solo submission, but inspired by every coworker who’s ever said, "Did you get my email?"

📜 License
Feel free to remix or build upon this idea — all code is open-source and available via the CodePen link.

Thanks for visiting my virtual cubicle! 👩‍💻☕