This is a submission for Frontend Challenge: Office Edition sponsored by Axero, Holistic Webdev: Office Space
What I Built
I built a modern and interactive employee intranet portal for "Nexus Dynamics," designed as a central hub for essential information and tools. The layout prioritizes a clean, intuitive, and production-ready user experience, featuring a prominent header, real-time information, and a notification system. The main content is divided into two columns, showcasing company statistics, announcements, team spotlights, quick links, upcoming events, and office information. The design emphasizes visual appeal, readability, and ease of navigation, using custom SVG icons and a cohesive card-based layout.
Demo
https://nexus-dynamics-99.netlify.app/
Journey
My journey focused on building a robust frontend using HTML, CSS, and vanilla JavaScript. I meticulously structured the index.html, applied modern styling with styles.css for responsiveness and visual depth, and added interactivity using script.js.
Key JavaScript features include a real-time clock, simulated dynamic data updates (notifications, weather, stats), and various click handlers for interactive elements. I also implemented a custom toast notification system and keyboard navigation shortcuts for enhanced usability.
Proudest Achievement: Dark Mode Implementation
I'm particularly proud of the comprehensive dark mode. This wasn't just a simple color inversion; it involved:
- A dedicated toggle button with dynamic icons.
- Persistence of user preference via
localStorage. - Automatic detection of system theme preference (
prefers-color-scheme). - Extensive styling adjustments across all UI elements in
styles.cssto ensure optimal contrast and visual appeal in both light and dark themes. - Smooth CSS transitions for a seamless theme switch.
This project allowed me to explore vanilla frontend development, focusing on performance, accessibility, and user experience, with the dark mode implementation being a highlight that significantly enhanced the portal's modern appeal.
Top comments (2)
Thanks , sorry the script was not loading and did a little bit messup on deployment and code part , fixed and updated the latest link, please have a look.
My workflow was 80 ( coded the part ) + 20 ( used ai for refactor and css insipration ).
Your UI is so amazing, fluid and responsive. The functionality of the site is a bit limited, like the light/dark mode and notifications bar visibility toggle. I guess though, that some might be intentional as you obviously placed priority on the frontend (that's great as well), besides these you nailed it 👌. If you don't mind, could I ask what dev process you used to come about it, like Figma for Design, did you use AI tools for assistance? or how long did you take to finish something classic ✨like this? those kind of things. Thanks for posting something this inspirational💕