The template for displaying cpt with isotope, bootstrap 4 and acf

wordpress-template-custom-isotope.php

<?php
/**
 * The template for displaying cpt with isotope, bootstrap 4 and acf
 * Template Name: Custom Isotope
 *
 * @package wordpress
 */

get_header();
?>

   <section id="project-header">
       <h1 class="text-center">Projects</h1>
   </section>

    <section id="word-filters">
        <div class="container">
            <div class="row justify-content-start justify-content-md-around">

                    <?php
                        $terms = get_terms( array (
                            'taxonomy' => 'project-category',
                            'hide_empty' => false,
                        ));
                    ?>

                    <?php $term = get_queried_object(); ?>
                    
                    <div class="col-6 col-md-3 col-lg-2">
                        <button onclick="" class="text-uppercase filter-button" data-filter-by="*">All</button>
                    </div>

                    <?php foreach ($terms as $term): ?>

                        <?php
                            $name = $term->name;
                            $slug = $term->slug;
                            $colour = get_field('colour', $term); 
                        ?>
                        
                        <div class="col-6 col-md-3 col-lg-2">
                            <button onclick="" class="text-uppercase filter-button" data-filter-by=".<?php echo $slug; ?>" style="background-color: <?php echo $colour; ?>;"><?php echo $name; ?></button>
                        </div>

                    <?php endforeach; ?>

            </div>
        </div>
    </section>

    <section id="project-posts">
        <div class="container">
            <div class="row grid">

            <?php 
                $args = array(
                    'posts_per_page'   => -1,
                    'orderby'          => 'menu_order',
                    'order'            => 'ASC',
                    'post_type'        => 'projects',
                    'post_status'      => 'publish'
                );
                    
                $projects = get_posts( $args ); ?>
                <?php $term = get_queried_object(); ?>

                <?php foreach ( $projects as $post ) : setup_postdata( $post ); ?>

                <?php
                    $title = get_the_title();
                    $excerpt = get_the_excerpt();
                    $pageLink = get_the_permalink();
                    $category = get_the_terms( $post->ID, 'project-category' );
                    $colour = get_field('colour', $category[0]);
                ?>

                    <div class="col-12 col-md-6 col-lg-4 grid-item <?php echo $category[0]->slug; ?>">
                        <a class="project-card-link" href="<?php echo $pageLink; ?>">
                            <div class="project-card">
                                <?php the_post_thumbnail(); ?>
                                <h2 class="text-uppercase"><?php echo $title; ?></h2>
                                <div class="excerpt-box">
                                    <p><?php echo $excerpt; ?></p>
                                </div>
                                <div class="date-box"><?php the_time( 'jS F Y' ); ?></div>
                                <div class="cat-box category" style="background-color: <?php echo $colour; ?>;"><?php echo $category[0]->name;?></div>
                            </div>
                        </a>
                    </div>

                <?php endforeach; ?>

             <?php wp_reset_postdata(); ?>

            </div>
        </div>
    </section>

<?php
get_footer();