Abu Taher Siddik

Posted on Jul 6

ConnectHub: Modern Intranet Dashboard with CSS Art 🎨

#devchallenge #frontendchallenge #css #javascript

Frontend Challenge Holistic Webdev Submission

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

What I Built

I'm excited to share my submission for the CSS Art Challenge! ConnectHub is a modern intranet dashboard designed with a focus on clean aesthetics, smooth animations, and responsive design. This project showcases what's possible with modern CSS techniques while maintaining practical functionality.

Live Demo: ConnectHub Demo
GitHub Repository: ConnectHub Repository

Features

1. Modern Dashboard Layout

Responsive grid system
Clean, modern UI components
Interactive widgets and cards

2. Real-time Elements

Live UTC clock (YYYY-MM-DD HH:MM:SS)
Dynamic calendar
Activity feeds

3. Interactive Components

Dropdown menus
Notification system
User profile management

4. CSS Animations

Smooth transitions
Hover effects
Loading states
Timeline animations

Tech Stack

HTML5
CSS3 (Pure CSS, no frameworks)
Vanilla JavaScript
Font Awesome Icons

Setup Instructions

Clone the repository:

git clone https://github.com/imabutahersiddik/connecthub.git
cd connecthub

Project Structure:

connecthub/
├── assets/
│   └── logo.svg
├── index.html
├── styles.css
└── script.js

Open index.html in a modern web browser:

# If you have Python installed
python -m http.server 8000

# If you have Node.js installed
npx serve

Access the dashboard at http://localhost:8000

Screenshots

Dashboard View

Calendar & Events

Mobile View

CSS Highlights

Modern Card Design

.widget {
    background-color: var(--widget-bg);
    border-radius: 0.75rem;
    padding: 1.5rem;
    box-shadow: var(--shadow-sm);
    transition: all 0.3s ease;
}

.widget:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-md);
}

Timeline Animation

.events-timeline::before {
    content: '';
    position: absolute;
    left: 4.5rem;
    top: 0;
    bottom: 0;
    width: 2px;
    background: linear-gradient(
        to bottom,
        var(--border-color) 0%,
        var(--border-color) 100%
    );
    opacity: 0.5;
}

Responsive Design

@media (max-width: 768px) {
    .dashboard-grid {
        grid-template-columns: 1fr;
    }

    .header {
        flex-direction: column;
        gap: 1rem;
    }
}

Performance Optimizations

CSS Custom Properties for theme management
Optimized animations for performance
Lazy loading for images
Efficient DOM manipulation

Accessibility Features

ARIA labels
Semantic HTML
Keyboard navigation
High contrast support

Browser Support

Chrome (latest)
Firefox (latest)
Safari (latest)
Edge (latest)

Future Improvements

Add dark mode toggle
Implement drag-and-drop for cards
Add more interactive widgets
Enhance mobile gestures

Contributing

Feel free to contribute to this project! Here's how:

Fork the repository
Create your feature branch (git checkout -b feature/AmazingFeature)
Commit your changes (git commit -m 'Add some AmazingFeature')
Push to the branch (git push origin feature/AmazingFeature)
Open a Pull Request

Acknowledgments

Thanks to Allah for the blessings and inspiration
Font Awesome for the beautiful icons
The dev.to community for the support

License

This project is licensed under the MIT License - see the LICENSE file for details.

Connect With Me

Remember to show some love if you found this helpful! 💖

css #webdev #javascript #design

DEV Community