WL-24 - Add more project + separate json db from Grid Component

components/Grid.vue

@@ -2,9 +2,42 @@
   <div id="projects" class="container mx-auto p-8 sm:p-16">
     <h2 class="text-4xl mb-6">Projects</h2>
     <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
+      <!-- Filters Nav -->
+      <ul class="flex col-span-1 md:col-span-2 lg:col-span-3">
+        <li class="mr-3">
+          <button
+            :class="'btn ' + (filter === 'all' ? 'btn-active' : 'btn-ghost')"
+            @click="() => (filter = 'all')"
+          >
+            All
+          </button>
+        </li>
+        <li class="mr-3">
+          <button
+            :class="
+              'btn ' + (filter === 'freelance' ? 'btn-active' : 'btn-ghost')
+            "
+            @click="filter = 'freelance'"
+          >
+            Freelance
+          </button>
+        </li>
+        <li class="mr-3">
+          <button
+            :class="
+              'btn ' + (filter === 'company' ? 'btn-active' : 'btn-ghost')
+            "
+            @click="() => (filter = 'company')"
+          >
+            Company
+          </button>
+        </li>
+      </ul>
+
+      <!-- Grid -->
       <div
         :key="index"
-        v-for="(project, index) in projects"
+        v-for="(project, index) in filteredData"
         class="max-w-sm rounded overflow-hidden shadow-lg hover:shadow-2xl transition-shadow duration-300 ease-in-out"
       >
         <a
@@ -13,7 +46,7 @@
           target="_blank"
         >
           <img
-            class="w-full"
+            class="w-full grid-item-thumbnail"
             :src="require(`~/assets/images/${project.img}`)"
             :alt="project.title"
           />
@@ -43,45 +76,44 @@
 </template>
 
 <script>
+import projects from "../content/projects.json";
+
 export default {
+  computed: {
+    filteredData() {
+      if (this.filter === "all") return this.data;
+
+      return this.data.filter(o => o.type === this.filter);
+    }
+  },
   data() {
     return {
-      projects: [
-        {
-          img: "aluna-festival.png",
-          link: "aluna-festival.fr",
-          title: "Aluna Festival",
-          subtitle: "2017 / 2018 / 2019 / 2020",
-          tags: ["wordpress", "sketch", "amazonS3", "acf", "svg"]
-        },
-        {
-          img: "le-tube-les-bourdaines.png",
-          link: "le-tube-bourdaines.com",
-          title: "Le Tube - Les Bourdaines",
-          tags: ["wordpress", "sketch", "svg", "acf"]
-        },
-        {
-          img: "modjo-production.png",
-          link: "modjo-production.com",
-          title: "Modjo Production",
-          tags: ["wordpress", "sketch", "acf", "svg"]
-        },
-        {
-          img: "olac-festival.png",
-          link: "olac-festival.fr",
-          title: "O'Lac Festival",
-          tags: ["wordpress", "sketch", "svg", "acf"]
-        },
-        {
-          img: "jouvanceau.png",
-          link: "jouvanceau.com",
-          title: "Jouvanceau",
-          tags: ["wordpress", "photoshop", "svg", "acf"]
-        }
-      ]
+      data: projects,
+      filter: "all"
     };
   }
 };
 </script>
 
-<style></style>
+<style>
+.grid-item-thumbnail {
+  max-height: 200px;
+  object-fit: cover;
+}
+
+.btn {
+  @apply inline-block border rounded py-1 px-3;
+}
+
+.btn-active {
+  @apply border-blue-500 bg-blue-500 text-white;
+}
+
+.btn-ghost {
+  @apply border-white text-blue-500;
+}
+
+.btn-ghost:hover {
+  @apply border-gray-200 bg-gray-200;
+}
+</style>