Implements Blobity

2026-01-21 23:40:40 +01:00 · 2021-10-27 21:14:14 +02:00
parent c305e3aeaa
commit 4943994f1c
24 changed files with 166 additions and 112 deletions
--- a/.dockerignore
+++ b/.dockerignore
@@ -1,2 +0,0 @@
-node_modules
-build
--- 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",
--- 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

--- 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" />
--- 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>
--- 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>
--- 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 {
--- 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>

--- 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>
--- 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 {
--- 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;
 }
--- 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">
--- 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>
--- 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>
--- 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
 }
--- 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>
--- 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,
--- 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>
--- 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
--- 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;
--- 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" />
--- a/src/plugins/Blobity.ts
+++ 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!
+}
+
--- a/tailwind.config.ts
+++ b/tailwind.config.ts
--- 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"