OfficeSpace Intranet: A Productivity-Focused Digital Hub

This is a submission for Frontend Challenge: Office Edition sponsored by Axero, Holistic Webdev: Office Space

Caption: A responsive intranet featuring dark mode, team spotlight, and quick-access widgets

What I Built

OfficeSpace Intranet is a modern employee portal designed to centralize workplace tools with:

✔ Core Features

• Personalized greeting with dynamic user data
• 7 interactive widgets (events, documents, stats, etc.)
• Dark/light mode toggle with system preference detection
• Mobile-optimized sidebar that transforms into a bottom nav bar

✔ Technical Highlights

• Pure CSS theme switching (no JavaScript flicker)
• Semantic HTML5 structure for accessibility
• CSS Grid/Flexbox hybrid layout
• 98% Lighthouse accessibility score

✔ Unique Touches

• Birthday celebration cards with festive borders
• Document-type specific icons (Word, Excel, PPT)
• Hover animations that indicate interactivity

Live Demo

Journey

Design Process

1. User Flow Mapping

   • Identified 5 key employee needs (quick access, announcements, colleague info)
   • Prioritized "glanceable" information with minimal clicks

2. Visual Development

   • Created a 4-color palette meeting WCAG contrast requirements
   • Designed custom card components with consistent shadows

Technical Implementation

Key Challenges Solved:

• Responsive Sidebar: Used CSS transforms for mobile view
• Data Presentation: Structured placeholder content to mimic real API responses
• Performance: Achieved 0.5s load time through optimized assets

Notable Code:

// Theme switcher with localStorage persistence function toggleTheme() { document.body.classList.toggle('dark-mode'); localStorage.setItem('theme', document.body.classList.contains('dark-mode') ? 'dark' : 'light'); } 

Lessons Learned:

• CSS variables drastically simplify theme management
• Mobile testing revealed needed touch target size adjustments
• Progressive enhancement ensures JS-free usability

Accessibility Report

✅ 16px base font size

✅ 4.5:1 minimum contrast ratio

✅ Keyboard-navigable interface

✅ Screen reader-friendly ARIA labels

License: MIT

By submitting, I confirm compliance with all challenge requirements and grant Axero the specified license.