DEV Community

Cover image for Axero Frontend Challenge: Building a Dynamic Office Intranet Interface
Eron
Eron Subscriber

Posted on

Axero Frontend Challenge: Building a Dynamic Office Intranet Interface

Frontend Challenge Holistic Webdev Submission

✨ My Intranet Homepage for the Axero Frontend Challenge

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


🚀 What I Built

I designed a modern, responsive intranet homepage using HTML, CSS, and JavaScript only — no frameworks, libraries, or plugins. The goal was to build a minimalist styled digital workspace that combines aesthetics and utility with minor distractions or cluster in the UI.

Key Features:

  • 🔍 A global search bar for quick access to internal content
  • 👥 A Team Spotlight carousel with realistic avatars
  • 📰 A live Company News Feed widget
  • 📅 A clean Events Panel for upcoming meetings
  • 🌘 A Dark/Light Mode Toggle with adaptive colors and hover effects
  • 🧊 A Tile Carousel Layout where one tile is always front-and-center

🔗 Demo

Here’s a live demo of my project:

https://codepen.io/Priest-Karibo/pen/dPYpJVG


🛠️ Journey

This project was all about creating a realistic intranet that feels welcoming, functional, and inspiring.

What I Learned:

  • How to implement a focus-centered tile slider using JavaScript
  • How to dynamically style components based on light/dark theme toggles
  • Importance of semantic layout and smooth user interactions
  • Leveraging tools like Pravatar.cc for realistic placeholder avatars

Design Philosophy:

  • Clean first impression with a minimal layout
  • Information hierarchy to prioritize what employees need daily
  • Theme flexibility to respect user visual preference

👨‍💻 Built With

  • HTML5
  • CSS3 (Flexbox, Grid, Transitions)
  • JavaScript
  • Pravatar.cc for avatars

👥 Team Credits

Solo submission by Priest Karibo


Top comments (0)