Merge pull request #9 from ArthurDanjou/feat/background

Rework the background of my portfolio

app/components/AppBackground.vue

@@ -1,47 +1,26 @@
 <script lang="ts" setup>
-const points = useState(() => Array.from({ length: 45 }).fill(0).map(() => [Math.random(), Math.random()]))
+import { navColors } from '~~/types'
-const poly = computed(() => points.value.map(([x, y]) => `${x! * 100}% ${y! * 100}%`).join(', '))
-
-function jumpVal(val: number) {
-  return Math.random() > 0.5 ? val + (Math.random() - 0.5) / 2 : Math.random()
-}
-
-let timeout: NodeJS.Timeout
-function jumpPoints() {
-  for (let i = 0; i < points.value.length; i++)
-    points.value[i] = [jumpVal(points.value[i][0]), jumpVal(points.value[i][1])]
-
-  timeout = setTimeout(jumpPoints, Math.random() * 1000)
-}
-
-onMounted(() => jumpPoints())
-onUnmounted(() => clearTimeout(timeout))
 
 const route = useRoute()
+const colorMode = useColorMode()
+
+const colors = computed(() => {
+  const navColor = navColors.find(nav => route.name === nav.name)
+  if (navColor?.colors) return navColor.colors
+  
+  const fallbackColor = colorMode.value === 'dark' ? '#000000' : '#ffffff'
+  return [{ color: fallbackColor, x: 0, y: 0 }, { color: fallbackColor, x: 0, y: 0 }]
+})
+
+const backgroundStyle = computed(() => ({
+  backgroundImage: colors.value
+    .map(c => `radial-gradient(circle 500px at ${c.x}% ${c.y}%, ${c.color}4D, transparent)`)
+    .join(', ')
+}))
 </script>
 
 <template>
-  <ClientOnly>
+  <div class="min-h-screen w-full absolute inset-0">
-    <div
+    <div class="absolute inset-0 z-0" :style="backgroundStyle" />
-      v-show="route.path === '/'"
+  </div>
-      aria-hidden="true"
-      class="duration-300 bg sm:mx-8 absolute inset-0 z-20 transform-gpu blur-3xl overflow-hidden"
-    >
-      <div
-        :style="{ 'clip-path': `polygon(${poly})` }"
-        class="aspect-[2] h-full w-full bg-gradient-to-r from-neutral-400 dark:from-neutral-600 to-white/10 lg:opacity-30 xs:opacity-50"
-      />
-    </div>
-  </ClientOnly>
 </template>
-
-<style scoped>
-.bg > div {
-  clip-path: circle(75%);
-  transition: clip-path 3s;
-}
-
-.light .bg > div {
-  opacity: 1 !important;
-}
-</style>

app/components/AppHeader.vue

@@ -1,101 +1,5 @@
 <script setup lang="ts">
-import { socials } from '~~/types'
+import { navs, socials } from '~~/types'
-
-const colorMode = useColorMode()
-const nextTheme = computed(() => (colorMode.value === 'dark' ? 'light' : 'dark'))
-
-function switchTheme() {
-  colorMode.preference = nextTheme.value
-}
-
-function startViewTransition(event: MouseEvent | { clientX: number, clientY: number }) {
-  if (!document.startViewTransition) {
-    switchTheme()
-    return
-  }
-
-  const x = event.clientX
-  const y = event.clientY
-  const endRadius = Math.hypot(
-    Math.max(x, window.innerWidth - x),
-    Math.max(y, window.innerHeight - y),
-  )
-
-  const transition = document.startViewTransition(async () => {
-    switchTheme()
-    await nextTick()
-  })
-
-  transition.ready.then(() => {
-    const clipPath = [
-      `circle(0px at ${x}px ${y}px)`,
-      `circle(${endRadius}px at ${x}px ${y}px)`,
-    ]
-    document.documentElement.animate(
-      {
-        clipPath: colorMode.value === 'dark'
-          ? [...clipPath].reverse()
-          : clipPath,
-      },
-      {
-        duration: 500,
-        easing: 'ease-out',
-        pseudoElement: colorMode.value === 'dark'
-          ? '::view-transition-old(root)'
-          : '::view-transition-new(root)',
-      },
-    )
-  })
-}
-
-const navs = [
-  {
-    label: {
-      en: 'home',
-      fr: 'accueil',
-      es: 'inicio',
-    },
-    to: '/',
-    icon: 'house-duotone',
-  },
-  {
-    label: {
-      en: 'uses',
-      fr: 'usages',
-      es: 'usos',
-    },
-    to: '/uses',
-    icon: 'backpack-duotone',
-  },
-  {
-    label: {
-      en: 'writings',
-      fr: 'écrits',
-      es: 'escritos',
-    },
-    to: '/writings',
-    icon: 'books-duotone',
-  },
-  {
-    label: {
-      en: 'projects',
-      fr: 'projets',
-      es: 'proyectos',
-    },
-    to: '/projects',
-    icon: 'code-duotone',
-  },
-  {
-    label: {
-      en: 'resume',
-      fr: 'cv',
-      es: 'currículum',
-    },
-    icon: 'address-book-duotone',
-    to: 'https://files.arthurdanjou.fr/s/resume',
-    target: '_blank',
-  },
-]
 
 const { locale, setLocale, locales, t } = useI18n()
 const currentLocale = computed(() => locales.value.filter(l => l.code === locale.value)[0])
@@ -123,7 +27,6 @@ const openSelectMenu = ref(false)
 const openContactDrawer = ref(false)
 const router = useRouter()
 defineShortcuts({
-  t: () => startViewTransition({ clientX: window.innerWidth, clientY: 0 }),
   l: () => changeLocale(),
   c: () => openContactDrawer.value = !openContactDrawer.value,
   backspace: () => router.back(),
@@ -204,21 +107,7 @@ const socialsList = [
       </UDropdownMenu>
       <USeparator orientation="vertical" class="h-6" />
       <ClientOnly>
-        <UTooltip
+        <ThemeSwitcher />
-          :kbds="['T']"
-          :text="t('theme')"
-          class="cursor-pointer"
-          :delay-duration="4"
-        >
-          <UButton
-            :icon="nextTheme === 'dark' ? 'i-ph-moon-duotone' : 'i-ph-sun-duotone'"
-            color="neutral"
-            aria-label="switch theme"
-            size="sm"
-            variant="ghost"
-            @click="startViewTransition"
-          />
-        </UTooltip>
         <UTooltip
           :kbds="['L']"
           :text="t('language')"
@@ -278,7 +167,6 @@ const socialsList = [
 <i18n lang="json">
 {
   "en": {
-    "theme": "switch theme",
     "language": "change language",
     "status": "status page",
     "contact": {
@@ -287,7 +175,6 @@ const socialsList = [
     }
   },
   "fr": {
-    "theme": "changer de thème",
     "language": "changer de langue",
     "status": "page de statut",
     "contact": {
@@ -296,7 +183,6 @@ const socialsList = [
     }
   },
   "es": {
-    "theme": "cambiar tema",
     "language": "cambiar idioma",
     "status": "página de estado",
     "contact": {

app/components/AppVisitors.vue

@@ -3,16 +3,18 @@ const { visitors } = useVisitors()
 </script>
 
 <template>
-  <UBadge
+  <ClientOnly>
-    color="green"
+    <UBadge
-    variant="outline"
+      color="green"
-    class="shadow-xl fixed bottom-4 right-4 rounded-full px-1.5 py-0.5 bg-white ring ring-green-400 dark:bg-neutral-950 dark:ring-green-600"
+      variant="outline"
-  >
+      class="shadow-xl fixed bottom-4 right-4 rounded-full px-1.5 py-0.5 bg-white ring ring-green-400 dark:bg-neutral-950 dark:ring-green-600"
-    <div class="flex items-center gap-1">
+    >
-      <p class="text-neutral-500">
+      <div class="flex items-center gap-1">
-        {{ visitors }}
+        <p class="text-neutral-500">
-      </p>
+          {{ visitors }}
-      <div class="w-3 h-3 bg-green-200/70 dark:bg-green-800/70 rounded-full border-2 border-green-400 dark:border-green-600" />
+        </p>
-    </div>
+        <div class="w-3 h-3 bg-green-200/70 dark:bg-green-800/70 rounded-full border-2 border-green-400 dark:border-green-600" />
-  </UBadge>
+      </div>
+    </UBadge>
+  </ClientOnly>
 </template>

app/components/ThemeSwitcher.vue

@@ -0,0 +1,85 @@
+<script setup lang="ts">
+const { t } = useI18n()
+const colorMode = useColorMode()
+const nextTheme = computed(() => (colorMode.value === 'dark' ? 'light' : 'dark'))
+
+function switchTheme() {
+  colorMode.preference = nextTheme.value
+}
+
+function startViewTransition(event: MouseEvent | { clientX: number, clientY: number }) {
+  if (!document.startViewTransition) {
+    switchTheme()
+    return
+  }
+
+  const x = event.clientX
+  const y = event.clientY
+  const endRadius = Math.hypot(
+    Math.max(x, window.innerWidth - x),
+    Math.max(y, window.innerHeight - y),
+  )
+
+  const transition = document.startViewTransition(async () => {
+    switchTheme()
+    await nextTick()
+  })
+
+  transition.ready.then(() => {
+    const clipPath = [
+      `circle(0px at ${x}px ${y}px)`,
+      `circle(${endRadius}px at ${x}px ${y}px)`,
+    ]
+    document.documentElement.animate(
+      {
+        clipPath: colorMode.value === 'dark'
+          ? [...clipPath].reverse()
+          : clipPath,
+      },
+      {
+        duration: 500,
+        easing: 'ease-out',
+        pseudoElement: colorMode.value === 'dark'
+          ? '::view-transition-old(root)'
+          : '::view-transition-new(root)',
+      },
+    )
+  })
+}
+
+defineShortcuts({
+  t: () => startViewTransition({ clientX: window.innerWidth, clientY: 0 }),
+})
+</script>
+
+<template>
+  <UTooltip
+    :kbds="['T']"
+    :text="t('theme')"
+    class="cursor-pointer"
+    :delay-duration="4"
+  >
+    <UButton
+      :icon="nextTheme === 'dark' ? 'i-ph-moon-duotone' : 'i-ph-sun-duotone'"
+      color="neutral"
+      aria-label="switch theme"
+      size="sm"
+      variant="ghost"
+      @click="startViewTransition"
+    />
+  </UTooltip>
+</template>
+
+<i18n lang="json">
+{
+  "en": {
+    "theme": "switch theme"
+  },
+  "fr": {
+    "theme": "changer de thème"
+  },
+  "es": {
+    "theme": "cambiar tema"
+  },
+}
+</i18n>

app/pages/projects/index.vue

@@ -31,7 +31,7 @@ const { data: projects } = await useAsyncData('all-projects', () => {
         :to="project.path"
       >
         <li
-          class="flex flex-col h-full group hover:bg-gray-100/60 duration-300 p-2 rounded-lg dark:hover:bg-neutral-800/30 transition-colors justify-center"
+          class="flex flex-col h-full group hover:bg-gray-100/50 duration-300 p-2 rounded-lg dark:hover:bg-neutral-800/50 transition-colors justify-center"
         >
           <article class="space-y-2">
             <div
@@ -53,7 +53,7 @@ const { data: projects } = await useAsyncData('all-projects', () => {
                     v-if="project.favorite"
                     name="i-ph-star-duotone"
                     size="16"
-                    class="text-amber-500 hover:rotate-360 duration-300"
+                    class="text-amber-500 hover:rotate-360 duration-500"
                   />
                 </UTooltip>
               </div>

app/pages/writings/index.vue

@@ -47,7 +47,7 @@ const groupedWritings = computed(() => {
             :to="writing.path"
           >
             <li
-              class="h-full group hover:bg-gray-100/60 duration-300 p-1 lg:p-2 rounded-lg dark:hover:bg-neutral-800/30 transition-colors"
+              class="h-full group hover:bg-gray-100/30 duration-300 p-1 lg:p-2 rounded-lg dark:hover:bg-neutral-800/50 transition-colors"
             >
               <h1
                 class="font-bold text-lg duration-300 text-neutral-600 dark:text-neutral-400 group-hover:text-neutral-900 dark:group-hover:text-white"

types/index.ts

@@ -160,3 +160,125 @@ export const socials = [
     to: 'https://discordapp.com/users/179635349100691456',
   },
 ]
+
+interface Nav {
+  label: {
+    en: string
+    fr: string
+    es: string
+  }
+  to: string
+  icon?: string
+  target?: string
+}
+
+interface NavColor {
+  color: string
+  x: number
+  y: number
+}
+
+interface NavColorGroup {
+  name: string
+  colors: Array<NavColor>
+}
+
+export const navs: Array<Nav> = [
+  {
+    label: {
+      en: 'home',
+      fr: 'accueil',
+      es: 'inicio',
+    },
+    to: '/',
+    icon: 'house-duotone',
+  },
+  {
+    label: {
+      en: 'uses',
+      fr: 'usages',
+      es: 'usos',
+    },
+    to: '/uses',
+    icon: 'backpack-duotone',
+  },
+  {
+    label: {
+      en: 'writings',
+      fr: 'écrits',
+      es: 'escritos',
+    },
+    to: '/writings',
+    icon: 'books-duotone',
+  },
+  {
+    label: {
+      en: 'projects',
+      fr: 'projets',
+      es: 'proyectos',
+    },
+    to: '/projects',
+    icon: 'code-duotone',
+  },
+  {
+    label: {
+      en: 'resume',
+      fr: 'cv',
+      es: 'currículum',
+    },
+    icon: 'address-book-duotone',
+    to: 'https://files.arthurdanjou.fr/s/resume',
+    target: '_blank',
+  },
+]
+
+export const navColors: Array<NavColorGroup> = [
+  {
+    name: 'uses',
+    colors: [{
+      color: '#00d492',
+      x: 60,
+      y: 25,
+    }, {
+      color: '#bbf451',
+      x: 40,
+      y: 75,
+    }],
+  },
+  {
+    name: 'writings',
+    colors: [{
+      color: '#3b82f6',
+      x: 20,
+      y: 20,
+    }, {
+      color: '#ec4899',
+      x: 80,
+      y: 80,
+    }],
+  },
+  {
+    name: 'projects',
+    colors: [{
+      color: '#ffd230',
+      x: 20,
+      y: 50,
+    }, {
+      color: '#fb64b6',
+      x: 80,
+      y: 50,
+    }],
+  },
+  {
+    name: 'index',
+    colors: [{
+      color: '#ffa1ad',
+      x: 20,
+      y: 80,
+    }, {
+      color: '#e7000b',
+      x: 80,
+      y: 20,
+    }],
+  },
+]