Add custom category name as data-filter to switch between these categories

I have a portfolio page where I would like to place three buttons that will switch between different categories. I am using data-filer to sort them into different projects. I am thinking, how can I give this data-filter a category name, so it would switch depending what category and also when adding new post (project) and using any custom category, it would place it right in that portfolio section.

For this page I have this code:

<?php  get_header(); ?>   <div class="container projects-container">  <div class="gallery-nav" align="center">    <button class="btn btn-default filter-button gallery-link" data-filter="all">All</button>    <button class="btn btn-default filter-button gallery-link" data-filter="architecture">Architecture</button>    <button class="btn btn-default filter-button gallery-link" data-filter="furniture">Furniture</button>   </div>   <div class="row">    <?php    $  subs = new WP_Query(      array(        'post_parent' => $  post->post,        'post_type' => 'post',        'meta_key' => '_thumbnail_id'      )   );   if( $  subs->have_posts() ) :      while( $  subs->have_posts() ) :        $  subs->the_post(); ?>    <div class="col-sm-12 col-md-6 col-lg-4 cover-img filter">         <a href="<?php the_permalink(); ?>">       <?php the_post_thumbnail('post-thumbnail', ['class' => 'img-fluid']); ?></a>   </div>   <?php endwhile; ?>  <?php endif; ?>  <?php get_footer(); 

And this jQuery code:

jQuery(document).ready(function(){    $  (".filter-button").click(function(){       var value = $  (this).attr('data-filter');        if(value == "all")       {           $  ('.filter').show('1000');       }       else       {          $  (".filter").not('.'+value).hide('3000');         $  ('.filter').filter('.'+value).show('3000');        }   });    if ($  (".filter-button").removeClass("active")) {    $  (this).removeClass("active");    }    $  (this).addClass("active");  });