_This is a submission for Frontend Challenge: Office Edition sponsored by Axero, CSS Art: Office Culture.
Inspiration
This CSS art takes inspiration from the year-end performance review process commonly found in office settings. Based on my experiences as a product manager in Information Technology Agile environments in an Investment Bank, it depicts moments when colleagues gather informally to discuss promotions and compensation adjustments ahead of reviews.
The piece illustrates typical activities and interactions during review periods, such as:
- Updating records of accomplishments
- Receiving calendar reminders
- Engaging in conversations and gossiping about evaluation outcome
## Demo 👉 Live Demo: View on CodePen
Journey
CSS Art Inspiration
Inspiration is from my experience as a product manager during year-end reviews — those anxious yet humorous moments when colleagues gather around the water cooler discussing promotions and performance updates.
Journey
I started with a vision of office culture elements:
- Water cooler chats
- Mechanical keyboards
- Coffee cups
- Infamous review emails, announcements, calendar items The process involved careful positioning of each element to create a balanced, engaging scene with subtle animations bringing it to life. ---
What I'm Proud Of
- Capturing the relatable anxiety and humor of performance reviews through visual storytelling
- Creating interactive elements like animated bubbles and typing indicators
Challenges & Learnings
- Trying to master CSS animations and responsive design
- Learning to iterate quickly based on visual feedback
Vibe Coding Approach
I relied heavily on "vibe coding" — letting the creative flow guide technical decisions. Rather than over-planning, I built iteratively, adjusting layouts and styles based on how they felt visually.
Next Steps
I'd like to expand this into a series exploring humorous different office culture moments (especially work-from-home situations), perhaps adding more interactive elements and accessibility features.
Top comments (0)