Refactor: streamline components and update styles for improved performance and maintainability

app/app.vue

@@ -20,10 +20,6 @@ useHead({
 <style scoped>
 @reference "@/assets/css/main.css";
 
-body {
-  font-family: 'DM Sans', sans-serif;
-}
-
 .sofia {
   font-family: 'Sofia Sans', sans-serif;
 }

app/assets/css/main.css

@@ -8,17 +8,21 @@
 }
 
 :root {
-    --ui-white: #ffffff;
-    --ui-bg-white: #f8f8f8;
     --ui-black: #000000;
-    --ui-bg-black: #1a1a1a;
+    --ui-bg-black: #0a0a0a;
+    --ui-bg: #f8f8f8;
+
+    --ui-font-family: 'DM Sans', sans-serif;
+    transition-duration: 0.7s;
 }
 
 .dark {
-    --ui-white: #ffffff;
-    --ui-black: #000000;
     --ui-bg-white: #f8f8f8;
-    --ui-bg-black: #1a1a1a;
+    --ui-bg-black: #0a0a0a;
+    --ui-bg: #0a0a0a;
+
+    --ui-font-family: 'DM Sans', sans-serif;
+    transition-duration: 0.7s;
 }
 
 @keyframes wave {

app/components/AppBackground.vue

@@ -1,37 +1,32 @@
-<script lang="ts" setup>
-import type { NavColor } from '~~/types'
-import { navColors } from '~~/types'
-
-const route = useRoute()
-const colorMode = useColorMode()
-
-const colors = computed((): NavColor[] => {
-  const navColor = navColors.find(nav => route.name === nav.name)
-  if (navColor?.colors)
-    return navColor.colors
-
-  const fallbackColor = colorMode.value === 'dark' ? '#000000' : '#ffffff'
-  const fallbackGradient = { color: fallbackColor, x: 0, y: 0, radius: 0 }
-  return [fallbackGradient, fallbackGradient]
-})
-
-const backgroundStyle = computed(() => {
-  const gradients = colors.value
-    .map(({ color, radius, x, y }) =>
-      `radial-gradient(circle ${radius}px at ${x}% ${y}%, ${color}4D, transparent)`,
-    )
-    .join(', ')
-
-  return {
-    backgroundImage: gradients,
-    backgroundSize: Array.from({ length: colors.value.length }).fill('100% 100%').join(', '),
-  }
-})
-</script>
-
 <template>
-  <div
+  <div class="pointer-events-none fixed inset-0 z-40 size-full overflow-hidden">
-    class="fixed inset-0 z-0 hidden md:block blur-xl"
+    <div class="noise pointer-events-none absolute inset-[-200%] z-50 size-[400%] bg-[url('/noise.png')] opacity-[4%]" />
-    :style="backgroundStyle"
+  </div>
-  />
 </template>
+
+<style scoped>
+.noise {
+    animation: noise 2s steps(10) infinite;
+}
+
+@keyframes noise {
+    0%, 20%, 40%, 60%, 80%, 100% {
+        transform: translate(0, 0);
+    }
+    10% {
+        transform: translate(-5%, -10%);
+    }
+    30% {
+        transform: translate(5%, 10%);
+    }
+    50% {
+        transform: translate(-15%, 5%);
+    }
+    70% {
+        transform: translate(10%, -5%);
+    }
+    90% {
+        transform: translate(5%, -10%);
+    }
+}
+</style>

app/components/AppHeader.vue

@@ -1,33 +1,11 @@
 <script setup lang="ts">
 import { navs, socials } from '~~/types'
 
-const { locale, setLocale, locales, t } = useI18n()
+const { locale, t } = useI18n()
-const currentLocale = computed(() => locales.value.filter(l => l.code === locale.value)[0])
-const lang = ref(locale.value)
-watch(lang, () => changeLocale(lang.value))
 
-async function changeLocale(newLocale?: string) {
-  document.body.style.animation = 'switch-on .2s'
-  await new Promise(resolve => setTimeout(resolve, 200))
-
-  if (newLocale) {
-    await setLocale(newLocale as 'en' | 'fr' | 'es')
-  }
-  else {
-    newLocale = currentLocale.value!.code === 'en' ? 'fr' : currentLocale.value!.code === 'fr' ? 'es' : 'en'
-    await setLocale(newLocale as 'en' | 'fr' | 'es')
-  }
-  document.body.style.animation = 'switch-off .5s'
-
-  await new Promise(resolve => setTimeout(resolve, 200))
-  document.body.style.animation = ''
-}
-
-const openSelectMenu = ref(false)
 const openContactDrawer = ref(false)
 const router = useRouter()
 defineShortcuts({
-  l: () => changeLocale(),
   c: () => openContactDrawer.value = !openContactDrawer.value,
   backspace: () => router.back(),
 })
@@ -106,32 +84,7 @@ const socialsList = [
         </UTooltip>
       </UDropdownMenu>
       <USeparator orientation="vertical" class="h-6" />
-      <ClientOnly>
+      <LangSwitcher />
-        <ThemeSwitcher />
-        <UTooltip
-          :kbds="['L']"
-          :text="t('language')"
-          class="cursor-pointer"
-          :delay-duration="4"
-          :content="{
-            align: 'center',
-            side: 'right',
-            sideOffset: 8,
-          }"
-        >
-          <USelect
-            v-model="lang"
-            v-model:open="openSelectMenu"
-            :items="locales"
-            size="sm"
-            :leading-icon="currentLocale!.icon as string"
-            label-key="label"
-            value-key="code"
-            variant="soft"
-            @update:model-value="changeLocale"
-          />
-        </UTooltip>
-      </ClientOnly>
     </nav>
   </header>
 </template>
@@ -167,7 +120,6 @@ const socialsList = [
 <i18n lang="json">
 {
   "en": {
-    "language": "change language",
     "status": "status page",
     "contact": {
       "button": "contact me",
@@ -175,7 +127,6 @@ const socialsList = [
     }
   },
   "fr": {
-    "language": "changer de langue",
     "status": "page de statut",
     "contact": {
       "button": "me contacter",
@@ -183,7 +134,6 @@ const socialsList = [
     }
   },
   "es": {
-    "language": "cambiar idioma",
     "status": "página de estado",
     "contact": {
       "button": "contactame",

app/components/LangSwitcher.vue

@@ -0,0 +1,66 @@
+<script lang="ts" setup>
+const openSelectMenu = ref(false)
+
+const { locale, setLocale, locales, t } = useI18n()
+const currentLocale = computed(() => locales.value.filter(l => l.code === locale.value)[0])
+const lang = ref(locale.value)
+watch(lang, () => changeLocale(lang.value))
+
+async function changeLocale(newLocale: string) {
+  document.body.style.animation = 'switch-on .2s'
+  await new Promise(resolve => setTimeout(resolve, 200))
+
+  await setLocale(newLocale as 'en' | 'fr' | 'es')
+  document.body.style.animation = 'switch-off .5s'
+
+  await new Promise(resolve => setTimeout(resolve, 200))
+  document.body.style.animation = ''
+}
+
+defineShortcuts({
+  l: () => lang.value = currentLocale.value!.code === 'en' ? 'fr' : currentLocale.value!.code === 'fr' ? 'es' : 'en',
+})
+</script>
+
+<template>
+  <ClientOnly>
+    <ThemeSwitcher />
+    <UTooltip
+      :kbds="['L']"
+      :text="t('language')"
+      class="cursor-pointer"
+      :delay-duration="4"
+      :content="{
+        align: 'center',
+        side: 'right',
+        sideOffset: 8,
+      }"
+    >
+      <USelect
+        v-model="lang"
+        v-model:open="openSelectMenu"
+        :items="locales"
+        size="sm"
+        :leading-icon="(currentLocale!.icon as string)"
+        label-key="label"
+        value-key="code"
+        variant="soft"
+        @update:model-value="changeLocale"
+      />
+    </UTooltip>
+  </ClientOnly>
+</template>
+
+<i18n lang="json">
+{
+  "en": {
+    "language": "change language"
+  },
+  "fr": {
+    "language": "changer de langue"
+  },
+  "es": {
+    "language": "cambiar idioma"
+  }
+}
+</i18n>

app/components/ThemeSwitcher.vue

@@ -7,8 +7,12 @@ function switchTheme() {
   colorMode.preference = nextTheme.value
 }
 
-function startViewTransition(event: MouseEvent | { clientX: number, clientY: number }) {
+function toggleDark(event: MouseEvent | { clientX: number, clientY: number }) {
-  if (!document.startViewTransition) {
+  // @ts-expect-error experimental API
+  const isAppearanceTransition = document.startViewTransition
+    && !window.matchMedia('(prefers-reduced-motion: reduce)').matches
+
+  if (!isAppearanceTransition) {
     switchTheme()
     return
   }
@@ -16,39 +20,38 @@ function startViewTransition(event: MouseEvent | { clientX: number, clientY: num
   const x = event.clientX
   const y = event.clientY
   const endRadius = Math.hypot(
-    Math.max(x, window.innerWidth - x),
+    Math.max(x, innerWidth - x),
-    Math.max(y, window.innerHeight - y),
+    Math.max(y, innerHeight - y),
   )
-
   const transition = document.startViewTransition(async () => {
     switchTheme()
     await nextTick()
   })
-
+  transition.ready
-  transition.ready.then(() => {
+    .then(() => {
-    const clipPath = [
+      const clipPath = [
-      `circle(0px at ${x}px ${y}px)`,
+        `circle(0px at ${x}px ${y}px)`,
-      `circle(${endRadius}px at ${x}px ${y}px)`,
+        `circle(${endRadius}px at ${x}px ${y}px)`,
-    ]
+      ]
-    document.documentElement.animate(
+      document.documentElement.animate(
-      {
+        {
-        clipPath: colorMode.value === 'dark'
+          clipPath: colorMode.value === 'dark'
-          ? [...clipPath].reverse()
+            ? [...clipPath].reverse()
-          : clipPath,
+            : clipPath,
-      },
+        },
-      {
+        {
-        duration: 500,
+          duration: 400,
-        easing: 'ease-out',
+          easing: 'ease-out',
-        pseudoElement: colorMode.value === 'dark'
+          pseudoElement: colorMode.value === 'dark'
-          ? '::view-transition-old(root)'
+            ? '::view-transition-old(root)'
-          : '::view-transition-new(root)',
+            : '::view-transition-new(root)',
-      },
+        },
-    )
+      )
-  })
+    })
 }
 
 defineShortcuts({
-  t: () => startViewTransition({ clientX: window.innerWidth, clientY: 0 }),
+  t: () => toggleDark({ clientX: window.innerWidth, clientY: 0 }),
 })
 </script>
 
@@ -65,7 +68,7 @@ defineShortcuts({
       aria-label="switch theme"
       size="sm"
       variant="ghost"
-      @click="startViewTransition"
+      @click="toggleDark"
     />
   </UTooltip>
 </template>
@@ -80,6 +83,6 @@ defineShortcuts({
   },
   "es": {
     "theme": "cambiar tema"
-  },
+  }
 }
 </i18n>

package.json

@@ -1,7 +1,7 @@
 {
   "name": "artsite",
   "private": true,
-  "packageManager": "pnpm@9.5.0",
+  "packageManager": "pnpm@10.13.1",
   "scripts": {
     "build": "nuxt build",
     "dev": "nuxt dev --host",

types/index.ts

@@ -154,18 +154,6 @@ interface Nav {
   target?: string
 }
 
-export interface NavColor {
-  color: string
-  x: number
-  y: number
-  radius: number
-}
-
-interface NavColorGroup {
-  name: string
-  colors: NavColor[]
-}
-
 export const navs: readonly Nav[] = [
   { label: { en: 'home', fr: 'accueil', es: 'inicio' }, to: '/', icon: 'house-duotone' },
   { label: { en: 'uses', fr: 'usages', es: 'usos' }, to: '/uses', icon: 'backpack-duotone' },
@@ -178,10 +166,3 @@ export const navs: readonly Nav[] = [
     target: '_blank',
   },
 ] as const
-
-export const navColors: readonly NavColorGroup[] = [
-  { name: 'index', colors: [{ color: '#ffa1ad', x: 20, y: 70, radius: 250 }, { color: '#e7000b', x: 80, y: 20, radius: 500 }] },
-  { name: 'uses', colors: [{ color: '#00d492', x: 60, y: 25, radius: 500 }, { color: '#bbf451', x: 40, y: 80, radius: 300 }] },
-  { name: 'writings', colors: [{ color: '#3b82f6', x: 20, y: 20, radius: 600 }, { color: '#ec4899', x: 80, y: 80, radius: 200 }] },
-  { name: 'projects', colors: [{ color: '#ffd230', x: 20, y: 50, radius: 400 }, { color: '#fb64b6', x: 80, y: 50, radius: 400 }] },
-] as const