This is a submission for Frontend Challenge: Office Edition sponsored by Axero, Holistic Webdev: Office Space
What I Built
So I made this employee dashboard called InnovateCorp Hub - basically tried to create something that doesn't look like those boring corporate portals we're all used to 😅
It's got all the usual stuff you'd expect:
- Stats showing team members, projects, meetings
- Quick buttons for common stuff (time off requests, IT tickets, etc.)
- Weather widget (because why not?)
- Team highlights section
- Upcoming events
- Company announcements
- Links to important resources
Went with a dark theme with blue accents - wanted something that looks modern but isn't too flashy for an office environment.
Demo
Live site: https://innovate-corp-alex.netlify.app/
Pretty much everything is clickable and has some hover effects. The search bar works, buttons show notifications when you click them, and there's even a live clock in the header!
Journey
Honestly, building this was fun but also a bit of a learning curve! Started with a basic grid layout and kept adding features as I went.
What I focused on:
Making it look good: Used Inter font to keep it clean and readable. Added a custom logo with some SVG magic - it's a little building with chart bars, seemed fitting for a corp dashboard.
User experience: Made sure everything responds when you interact with it. Hover effects, click animations, toast notifications - tried to make it feel alive.
Mobile friendly: Used CSS Grid and made sure it doesn't break on smaller screens.
The fun stuff:
- Created a glassmorphism effect with backdrop blur
- Made a real-time clock that updates every second
- Added smooth animations for better feel
- Custom notification system that pops up when you click buttons
What was tricky:
Getting the balance right between "professional corporate" and "actually nice to look at" was harder than expected. Also spent way too much time tweaking the hover animations 😂
If I had more time:
- Would add a proper notification center
- Maybe some charts/graphs for the stats
- Dark/light mode toggle
- User profile customization
Built everything with vanilla HTML, CSS, and JavaScript. No frameworks, just good old web fundamentals!
Pretty happy with how it turned out. It's not revolutionary but hey, if it makes someone's work dashboard a little less boring, mission accomplished! ✨
Top comments (0)
Some comments may only be visible to logged-in visitors. Sign in to view all comments.