Frontend Challenge: Office Edition - Holistic Webdev: Office Space Site

#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

BIOCORE: Living Office Ecosystem v4.0 is a fully interactive, CSS-and-Three.js-powered intranet layout that simulates an organic digital office operating system, complete with a real-time user directory, system vitals, department dashboards, and a 3D neural office network map.

Inspired by a blend of Windows 98 UI nostalgia and speculative biotech operating systems, this project explores what a living, responsive digital workspace could look like. Every user, department, and activity in the system pulses with bio-rhythmic animations, mimicking a digital nervous system. My primary goal was to fuse aesthetic nostalgia with cutting-edge web interactions, building something weirdly alive but perfectly navigable.

Demo

https://numbpill3d.github.io/devchallengeaxios/

Journey

I wanted to create something more than a static intranet—something that feels alive. The core idea was: What if an office OS evolved like a brain or a body? That concept led to BIOCORE, an experiment in weaving together retro UI elements, modular dashboards, and an animated 3D network of employees all wrapped in a living intranet environment.

Key things I tackled:

UI/UX Fusion: I mimicked classic Windows 98 styling with MS Sans Serif fonts, grey bevels, and icon tray metaphors, while infusing it with a bio-digital theme using glowing elements, hover pulses, and warm organic gradients.

Three.js Network Graph: Each user is represented as a floating node in 3D space, with lines signifying team relationships. The graph pulses, rotates, and responds to interaction.

Dynamic Data Sim: The system fakes live activity (commits, meetings, logins) every few seconds, refreshing system stats and simulating a living workplace.

Responsiveness: Despite the heavy styling and Three.js canvas, I ensured the experience works fluidly on mobile and smaller screens.

Accessible Motion: For accessibility, I added reduced-motion support and avoided excessive visual noise.

What I'm most proud of: keeping all animations, logic, and UI deeply modular and clean without needing a full frontend framework. Just raw HTML, CSS, vanilla JS, and Three.js.

“Office spaces are not just places—they are networks of thought. BIOCORE was my attempt to map that, aesthetically and biologically.”

Thanks to Axero for the inspiration, and to DEV for the platform. I'm always exploring the liminal edge between interface and organism. ✧