How to create a Category filter using Bootstrap Tab Panel

 <div class="portfolio-tabs">
            <ul class="nav nav-tabs" id="myTab" role="tablist">
                <li class="nav-item" role="presentation">
                    <button class="nav-link active" id="tab-1" 

data-bs-toggle="tab" data-bs-target="#tab-pane-1" type="button" 

role="tab" aria-controls="tab-pane-1" aria-selected="true">All</button>
                </li>
                    <?php   
                        $terms_array = array( 
                            'taxonomy' => 'portfolio-category', 
                            'parent'   => 0 
                        );
                        $portfolio_terms = get_terms($terms_array); 
                        $i = 2;
                        $j = 2;
                        $k = 2;
                        foreach($portfolio_terms as $term): ?>
                    <li class="nav-item" role="presentation">
                        <button class="nav-link" id="tab-<?=$k; $k++; ?>"

 data-bs-toggle="tab" data-bs-target="#tab-pane-<?=$i; $i++; ?>"

 type="button" role="tab" aria-controls="tab-pane-<?=$j; $j++; ?>"

 aria-selected="false"><?=$term->name; ?></button>

                    </li>
                    <?php endforeach; // End Term foreach; ?>
                    <?php wp_reset_postdata(); ?>

            </ul>
            <div class="tab-content" id="myTabContent">
                <div class="tab-pane fade show active" id="tab-pane-1" 

role="tabpanel" aria-labelledby="tab-1" tabindex="0">
                    <div class="portfolio-tab-block">
                        
                        <?php 
                    $post_args = array(
                        'posts_per_page' => -1,
                        'order' => 'DESC',
                        'post_type' => 'portfolio', 

                    );
                    $loop = new WP_Query($post_args);
                    while ($loop->have_posts()) : $loop->the_post(); ?>
                        <div class="portfolio-items">
                            <div class="portfolio-content">
                                <div class="portfolio-img">
                                    <a href="<?php the_permalink(); ?>">
                                        <img src="<?php the_post_thumbnail_url(); ?>"

 alt="<?php the_title(); ?>">
                                    </a>
                                </div>
                                <div class="portfolio-text">
                                    <h4><a href="<?php the_permalink(); ?>">

<?php the_title(); ?></a></h4>
                                    <?php  $terms = get_the_terms( get_the_ID(),

 'portfolio-category' );
                                        if ( !empty( $terms ) ){
                                            $term = array_shift( $terms ); ?> 
                                            <h6><a href="<?=get_term_link($term); ?> ">

<?=$term->name; ?></a></h6>
                                            <?php 
                                        }
                                    ?>
                                </div>
                                <a href="" class="portfolio-lightbox">
                                    <i class="fa fa-arrows-alt" aria-hidden="true"></i>
                                </a>
                            </div>
                        </div>
                    <?php
                        endwhile;
                        wp_reset_query();
                    ?>
                    </div>
                </div>
                <?php 
                $terms_array = array( 
                    'taxonomy' => 'portfolio-category',

                    'parent'   => 0 

                );
                  $projects_terms = get_terms($terms_array); 
                        $y=2;
                        $z=2;
                 foreach($projects_terms as $term):
                ?>
                <div class="tab-pane fade" id="tab-pane-<?=$y; $y++; ?>" role="tabpanel"

 aria-labelledby="tab-<?=$z; $z++; ?>" tabindex="0">
                    <div class="portfolio-tab-block">
                        <?php 
                            $post_args = array(
                                'posts_per_page' => -1,
                                'post_type' => 'portfolio', 
                                'tax_query' => array(
                                    array(
                                        'taxonomy' => 'portfolio-category', 

                                        'field' => 'slug', 

                                        'terms' => $term->slug,
                                    )
                                )
                            );
                            $loop = new WP_Query($post_args);
                            while ($loop->have_posts()) : $loop->the_post(); ?>
                                <div class="portfolio-items">
                                    <div class="portfolio-content">
                                        <div class="portfolio-img">
                                            <a href="<?php the_permalink(); ?>">
                                                <img src="<?php the_post_thumbnail_url(); ?>"

 alt="<?php the_title(); ?>">
                                            </a>
                                        </div>
                                        <div class="portfolio-text">
                                            <h4><a href="<?php the_permalink(); ?>">

<?php the_title(); ?></a></h4>
                                            <h6><a href="<?=get_term_link($term); ?> ">

<?=$term->name; ?></a></h6>
                                        </div>
                                        <a href="" class="portfolio-lightbox">
                                            <i class="fa fa-arrows-alt" aria-hidden="true">

</i>
                                        </a>
                                    </div>
                                </div>
                            <?php
                            endwhile;
                            wp_reset_query();
                        ?>
                    </div>
                
                
                </div>
                <?php endforeach; // Term Post foreach ?>
                <?php wp_reset_postdata(); ?>
              
            </div>