Add project type selection

assets/js/project-wall.js

@@ -0,0 +1,24 @@
+function updateProjectWall(category) {
+
+    // Check if all projects should be shown
+    var showAll = category == "all";
+
+    // Get the wrapper element
+    var wallWrapper = document.getElementById("project-grid");
+
+    wallWrapper.querySelectorAll(".home-project").forEach((project) => {
+
+        // Determine if the project should be shown
+        let types = project.dataset.types.split(",");
+        if (showAll || types.includes(category)){
+            project.classList.remove("hidden");
+        } else {
+            project.classList.add("hidden");
+        }
+
+    });
+
+    // Refresh the wall
+    orderProjectGrid();
+
+}

assets/js/projects.gen.json

@@ -0,0 +1,3 @@
+---
+---
+{{site.data.projects | jsonify}}

index.html

@@ -129,11 +129,27 @@ uses:
 
                     <div style="padding-top:3rem;"></div>
 
+                    <div style="margin:auto;width:max-content;max-width:100%;">
+                        <button style="margin:5px;" type="button" class="btn btn-outline-info btn-sm"
+                            onclick="updateProjectWall('all');">All</button>
+                        <button style="margin:5px;" type="button" class="btn btn-outline-info btn-sm"
+                            onclick="updateProjectWall('app');">Apps</button>
+                        <button style="margin:5px;" type="button" class="btn btn-outline-info btn-sm"
+                            onclick="updateProjectWall('web');">Web</button>
+                        <button style="margin:5px;" type="button" class="btn btn-outline-info btn-sm"
+                            onclick="updateProjectWall('plugin');">Plugins</button>
+                        <button style="margin:5px;" type="button" class="btn btn-outline-info btn-sm"
+                            onclick="updateProjectWall('library');">Libraries</button>
+                        <button style="margin:5px;" type="button" class="btn btn-outline-info btn-sm"
+                            onclick="updateProjectWall('game');">Games</button>
+                    </div>
+
                     <div class="row" id="project-grid">
 
                         {% for project in site.data.projects %}
                         <div class="col-sm-4 project-item">
-                            <div class="card home-project">
+                            <div class="card home-project"
+                                data-types="{% for type in project.types %}{{type}},{% endfor %}">
                                 {% if project.hero %}
                                 <img src="{{project.hero.img_src}}" class="card-img-top" alt="{{project.title}}"
                                     loading="auto">
@@ -196,6 +212,8 @@ uses:
         setTimeout(orderProjectGrid, 5000);
     </script>
 
+    <script src="/assets/js/project-wall.js"></script>
+
 
     <!-- Dotdav -->
     <!-- <script src="{{site.baseurl}}/assets/js/easyScrollDots.min.js"></script>