This is a submission for Frontend Challenge: Office Edition sponsored by Axero, Holistic Webdev: Office Space
What I Built
I built a modern, responsive intranet homepage for Axero that serves as a comprehensive digital workplace hub. The layout features a clean, professional design with three main sections: a left sidebar for user profile and apps, a main content area for news and team collaboration, and a right sidebar for meetings and events.
The intranet includes:
Sticky Navigation: Always accessible header menu that stays at the top when scrolling
News & Announcements: Featured articles with categories, images, and descriptions
Team Collaboration: Chat interface with active/inactive status indicators and unread message badges
Team Spotlight: Recognition section highlighting employee achievements
Useful Resources: Quick access to company resources in a 2x2 grid layout
Meeting Schedule: Interactive meeting cards with attendee avatars and join buttons
Tickets System: Jira like ticket management with priority indicators
Upcoming Events: Calendar events including team member birthdays with orange highlighting
Spaces: Department specific collaboration areas
The design prioritizes user experience with hover effects, consistent spacing, and a cohesive color scheme using blue accents throughout.
Demo
Live Demo: [https://frabjous-capybara-487197.netlify.app/]
Journey
This project was an exciting journey into creating a modern intranet experience. I started with a basic layout and iteratively refined it.
Key Design Decisions:
Sticky Navigation: I made the header menu sticky to ensure users always have access to navigation, improving usability significantly
Card Based Layout: Used consistent card designs across all sections for visual harmony
Color Consistency: Removed green accents and standardized on blue (#007bff) throughout the interface
Responsive Grid: Implemented a 2x2 grid for resources that adapts to single column on mobile
Interactive Elements: Added hover effects and transitions for better user feedback
What I Learned
The importance of consistent design patterns across an interface
How subtle animations and hover effects enhance user experience
The value of semantic HTML structure for accessibility
Techniques for creating scalable, maintainable CSS
Proud Achievements
Successfully transformed a simple team list into a sophisticated chat interface
Created a birthday event system with custom orange highlighting
Implemented a comprehensive ticket management system with priority indicators
Built a resources section that scales from 2x2 grid to single column responsively
Top comments (0)