Update skill design

src/components/Banner.vue

@@ -9,7 +9,7 @@
         <span class="text-gray-600 dark:text-gray-400">{{ $t('home.banner.student.main') }}</span> <strong>{{ $t('home.banner.student.strong') }} 🎓</strong>.
       </h2>
       <div class="flex flex-col md:flex-row select-none mt-4 text-4xl md:text-5xl text-gray-800 mb-10 dark:text-gray-300">
-        <span id="develop" class="color blue">{{ $t('home.banner.color.develop') }}</span>
+        <span id="develop" class="z-index-3 color blue">{{ $t('home.banner.color.develop') }}</span>
         <span id="publish" class="color">{{ $t('home.banner.color.publish') }}</span>
         <span id="improve" class="color">{{ $t('home.banner.color.improve') }}</span>
       </div>
@@ -42,7 +42,9 @@ export default defineComponent({
         const color = COLORS[CURRENT]
         const new_color = COLORS[CURRENT === COLORS.length -1 ? 0 : CURRENT + 1]
         document.getElementById(new_color.name)!.classList.toggle(new_color.color)
+        document.getElementById(new_color.name)!.classList.toggle('z-index-3')
         setTimeout(() => document.getElementById(color.name)!.classList.toggle(color.color), 0)
+        setTimeout(() => document.getElementById(color.name)!.classList.toggle('z-index-3'), 0)
         CURRENT === COLORS.length - 1 ? CURRENT = 0 : CURRENT++
       }, 2000)
     })

src/components/EnvListItem.vue

@@ -2,7 +2,7 @@
   <li>
     {{ $t(title) }}:
     <div class="z-index-3 inline">
-      <a data-blobity-magnetic="false" class="z-index-3 text-red-500 dark:text-amber-400 font-medium" v-if="link" :href="link" target="_blank">{{ content }}</a>
+      <a data-blobity-magnetic="false" class="text-red-500 dark:text-amber-400 font-medium" v-if="link" :href="link" target="_blank">{{ content }}</a>
       <span v-else>{{ content }}</span>
     </div>
   </li>

src/components/MobileNavbar.vue

@@ -1,24 +1,24 @@
 <template>
   <div
-    class="xl:hidden fixed top-auto bottom-0 w-full md:w-2/3 md:left-1/2 p-4 transition-all duration-500 transform md:-translate-x-1/2"
+    class="z-index-3 xl:hidden fixed top-auto bottom-0 w-full md:w-2/3 md:left-1/2 p-4 transition-all duration-500 transform md:-translate-x-1/2"
     :class="{'-translate-y-8 translate-x-10/12 sm:translate-x-1/2 xl:translate-x-0': opened}"
   >
     <nav class="flex justify-evenly py-4 bg-gray-200 dark:bg-gray-700 rounded-3xl dark:text-white text-sm overflow-hidden">
-      <nuxt-link to="/" class="relative font-medium">
+      <nuxt-link data-no-blobity to="/" class="relative font-medium">
         <HomeIcon :active="isWindow('')"/>
       </nuxt-link>
-      <nuxt-link to="/about" class="relative font-medium">
+      <nuxt-link data-no-blobity to="/about" class="relative font-medium">
         <UserIcon :active="isWindow('/about')"/>
       </nuxt-link>
-      <nuxt-link to="/blog" class="relative font-medium">
+      <nuxt-link data-no-blobity to="/blog" class="relative font-medium">
         <BookIcon :active="isWindow('/blog')"/>
       </nuxt-link>
-      <nuxt-link to="/projects" class="relative font-medium">
+      <nuxt-link data-no-blobity to="/projects" class="relative font-medium">
         <LightbulbIcon :active="isWindow('/projects')"/>
       </nuxt-link>
-      <button @click='toggleMenu' class="font-medium cursor-pointer">
-        <CrossIcon v-if="opened" />
-        <MenuIcon v-else :type="getMenuIconType"/>
+      <button data-no-blobity @click='toggleMenu' class="font-medium cursor-pointer">
+        <CrossIcon data-no-blobity v-if="opened" />
+        <MenuIcon data-no-blobity v-else :type="getMenuIconType"/>
       </button>
     </nav>
   </div>

src/components/Skill.vue

@@ -1,11 +1,14 @@
 <template>
-  <div class="mb-3 mr-2 p-1 md:p-2 h-32 w-32 border-gray-900 dark:border-dark-200 border-2 duration-300 rounded-3xl hover:bg-opacity-25" :class="getColor">
-    <div class="w-full h-full flex flex-col justify-center items-center">
-      <div>
-        <img class="rounded-sm" :alt="`Skill ${name} Image`" :src="`https://athena.arthurdanjou.fr/files/${cover}`" />
-      </div>
-      <h1 class="md:text-lg text-md font-bold text-center text-gray-700 dark:text-gray-400">{{ name }}</h1>
-    </div>
+  <div
+    :id="name.toLowerCase()"
+    class="p-1 flex items-center group group"
+  >
+    <img
+      class="rounded-sm h-8 mr-2"
+      :alt="`Skill ${name} Image`"
+      :src="`https://athena.arthurdanjou.fr/files/${cover}`"
+    />
+    <h1 :class="getColor" class="duration-300 md:font-lg font-md font-bold text-center text-gray-700 dark:text-gray-400">{{ name }}</h1>
   </div>
 </template>
 
@@ -38,31 +41,31 @@ export default defineComponent({
     const getColor = computed(() => {
       switch (props.color) {
         case 'blueGray':
-          return 'hover:bg-blueGray-400'
+          return 'group-hover:text-blueGray-400'
         case 'cyan':
-          return 'hover:bg-cyan-400'
+          return 'group-hover:text-cyan-400'
         case 'yellow':
-          return 'hover:bg-yellow-400'
+          return 'group-hover:text-yellow-400'
         case 'emerald':
-          return 'hover:bg-emerald-400'
+          return 'group-hover:text-emerald-400'
         case 'purple':
-          return 'hover:bg-purple-400'
+          return 'group-hover:text-purple-400'
         case 'orange':
-          return 'hover:bg-orange-400'
+          return 'group-hover:text-orange-700'
         case 'sky':
-          return 'hover:bg-sky-400'
+          return 'group-hover:text-sky-400'
         case 'lime':
-          return 'hover:bg-lime-400'
+          return 'group-hover:text-lime-400'
         case 'teal':
-          return 'hover:bg-teal-400'
+          return 'group-hover:text-teal-400'
         case 'blue':
-          return 'hover:bg-blue-400'
+          return 'group-hover:text-blue-400'
         case 'red':
-          return 'hover:bg-red-400'
+          return 'group-hover:text-red-400'
         case 'rose':
-          return 'hover:bg-rose-400'
+          return 'group-hover:text-rose-400'
         case 'amber':
-          return 'hover:bg-amber-400'
+          return 'group-hover:text-amber-400'
       }
     })
 

src/components/SkillsAbout.vue

@@ -1,11 +1,11 @@
 <template>
-  <section class="w-full mb-10 mt-4">
+  <section class="w-full mb-10 mt-4 flex flex-col">
     <h3 class="font-bold text-2xl md:text-4xl mb-3">
       {{ $t('about.title.skills') }}
       <CubeIcon />
     </h3>
-    <div class="flex flex-row w-full overflow-x-auto md:overflow-x-hidden lg:flex-wrap space-x-4 lg:space-x-0 lg:justify-center">
-      <div v-if="skills" v-for="skill in skills">
+    <div class="mt-4 grid gap-4 grid-cols-2 sm:grid-cols-4 md:grid-cols-4">
+      <div v-if="skills" v-for="skill in skills" class="z-index-3">
         <Skill
           :name="skill.name"
           :color="skill.color"