Add mapbox

app/components/content/Quote.vue

@@ -9,9 +9,13 @@ const { t } = useI18n({
     <div class="flex items-center">
       <UTooltip text="It's me 👋">
         <div class="flex items-center w-12 h-12">
-          <NuxtImg
-            alt="Arthur Danjou picture"
-            class="w-full h-full hover:rotate-[360deg] duration-500 transform-gpu"
+          <UAvatar
+            alt="Avatar"
+            chip-color="gray"
+            chip-position="top-right"
+            chip-text="?"
+            class="hover:rotate-[360deg] duration-500 transform-gpu"
+            size="md"
             src="/favicon.png"
           />
         </div>

app/components/content/Stats.vue

@@ -42,7 +42,9 @@ const { t } = useI18n({
         {{
           stats.languages.data.slice(0, 2).map(language => `${language.name} (${language.percent}%)`).join(t('separator'))
         }}
-        {{ stats.languages.data.slice(0, 2).map(language => `${language.name} (${language.percent}%)`).join(t('separator')) }}
+        {{
+          stats.languages.data.slice(0, 2).map(language => `${language.name} (${language.percent}%)`).join(t('separator'))
+        }}
       </template>
     </i18n-t>
   </ClientOnly>
@@ -68,4 +70,3 @@ const { t } = useI18n({
   }
 }
 </i18n>
-

app/components/home/Map.vue

@@ -0,0 +1,114 @@
+<script lang="ts" setup>
+const colorMode = useColorMode()
+const isDark = computed(() => colorMode.value === 'dark')
+
+const zoom = ref(11)
+const coordinates = ref<[number, number]>([2.179040, 48.877419])
+
+function adjustZoom(amount: number) {
+  const targetZoom = zoom.value + amount
+  const frameRate = 1000 / 60
+  const step = amount / 20
+
+  const interval = setInterval(() => {
+    if ((amount > 0 && zoom.value < targetZoom) || (amount < 0 && zoom.value > targetZoom)) {
+      zoom.value += step
+    }
+    else {
+      clearInterval(interval)
+    }
+  }, frameRate)
+}
+
+const { t } = useI18n({
+  useScope: 'local',
+})
+
+const config = useRuntimeConfig()
+</script>
+
+<template>
+  <div class="flex items-center justify-center mt-4 flex-col space-y-1">
+    <div class="relative h-80 md:h-96 w-full">
+      <MapboxMap
+        :options="{
+          accessToken: config.public.mapbox.accessToken,
+          style: isDark ? config.public.mapbox.style.dark : config.public.mapbox.style.light,
+          center: coordinates,
+          zoom,
+          projection: 'globe',
+        }"
+        class="relative z-10"
+        map-id="map"
+      >
+        <MapboxDefaultMarker
+          :lnglat="coordinates"
+          :options="{
+            color: '#808080',
+            size: 1.5,
+          }"
+          marker-id="marker"
+        />
+      </MapboxMap>
+      <div
+        v-show="zoom < 15"
+        class="map-button left-2"
+        @click.prevent="adjustZoom(1)"
+      >
+        <UIcon
+          name="i-ph-plus-bold"
+          size="24"
+        />
+      </div>
+      <div
+        v-show="zoom > 0"
+        class="map-button right-2"
+        @click.prevent="adjustZoom(-1)"
+      >
+        <UIcon
+          name="i-ph-minus-bold"
+          size="24"
+        />
+      </div>
+    </div>
+    <div class="flex gap-3 items-center group">
+      <div class="flex items-center justify-center group-hover:animate-slide duration-300">
+        <UIcon
+          name="i-ph-hand-grabbing-duotone"
+          size="16"
+        />
+      </div>
+      <p class="text-[12px] italic">
+        {{ t('caption') }}
+      </p>
+    </div>
+  </div>
+</template>
+
+<style lang="scss">
+.map-button {
+  @apply z-30 absolute bottom-2 dark:bg-gray-800 dark:hover:bg-gray-900 bg-gray-200 hover:bg-gray-100 duration-300 border border-neutral-300 dark:border-neutral-700 cursor-pointer flex items-center justify-center rounded-full p-2
+}
+
+.mapboxgl-control-container {
+  display: none !important;
+}
+
+.mapboxgl-canvas {
+  border-radius: 1rem;
+}
+</style>
+
+<i18n lang="json">
+{
+  "en": {
+    "caption": "Where I live"
+  },
+  "fr": {
+    "caption": "Où j'habite"
+  },
+  "es": {
+    "caption": "Donde vivo"
+  }
+}
+</i18n>