Update style

app/components/Application.vue

@@ -12,32 +12,45 @@ defineProps<{
     <h1 class="font-bold text-xl mb-4">
       {{ title }}
     </h1>
-    <div v-if="apps" class="grid grid-cols-1 sm:grid-cols-3 md:grid-cols-5 gap-4">
+    <div v-if="apps" class="grid grid-cols-1 sm:grid-cols-3 md:grid-cols-4 gap-8">
-      <ULink v-for="app in apps" :key="app.name" :to="app.url" target="_blank">
+      <ULink v-for="app in apps" :key="app.name" :to="app.url" class="relative" target="_blank">
-        <UCard :ui="{ body: { base: 'space-y-4' } }">
+        <div v-show="app.primary === true" class="absolute flex h-4 w-4 -right-2 -top-2">
-          <div v-if="app.nuxt" class="text-xl flex gap-1 items-center">
+          <span class="animate-ping absolute inline-flex h-full w-full rounded-full bg-green-400 opacity-75" />
-            <UIcon :name="app.icon" />
+          <span class="relative inline-flex rounded-full h-4 w-4 bg-green-500" />
-            <div class="flex">
+        </div>
-              <p>{{ app.name }}</p>
+        <UCard
-              <p :class="`text-${app.color}-400 font-medium`">
+          :ui="{ body: { base: 'space-y-4' }, background: 'duration-300 bg-white hover:bg-gray-100 dark:bg-gray-900 dark:hover:bg-gray-800' }"
-                {{ app.nuxt }}
+        >
+          <div class="flex gap-4 items-center">
+            <UBadge :color="app.color" class="p-2" variant="soft">
+              <UIcon :name="app.icon" size="32" />
+            </UBadge>
+            <div class="flex flex-col gap-1">
+              <div v-if="app.nuxt" class="text-xl flex gap-1 items-center">
+                <div class="flex">
+                  <p>{{ app.name }}</p>
+                  <p :class="`text-${app.color}-400 font-medium`">
+                    {{ app.nuxt }}
+                  </p>
+                </div>
+              </div>
+              <div v-else :class="`text-${app.color}-400`" class="text-xl font-medium">
+                <p>{{ app.name }}</p>
+              </div>
+              <p v-if="app.description" class="text-sm text-neutral-500">
+                {{ app.description }}
               </p>
+              <div class="flex gap-2 mt-1">
+                <UBadge
+                  v-for="tag in app.tags"
+                  :key="tag.name"
+                  :color="tag.color"
+                  :label="tag.name"
+                  variant="soft"
+                />
+              </div>
             </div>
           </div>
-          <div v-else class="text-xl flex gap-1 items-center" :class="`text-${app.color}-400 font-medium`">
-            <UIcon :name="app.icon" />
-            <p>{{ app.name }}</p>
-          </div>
-          <div class="flex gap-1">
-            <UBadge
-              v-for="tag in app.tags"
-              :key="tag.name"
-              variant="outline"
-              :label="tag.name"
-              :color="tag.color"
-              :ui="{ rounded: 'rounded-full' }"
-            />
-          </div>
         </UCard>
       </ULink>
     </div>

app/pages/home.vue

@@ -9,7 +9,7 @@ onMounted(() => {
 })
 
 const apps = await queryContent('/').find()
-const nuxt = apps.filter(app => app._dir === 'nuxt')
+const dev = apps.filter(app => app._dir === 'dev')
 const perso = apps.filter(app => app._dir === 'perso')
 const maths = apps.filter(app => app._dir === 'maths')
 const social = apps.filter(app => app._dir === 'social')
@@ -28,7 +28,7 @@ const social = apps.filter(app => app._dir === 'social')
     <div v-if="apps" class="space-y-12">
       <Application :apps="perso" title="Personal" />
       <Application :apps="social" title="Social" />
-      <Application :apps="nuxt" title="Nuxt" />
+      <Application :apps="dev" title="Development" />
       <Application :apps="maths" title="Mathematics" />
     </div>
   </main>

content/dev/icones.json

@@ -0,0 +1,16 @@
+{
+  "name": "Icones",
+  "url": "https://icones.netlify.app/",
+  "tags": [
+    {
+      "name": "Dev",
+      "color": "blue"
+    },
+    {
+      "name": "Doc",
+      "color": "purple"
+    }
+  ],
+  "icon": "i-simple-icons:iconify",
+  "color": "gray"
+}

content/dev/nuxt-content.json

@@ -12,6 +12,6 @@
       "color": "purple"
     }
   ],
-  "icon": "i-logos:nuxt-icon",
+  "icon": "i-simple-icons:nuxtdotjs",
   "color": "green"
 }

content/dev/nuxt-hub.json

@@ -12,6 +12,6 @@
       "color": "purple"
     }
   ],
-  "icon": "i-logos:nuxt-icon",
+  "icon": "i-simple-icons:nuxtdotjs",
   "color": "green"
 }

content/dev/nuxt-labs.json

@@ -12,6 +12,6 @@
       "color": "purple"
     }
   ],
-  "icon": "i-logos:nuxt-icon",
+  "icon": "i-simple-icons:nuxtdotjs",
-  "color": "zinc"
+  "color": "gray"
 }

content/dev/nuxt-studio.json

@@ -12,6 +12,6 @@
       "color": "purple"
     }
   ],
-  "icon": "i-logos:nuxt-icon",
+  "icon": "i-simple-icons:nuxtdotjs",
   "color": "green"
 }

content/dev/nuxt-ui.json

@@ -12,6 +12,6 @@
       "color": "purple"
     }
   ],
-  "icon": "i-logos:nuxt-icon",
+  "icon": "i-simple-icons:nuxtdotjs",
   "color": "green"
 }

content/dev/nuxt.json

@@ -11,6 +11,6 @@
       "color": "purple"
     }
   ],
-  "icon": "i-logos:nuxt-icon",
+  "icon": "i-simple-icons:nuxtdotjs",
   "color": "green"
 }

content/maths/mathdf.json

@@ -8,5 +8,5 @@
     }
   ],
   "icon": "i-ph:math-operations-duotone",
-  "color": "stone"
+  "color": "gray"
 }

content/perso/artsite.json

@@ -1,5 +1,7 @@
 {
   "name": "ArtSite",
+  "primary": true,
+  "description": "Mon site personnel",
   "url": "https://arthurdanjou.fr/",
   "tags": [
     {

content/social/github.json

@@ -12,5 +12,5 @@
     }
   ],
   "icon": "i-ph:github-logo-duotone",
-  "color": "black"
+  "color": "gray"
 }

content/social/x.json

@@ -12,5 +12,5 @@
     }
   ],
   "icon": "i-ph:x-logo-duotone",
-  "color": "black"
+  "color": "gray"
 }

types/types.ts

@@ -1,7 +1,9 @@
 import type { ParsedContent } from '@nuxt/content'
 
 export interface AppType extends ParsedContent {
+  primary?: boolean
   name: string
+  description?: string
   nuxt?: string
   url: string
   icon: string