This is a submission for Frontend Challenge: Office Edition sponsored by Axero, Holistic Webdev: Office Space
What I Built
TechElevate Office is a modern, all-in-one intranet dashboard designed for hybrid and remote-first organizations.
My goal was to provide a single, friendly digital space for team announcements, essential resources, collaboration, and engagement—delivering an experience that feels like a digital HQ.
Features:
- 🌟 Hero Welcome: Inspiring landing area with company stats and a clear call-to-action.
- 📈 Key Metrics: Custom panels for loan growth, investments, new accounts, and goals.
- 📰 Economics, News & Events: Dynamic articles, company news, and an image-rich side feed with a modal for deep dives.
- 🗂️ Quick-Access Dashboard: Button-based navigation for Projects, Benefits, Reports, Helpdesk, Directory (each linked to real docs).
- 📝 Forms & Templates: Searchable, filterable panel for onboarding, payroll, SOPs, privacy, and more.
- 📅 Calendar & Events: Interactive mini-calendar (with prev/next), plus an upcoming events list.
- 💬 Social Corner: Company “social feed” for sharing quick posts and updates, with instant posting, comments, and likes (vanilla JS).
- 🎂 Birthdays: Automatic birthday list for team members with images.
- 👥 Careers Page: Team section, open roles, and detailed position cards with job types and contact info.
- 🤝 Trusted By: Display of trusted company/client logos.
- 📱 Fully Responsive: Grid and flex layouts with mobile and desktop optimizations, styled with TailwindCSS and custom utility classes.
- ♿ Accessible: Semantic HTML, keyboard navigation, and focus states.
Demo
Live Demo: https://techelevateoffice.netlify.app/
GitHub: https://github.com/Aishika3/Company_website_
Journey
This project was a fantastic end-to-end frontend challenge! Here’s what stood out:
Rapid Prototyping: Used TailwindCSS for fast, utility-driven development and consistent styling.
JavaScript Only: Kept everything to plain HTML, vanilla JS, and CSS—no frameworks or libraries—showing what’s possible with fundamentals.
Dynamic UI:
- Wrote custom code for modal logic, form search/filtering, calendar navigation, and dynamic social posts.
- Ensured user interactions like “post creation,” “read more” modal, and “load more” social posts were all instant and smooth.
Responsive Design:
- Built and tested the layout for desktop, tablet, and mobile.
- Used CSS grid/flexbox and media queries for adaptability.
Accessibility:
- Focused on keyboard navigation, proper aria-labels, and visible focus rings.
Challenges:
- Balancing many dashboard widgets without making the page feel cluttered.
- Ensuring forms, social feeds, and modals all work across devices.
- Achieving a professional feel while keeping the code lightweight and readable.
Tech Stack
- HTML5 + Semantic Tags
- TailwindCSS + Custom Styles
- Vanilla JavaScript (ES6+)
Credits
Solo project by aishika3.
License
MIT
Thanks for checking out TechElevate Office! 🚀 Feedback and suggestions are always welcome!