Working

src/components/Project.vue

@@ -1,14 +1,14 @@
 <template>
   <a :href="url" target="_blank">
-    <div class="rounded-lg dark:shadow-white shadow-xl h-92 w-full lg:w-84 text-left bg-gray-100 dark:bg-gray-800 transform hover:scale-103 duration-300 mb-8 lg:mb-0">
-      <div class="h-1/2 w-full h-2/5 project rounded-t-lg"
-           :style="{ backgroundImage: `url(${getCover})` }">
+    <div class="rounded-lg dark:shadow-white shadow-xl lg:h-92 w-full lg:w-84 text-left bg-gray-100 dark:bg-gray-800 transform hover:scale-103 duration-300 mb-8 lg:mb-0">
+      <div class="h-64 lg:h-1/2 w-full project rounded-t-lg"
+           :style="{ backgroundImage: `url(https://athena.arthurdanjou.fr/files/${cover})` }">
       </div>
-      <div class="h-1/2 p-4 flex flex-col justify-between">
+      <div class="lg:h-1/2 py-8 px-4 lg:p-4 flex flex-col justify-between">
         <div>
           <div class="flex space-x-2 mb-2">
             <div v-for="tag in tags">
-              <Tag :content="tag" :pill="false"/>
+              <Tag :content="tag.label.code" :pill="false"/>
             </div>
           </div>
           <h1 class="text-2xl font-bold">{{ title }}</h1>
@@ -20,15 +20,7 @@
 </template>
 
 <script lang="ts">
-import {computed, defineComponent} from "@nuxtjs/composition-api";
-
-interface ProjectProp {
-  title: string,
-  cover: string,
-  tags: Array<String>,
-  description: string,
-  url: string,
-}
+import {defineComponent} from "@nuxtjs/composition-api";
 
 export default defineComponent({
   name: "Project",
@@ -53,13 +45,6 @@ export default defineComponent({
       type: String,
       default: 'https://arthurdanjou.fr'
     }
-  },
-  setup(props: ProjectProp) {
-    const getCover = computed(() => require(`@/assets/images/projects/${props.cover}`))
-
-    return {
-      getCover
-    }
   }
 })
 </script>