How to create a category filter for a portfolio site? I want to create a category filter similar to this website http://www.mypoorbrain.com/ (just a random website i found with the desired effect). Basically I want the categories to be displayed somewhere (All | Design | Web | Illustration) with the projects below. When a category is clicked, the projects shuffle to display just the projects with that category (not going to a new page).

I've looked through other category questions on here, and can't seem to find exactly how to do it (although I'm still pretty new to Craft, so I might not know what to look for with this).

Here is the code I have for the category loop (the filter)

Note: I have all of the categories I want (except for "All", not sure how to handle that) in the category group "Projects".

{# Create a category query with the 'group' parameter #}
{% set myCategoryQuery = craft.categories()
    .group('projects') %}

{# Fetch the categories #}
{% set categories = myCategoryQuery.all() %}

&lt;div class="categories-wrapper"&gt;
   {# Display the navigation #}
   {% nav category in categories %}
      &lt;a href="{{ category.url }}"&gt;&lt;h3&gt;{{ category.title }}&lt;/h3&gt;&lt;/a&gt;
   {% endnav %}
&lt;/div&gt;


And here is my current code for the project loop:

{% set projects = craft.entries.section('projects').all() %}
{% for entry in projects %}
&lt;div class="project-thumbnail-wrapper bg-darkBlue"&gt;
   &lt;a href="{{ entry.getUrl() }}"&gt;
      {% set projectImg = entry.featuredImage.one() %}
       &lt;img src="{{ projectImg.getUrl() }}" class="thumbnail"&gt;
       &lt;div class="overlay bg-orange"&gt; 
       &lt;/div&gt;
       &lt;h3 class="project-title"&gt;{{ entry.title }}&lt;/h3&gt;
       &lt;p class="project-category"&gt; Category &lt;/p&gt;
   &lt;/a&gt;
&lt;/div&gt;
{%endfor%}


So how can I accomplish this?
The site you linked to is using Isotope to achieve this effect. Isotope is simply a JavaScript filtering library - it's all front-end so really this has nothing to do with Craft, unless you want to load entries dynamically via AJAX.

(Most Isotope implementations I've seen simply load everything and then hide/show the relevant ones when clicking on filters... It depends how many items you have as to whether it's worth loading them in dynamically, but it's a lot simpler to load everything in one go).