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

assets/css/tailwind.css

@@ -0,0 +1,6 @@
+/* purgecss start ignore */
+@tailwind base;
+@tailwind utilities;
+/* purgecss end ignore */
+
+@tailwind components;

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: [
+      data: projects,
-        {
+      filter: "all"
-          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"]
-        }
-      ]
     };
   }
 };
 </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>

content/projects.json

@@ -0,0 +1,92 @@
+[
+  {
+    "img": "aluna-festival.png",
+    "link": "aluna-festival.fr",
+    "title": "Aluna Festival",
+    "subtitle": "2017 / 2018 / 2019 / 2020",
+    "tags": ["wordpress", "sketch", "amazonS3", "acf", "svg"],
+    "type": "freelance"
+  },
+  {
+    "img": "le-tube-les-bourdaines.png",
+    "link": "le-tube-bourdaines.com",
+    "title": "Le Tube - Les Bourdaines",
+    "tags": ["wordpress", "sketch", "svg", "acf"],
+    "type": "freelance"
+  },
+  {
+    "img": "modjo-production.png",
+    "link": "modjo-production.com",
+    "title": "Modjo Production",
+    "tags": ["wordpress", "sketch", "acf", "svg"],
+    "type": "freelance"
+  },
+  {
+    "img": "olac-festival.png",
+    "link": "olac-festival.fr",
+    "title": "O'Lac Festival",
+    "tags": ["wordpress", "sketch", "svg", "acf"],
+    "type": "freelance"
+  },
+  {
+    "img": "jouvanceau.png",
+    "link": "jouvanceau.com",
+    "title": "Jouvanceau",
+    "tags": ["wordpress", "hotoshop", "svg", "acf"],
+    "type": "freelance"
+  },
+  {
+    "img": "ecotrade.png",
+    "link": "catalyticconverterrecycling.com",
+    "title": "Ecotrade Group",
+    "tags": [
+      "symfony",
+      "php",
+      "js",
+      "stripeApi",
+      "webhook",
+      "cron",
+      "scrum",
+      "b2b",
+      "i18n",
+      "e-commerce"
+    ],
+    "type": "company"
+  },
+  {
+    "img": "tpp.png",
+    "link": "outsourcify.net/portfolio/real-estate-development-promotion-crm",
+    "title": "Thai Property Promotion",
+    "tags": [
+      "vue.js",
+      "nuxt.js",
+      "php",
+      "antd.design",
+      "js",
+      "cron",
+      "i18n",
+      "scrum",
+      "crm"
+    ],
+    "type": "company"
+  },
+  {
+    "img": "xma.png",
+    "link": "outsourcify.net/portfolio/bi-sales-reporting-web-and-mobile-app",
+    "title": "BI Sales Reporting App",
+    "tags": [
+      "vue.js",
+      "nuxt.js",
+      "php",
+      "ant.design",
+      "js",
+      "cron",
+      "i18n",
+      "scrum",
+      "crm",
+      "bi",
+      "chartjs"
+    ],
+    "type": "company"
+  }
+]