DEV Community

Cover image for Next-Level Intranet: OfficeSpace with Dark Mode & Widgets
Akua Konadu
Akua Konadu Subscriber

Posted on

Next-Level Intranet: OfficeSpace with Dark Mode & Widgets

Frontend Challenge Holistic Webdev Submission

This is a submission for Frontend Challenge: Office Edition sponsored by Axero, Holistic Webdev: Office Space

What I Built

My intranet layout is a modern, responsive dashboard designed to boost engagement and productivity. It features a hero section, team spotlight, upcoming events carousel, quick links, and a sticky sidebar with live widgets (clock, weather, notifications). I aimed to create a dynamic, user-friendly space with personalization (drag-and-drop widgets), dark mode, and smooth animations for an interactive experience.

Demo

Demo Link

Repo Link

Journey

I started by planning a clean layout that mimics a real company intranet, then built the structure in HTML and styled it for a modern, responsive design with CSS Grid and Flexbox. After that, I added interactivity with JavaScript, including dark mode, an auto-sliding event carousel with swipe support, and a sticky sidebar with real-time widgets (clock, weather, and notifications).

One of my proudest choices was implementing drag-and-drop widgets in the sidebar with Local Storage, giving users the ability to personalize their dashboard. This feature makes the intranet feel dynamic and user-centric.

I learned how to combine responsive design, smooth animations, and interactive features in a way that feels like a real digital workspace employees would use daily.

Top comments (2)

Collapse
 
smoothstay profile image
SmoothStay

Interesting. Thanks for sharing!

Collapse
 
adonaitechnologies profile image
Akua Konadu

thanks