The latest articles on DEV Community by APIPAWE KATOTO Daniel (@apipawe_katotodaniel_992). https://dev.to/apipawe_katotodaniel_992 https://media2.dev.to/dynamic/image/width=90,height=90,fit=cover,gravity=auto,format=auto/https:%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Fuser%2Fprofile_image%2F2864301%2F1da25f7b-256d-42c4-b523-8a1d1987a85f.png https://dev.to/apipawe_katotodaniel_992 en APIPAWE KATOTO Daniel Sun, 27 Jul 2025 17:15:02 +0000 https://dev.to/apipawe_katotodaniel_992/v-office-a-responsive-accessible-digital-workspace-5dgl https://dev.to/apipawe_katotodaniel_992/v-office-a-responsive-accessible-digital-workspace-5dgl <p><em>This is a submission for <a href="https://dev.to/challenges/frontend/axero">Frontend Challenge: Office Edition sponsored by Axero, Holistic Webdev: Office Space</a></em></p> <h2> What I Built </h2> <p><strong>V‑Office</strong> is a fully responsive and accessible intranet-style digital workspace built with <strong>React</strong>, <strong>Tailwind CSS</strong>, and <strong>React Router</strong>. The goal was to create a holistic office dashboard that feels modern, clean, and user-first — whether you're on a desktop, tablet, mobile phone, or even a smart TV.</p> <p>It includes:</p> <ul> <li>A custom <strong>welcome banner</strong> with an image background and animation</li> <li>A <strong>notification dropdown</strong> </li> <li>A <strong>responsive navbar</strong> with dropdown profile menu on mobile and tablet devices.</li> <li>Sections for <strong>Recent message, Recent Task, Announcements, Up coming Events, and Quick Resources.</strong> </li> <li>Full support for <strong>light/dark mode</strong>, mobile safe areas, and ARIA accessibility</li> <li>A creative layout that adapts across breakpoints, prioritizing UX and usability</li> </ul> <h2> Demo </h2> <p>🔗 <strong>Live Demo</strong>: <a href="https://v-office-seven.vercel.app" rel="noopener noreferrer">https://v-office-seven.vercel.app</a><br><br> 💻 <strong>GitHub Repo</strong>: <a href="https://github.com/Katotodan/v-office" rel="noopener noreferrer">https://github.com/Katotodan/v-office</a></p> <p>You can view the project in different viewports or emulate the screen to experience its responsive behavior.</p> <blockquote> </blockquote> <h2> Journey </h2> <p>This project was a deep dive into what makes internal tools truly <strong>usable and enjoyable</strong>. I focused on:</p> <ul> <li>✅ Designing for <strong>all screen sizes</strong> (even smart TVs)</li> <li>✅ Implementing <strong>dark mode</strong> and respecting system preferences</li> <li>✅ Animating content (like the welcome banner) with <strong>React state</strong> and transitions</li> <li>✅ Building accessible navigation menus with keyboard and screen reader support</li> <li>✅ Preventing scroll bugs when toggling menus on mobile</li> <li>✅ Ensuring <strong>notification menus</strong> only stay open when intended (and not on random <code>mousedown</code> triggers!)</li> </ul> <p>I also created 4 responsive banner background images for each device resolution, and structured the project in modular, clean components using React best practices.</p> <p>The biggest challenge was perfecting mobile behavior while keeping desktop animations and transitions fluid. I learned a lot about CSS <code>env()</code> safe areas, dynamic viewport units (<code>dvh</code>), and managing scroll locking in React.</p> <h2> 📄 License </h2> <p>This project is open-sourced under the MIT License.</p> <p>Thanks to Axero and DEV for this opportunity! 🚀 </p> devchallenge frontendchallenge css javascript