The latest articles on DEV Community by TADMON-YAYA FRANKLIN (@el_cajon_050ad87e9ee3d2a7). https://dev.to/el_cajon_050ad87e9ee3d2a7 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%2F3384935%2F2a47ac00-b5d9-42f0-9369-2be26f6eebec.jpg https://dev.to/el_cajon_050ad87e9ee3d2a7 en TADMON-YAYA FRANKLIN Sat, 26 Jul 2025 14:07:01 +0000 https://dev.to/el_cajon_050ad87e9ee3d2a7/company-connect-intranet-1ec https://dev.to/el_cajon_050ad87e9ee3d2a7/company-connect-intranet-1ec <h2> Demo Link: </h2> <p><a href="https://company-connect-v2.vercel.app/" rel="noopener noreferrer">https://company-connect-v2.vercel.app/</a></p> <h2> GitHub Repository: </h2> <p><a href="https://github.com/tadmonyayafranklin/COMPANY-CONNECT-V1" rel="noopener noreferrer">https://github.com/tadmonyayafranklin/COMPANY-CONNECT-V1</a> </p> <h2> Project Overview </h2> <p><strong>Company Connect</strong> is a <strong>fully responsive intranet website</strong> designed for corporate environments, featuring a <strong>shadcn-inspired UI</strong> with smooth animations and interactive components. It serves as a <strong>central hub</strong> for employees to access company announcements, directories, documents, and events. </p> <h3> Key Sections: </h3> <p>✅ <strong>Dashboard</strong> – Displays key metrics (employees, tasks, events, documents)<br><br> ✅ <strong>Team</strong> – Searchable and filterable list of employees<br><br> ✅ <strong>Announcements</strong> – Categorized (urgent, general, event) with timestamps<br><br> ✅ <strong>Upcoming Events</strong> – Calendar-style listing with dates<br><br> ✅ <strong>Quick Links</strong> – Easy access to essential resources<br><br> ✅ <strong>Mobile-First Design</strong> – Fully responsive with collapsible sidebar<br><br> ✅ <strong>Animations &amp; Micro-interactions</strong> – Fade-ins, hover effects, and smooth transitions </p> <h2> Technology Stack </h2> <div class="table-wrapper-paragraph"><table> <thead> <tr> <th>Category</th> <th>Technologies Used</th> </tr> </thead> <tbody> <tr> <td><strong>Frontend</strong></td> <td>HTML5, CSS3, JavaScript</td> </tr> <tr> <td><strong>UI/UX</strong></td> <td>Shadcn-inspired components, Font Awesome icons</td> </tr> <tr> <td><strong>Animations</strong></td> <td>CSS transitions, keyframe animations</td> </tr> <tr> <td><strong>Responsive</strong></td> <td>Flexbox, CSS Grid, Media Queries</td> </tr> </tbody> </table></div> <h2> Technical Implementation </h2> <h3> 1. Responsive Layout </h3> <ul> <li> <strong>Sidebar Navigation</strong> (collapsible on mobile) </li> <li> <strong>Dynamic Grid System</strong> (cards adjust based on screen size) </li> <li> <strong>Mobile-Optimized UI</strong> (touch-friendly buttons, stacked layouts) </li> </ul> <h3> 2. Shadcn-Inspired UI Components </h3> <ul> <li> <strong>Cards</strong> (stats, announcements, events) </li> <li> <strong>Buttons</strong> (primary, outline, icon buttons) </li> <li> <strong>Badges &amp; Indicators</strong> (urgent, general, event tags) </li> </ul> <h3> 3. JavaScript Functionality </h3> <ul> <li> <strong>Dynamic Content Loading</strong> (employee directory, announcements) </li> <li> <strong>Interactive Elements</strong> (search, filters, pagination) </li> <li> <strong>Sidebar Toggle</strong> (mobile-friendly navigation) </li> </ul> <h3> 4. Animations &amp; Micro-interactions </h3> <ul> <li> <strong>Fade-in Effects</strong> (content loads smoothly) </li> <li> <strong>Hover States</strong> (buttons, cards, links) </li> <li> <strong>Transition Effects</strong> (sidebar, dropdowns) </li> </ul> <h2> Challenges &amp; Solutions </h2> <div class="table-wrapper-paragraph"><table> <thead> <tr> <th>Challenge</th> <th>Solution</th> </tr> </thead> <tbody> <tr> <td><strong>Mobile Navigation</strong></td> <td>Implemented a collapsible sidebar with smooth transitions</td> </tr> <tr> <td><strong>Dynamic Data Loading</strong></td> <td>Used JavaScript to populate tables and cards without a backend</td> </tr> <tr> <td><strong>Cross-Browser Compatibility</strong></td> <td>Tested on Chrome, Firefox, and Safari with fallbacks</td> </tr> <tr> <td><strong>Performance Optimization</strong></td> <td>Minimized CSS/JS, used efficient animations</td> </tr> </tbody> </table></div> <h2> Future Enhancements </h2> <p>🔹 <strong>Dark Mode Toggle</strong><br><br> 🔹 <strong>Real-Time Notifications</strong> (WebSocket integration)<br><br> 🔹 <strong>User Authentication</strong> (Firebase/OAuth)<br><br> 🔹 <strong>Backend API Integration</strong> (Node.js/Express)<br><br> 🔹 <strong>Advanced Search Filters</strong> (department, role, location) </p> <h2> Conclusion </h2> <p><strong>Company Connect</strong> successfully delivers a <strong>modern, responsive intranet solution</strong> with a <strong>clean UI</strong> and <strong>engaging animations</strong>. It improves internal communication and accessibility for employees across all devices. </p> <p>This project helped me achieve strong <strong>frontend development skills</strong>, <strong>UI/UX best practices</strong>, and <strong>problem-solving abilities</strong>—making it a strong contender for any hackathon judging criteria. </p> <p>Thank you for your consideration! 🚀 </p> devchallenge frontendchallenge css javascript