lint code and use badge

.eslintignore

@@ -1,4 +1,3 @@
 .nuxt
 node_modules
 .vercel
-.vscode

src/app.config.ts

@@ -22,7 +22,7 @@ export default defineAppConfig({
       base: 'duration-300 focus:outline-none focus-visible:outline-0 disabled:cursor-not-allowed disabled:opacity-75',
     },
     popover: {
-      container: "z-30",
+      container: 'z-30',
-    }
+    },
   },
 })

src/pages/talents.vue

@@ -112,11 +112,15 @@ function getColor() {
             </div>
           </div>
           <div class="flex gap-2 z-10">
-            <span
+            <UBadge
               v-for="category in talent.categories"
               :key="`${category.talentId}-${category.categoryId}`"
-              class="text-[.6rem] px-1 text-subtitle rounded-md ring-1 ring-zinc-900/5 dark:border dark:border-zinc-700/50 dark:bg-zinc-800 dark:ring-0"
+              color="primary"
-            >{{ category.category.name }}</span>
+              variant="soft"
+              size="xs"
+            >
+              {{ category.category.name }}
+            </UBadge>
           </div>
           <p class="relative z-10 mt-4 flex text-sm font-medium items-center" :class="getColor()">
             <UIcon name="i-ph-link-bold" />

src/pages/work.vue

@@ -44,11 +44,15 @@ const { data: projects } = await useProjects()
             {{ project.description }}
           </p>
           <div class="flex gap-2 z-10">
-            <span
+            <UBadge
               v-for="tag in project.tags"
               :key="tag"
-              class="text-[.7rem] px-0.5 text-subtitle rounded-md ring-1 ring-zinc-900/5 dark:border dark:border-zinc-700/50 dark:bg-zinc-800 dark:ring-0"
+              color="primary"
-            >{{ tag }}</span>
+              variant="soft"
+              size="xs"
+            >
+              {{ tag }}
+            </UBadge>
           </div>
           <p class="relative z-10 mt-6 flex text-sm font-medium items-center" :class="getColor()">
             <UIcon name="i-ph-link-bold" />