🚀 404ffice: The Time-Traveling Intranet

Posted on by — No Comments ↓

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!

1980s-style intranet with neon grid background, pixel fonts, and terminal UI

retro Windows-style desktop layout with draggable icons on an intranet homepage

intranet interface with quizzes and minimal blue-themed layout

intranet design featuring productivity dashboard and Zoom fatigue bingo

Futuristic 2035s intranet with holographic widgets, neural charts, and AI assistant

Time Slider component for switching between decades of intranet design

🌐 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.

Leave a Reply