diff --git a/src/components/AppLogo.vue b/src/components/AppLogo.vue
index 48f6c3e..c7dafcd 100644
--- a/src/components/AppLogo.vue
+++ b/src/components/AppLogo.vue
@@ -30,24 +30,24 @@ const onLgBreakpoint = computed(() => {
 
 <style scoped>
 .swipe {
-  transition-property: var(--transition-composite);
+  transition-property: var(--property-composite);
   transition-timing-function: var(--ease-io-quint);
   transition-duration: 0.8s;
   transform-origin: top left;
 }
 
 .to-bottom {
-  transform: translateY(calc(100dvh - 100% - 11rem)) translateX(calc(100vw - 100% - 2rem - 1rem - 1rem / 2));
+  transform: translateY(calc(100dvh - 100% - 13rem)) translateX(calc(100vw - 100% - 2rem - 1rem - 1rem / 2));
 }
 @media (min-width: 640px) {
   .to-bottom {
-    transform: translateY(calc(100dvh - 100% - 11rem));
+    transform: translateY(calc(100dvh - 100% - 12rem));
   }
 }
 /* 784px instead of 768px for flex wrapping footer content */
 @media (min-width: 768px) {
   .to-bottom {
-    transform: translateY(calc(100dvh - 100% - 7rem));
+    transform: translateY(calc(100dvh - 100% - 7.5rem));
   }
 }
 
diff --git a/src/components/HeaderOverlay.vue b/src/components/HeaderOverlay.vue
index 84b592f..3dbc96d 100644
--- a/src/components/HeaderOverlay.vue
+++ b/src/components/HeaderOverlay.vue
@@ -1,65 +1,13 @@
 <script setup lang="ts">
+import type { LabelHrefItem } from '~/types'
+import { breakpointsTailwind } from '@vueuse/core'
 import { useInjectedScroll } from '~/composables/useInjectedScroll'
+import { HEADER } from '~/constants'
 
 const { isOnTop, isOnBottom } = useInjectedScroll()
 
 const route = useRoute()
 
-interface HeaderItem {
-  label: string
-  href?: string
-}
-
-const headerContent: HeaderItem[][][] = [
-  [
-    [
-      {
-        label: 'Sajid Ikhlas',
-      },
-      {
-        label: 'Web Developer',
-      },
-    ],
-    [
-      {
-        label: 'Yogyakarta, Indonesia',
-      },
-      {
-        label: 'hello@sikhlas.com',
-        href: 'mailto:hello@sikhlas.com',
-      },
-    ],
-    [
-      {
-        label: 'About',
-        href: '/about',
-      },
-      {
-        label: 'Resume',
-        href: '/resume',
-      },
-    ],
-  ],
-  [
-    [
-      {
-        label: 'Instagram',
-        href: 'https://www.instagram.com/say1ddd/',
-      },
-    ],
-    [
-      {
-        label: 'LinkedIn',
-        href: 'https://www.linkedin.com/in/sajid-ikhlas/',
-      },
-      {
-        label: 'Github',
-        href: 'https://www.github.com/say1ddd/',
-      },
-    ],
-  ],
-]
-
 function isExternalUrl(url: string, includeMailtoUrl = false) {
   try {
     const parsed = new URL(url)
@@ -72,8 +20,8 @@ function isExternalUrl(url: string, includeMailtoUrl = false) {
   }
 }
 
-function getHrefNumLabel(current: HeaderItem) {
-  const valid = headerContent
+function getHrefNumLabel(current: LabelHrefItem) {
+  const valid = HEADER
     .flat(2)
     .filter(item => typeof item.href === 'string' && item.href.length > 0 && !item.href.toLowerCase().startsWith('mailto:'))
 
@@ -86,30 +34,39 @@ const currentPath = computed(() => route.path)
 const notTopBottom = computed(() => {
   return !isOnTop.value && !isOnBottom.value
 })
+
+const breakpoints = useBreakpoints(breakpointsTailwind)
+const isLg = breakpoints.lg
+
+const returnInert = computed(() => {
+  if (!isLg.value)
+    return !isOnBottom.value
+  else return false
+})
 </script>
 
 <template>
-  <header gap="1.5" transition="composite" duration="500" lg="flex flex-col translate-y-0 justify-end opacity-100" :class="!isOnBottom && `translate-y-40 opacity-0`">
+  <header :inert="returnInert" gap="1.5" transition="composite" duration="500" lg="flex flex-col translate-y-0 justify-end opacity-100" :class="!isOnBottom && `translate-y-40 opacity-0`">
     <div flex gap="4 lg:16" text="sm" class="justify-between md:items-end">
-      <section v-for="(section, i) in headerContent" :key="i" transition="composite" duration="500" first="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 gap-(x-8 y-4)" last="flex-(~ wrap) flex-col lg:flex-row items-start md:items-end justify-end gap-2 lg:gap-8" class="max-w-fit" :class="notTopBottom && `swipe-left`">
+      <section v-for="(section, i) in HEADER" :key="i" transition="composite" duration="500" first="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 gap-(x-8 y-4)" last="flex-(~ wrap) flex-col lg:flex-row items-start md:items-end justify-end gap-2 lg:gap-8" class="max-w-fit" :class="notTopBottom && `swipe-left`">
         <div v-for="(card, idx) in section" :key="idx" flex="~ col" w="40" gap="1.5">
           <template v-for="item in card" :key="item.label">
             <template v-if="item.href">
-              <a v-if="isExternalUrl(item.href, true)" :href="item.href" target="_blank" flex gap="4" pointer-events="auto" class="smooth-transition group items-center hover:scale-x-110" :class="notTopBottom && `opacity-50 hover:opacity-100`">
+              <a v-if="isExternalUrl(item.href, true)" :href="item.href" target="_blank" flex gap="4" p="y-0.5" pointer-events="auto" class="smooth-transition group items-center hover:scale-x-110" :class="notTopBottom && `opacity-75 hover:opacity-100`">
                 <span v-if="getHrefNumLabel(item)" aria-hidden="true" font="light" select="none" tabular-nums>{{ `0${getHrefNumLabel(item)}` }}</span>
                 <h4 font="medium">
                   {{ item.label }}
                 </h4>
                 <span aria-hidden="true" block i="carbon-arrow-up-right" origin="top-left" transition="composite" duration="300" class="opacity-25 scale-75 -translate-x-full" group-hover="opacity-50 scale-100 translate-0" />
               </a>
-              <RouterLink v-else :to="item.href" :data-active="currentPath === item.href" flex gap="4" pointer-events="auto" select="none" class="smooth-transition route-line items-center hover:scale-x-110" :class="notTopBottom && `to-top`">
+              <RouterLink v-else :to="item.href" :data-active="currentPath === item.href" flex gap="4" p="y-0.5" pointer-events="auto" select="none" class="smooth-transition route-line items-center hover:scale-x-110" :class="notTopBottom && `to-top`">
                 <span aria-hidden="true" font="light" select="none" tabular-nums>{{ `0${getHrefNumLabel(item)}` }}</span>
                 <h4 font="medium">
                   {{ item.label }}
                 </h4>
               </RouterLink>
             </template>
-            <h4 v-else transition="opacity" :class="notTopBottom ? `opacity-0` : `delay-300 pointer-events-auto`">
+            <h4 v-else p="y-0.5" transition="opacity" :class="notTopBottom ? `opacity-0` : `delay-300 pointer-events-auto`">
               {{ item.label }}
             </h4>
           </template>
diff --git a/src/components/partials/ToggleButton.vue b/src/components/partials/ToggleButton.vue
index a6ccefa..f7988e5 100644
--- a/src/components/partials/ToggleButton.vue
+++ b/src/components/partials/ToggleButton.vue
@@ -36,7 +36,7 @@ const {
   height: 6px;
   background-color: var(--color-primary);
   transform-origin: left;
-  transition-property: var(--transition-composite);
+  transition-property: var(--property-composite);
   transition-duration: 0.5s;
   transition-timing-function: ease-in-out;
   pointer-events: none;
diff --git a/src/components/partials/about/AboutSection.vue b/src/components/partials/about/AboutSection.vue
index 47f4a13..27005e0 100644
--- a/src/components/partials/about/AboutSection.vue
+++ b/src/components/partials/about/AboutSection.vue
@@ -26,7 +26,7 @@ defineProps<Prop>()
   width: 100%;
   height: 2px;
   background-color: var(--color-foreground);
-  transition-property: var(--transition-composite);
+  transition-property: var(--property-composite);
   transition-duration: 0.4s;
   transition-timing-function: ease-out;
   transform: rotateY(90deg);
diff --git a/src/components/partials/about/BackgroundText.vue b/src/components/partials/about/BackgroundText.vue
index f52395a..bbf5bbe 100644
--- a/src/components/partials/about/BackgroundText.vue
+++ b/src/components/partials/about/BackgroundText.vue
@@ -32,7 +32,7 @@ const isVisible = useElementVisibility(ref)
 
 .background-text {
   text-transform: uppercase;
-  mask-image: var(--image-diagonal-lines);
+  mask-image: var(--images-pattern-diagonal-lines);
 }
 
 .curtain {
diff --git a/src/components/partials/index/IndexThirdSection.vue b/src/components/partials/index/IndexThirdSection.vue
index a116882..8e61ada 100644
--- a/src/components/partials/index/IndexThirdSection.vue
+++ b/src/components/partials/index/IndexThirdSection.vue
@@ -1,131 +1,11 @@
 <script setup lang="ts">
+import { STACKS } from '~/constants'
+
 const visibilityTarget = useTemplateRef('sectionRef')
 const isVisible = useElementVisibility(visibilityTarget, {
   threshold: 2 / 3,
 })
 
-interface StackItem {
-  label: string
-  icon: string
-}
-
-interface Stack {
-  programmingLanguage: StackItem[]
-  frameworkLibrary: StackItem[]
-  toolSoftware: StackItem[]
-  database: StackItem[]
-}
-const stacks: Stack = {
-  programmingLanguage: [
-    {
-      label: 'JavaScript',
-      icon: 'i-simple-icons-javascript',
-    },
-    {
-      label: 'TypeScript',
-      icon: 'i-simple-icons-typescript',
-    },
-    {
-      label: 'Python',
-      icon: 'i-simple-icons-python',
-    },
-    {
-      label: 'PHP',
-      icon: 'i-simple-icons-php',
-    },
-    {
-      label: 'Bash',
-      icon: 'i-simple-icons-gnubash',
-    },
-  ],
-  frameworkLibrary: [
-    {
-      label: 'Vue',
-      icon: 'i-simple-icons-vuedotjs',
-    },
-    {
-      label: 'Nuxt',
-      icon: 'i-simple-icons-nuxtdotjs',
-    },
-    {
-      label: 'React JS',
-      icon: 'i-simple-icons-react',
-    },
-    {
-      label: 'Next',
-      icon: 'i-simple-icons-nextdotjs',
-    },
-    {
-      label: 'Laravel',
-      icon: 'i-simple-icons-laravel',
-    },
-    {
-      label: 'Express',
-      icon: 'i-simple-icons-express',
-    },
-    {
-      label: 'Tailwind CSS',
-      icon: 'i-simple-icons-tailwindcss',
-    },
-    {
-      label: 'Pinia',
-      icon: 'i-simple-icons-pinia',
-    },
-    {
-      label: 'Chart JS',
-      icon: 'i-simple-icons-chartdotjs',
-    },
-    {
-      label: 'Prisma',
-      icon: 'i-simple-icons-prisma',
-    },
-    {
-      label: 'Konva',
-      icon: 'i-simple-icons-konva',
-    },
-  ],
-  toolSoftware: [
-    {
-      label: 'Git',
-      icon: 'i-simple-icons-git',
-    },
-    {
-      label: 'Docker',
-      icon: 'i-simple-icons-docker',
-    },
-    {
-      label: 'Postman',
-      icon: 'i-simple-icons-postman',
-    },
-    {
-      label: 'Figma',
-      icon: 'i-simple-icons-figma',
-    },
-    {
-      label: 'Photoshop',
-      icon: 'i-simple-icons-adobe',
-    },
-  ],
-  database: [
-    {
-      label: 'MySQL',
-      icon: 'i-simple-icons-mysql',
-    },
-    {
-      label: 'PostgreSQL',
-      icon: 'i-simple-icons-postgresql',
-    },
-    {
-      label: 'SQLite',
-      icon: 'i-simple-icons-sqlite',
-    },
-    {
-      label: 'MongoDB',
-      icon: 'i-simple-icons-mongodb',
-    },
-  ],
-}
-
 function calculateDurationByIdx(idx: number, secMultiplier = 100, initialSec = 300) {
   return initialSec + (secMultiplier * idx)
 }
@@ -147,7 +27,7 @@ function calculateDurationByIdx(idx: number, secMultiplier = 100, initialSec = 3
               What I'm good at -
             </h3>
             <ul flex="~ col" gap="2 lg:6" overflow="hidden">
-              <li v-for="(items, key, i) in stacks" :key="key" flex="~ col" gap="1">
+              <li v-for="(items, key, i) in STACKS" :key="key" flex="~ col" gap="1">
                 <div class="background-diagonal" transition="composite" ease="inoutquint" origin="bottom" delay="300" :class="`duration-${calculateDurationByIdx(i, 300, 100)} ${!isVisible && 'scale-y-0'}`">
                   <span font="jetBMono extrabold" text="background xs" bg="foreground" w="fit" p="x-2" class="curly-braces">
                     {{ key }}
@@ -156,9 +36,9 @@ function calculateDurationByIdx(idx: number, secMultiplier = 100, initialSec = 3
                 <ul grid="~ cols-3 md:cols-4 lg:cols-6" gap="x-2 y-1" transition="composite" ease="outexpo" bg="linear-to-r" class="from-transparent via-foreground/5" :class="`duration-${calculateDurationByIdx(i, 500)} ${!isVisible && 'translate-x-full'}`">
                   <li v-for="item in items" :key="item.icon" flex gap="2" class="items-center" text="xs sm:base xl:lg" font="medium" tracking="wide">
                     <div :class="`${item.icon} duration-${calculateDurationByIdx(i, 100)} ${!isVisible && 'rotate-360'}`" />
-                    <h5 truncate>
+                    <h4 truncate>
                       {{ item.label }}
-                    </h5>
+                    </h4>
                   </li>
                 </ul>
               </li>
@@ -189,7 +69,7 @@ function calculateDurationByIdx(idx: number, secMultiplier = 100, initialSec = 3
 
 <style scoped>
 .background-diagonal {
-  background-image: var(--image-diagonal-lines);
+  background-image: var(--images-pattern-diagonal-lines);
   background-color: transparent;
   background-attachment: fixed;
 }
diff --git a/src/constants.ts b/src/constants.ts
new file mode 100644
index 0000000..ecb899d
--- /dev/null
+++ b/src/constants.ts
@@ -0,0 +1,184 @@
+// @unocss-include
+import type { LabelHrefItem, Stack } from '~/types'
+
+const HEADER: LabelHrefItem[][][] = [
+  [
+    [
+      {
+        label: 'Sajid Ikhlas',
+      },
+      {
+        label: 'Web Developer',
+      },
+    ],
+    [
+      {
+        label: 'Yogyakarta, Indonesia',
+      },
+      {
+        label: 'hello@sikhlas.com',
+        href: 'mailto:hello@sikhlas.com',
+      },
+    ],
+    [
+      {
+        label: 'About',
+        href: '/about',
+      },
+      {
+        label: 'Resume',
+        href: '/resume',
+      },
+    ],
+  ],
+  [
+    [
+      {
+        label: 'Instagram',
+        href: 'https://www.instagram.com/say1ddd/',
+      },
+    ],
+    [
+      {
+        label: 'LinkedIn',
+        href: 'https://www.linkedin.com/in/sajid-ikhlas/',
+      },
+      {
+        label: 'Github',
+        href: 'https://www.github.com/say1ddd/',
+      },
+    ],
+  ],
+]
+
+const WORKS: LabelHrefItem[] = [
+  {
+    label: 'SIM WEB',
+    href: '/work/sim-web',
+  },
+  {
+    label: 'Stage Two',
+    href: '/work/stage-two',
+  },
+  {
+    label: 'OG Tool',
+    href: '/work/og-tool',
+  },
+]
+
+const STACKS: Stack = {
+  programmingLanguage: [
+    {
+      label: 'JavaScript',
+      icon: 'i-simple-icons-javascript',
+    },
+    {
+      label: 'TypeScript',
+      icon: 'i-simple-icons-typescript',
+    },
+    {
+      label: 'Python',
+      icon: 'i-simple-icons-python',
+    },
+    {
+      label: 'PHP',
+      icon: 'i-simple-icons-php',
+    },
+    {
+      label: 'Bash',
+      icon: 'i-simple-icons-gnubash',
+    },
+  ],
+  frameworkLibrary: [
+    {
+      label: 'Vue',
+      icon: 'i-simple-icons-vuedotjs',
+    },
+    {
+      label: 'Nuxt',
+      icon: 'i-simple-icons-nuxtdotjs',
+    },
+    {
+      label: 'React JS',
+      icon: 'i-simple-icons-react',
+    },
+    {
+      label: 'Next',
+      icon: 'i-simple-icons-nextdotjs',
+    },
+    {
+      label: 'Laravel',
+      icon: 'i-simple-icons-laravel',
+    },
+    {
+      label: 'Express',
+      icon: 'i-simple-icons-express',
+    },
+    {
+      label: 'Tailwind CSS',
+      icon: 'i-simple-icons-tailwindcss',
+    },
+    {
+      label: 'Pinia',
+      icon: 'i-simple-icons-pinia',
+    },
+    {
+      label: 'Chart JS',
+      icon: 'i-simple-icons-chartdotjs',
+    },
+    {
+      label: 'Prisma',
+      icon: 'i-simple-icons-prisma',
+    },
+    {
+      label: 'Konva',
+      icon: 'i-simple-icons-konva',
+    },
+  ],
+  toolSoftware: [
+    {
+      label: 'Git',
+      icon: 'i-simple-icons-git',
+    },
+    {
+      label: 'Docker',
+      icon: 'i-simple-icons-docker',
+    },
+    {
+      label: 'Postman',
+      icon: 'i-simple-icons-postman',
+    },
+    {
+      label: 'Figma',
+      icon: 'i-simple-icons-figma',
+    },
+    {
+      label: 'Photoshop',
+      icon: 'i-simple-icons-adobe',
+    },
+  ],
+  database: [
+    {
+      label: 'MySQL',
+      icon: 'i-simple-icons-mysql',
+    },
+    {
+      label: 'PostgreSQL',
+      icon: 'i-simple-icons-postgresql',
+    },
+    {
+      label: 'SQLite',
+      icon: 'i-simple-icons-sqlite',
+    },
+    {
+      label: 'MongoDB',
+      icon: 'i-simple-icons-mongodb',
+    },
+  ],
+}
+
+export {
+  HEADER,
+  STACKS,
+  WORKS,
+}
diff --git a/src/layouts/default.vue b/src/layouts/default.vue
index 25454de..ca032d6 100644
--- a/src/layouts/default.vue
+++ b/src/layouts/default.vue
@@ -72,7 +72,7 @@ router.afterEach(() => {
     <div bottom="0" fixed pointer-events="none" w="full" z="25">
       <div translate-y="-4" flex="~ col" gap="4 sm:0">
         <HeaderOverlay lowercase relative z="10" m="x-4" p="x-0 sm:x-4" />
-        <FooterOverlay relative z="10" transition="composite" duration="300" ease="out-back" m="sm:(x-4 y-0)" p="sm:x-4" :class="!isOnBottom ? `mx-4 p-2 sm:px-4 opacity-25 hover:opacity-75` : `mx-2 opacity-50 translate-y-2`" />
+        <FooterOverlay relative z="10" transition="composite" duration="300" ease="out-back" m="sm:(x-4 y-0)" p="sm:x-4" :class="!isOnBottom ? `mx-4 p-2 sm:px-4 opacity-50 hover:opacity-75` : `mx-2 opacity-75 translate-y-2`" />
 
         <FooterBackground inset-0 absolute z="5" bg="primary" duration="1000" ease="out-expo" :class="isOnBottom ? `opacity-100 -translate-y-2 sm:-translate-y-16 md:-translate-y-8 lg:-translate-y-16` : `opacity-0 translate-y-1/10`" />
         <FooterBackground inset-0 absolute z="5" bg="background" duration="1000" ease="in-out-circ" border="4 t-primary transparent" :class="isOnBottom ? `opacity-100 -translate-y-2 sm:-translate-y-16 md:-translate-y-8 lg:-translate-y-16` : `opacity-0 translate-y-1/4 lg:translate-y-1/10`" />
@@ -107,7 +107,7 @@ router.afterEach(() => {
 .slide-down-leave-active,
 .minimize-enter-active,
 .minimize-leave-active {
-  transition-property: var(--transition-composite);
+  transition-property: var(--property-composite);
   transition-duration: 0.5s;
   animation-timing-function: var(--ease-o-expo);
 }
diff --git a/src/layouts/home.vue b/src/layouts/home.vue
deleted file mode 100644
index 8648212..0000000
--- a/src/layouts/home.vue
+++ /dev/null
@@ -1,11 +0,0 @@
-<template>
-  <main
-    px-4 py-10
-    text="center gray-700 dark:gray-200"
-  >
-    <RouterView />
-    <div text-sm mx-auto mt-5 text-center opacity-50>
-      [Home Layout]
-    </div>
-  </main>
-</template>
diff --git a/src/pages/index.vue b/src/pages/index.vue
index 67f89bd..4f1dda2 100644
--- a/src/pages/index.vue
+++ b/src/pages/index.vue
@@ -1,24 +1,11 @@
 <script setup lang="ts">
+import { WORKS } from '~/constants'
+
 const { t } = useI18n()
 
 useHead({
   title: () => t('button.home'),
 })
-
-const works = [
-  {
-    label: 'SIM WEB',
-    href: '/work/sim-web',
-  },
-  {
-    label: 'Stage Two',
-    href: '/work/stage-two',
-  },
-  {
-    label: 'OG Tool',
-    href: '/work/og-tool',
-  },
-]
 </script>
 
 <template>
@@ -36,7 +23,7 @@ const works = [
             {{ t('home.section_1') }}
           </h1>
           <div flex="1" class="">
-            <RouterLink to="/about" data-cy="about" p="y-2 x-3" class="text-primary tracking-widest font-bold bg-background w-fit select-none" hover="bg-primary text-black" border="~ r-4 primary">
+            <RouterLink to="/about" data-cy="about" p="y-2 x-3" class="text-black tracking-widest font-bold bg-primary w-fit select-none" border="~ r-4 primary">
               <span>ABOUT ME</span>
             </RouterLink>
           </div>
@@ -47,8 +34,8 @@ const works = [
       <div flex="~ 1 col">
         <h1>{{ t('home.section_2.title') }}</h1>
         <ul class="border">
-          <li v-for="work in works" :key="work.href" class="font-extrabold uppercase from-transparent bg-linear-to-r hover:(text-black to-primary)">
-            <RouterLink :to="work.href" block>
+          <li v-for="work in WORKS" :key="work.href" class="font-extrabold uppercase from-transparent bg-linear-to-r hover:(text-black to-primary)">
+            <RouterLink :to="work.href || ''" block>
               <span class="text-5xl">{{ work.label }}</span>
             </RouterLink>
           </li>
@@ -84,7 +71,7 @@ const works = [
   position: absolute;
   width: 100%;
   height: 1rem;
-  mask-image: var(--image-diagonal-lines);
+  mask-image: var(--images-pattern-diagonal-lines);
   background: var(--color-foreground);
   top: 0;
   left: 0;
diff --git a/src/pages/work/[slug].vue b/src/pages/work/[slug].vue
index 5e72232..a8aed6d 100644
--- a/src/pages/work/[slug].vue
+++ b/src/pages/work/[slug].vue
@@ -24,7 +24,7 @@ definePage({
 <style scoped>
 .hero {
   height: calc(100dvh - (100dvh / 5 * 2));
-  mask-image: var(--image-texture);
+  mask-image: var(--images-pattern-texture);
   background: linear-gradient(to top right, var(--color-foreground), transparent 75%);
 }
 
diff --git a/src/styles/main.css b/src/styles/main.css
index f58f8a5..0b046ae 100755
--- a/src/styles/main.css
+++ b/src/styles/main.css
@@ -1,14 +1,14 @@
 :root,
 :host {
-  --transition-composite: transform, translate, scale, rotate, opacity;
+  --property-composite: transform, translate, scale, rotate, opacity;
 
   --color-primary: rgba(255, 115, 185, 1);
   --color-background: rgba(236, 237, 238, 1);
   --color-foreground: rgba(18, 18, 18, 1);
 
-  --image-graph-paper: url('/assets/patterns/graph-paper.svg');
-  --image-diagonal-lines: url('/assets/patterns/diagonal-lines.svg');
-  --image-texture: url('/assets/patterns/texture.svg');
+  --images-pattern-graph-paper: url('/assets/patterns/graph-paper.svg');
+  --images-pattern-diagonal-lines: url('/assets/patterns/diagonal-lines.svg');
+  --images-pattern-texture: url('/assets/patterns/texture.svg');
 
   /* curves */
   --ease-io-quint: cubic-bezier(0.83, 0, 0.17, 1);
@@ -29,9 +29,9 @@ html.dark {
   --color-foreground: rgba(237, 237, 237, 1);
 
   /* avoiding mask in body */
-  --image-graph-paper: url('/assets/patterns/graph-paper-dark.svg');
-  --image-diagonal-lines: url('/assets/patterns/diagonal-lines-dark.svg');
-  --image-texture: url('/assets/patterns/texture-dark.svg');
+  --images-pattern-graph-paper: url('/assets/patterns/graph-paper-dark.svg');
+  --images-pattern-diagonal-lines: url('/assets/patterns/diagonal-lines-dark.svg');
+  --images-pattern-texture: url('/assets/patterns/texture-dark.svg');
 
   color-scheme: dark;
 }
@@ -42,7 +42,7 @@ body,
   height: 100%;
   margin: 0;
   padding: 0;
-  background-image: var(--image-graph-paper);
+  background-image: var(--images-pattern-graph-paper);
   background-color: var(--color-background);
   overflow: hidden;
 }
@@ -68,7 +68,7 @@ html.dark {
 /* named transitions */
 .fade-enter-active,
 .fade-leave-active {
-  transition-property: var(--transition-composite);
+  transition-property: var(--property-composite);
   transition-duration: 0.5s;
 }
 
@@ -117,7 +117,7 @@ html.dark {
 
 .slide-y-enter-active,
 .slide-y-leave-active {
-  transition-property: var(--transition-composite);
+  transition-property: var(--property-composite);
   transition-duration: 0.1s;
   transition-timing-function: ease;
 }
diff --git a/src/types.ts b/src/types.ts
index 09d2492..923efbe 100644
--- a/src/types.ts
+++ b/src/types.ts
@@ -1,3 +1,26 @@
 import type { ViteSSGContext } from 'vite-ssg'
 
-export type UserModule = (ctx: ViteSSGContext) => void
+type UserModule = (ctx: ViteSSGContext) => void
+
+interface LabelHrefItem {
+  label: string
+  href?: string
+}
+
+interface StackItem {
+  label: string
+  icon: string
+}
+interface Stack {
+  programmingLanguage: StackItem[]
+  frameworkLibrary: StackItem[]
+  toolSoftware: StackItem[]
+  database: StackItem[]
+}
+
+export type {
+  LabelHrefItem,
+  Stack,
+  StackItem,
+  UserModule,
+}
diff --git a/uno.config.ts b/uno.config.ts
index 18046ec..272413d 100644
--- a/uno.config.ts
+++ b/uno.config.ts
@@ -27,7 +27,7 @@ export default defineConfig({
       foreground: 'var(--color-foreground)',
     },
     property: {
-      composite: 'var(--transition-composite)',
+      composite: 'var(--property-composite)',
     },
     ease: {
       'in-out-quint': 'var(--ease-io-quint)',