Implement Works images

components/HomeLink.vue

@@ -1,7 +1,7 @@
 <template>
   <nuxt-link :to="link">
     <div
-      class="group home-link h-full duration-500 cursor-pointer flex flex-row justify-between py-3 w-full md:w-96 items-center"
+      class="home-link h-full duration-500 cursor-pointer flex flex-row justify-between py-3 w-full md:w-96 items-center"
       :class="getColor"
     >
       <div class="ml-4">
@@ -9,7 +9,7 @@
           {{ $t(title) }}
           <slot />
         </h1>
-        <p class="group-hover:dark:text-white w-5/6 text-gray-900 dark:text-dark-100 text-justify duration-300">{{ $t(description) }}</p>
+        <p class="w-5/6 text-gray-900 dark:text-dark-100 text-justify duration-300">{{ $t(description) }}</p>
       </div>
       <div class="mr-10 arrow duration-300">
         <svg class="inline icon" height="25" width="25" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
@@ -60,6 +60,9 @@ export default {
 
 <style scoped lang="scss">
 .home-link:hover {
+  p {
+    @apply dark:etxt-white
+  }
   .arrow {
     transform: translateX(15px);
   }

components/Skill.vue

@@ -29,6 +29,8 @@ export default {
   computed: {
     getColor() {
       switch (this.color) {
+        case 'red':
+          return 'hover:bg-red-400'
         case 'orange':
           return 'hover:bg-orange-400'
         case 'purple':

components/Work.vue

@@ -3,7 +3,7 @@
        :class="getColor">
     <div class="w-full h-full flex flex-col justify-center items-center">
       <div class="text-center">
-        <img alt="Project Img" class="rounded-md" width="150" :src="'http://localhost:5555/files/' + cover">
+        <img alt="Project Img" class="rounded-md" width="150" :src="require(`@/assets/img/skills/${cover}.png`)">
       </div>
       <div class="text-center">
         <h1 class="md:text-2xl text-lg font-bold">{{ title }}</h1>

content/skills.json

@@ -39,7 +39,13 @@
     "title": "VueJs",
     "color": "emerald",
     "cover": "VueJs",
-    "slug": "VueJs"
+    "slug": "vueJs"
+  },
+  {
+    "title": "AdonisJs",
+    "color": "black",
+    "cover": "AdonisJs",
+    "slug": "adonisjs"
   },
   {
     "title": "Html",