The latest articles on Forem by Anshul (@anshul0124). https://forem.com/anshul0124 https://media2.dev.to/dynamic/image/width=90,height=90,fit=cover,gravity=auto,format=auto/https:%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Fuser%2Fprofile_image%2F3359451%2F32bf5466-1f15-45dc-968d-0974b74c6acc.jpeg https://forem.com/anshul0124 en Anshul Mon, 28 Jul 2025 06:58:00 +0000 https://forem.com/anshul0124/axero-intranet-modern-office-hub-1b79 https://forem.com/anshul0124/axero-intranet-modern-office-hub-1b79 <p><em>This is a submission for <a href="https://dev.to/challenges/frontend/axero">Frontend Challenge: Office Edition sponsored by Axero, Holistic Webdev: Office Space</a></em></p> <h2> What I Built </h2> <p>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.</p> <p>The intranet includes:</p> <ul> <li><p>Sticky Navigation: Always accessible header menu that stays at the top when scrolling</p></li> <li><p>News &amp; Announcements: Featured articles with categories, images, and descriptions</p></li> <li><p>Team Collaboration: Chat interface with active/inactive status indicators and unread message badges</p></li> <li><p>Team Spotlight: Recognition section highlighting employee achievements</p></li> <li><p>Useful Resources: Quick access to company resources in a 2x2 grid layout</p></li> <li><p>Meeting Schedule: Interactive meeting cards with attendee avatars and join buttons</p></li> <li><p>Tickets System: Jira like ticket management with priority indicators</p></li> <li><p>Upcoming Events: Calendar events including team member birthdays with orange highlighting</p></li> <li><p>Spaces: Department specific collaboration areas</p></li> </ul> <p>The design prioritizes user experience with hover effects, consistent spacing, and a cohesive color scheme using blue accents throughout.</p> <h2> Demo </h2> <p>Live Demo: [<a href="https://frabjous-capybara-487197.netlify.app/" rel="noopener noreferrer">https://frabjous-capybara-487197.netlify.app/</a>]</p> <h2> Journey </h2> <p>This project was an exciting journey into creating a modern intranet experience. I started with a basic layout and iteratively refined it.</p> <p>Key Design Decisions:</p> <ul> <li><p>Sticky Navigation: I made the header menu sticky to ensure users always have access to navigation, improving usability significantly</p></li> <li><p>Card Based Layout: Used consistent card designs across all sections for visual harmony</p></li> <li><p>Color Consistency: Removed green accents and standardized on blue (#007bff) throughout the interface</p></li> <li><p>Responsive Grid: Implemented a 2x2 grid for resources that adapts to single column on mobile</p></li> <li><p>Interactive Elements: Added hover effects and transitions for better user feedback</p></li> </ul> <h2> What I Learned </h2> <ul> <li><p>The importance of consistent design patterns across an interface</p></li> <li><p>How subtle animations and hover effects enhance user experience</p></li> <li><p>The value of semantic HTML structure for accessibility</p></li> <li><p>Techniques for creating scalable, maintainable CSS</p></li> </ul> <h2> Proud Achievements </h2> <ul> <li><p>Successfully transformed a simple team list into a sophisticated chat interface</p></li> <li><p>Created a birthday event system with custom orange highlighting</p></li> <li><p>Implemented a comprehensive ticket management system with priority indicators</p></li> <li><p>Built a resources section that scales from 2x2 grid to single column responsively</p></li> </ul> devchallenge frontendchallenge css javascript