From 4943994f1c159f920bb9394a4301571d30c6fd04 Mon Sep 17 00:00:00 2001
From: Arthur DANJOU <arthurdanjou@outlook.fr>
Date: Wed, 27 Oct 2021 21:14:14 +0200
Subject: [PATCH] Implements Blobity

---
 .dockerignore                         |  2 --
 package.json                          |  1 +
 settings/Arch.ts                      |  2 +-
 src/components/AdHome.vue             |  4 +--
 src/components/Banner.vue             | 37 +++++++++++++++++--
 src/components/Button.vue             |  4 +--
 src/components/ContactForm.vue        | 12 +++----
 src/components/EnvListItem.vue        |  6 ++--
 src/components/Footer.vue             | 52 +++++++++++----------------
 src/components/Header.vue             | 44 ++++++++++-------------
 src/components/Logo.vue               |  4 +--
 src/components/MobileNavbar.vue       |  2 +-
 src/components/Post.vue               |  8 ++++-
 src/components/Project.vue            | 10 ++++--
 src/components/SideMenu.vue           |  8 -----
 src/components/SocialList.vue         | 20 +++++------
 src/layouts/default.vue               |  8 +++--
 src/pages/about.vue                   |  4 +--
 src/pages/maintenance.vue             |  2 +-
 src/pages/newsletter.vue              |  2 +-
 src/pages/services.vue                |  6 ++--
 src/plugins/Blobity.ts                | 27 ++++++++++++++
 windi.config.ts => tailwind.config.ts |  0
 yarn.lock                             | 13 +++++++
 24 files changed, 166 insertions(+), 112 deletions(-)
 delete mode 100755 .dockerignore
 create mode 100644 src/plugins/Blobity.ts
 rename windi.config.ts => tailwind.config.ts (100%)

diff --git a/.dockerignore b/.dockerignore
deleted file mode 100755
index dd87e2d..0000000
--- a/.dockerignore
+++ /dev/null
@@ -1,2 +0,0 @@
-node_modules
-build
diff --git a/package.json b/package.json
index 04807ac..22dfe76 100644
--- a/package.json
+++ b/package.json
@@ -21,6 +21,7 @@
     "@nuxtjs/sitemap": "^2.4.0",
     "@nuxtjs/universal-storage": "^0.5.9",
     "axios": "^0.21.4",
+    "blobity": "^0.1.7",
     "core-js": "^3.18.3",
     "nuxt": "^2.15.8",
     "prism-themes": "^1.9.0",
diff --git a/settings/Arch.ts b/settings/Arch.ts
index 7d6c692..e60cba3 100755
--- a/settings/Arch.ts
+++ b/settings/Arch.ts
@@ -30,7 +30,7 @@ const components = [
   'components/icons'
 ]
 
-const buildDir = 'build'
+const buildDir = '.nuxt'
 
 const ssr = true
 
diff --git a/src/components/AdHome.vue b/src/components/AdHome.vue
index 3cebb7e..791adff 100755
--- a/src/components/AdHome.vue
+++ b/src/components/AdHome.vue
@@ -1,7 +1,7 @@
 <template>
   <section class="w-full h-full my-12">
     <div class="w-full grid grid-cols-1 gap-x-20 gap-y-8 sm:grid-cols-2 h-full">
-      <nuxt-link to="/env">
+      <nuxt-link class="z-index-3" data-blobity-magnetic="false" to="/env">
         <Ad color="red" class="group w-full flex flex-col justify-between items-center">
           <div>
             <img class="h-64 group-hover:scale-105 transform duration-500" src="~/assets/images/memojies/Dev.png" alt="Dev Memoji" />
@@ -16,7 +16,7 @@
           </div>
         </Ad>
       </nuxt-link>
-      <nuxt-link to="/contact">
+      <nuxt-link class="z-index-3" data-blobity-magnetic="false" to="/contact">
         <Ad color="blue" class="group w-full flex flex-col justify-between items-center">
           <div>
             <img class="h-64 group-hover:scale-105 transform duration-500" src="~/assets/images/memojies/HandUp.png" alt="HandUp Memoji" />
diff --git a/src/components/Banner.vue b/src/components/Banner.vue
index 29edf21..802881e 100755
--- a/src/components/Banner.vue
+++ b/src/components/Banner.vue
@@ -1,12 +1,12 @@
 <template>
   <section class="my-16 w-full flex items-center justify-center">
     <div class="text-center flex flex-col items-center">
-      <h1 class="text-6xl font-bold text-gray-600 dark:text-gray-400">
-        {{ $t('home.banner.hello') }} <span class="text-black dark:text-white">Arthur Danjou</span> 👋,
+      <h1 class="text-6xl flex font-bold text-gray-600 dark:text-gray-400">
+        {{ $t('home.banner.hello') }} <span class="flex z-index-3 text-black dark:text-white mx-2">Arthur Danjou</span> <span class="hey">👋</span>,
       </h1>
       <h2 class="my-6 text-4xl text-black dark:text-white">
         <strong>{{ $t('home.banner.role') }}</strong>. <br />
-        <span class="text-gray-600 dark:text-gray-400">{{ $t('home.banner.student.main') }}</span> <strong>{{ $t('home.banner.student.strong') }}</strong>.
+        <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="select-none mt-4 text-5xl text-gray-800 mb-10 dark:text-gray-300">
         <span id="develop" class="color blue">{{ $t('home.banner.color.develop') }}</span>
@@ -66,4 +66,35 @@ export default defineComponent({
     @apply select-text bg-clip-text text-transparent bg-gradient-to-r from-emerald-600 to-lime-500
   }
 }
+
+.hey {
+  animation: hi 2.5s infinite ease-in-out;
+}
+
+@keyframes hi {
+  0% {
+    transform: rotate(0)
+  }
+  10% {
+    transform: rotate(14deg)
+  }
+  20% {
+    transform: rotate(-8deg)
+  }
+  30% {
+    transform: rotate(14deg)
+  }
+  40% {
+    transform: rotate(-4deg)
+  }
+  50% {
+    transform: rotate(10deg)
+  }
+  60% {
+    transform: rotate(0)
+  }
+  100% {
+    transform: rotate(0)
+  }
+}
 </style>
diff --git a/src/components/Button.vue b/src/components/Button.vue
index 7331010..ca952b2 100755
--- a/src/components/Button.vue
+++ b/src/components/Button.vue
@@ -1,6 +1,6 @@
 <template>
-  <nuxt-link :to="link" class="duration-150 transform hover:scale-105">
-    <div class="text-lg cursor-pointer px-8 py-4 rounded-xl border-2 border-red-500 dark:border-amber-400 hover:(bg-red-500 dark:bg-amber-400 text-white) dark:hover:text-black text-red-500 dark:text-amber-400 duration-300">
+  <nuxt-link :to="link" class="z-index-3">
+    <div class="text-lg px-8 py-4 rounded-xl bg-white dark:bg-black border-2 border-red-500 dark:border-amber-400 text-red-500 dark:text-amber-400 duration-300">
       {{ $t(content) }}
     </div>
   </nuxt-link>
diff --git a/src/components/ContactForm.vue b/src/components/ContactForm.vue
index 4953255..249238e 100755
--- a/src/components/ContactForm.vue
+++ b/src/components/ContactForm.vue
@@ -1,7 +1,9 @@
 <template>
   <section class="w-full flex justify-center flex-col">
-    <h2 class="mb-10 font-bold text-gray-700 text-2xl md:text-3xl my-4 dark:text-gray-400 text-center">
-      {{ $t('contact.form.title.main') }} <br class="lg:hidden"/><a class="email text-black dark:text-white" href="mailto:me@arthurdanjou.fr" target="_blank">{{ $t('contact.form.title.email') }}</a> 📬
+    <h2 class="z-index-3 mb-10 font-bold text-gray-700 text-2xl md:text-3xl my-4 dark:text-gray-400 text-center">
+      {{ $t('contact.form.title.main') }} <br class="lg:hidden"/>
+      <a data-blobity-magnetic="false" class="text-black dark:text-white" href="mailto:me@arthurdanjou.fr" target="_blank">{{ $t('contact.form.title.email') }}</a>
+      📬
     </h2>
     <form class="w-full">
       <div class="w-full lg:flex justify-center mb-8 lg:mb-12">
@@ -156,11 +158,7 @@ textarea:focus-within ~ label, textarea:not(:placeholder-shown) ~ label {
 }
 
 .form-label {
-  @apply absolute top-0 -z-1 duration-300 text-gray-700 dark:text-gray-400
-}
-
-.email {
-  @apply duration-300 border-b-3 border-gray-200 dark:border-gray-800 hover:border-red-500 hover:dark:border-amber-400
+  @apply absolute top-0 duration-300 text-gray-700 dark:text-gray-400
 }
 
 .disabled {
diff --git a/src/components/EnvListItem.vue b/src/components/EnvListItem.vue
index 7a83568..81a6472 100755
--- a/src/components/EnvListItem.vue
+++ b/src/components/EnvListItem.vue
@@ -1,8 +1,10 @@
 <template>
   <li>
     {{ $t(title) }}:
-    <a class="duration-300 text-red-500 dark:text-amber-400 font-medium border-b-2 border-opacity-0 hover:border-opacity-100 dark:border-opacity-0 dark:hover:border-opacity-100 border-red-500 dark:border-amber-400 border-solid" v-if="link" :href="link" target="_blank">{{ content }}</a>
-    <span v-else>{{ content }}</span>
+    <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>
+      <span v-else>{{ content }}</span>
+    </div>
   </li>
 </template>
 
diff --git a/src/components/Footer.vue b/src/components/Footer.vue
index 88ceb80..99cfed5 100755
--- a/src/components/Footer.vue
+++ b/src/components/Footer.vue
@@ -10,8 +10,8 @@
             <p class="text-justify">
               {{ $t('footer.description') }}
             </p>
-            <div class="mt-4">
-              <nuxt-link to="/contact" class="text-red-400 border-b-2 border-gray-200 dark:border-gray-700 hover:border-red-400 duration-300">
+            <div class="mt-4 flex">
+              <nuxt-link data-blobity-magnetic="false" to="/contact" class="z-index-3 text-red-400">
                 {{ $t(hiring_message) }}
               </nuxt-link>
             </div>
@@ -23,46 +23,46 @@
               {{ $t('footer.links') }}
             </h1>
           <div class="flex flex-col lg:flex-row mb-8 font-medium">
-            <div class="space-y-2 lg:space-y-4 mr-16">
+            <div class="space-y-2 lg:space-y-4 mr-16 flex flex-col">
               <div class="link">
-                <nuxt-link to="/" :class="{'link-active': isWindow('')}">
+                <nuxt-link class="z-index-3" to="/" :class="{'link-active': isWindow('')}">
                   {{ $t('header.home') }}
                 </nuxt-link>
               </div>
               <div class="link">
-                <nuxt-link to="/about" :class="{'link-active': isWindow('about')}">
+                <nuxt-link class="z-index-3" to="/about" :class="{'link-active': isWindow('about')}">
                   {{ $t('header.about') }}
                 </nuxt-link>
               </div>
               <div class="link">
-                <nuxt-link to="/blog" :class="{'link-active': isWindow('blog')}">
+                <nuxt-link class="z-index-3" to="/blog" :class="{'link-active': isWindow('blog')}">
                   {{ $t('header.blog') }}
                 </nuxt-link>
               </div>
               <div class="link">
-                <nuxt-link to="/projects" :class="{'link-active': isWindow('projects')}">
+                <nuxt-link class="z-index-3" to="/projects" :class="{'link-active': isWindow('projects')}">
                   {{ $t('header.projects') }}
                 </nuxt-link>
               </div>
             </div>
-            <div class="mt-2 lg:mt-0 space-y-2 lg:space-y-4">
+            <div class="mt-2 lg:mt-0 space-y-2 lg:space-y-4 flex flex-col">
               <div class="link">
-                <nuxt-link to="/services" :class="{'link-active': isWindow('services')}">
+                <nuxt-link class="z-index-3" to="/services" :class="{'link-active': isWindow('services')}">
                   {{ $t('header.services') }}
                 </nuxt-link>
               </div>
               <div class="link">
-                <nuxt-link to="/env" :class="{'link-active': isWindow('env')}">
+                <nuxt-link class="z-index-3" to="/env" :class="{'link-active': isWindow('env')}">
                   {{ $t('header.env') }}
                 </nuxt-link>
               </div>
               <div class="link">
-                <nuxt-link to="/newsletter" :class="{'link-active': isWindow('newsletter')}">
+                <nuxt-link class="z-index-3" to="/newsletter" :class="{'link-active': isWindow('newsletter')}">
                   {{ $t('header.newsletter') }}
                 </nuxt-link>
               </div>
               <div class="link">
-                <nuxt-link to="/contact" :class="{'link-active': isWindow('contact')}">
+                <nuxt-link class="z-index-3" to="/contact" :class="{'link-active': isWindow('contact')}">
                   {{ $t('header.contact') }}
                 </nuxt-link>
               </div>
@@ -71,14 +71,14 @@
         </div>
       </div>
       <div class="text-center border-t-2 border-gray-200 dark:border-gray-800 py-8 lg:flex lg:flex-row-reverse justify-between">
-        <div>
+        <div class="flex">
           {{ $t('footer.credits') }}
-          <a class="social font-semibold" target="_blank" href="https://nuxtjs.org" rel="noopener noreferrer">
+          <a data-blobity-magnetic="false" class="z-index-3 mx-2 social font-semibold" target="_blank" href="https://nuxtjs.org" rel="noopener noreferrer">
             <NuxtIcon />
             <span>NuxtJS</span>
           </a>
           {{ $t('footer.credits_separator') }}
-          <a class="social font-semibold" target="_blank" href="https://adonisjs.com" rel="noopener noreferrer">
+          <a data-blobity-magnetic="false" class="z-index-3 mx-2 social font-semibold" target="_blank" href="https://adonisjs.com" rel="noopener noreferrer">
             <AdonisIcon />
             <span>AdonisJS</span>
           </a>
@@ -132,28 +132,16 @@ export default defineComponent({
 
 <style scoped lang="scss">
 .footer {
-  .social {
-    span {
-      @apply border-b-2 border-gray-200 dark:border-gray-700 duration-300;
-    }
-    &:hover span {
-      @apply border-red-500 dark:border-amber-400
-    }
-  }
   .link-active a {
     @apply text-red-500 dark:text-amber-400;
   }
 
-  .link a {
-    @apply duration-500 border-b-2 border-transparent;
+  .link {
+    @apply z-index-3;
+  }
 
-    &.link-active {
-      @apply text-red-500 dark:text-amber-400;
-    }
-
-    &:hover {
-      @apply border-red-500 dark:border-amber-400
-    }
+  .link-active {
+    @apply text-red-500 dark:text-amber-400
   }
 }
 </style>
diff --git a/src/components/Header.vue b/src/components/Header.vue
index e0ef69c..5e1454f 100755
--- a/src/components/Header.vue
+++ b/src/components/Header.vue
@@ -1,7 +1,6 @@
 <template>
-  <header class="hidden xl:block dark:bg-black dark:text-white z-50 sticky top-0 left-0 bg-white w-full duration-400"
-          :class="scrollPosition > 65 ? 'shadow-md dark:shadow-white h-16 lg:h-20' : 'h-20 lg:h-24'">
-    <div class="header-container z-index-50 flex justify-between items-center h-full px-5 xl:px-32">
+  <header class="z-index-30 hidden xl:block dark:text-white w-full h-20 lg:h-24">
+    <div class="dark:bg-black bg-white flex justify-between items-center h-full px-5 xl:px-32">
       <Logo />
       <nav class="right flex flex-col md:flex-row items-center hidden md:inline-block">
         <div class="flex text-lg">
@@ -21,16 +20,24 @@
       </nav>
       <div>
         <ul class="flex items-center">
-          <li @click="changeLanguage()"
-              class="mx-1 h-9 w-9 cursor-pointer flex items-center justify-center p-1.5 rounded-xl hover:bg-gray-300 duration-200 dark:hover:bg-dark-400">
-            <TranslateIcon :french="isFrench"/>
+          <li
+            @click="changeLanguage()"
+            class="mx-2 h-8 w-8 flex items-center justify-center p-1"
+            data-blobity
+            data-blobity-magnetic="false"
+          >
+            <TranslateIcon class="z-index-3" :french="isFrench"/>
           </li>
-          <li @click="changeColorMode()"
-              class="mx-1 h-9 w-9 cursor-pointer flex items-center p-1.5 rounded-xl hover:bg-gray-300 dark:hover:bg-dark-400 duration-200">
-            <div v-if="this.$colorMode.preference === 'light'">
+          <li
+            @click="changeColorMode()"
+            class="mx-2 h-8 w-8 flex items-center justify-center p-1"
+            data-blobity
+            data-blobity-magnetic="false"
+          >
+            <div class="z-index-3" v-if="this.$colorMode.preference === 'light'">
               <MoonIcon/>
             </div>
-            <div v-else>
+            <div class="z-index-3" v-else>
               <SunIcon/>
             </div>
           </li>
@@ -62,19 +69,6 @@ export default defineComponent({
       $colorMode.preference = $colorMode.value === 'light' ? 'dark' : 'light'
     }
 
-    const scrollPosition = ref(0)
-    const updateScroll = () => {
-      scrollPosition.value = window.scrollY
-    }
-
-    onMounted(() => {
-      window.addEventListener('scroll', updateScroll);
-    })
-
-    onUnmounted(() => {
-      window.removeEventListener('scroll', updateScroll)
-    })
-
     const {i18n, } = useContext()
     const $router = useRouter()
     const changeLanguage = () => useAsync(() => {
@@ -94,9 +88,7 @@ export default defineComponent({
     }
 
     return {
-      scrollPosition,
       changeColorMode,
-      updateScroll,
       changeLanguage,
       isWindow,
       isFrench
@@ -107,7 +99,7 @@ export default defineComponent({
 
 <style scoped lang="scss">
 .nav-link {
-  @apply font-medium cursor-pointer duration-500 mx-4 border-b-2 border-transparent hover:(border-red-500 dark:border-amber-400);
+  @apply font-medium mx-4 z-index-3;
 }
 
 .navbar-bottom-items li {
diff --git a/src/components/Logo.vue b/src/components/Logo.vue
index 1718cb4..f559970 100644
--- a/src/components/Logo.vue
+++ b/src/components/Logo.vue
@@ -1,5 +1,5 @@
 <template>
-  <nuxt-link class="profile ml-4 flex items-center" to="/">
+  <nuxt-link data-blobity-magnetic="false" class="z-index-3 profile ml-4 flex items-center" to="/">
     <img class="h-12 w-12 duration-500" src="@/assets/images/photo-rounded.png" alt="Photo of me" />
     <h1 class="ml-4 font-bold text-lg">Arthur Danjou</h1>
   </nuxt-link>
@@ -11,7 +11,7 @@ export default {
 }
 </script>
 
-<style lang="scss">
+<style scoped lang="scss">
 .profile:hover img {
   @apply transform rotate-360;
 }
diff --git a/src/components/MobileNavbar.vue b/src/components/MobileNavbar.vue
index f99ac98..f6281a8 100644
--- a/src/components/MobileNavbar.vue
+++ b/src/components/MobileNavbar.vue
@@ -1,6 +1,6 @@
 <template>
   <div
-    class="xl:hidden fixed z-50 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="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">
diff --git a/src/components/Post.vue b/src/components/Post.vue
index df111cb..f5823b6 100755
--- a/src/components/Post.vue
+++ b/src/components/Post.vue
@@ -1,5 +1,11 @@
 <template>
-  <nuxt-link :to="`/blog/${slug}`">
+  <nuxt-link
+    class="z-index-3"
+    data-blobity-magnetic="false"
+    data-blobity-offset-x="8"
+    data-blobity-offset-y="8"
+    :to="`/blog/${slug}`"
+  >
     <div class="group post w-full text-justify">
       <h1 class="font-black text-3xl duration-300" :class="getHoverColor">{{ $t(title) }}</h1>
       <h2 class="my-4 text-2xl text-gray-600 dark:text-gray-400">{{ $t(description) }}</h2>
diff --git a/src/components/Project.vue b/src/components/Project.vue
index 068d112..1a1f41f 100755
--- a/src/components/Project.vue
+++ b/src/components/Project.vue
@@ -1,6 +1,12 @@
 <template>
-  <a :href="url" target="_blank" rel="noreferrer noopener">
-    <div class="h-full rounded-lg shadow-xl w-full bg-gray-100 dark:bg-gray-800 transform hover:scale-103 duration-300">
+  <a
+    data-blobity-magnetic="false"
+    :href="url"
+    target="_blank"
+    rel="noreferrer noopener"
+    class="z-index-3"
+  >
+    <div class="h-full rounded-lg w-full bg-gray-100 dark:bg-gray-800">
       <div class="max-w-full rounded-t-lg border-l-2 border-r-2 border-t-2 border-transparent dark:border-gray-900">
         <img class="w-full rounded-t-lg" :src="`https://athena.arthurdanjou.fr/files/${cover}`" alt="Project Cover" />
       </div>
diff --git a/src/components/SideMenu.vue b/src/components/SideMenu.vue
index ebad882..fd99b7e 100644
--- a/src/components/SideMenu.vue
+++ b/src/components/SideMenu.vue
@@ -138,14 +138,6 @@ export default defineComponent({
   @apply transform scale-140;
 }
 
-.nav-link a {
-  @apply duration-300 border-b-2 border-transparent;
-
-  &:hover {
-    @apply border-red-500 dark:border-amber-400
-  }
-}
-
 .link-active a {
   @apply text-red-500 dark:text-amber-400
 }
diff --git a/src/components/SocialList.vue b/src/components/SocialList.vue
index 8cc2c61..2b68ee4 100644
--- a/src/components/SocialList.vue
+++ b/src/components/SocialList.vue
@@ -1,21 +1,21 @@
 <template>
   <div class="social-links">
-    <a target="_blank" href="https://twitter.com/ArthurDanj" rel="noopener noreferrer">
+    <a class="z-index-3" data-blobity-magnetic="false" target="_blank" href="https://twitter.com/ArthurDanj" rel="noopener noreferrer">
       <TwitterIcon />
     </a>
-    <a target="_blank" href="https://github.com/ArthurDanjou" rel="noopener noreferrer">
+    <a class="z-index-3" data-blobity-magnetic="false" target="_blank" href="https://github.com/ArthurDanjou" rel="noopener noreferrer">
       <GithubIcon />
     </a>
-    <a target="_blank" href="https://www.polywork.com/arthurdanjou" rel="noopener noreferrer">
+    <a class="z-index-3" data-blobity-magnetic="false" target="_blank" href="https://www.polywork.com/arthurdanjou" rel="noopener noreferrer">
       <PolyworkIcon />
     </a>
-    <a target="_blank" href="https://www.twitch.tv/arthurdanjou" rel="noopener noreferrer">
+    <a class="z-index-3" data-blobity-magnetic="false" target="_blank" href="https://www.twitch.tv/arthurdanjou" rel="noopener noreferrer">
       <TwitchIcon />
     </a>
-    <a target="_blank" href="https://go.arthurdanjou.fr/discord" rel="noopener noreferrer">
+    <a class="z-index-3" data-blobity-magnetic="false" target="_blank" href="https://go.arthurdanjou.fr/discord" rel="noopener noreferrer">
       <DiscordIcon />
     </a>
-    <a target="_blank" href="mailto:contact@arthurdanjou.fr" rel="noopener noreferrer">
+    <a class="z-index-3" data-blobity-magnetic="false" target="_blank" href="mailto:contact@arthurdanjou.fr" rel="noopener noreferrer">
       <MailIcon />
     </a>
   </div>
@@ -27,14 +27,10 @@ export default {
 }
 </script>
 
-<style lang="scss">
+<style scoped lang="scss">
 .social-links a {
   svg {
-    @apply h-6 w-6 duration-300
-  }
-
-  &:hover svg {
-    @apply transform hover:scale-120
+    @apply h-6 w-6
   }
 }
 </style>
diff --git a/src/layouts/default.vue b/src/layouts/default.vue
index 9bbeb70..a155c80 100755
--- a/src/layouts/default.vue
+++ b/src/layouts/default.vue
@@ -10,12 +10,11 @@
       >
         <div
           @click="closeMenu"
-          class="min-h-screen relative z-50 bg-white dark:bg-black w-full min-w-screen pb-20 xl:pb-0 duration-300"
-          :class="{'cursor-pointer': opened}"
+          class="min-h-screen relative bg-white dark:bg-black w-full min-w-screen pb-20 xl:pb-0 duration-300"
         >
           <Announce />
           <Header />
-          <Nuxt class="z-10 pt-16 content"/>
+          <Nuxt class="pt-16 content"/>
           <Footer />
         </div>
       </div>
@@ -27,6 +26,7 @@
 <script lang="ts">
 import {computed, useRouter, useStore} from "@nuxtjs/composition-api";
 import {State} from "~/types/types";
+import {options, useBlobity} from "@/plugins/Blobity";
 
 export default {
   setup() {
@@ -45,6 +45,8 @@ export default {
       }, 500)
     }
 
+    const blobity = useBlobity(options)
+
     return {
       opened: computed(() => store.state.opened),
       closeMenu,
diff --git a/src/pages/about.vue b/src/pages/about.vue
index 931432e..33f0fad 100755
--- a/src/pages/about.vue
+++ b/src/pages/about.vue
@@ -6,8 +6,8 @@
     <LanguagesAbout />
     <FormationsAbout />
     <ExperiencesAbout />
-    <a href="/resume.pdf" target="_blank" class="duration-150 transform hover:scale-105">
-      <div class="text-lg cursor-pointer px-8 py-4 rounded-xl border-2 border-red-500 dark:border-amber-400 hover:(bg-red-500 dark:bg-amber-400 text-white) dark:hover:text-black text-red-500 dark:text-amber-400 duration-300">
+    <a href="/resume.pdf" target="_blank" class="z-index-3 duration-150 transform hover:scale-105">
+      <div class="text-lg px-8 py-4 rounded-xl border-2 border-red-500 dark:border-amber-400 hover:(bg-red-500 dark:bg-amber-400 text-white) dark:hover:text-black text-red-500 dark:text-amber-400 duration-300">
         {{ $t('about.cv') }}
       </div>
     </a>
diff --git a/src/pages/maintenance.vue b/src/pages/maintenance.vue
index b52229f..851d39b 100644
--- a/src/pages/maintenance.vue
+++ b/src/pages/maintenance.vue
@@ -94,7 +94,7 @@ export default defineComponent({
 })
 </script>
 
-<style lang="scss">
+<style scoped lang="scss">
 .social-links a {
   svg {
     @apply h-6 w-6 duration-300
diff --git a/src/pages/newsletter.vue b/src/pages/newsletter.vue
index fc39442..7163151 100644
--- a/src/pages/newsletter.vue
+++ b/src/pages/newsletter.vue
@@ -118,7 +118,7 @@ export default defineComponent({
 })
 </script>
 
-<style scoped>
+<style scoped lang="scss">
 .button {
   position: absolute;
   top: 0.25rem;
diff --git a/src/pages/services.vue b/src/pages/services.vue
index 1496dce..83b4e22 100644
--- a/src/pages/services.vue
+++ b/src/pages/services.vue
@@ -104,8 +104,10 @@
         </div>
       </div>
     </section>
-    <section class="w-full lg:w-4/5">
-      <nuxt-link to="/contact">
+    <section
+      class="z-index-3 w-full lg:w-4/5"
+    >
+      <nuxt-link to="/contact" data-blobity-offset-x="8" data-blobity-offset-y="8">
         <Ad color="green" class="group flex flex-col lg:flex-row">
           <div class="lg:w-1/2 flex justify-center">
             <img class="h-48 lg:h-64 group-hover:scale-105 transform duration-500" src="~/assets/images/memojies/Fiesta.png" alt="Fiesta Memoji" />
diff --git a/src/plugins/Blobity.ts b/src/plugins/Blobity.ts
new file mode 100644
index 0000000..9ea778c
--- /dev/null
+++ b/src/plugins/Blobity.ts
@@ -0,0 +1,27 @@
+import Blobity from "blobity";
+import {Options} from "blobity/lib/Blobity";
+import {onMounted, ref} from "@nuxtjs/composition-api";
+
+export const options: Partial<Options> = {
+  color: 'rgb(180, 180, 180)',
+  mode: 'normal',
+  zIndex: 1,
+  opacity: 1,
+  magnetic: true,
+  dotColor: 'rgb(255, 70, 12)',
+  size: 30,
+  focusableElementsOffsetX: 4,
+  focusableElementsOffsetY: 4,
+}
+
+export const useBlobity = (options: Partial<Options>) => {
+  const instance = ref<Blobity | null>(null)
+  onMounted(() => {
+    if (!instance.value) {
+      instance.value = new Blobity(options);
+    }
+  })
+
+  return instance.value!
+}
+
diff --git a/windi.config.ts b/tailwind.config.ts
similarity index 100%
rename from windi.config.ts
rename to tailwind.config.ts
diff --git a/yarn.lock b/yarn.lock
index 4943d10..d46fd04 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -2699,6 +2699,14 @@ bindings@^1.5.0:
   dependencies:
     file-uri-to-path "1.0.0"
 
+blobity@^0.1.7:
+  version "0.1.7"
+  resolved "https://registry.yarnpkg.com/blobity/-/blobity-0.1.7.tgz#ab64e6af02855f30df9e878ec3f5a75ab8e2e3c5"
+  integrity sha512-4pIUWS99ldLtCSKDAwaz3SqGH4ExfaUo8Bq8BXNKPyvR3z6gyr8G4uHvV/exwu2OOyBser+vIXMMeC1l1kNWiQ==
+  dependencies:
+    kinet "^2.2.1"
+    lodash "^4.17.21"
+
 bluebird@^3.1.1, bluebird@^3.5.1, bluebird@^3.5.5:
   version "3.7.2"
   resolved "https://registry.yarnpkg.com/bluebird/-/bluebird-3.7.2.tgz#9f229c15be272454ffa973ace0dbee79a1b0c36f"
@@ -5857,6 +5865,11 @@ kind-of@^6.0.0, kind-of@^6.0.2:
   resolved "https://registry.yarnpkg.com/kind-of/-/kind-of-6.0.3.tgz#07c05034a6c349fa06e24fa35aa76db4580ce4dd"
   integrity sha512-dcS1ul+9tmeD95T+x28/ehLgd9mENa3LsvDTtzm3vyBEO7RPptvAD+t44WVXaUjTBRcrpFeFlC8WCruUR456hw==
 
+kinet@^2.2.1:
+  version "2.2.1"
+  resolved "https://registry.yarnpkg.com/kinet/-/kinet-2.2.1.tgz#25aa218fb510e7c649197041ed5a8901d3f29e08"
+  integrity sha512-UmnTPmnEokjxBeB3gPkOnTwRlIUaAeB+t21E+HJGzRKCGdJTUF3CTztK5yzzEuBQ1BZ0I0ovrY73+ctpPWFIOg==
+
 klona@^2.0.4:
   version "2.0.4"
   resolved "https://registry.yarnpkg.com/klona/-/klona-2.0.4.tgz#7bb1e3affb0cb8624547ef7e8f6708ea2e39dfc0"