This is a submission for Frontend Challenge: Office Edition sponsored by Axero, Holistic Webdev: Office Space
What I Built
I designed and developed a responsive intranet homepage tailored for internal office use.
This project features a clean, card-based layout with smooth transitions and dynamic data rendering through HTML,CSS and JavaScript.
Demo
Live Site : Preview
View Code : View
Journey
Key Features
Dynamic Api Integration: Instead of hardcoding API keys, I created a flexible function that extracts all keys dynamically and accesses user info based on their index, improving scalability and maintainability
Search Functionality : This includes a live search bar that filters and displays user cards matching the input, enhancing usability.
- User Info Cards : Each user card is clickable, displaying detailed information in a smooth transition.
- Monthly Birthday Edition : Accessible via a hamburger menu, this section shows which employees have birthdays in the current month and the age they are turning.
Responsive Design : The interface adapts to various screen sizes, ensuring a consistent user experience across devices.
Dark Mode Toggle : A toggle function allows users to switch between themes for better accessibility.
- Performance-Oriented UI : Used CSS transitions and minimal DOM manipulations to ensure fast rendering and user-friendly animations.
This project focuses on simplicity with powerful functionality, aiming to serve as a clean, dynamic, and engaging homepage for internal office teams.
Top comments (0)