This is a submission for Frontend Challenge: Office Edition sponsored by Axero, Holistic Webdev: Office Space
🏢 What I Built
404ffice is a time-traveling intranet that lets you explore what internal digital workspaces might have looked like — or will look like — in different decades.
Each section of the site represents an office intranet from a particular era:
- 1980s: Neon grids, pixel fonts, and a typing speed challenge
- 1990s: Windows 95-style desktop with draggable icons
- 2000s: Flash-inspired themes, quizzes, and a retro palette
- 2020s: Zoom fatigue bingo, self-care reminders, and productivity charts
- 2035s: Holographic dashboards, neural widgets, and AI bots
🎧 Key Feature: As you move between decades using the Time Slider, each era loads a new background soundscape using Tone.js. This immersive audio transports you to that office era — from humming CRT monitors to ambient AI sounds of the future.
The goal: merge design nostalgia with modern web tech to create a fun, interactive, and surprisingly useful fake intranet!
🌐 Demo
🔗 Live Site: https://404ffice.netlify.app/
📦 GitHub Repo: https://github.com/tanvirmulla11/Frontend-Challenge
🧭 Journey
This project was a creative deep dive into three things I love:
- 🎨 UI/UX design
- 🎧 Audio interactivity
- ⌛ Tech nostalgia
Challenges I tackled:
- Designing a consistent yet decade-specific component system
- Creating sound environments for each era using
Tone.js - Building a flexible layout with TailwindCSS that adapts with the themes
- Making the 1990s "desktop" draggable and fun like a mini OS
What I'm most proud of:
- 🧠 The OfficeBot AI, whose personality changes by decade
- 🎯 Typing speed challenge with live scoring
- 📦 A Digital Time Capsule where users write messages to their future selves
👏 Credits
Created solo by @tanvirmulla11
Thanks to:
- Axero & DEV for this awesome prompt 🙌
- Tailwind, Tone.js, Lucide, and Google Fonts
🛡️ License
MIT — you’re welcome to fork, remix, and expand the office through time.
Keep clicking, coding, and traveling through time.
Top comments (13)
@axrisi @kurealnum Hey! I’ve reduced the sound effects now go ahead and check it out. Let me know if it feels better! 🔉
I think a little bit less loud on anything < 1999 and a little bit louder for 2005. Just my opinion though. Also in my opinion, the sound for 2005 makes sense to me but I don't "understand" the sound for the 1980s. You could try playing 80s music for that time period -- just a thought though! Again, I think this is super creative.
Thanks for the feedback! I reduced the sound for all eras to keep the audio clear, since it got too loud when combined. From my perspective, it's better than having it too loud, so that’s why I lowered it.I’ll look into tweaking it more especially for the 80s. Appreciate your thoughts!
i like it but sounds are too loud my man :)
Thanks a lot, man! Really appreciate you checking it out. I added the louder sound intentionally to give it a more immersive and real office vibe like you're actually there! But I totally get your point .I’ll work on adding a volume control so everyone can vibe their own way. Appreciate the feedback!
By far the most creative idea I've seen from this challenge, but jeez, the sounds are way too loud.
Edit: the 2005 sound is perfect though. It gives a very liminal feeling.
Thanks a lot, Oscar! I'm really glad you found it creative that means a lot!
The loud sounds were added on purpose to recreate that retro computer vibe, where machines used to be noisy and dramatic just part of the time-travel experience!
Appreciate the feedback — I’ll work on balancing the sound levels.
Would love to hear what others think too — feel free to drop your thoughts, folks! 🚀💬
Such a fun and creative project! 🚀 Loved the decade-specific designs and the immersive soundscapes — the Time Slider is genius. Nostalgic and futuristic! 👏
Thanks a ton, Aryan! So glad you vibed with the Time Slider and the retro-futuristic feel! 🙌
This is next-level, Tanvir! 🔥 Time-traveling intranet? Mind blown. 🚀💡
Haha, thank you so much, Prashant! 🚀Glad you enjoyed the concept more magic loading... 🔧✨
This is such a creative idea 💡 brought to life. No surprise for a UX designer; I love the continuous interactivity
Thank you so much, @uzondu9 !
I really appreciate your kind words — creating something interactive and fun was the goal! 😄
I'd love to hear what other folks think too — how would your dream office intranet look like in 2035? Drop your thoughts or feedback below! 👇