This content originally appeared on DEV Community and was authored by B G Adam
This is a submission for Frontend Challenge: Office Edition – CSS Art: Office Culture.
Why I built it
Cluttered desks, whether when we viewed over Zoom or onsite, including mine, tells a story. I wanted to freeze-frame that energy in pure CSS which is four tiny workstations with each one screaming its owner’s personality. No frameworks, no images (i put one emoji as “image” tho) just gradients, borders, and far too many border-radius and other css pixel values.
See it in action
each desk can be clicked, and you can use ‘esc’ to exit the workspace’s screen.
PS: Optimal scale view of CodePen below is 0.5x scale 🙂
https://github.com/bO-05/async_dime-office
How it came together
I started from a blank index.html, sketched each desk with flex and grid, then layered on animations: computer screens, objects glow, pages fluttering, and readjusting. I get an impression of 3-second loops felt lively without being chaotic. Far too many border-radius and setting pixel positioning of objects, but it is nice.
The file ended up around 4 k lines of CSS – chunky, but every keyframe is handcrafted (with the occasional AI nudge – first time posting to CodePen, I’ll take all the help I can get).
Desks are clickable: hit one and it jumps into fullscreen; mouse-wheel or arrow keys let you scroll the zoomed-in scene. Hover the little characters to read their random chatter. I use vanilla events.
If I had more time
Maybe I’ll add more personal items like wallet, bags, sunglasses that make each desk more personal. Record a few extra speech-bubble lines (the developer needs more dad jokes) would be nice too. Also let the rubber-duck squeak on click (CSS-only animation, no audio). And maybe ship a dark-mode toggle for late-night coders. And few ui readjusting, I still felt this isn’t that nice :).
Thanks for reading – feedback is welcome, and feel free to remix the pen!
This content originally appeared on DEV Community and was authored by B G Adam