bootstrap 5 portfolio grid with category filter buttons

 <link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/5.3.0/css/bootstrap.min.css" rel="stylesheet">
    <style>
        body {
            background: #f8f9fa;
            padding: 60px 0;
        }

        .section-title {
            text-align: center;
            margin-bottom: 50px;
        }

        .section-title h2 {
            font-size: 2.5rem;
            font-weight: 700;
            color: #2c3e50;
        }

        .filter-buttons {
            text-align: center;
            margin-bottom: 40px;
        }

        .filter-btn {
            background: white;
            border: 2px solid #e0e0e0;
            color: #555;
            padding: 10px 25px;
            margin: 5px;
            border-radius: 50px;
            font-weight: 600;
            transition: all 0.3s ease;
            cursor: pointer;
        }

        .filter-btn:hover {
            background: #667eea;
            color: white;
            border-color: #667eea;
            transform: translateY(-2px);
        }

        .filter-btn.active {
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            color: white;
            border-color: transparent;
        }

        .portfolio-item {
            margin-bottom: 30px;
            transition: all 0.5s ease;
        }

        .portfolio-item.hide {
            display: none;
        }

        .portfolio-card {
            position: relative;
            overflow: hidden;
            border-radius: 15px;
            box-shadow: 0 5px 15px rgba(0,0,0,0.1);
            transition: transform 0.3s ease, box-shadow 0.3s ease;
            background: white;
        }

        .portfolio-card:hover {
            transform: translateY(-10px);
            box-shadow: 0 15px 35px rgba(0,0,0,0.2);
        }

        .portfolio-image {
            width: 100%;
            height: 300px;
            background-size: cover;
            background-position: center;
            transition: transform 0.5s ease;
        }

        .portfolio-card:hover .portfolio-image {
            transform: scale(1.1);
        }

        .portfolio-overlay {
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background: linear-gradient(135deg, rgba(102, 126, 234, 0.95) 0%, rgba(118, 75, 162, 0.95) 100%);
            display: flex;
            align-items: center;
            justify-content: center;
            flex-direction: column;
            opacity: 0;
            transition: opacity 0.3s ease;
        }

        .portfolio-card:hover .portfolio-overlay {
            opacity: 1;
        }

        .portfolio-overlay h4 {
            color: white;
            font-size: 1.5rem;
            font-weight: 700;
            margin-bottom: 10px;
        }

        .portfolio-overlay p {
            color: white;
            font-size: 0.9rem;
            opacity: 0.9;
        }

        .portfolio-info {
            padding: 20px;
        }

        .portfolio-info h5 {
            font-size: 1.2rem;
            font-weight: 600;
            color: #2c3e50;
            margin-bottom: 8px;
        }

        .portfolio-info p {
            color: #7f8c8d;
            font-size: 0.9rem;
            margin-bottom: 0;
        }

        .category-badge {
            display: inline-block;
            background: #e8eaf6;
            color: #667eea;
            padding: 5px 15px;
            border-radius: 20px;
            font-size: 0.8rem;
            font-weight: 600;
            margin-top: 10px;
        }
    </style>
    <div class="container">
        <div class="section-title">
            <h2>Our Portfolio</h2>
            <p class="text-muted">Check out our latest work across different categories</p>
        </div>

        <div class="filter-buttons">
            <button class="filter-btn active" data-filter="all">All</button>
            <button class="filter-btn" data-filter="web">Web Design</button>
            <button class="filter-btn" data-filter="mobile">Mobile Apps</button>
            <button class="filter-btn" data-filter="branding">Branding</button>
            <button class="filter-btn" data-filter="photography">Photography</button>
        </div>

        <div class="row" id="portfolio-grid">
            <!-- Portfolio Item 1 -->
            <div class="col-lg-4 col-md-6 portfolio-item" data-category="web">
                <div class="portfolio-card">
                    <div class="portfolio-image" style="background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);"></div>
                    <div class="portfolio-overlay">
                        <h4>E-Commerce Platform</h4>
                        <p>Modern online shopping experience</p>
                    </div>
                    <div class="portfolio-info">
                        <h5>E-Commerce Platform</h5>
                        <p>Complete redesign with enhanced UX</p>
                        <span class="category-badge">Web Design</span>
                    </div>
                </div>
            </div>

            <!-- Portfolio Item 2 -->
            <div class="col-lg-4 col-md-6 portfolio-item" data-category="mobile">
                <div class="portfolio-card">
                    <div class="portfolio-image" style="background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);"></div>
                    <div class="portfolio-overlay">
                        <h4>Fitness Tracker App</h4>
                        <p>iOS and Android application</p>
                    </div>
                    <div class="portfolio-info">
                        <h5>Fitness Tracker App</h5>
                        <p>Track workouts and nutrition</p>
                        <span class="category-badge">Mobile Apps</span>
                    </div>
                </div>
            </div>

            <!-- Portfolio Item 3 -->
            <div class="col-lg-4 col-md-6 portfolio-item" data-category="branding">
                <div class="portfolio-card">
                    <div class="portfolio-image" style="background: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%);"></div>
                    <div class="portfolio-overlay">
                        <h4>Tech Startup Branding</h4>
                        <p>Complete brand identity</p>
                    </div>
                    <div class="portfolio-info">
                        <h5>Tech Startup Branding</h5>
                        <p>Logo, guidelines, and collateral</p>
                        <span class="category-badge">Branding</span>
                    </div>
                </div>
            </div>

            <!-- Portfolio Item 4 -->
            <div class="col-lg-4 col-md-6 portfolio-item" data-category="web">
                <div class="portfolio-card">
                    <div class="portfolio-image" style="background: linear-gradient(135deg, #43e97b 0%, #38f9d7 100%);"></div>
                    <div class="portfolio-overlay">
                        <h4>Portfolio Website</h4>
                        <p>Personal brand showcase</p>
                    </div>
                    <div class="portfolio-info">
                        <h5>Portfolio Website</h5>
                        <p>Clean and minimal design</p>
                        <span class="category-badge">Web Design</span>
                    </div>
                </div>
            </div>

            <!-- Portfolio Item 5 -->
            <div class="col-lg-4 col-md-6 portfolio-item" data-category="photography">
                <div class="portfolio-card">
                    <div class="portfolio-image" style="background: linear-gradient(135deg, #fa709a 0%, #fee140 100%);"></div>
                    <div class="portfolio-overlay">
                        <h4>Product Photography</h4>
                        <p>Professional product shots</p>
                    </div>
                    <div class="portfolio-info">
                        <h5>Product Photography</h5>
                        <p>High-end commercial photos</p>
                        <span class="category-badge">Photography</span>
                    </div>
                </div>
            </div>

            <!-- Portfolio Item 6 -->
            <div class="col-lg-4 col-md-6 portfolio-item" data-category="mobile">
                <div class="portfolio-card">
                    <div class="portfolio-image" style="background: linear-gradient(135deg, #30cfd0 0%, #330867 100%);"></div>
                    <div class="portfolio-overlay">
                        <h4>Food Delivery App</h4>
                        <p>Seamless ordering experience</p>
                    </div>
                    <div class="portfolio-info">
                        <h5>Food Delivery App</h5>
                        <p>Quick and intuitive interface</p>
                        <span class="category-badge">Mobile Apps</span>
                    </div>
                </div>
            </div>

            <!-- Portfolio Item 7 -->
            <div class="col-lg-4 col-md-6 portfolio-item" data-category="branding">
                <div class="portfolio-card">
                    <div class="portfolio-image" style="background: linear-gradient(135deg, #a8edea 0%, #fed6e3 100%);"></div>
                    <div class="portfolio-overlay">
                        <h4>Coffee Shop Branding</h4>
                        <p>Warm and inviting identity</p>
                    </div>
                    <div class="portfolio-info">
                        <h5>Coffee Shop Branding</h5>
                        <p>Logo, packaging, and signage</p>
                        <span class="category-badge">Branding</span>
                    </div>
                </div>
            </div>

            <!-- Portfolio Item 8 -->
            <div class="col-lg-4 col-md-6 portfolio-item" data-category="photography">
                <div class="portfolio-card">
                    <div class="portfolio-image" style="background: linear-gradient(135deg, #ffecd2 0%, #fcb69f 100%);"></div>
                    <div class="portfolio-overlay">
                        <h4>Landscape Photography</h4>
                        <p>Nature and travel shots</p>
                    </div>
                    <div class="portfolio-info">
                        <h5>Landscape Photography</h5>
                        <p>Stunning natural vistas</p>
                        <span class="category-badge">Photography</span>
                    </div>
                </div>
            </div>

            <!-- Portfolio Item 9 -->
            <div class="col-lg-4 col-md-6 portfolio-item" data-category="web">
                <div class="portfolio-card">
                    <div class="portfolio-image" style="background: linear-gradient(135deg, #ff9a9e 0%, #fecfef 100%);"></div>
                    <div class="portfolio-overlay">
                        <h4>Restaurant Website</h4>
                        <p>Menu and reservation system</p>
                    </div>
                    <div class="portfolio-info">
                        <h5>Restaurant Website</h5>
                        <p>Elegant dining experience online</p>
                        <span class="category-badge">Web Design</span>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/5.3.0/js/bootstrap.bundle.min.js"></script>
    <script>
        // Filter functionality
        const filterButtons = document.querySelectorAll('.filter-btn');
        const portfolioItems = document.querySelectorAll('.portfolio-item');

        filterButtons.forEach(button => {
            button.addEventListener('click', () => {
                // Remove active class from all buttons
                filterButtons.forEach(btn => btn.classList.remove('active'));
                // Add active class to clicked button
                button.classList.add('active');

                const filterValue = button.getAttribute('data-filter');

                portfolioItems.forEach(item => {
                    if (filterValue === 'all') {
                        item.classList.remove('hide');
                        setTimeout(() => {
                            item.style.display = 'block';
                        }, 10);
                    } else {
                        if (item.getAttribute('data-category') === filterValue) {
                            item.classList.remove('hide');
                            setTimeout(() => {
                                item.style.display = 'block';
                            }, 10);
                        } else {
                            item.classList.add('hide');
                            setTimeout(() => {
                                item.style.display = 'none';
                            }, 300);
                        }
                    }
                });
            });
        });
    </script>