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