This is a submission for Frontend Challenge: Office Edition sponsored by Axero, Holistic Webdev: Office Space
What I Built
I created a modern, responsive intranet homepage for a fictional company called NovaTech Solutions. My goal was to design a clean and accessible digital workspace where employees can quickly access essential resources, stay updated on announcements, participate in internal polls, and view important information like upcoming events and weather updates.
The intranet layout includes:
📢 An animated announcement ticker
📅 Upcoming events listing
🎉 Employee of the month spotlight
📌 Quick links to HR documents and directories
📊 A live voting poll widget (with localStorage persistence)
🌦️ A real-time weather widget powered by a public API
📱 Fully responsive design for desktop and mobile devices
🎨 Smooth button animations and transitions for a polished UX
My focus was on delivering a workspace that’s lightweight, intuitive, and functional — using vanilla HTML, CSS, and JavaScript without frameworks.
Demo
🔗 Live Demo on CodePen (replace with your actual CodePen or Netlify link)
Github Link- https://github.com/Praneetb2929/novatech-intranet
Journey
This was a fun and valuable challenge where I revisited fundamental frontend skills without relying on frameworks like React or Vue. Here’s a bit about my process:
I first mapped out the desired components for the intranet homepage and created a text-based wireframe.
Developed the base HTML structure for layout clarity.
Styled the layout using flexbox and CSS media queries for responsive behavior.
Added an animated announcement ticker using CSS keyframes to enhance the dynamic feel of the page.
Built a poll widget that stores votes using the browser’s localStorage, ensuring data persists across page refreshes.
Integrated a weather widget fetching real-time temperature data via the Open-Meteo API — no API key required.
Applied smooth hover animations and button transitions for a polished user experience.
Focused on clean, readable, and modular code to make future enhancements easier.
What I learned:
The power of simple, modern vanilla CSS and JS for building lightweight apps.
Integrating public APIs for dynamic content without frameworks.
Handling localStorage-based state management in plain JS.
Reinforcing accessibility and responsive design patterns from scratch.
Highlight:
The real-time poll system with live vote count display and persistent storage was particularly satisfying to build using simple event listeners and localStorage.
⚙️ Technologies Used:
HTML5
CSS3 (Flexbox, media queries, keyframes animation)
Vanilla JavaScript (fetch API, localStorage)
Open-Meteo API (for live weather data)
📖 License
This project is open for use under the MIT License.
