CSS Art: My Home Office Setup

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

Inspiration

This CSS art piece represents my actual (or somewhat :3) home office setup! Since I haven't worked in a traditional office culture yet, I decided to recreate my personal workspace - the place where I code, learn, and build projects. The interactive door concept came from the idea that behind every developer's door is their personal sanctuary, their command center where magic happens.

Demo

Live Demo

How it works:

• Click the door knob to enter my home office
• Realistic setup: Gaming chair, dual monitor configuration (portrait + landscape), laptop on cooling stand, speakers, and my beloved lavender plant
• Personal touch: Everything positioned exactly like my real workspace
• Interactive experience: Smooth door fade-out reveals the complete setup

Journey

This project was both a technical challenge and a personal documentation of my coding space!

Personal Connection

This isn't just CSS art - it's a digital twin of where I actually spend my days learning web development. The dual monitor setup helps me code efficiently, the gaming chair keeps me comfortable during long study sessions, and that little lavender plant makes the space feel more alive.

Why This Setup:

• Dual monitors: Portrait monitor for code, landscape for documentation/browser
• Gaming chair: Because comfort matters during long coding sessions
• Laptop + cooling stand: My trusty development machine
• Lavender plant: Adds some life and calm to the workspace (and smells amazing!)
• Speakers: For those coding playlists that keep me focused

Technical Highlights:

• Pure CSS Art: No images - everything built with CSS shapes, gradients, and clever positioning
• Realistic proportions: Spent time getting the monitor sizes and desk dimensions right
• Z-index mastery: The chair sits behind everything (z-index: -1) to show the "entering the room" perspective
• Interactive door: Smooth transitions make the experience feel natural
• 5-star chair base: Detailed gaming chair with proper legs using box-shadow technique

CSS Techniques I'm Proud Of:

Complex Chair Design

.chair-base::after {
    content: '';
    width: 3px;
    height: 25px;
    background-color: #333;
    position: absolute;
    left: 50%;
    top: 15px;
    transform: translateX(-50%);
    border-radius: 2px;
    box-shadow:
        25px 0 0 #333,
        -25px 0 0 #333,
        12px 22px 0 #333,
        -12px 22px 0 #333;
}

Mounting Arm for monitors

.monitor-arm::before {
    content: '';
    width: 250px;
    height: 8px;
    background-color: #666;
    position: absolute;
    top: 30px;
    left: -121px;
}

What I Learned???

• How to layer elements with z-index for realistic depth
• Creating complex shapes with pseudo-elements
• The importance of getting proportions right for believability
• How personal touches (like the plant) make technical art more engaging
• Advanced positioning techniques for creating perspective

License

This project is open source and available under MIT License.