This is a submission for Frontend Challenge: Office Edition sponsored by Axero, Holistic Webdev: Office Space
What I Built
I created a modern office intranet homepage that serves as a central hub for employees. The design features a clean, professional layout with a dashboard-style interface that includes company announcements, learning events, performance metrics, and team spotlights. The goal was to build an engaging workspace that helps employees stay connected and productive.
The intranet includes:
- Dynamic hero section with live clock and weather widgets
- Six-card dashboard grid with essential workplace information
- Sidebar with recent activity timeline and team member highlights
- Breadcrumb navigation for clear user orientation
- Quick action buttons for common tasks
- Responsive design that works on all devices
Demo
Live Demo: https://cbms26.github.io/dev-front-end-challenge-office-space-/
Source Code: https://github.com/cbms26/dev-front-end-challenge-office-space-
Journey
This project taught me the importance of balancing information density with visual breathing room. I started with a content-heavy layout but learned that professional enterprise applications need generous white space to maintain readability and user focus.
Key design decisions I'm proud of:
- Glassmorphism effects - Used backdrop filters and transparent overlays to create depth while maintaining the clean aesthetic
- Container width constraints - Added a max-width of 1400px with centered content to prevent the layout from becoming too wide on large screens
- Color strategy - Built the entire design around an orange theme (#ff6b35, #f7931e) that feels energetic yet professional
- Responsive grid system - Created a flexible dashboard that gracefully adapts from 3 columns to single column on mobile devices
- Navigation breadcrumbs - Implemented clear navigation paths to help users understand their location within the intranet structure
The biggest challenge was finding the right balance between displaying lots of workplace information without overwhelming users. Through iterative spacing improvements, I learned that good design is often about what you don't show as much as what you do.
Technical highlights include CSS Grid for the dashboard layout, flexbox for component alignment, and smooth hover transitions that provide visual feedback without being distracting.
Top comments (1)
Look's bold I like the style.