From d94ce0a147c349590351729634d72511a4ad50cd Mon Sep 17 00:00:00 2001
From: Sayiddd <sajidmuhammadikhlas@gmail.com>
Date: Thu, 12 Feb 2026 21:09:59 +0700
Subject: [PATCH 1/2] Fix attribute consistency & lighthouse score improvements

Add sr only label for ToggleButton, attempt to reduce render delay, and attempt to reduce layout shifts from BackgroundText
---
 src/components/TheHeader.vue                  | 22 +++++-----
 .../partials/about/BackgroundText.vue         |  2 +-
 src/layouts/404.vue                           |  2 +-
 src/pages/about.vue                           |  2 +-
 src/pages/index.vue                           |  7 +++-
 src/pages/work/[slug].vue                     | 40 +++++++++++++++++++
 6 files changed, 59 insertions(+), 16 deletions(-)
 create mode 100644 src/pages/work/[slug].vue

diff --git a/src/components/TheHeader.vue b/src/components/TheHeader.vue
index 9cae14f..337650b 100644
--- a/src/components/TheHeader.vue
+++ b/src/components/TheHeader.vue
@@ -86,22 +86,22 @@ const socials = [
 </script>
 
 <template>
-  <header class="font-jetBMono px-4 bg-transparent flex h-10 w-full items-center top-4 justify-between absolute z-50">
-    <div class="font-(manrope black) text-4xl tracking-widest flex-1 select-none relative z-30">
+  <header class="font-jetBMono px-4 bg-transparent flex h-10 w-full pointer-events-none items-center top-4 justify-between absolute z-50">
+    <div class="font-(manrope black) text-4xl tracking-widest select-none relative z-30">
       FPS {{ fps }}
     </div>
     <div class="underline flex h-full w-30 items-center relative md:w-80">
-      <ToggleButton class="flex-1 hover:bg-primary/10" :state="locale === 'en'" truthy-label="ENG" falsy-label="IDN" @click="toggleLocale">
-        <span aria-hidden="true" i-carbon-language block />
-        <span class="text-sm font-medium hidden truncate md:block">{{ t('button.toggle_lang') }}</span>
+      <ToggleButton class="flex-1 pointer-events-auto hover:bg-primary/10" :state="locale === 'en'" truthy-label="ENG" falsy-label="IDN" @click="toggleLocale">
+        <span aria-hidden="true" i="carbon-language" block />
+        <span class="text-sm font-medium truncate sr-only md:not-sr-only">{{ t('button.toggle_lang') }}</span>
       </ToggleButton>
       <ToggleButton class="flex-1 hover:bg-primary/10" :state="isDark" :truthy-label="t('button.toggle_theme.dark')" :falsy-label="t('button.toggle_theme.light')" @click="toggleDark()">
         <span aria-hidden="true" block i="carbon-sun dark:carbon-moon" />
-        <span class="text-sm font-medium hidden truncate md:block">{{ t('button.toggle_theme._label') }}</span>
+        <span class="text-sm font-medium truncate sr-only md:not-sr-only">{{ t('button.toggle_theme._label') }}</span>
       </ToggleButton>
       <button flex="~ 1" class="text-foreground bg-foreground/20 h-full items-center justify-center relative z-30 md:hidden" @click="toggleSidebar">
         <span sr-only>Menu</span>
-        <span aria-hidden="true" i-carbon-menu block />
+        <span aria-hidden="true" i="carbon-menu" block />
       </button>
     </div>
   </header>
@@ -117,7 +117,7 @@ const socials = [
                   v-for="nav in navigations" :key="nav.href" class="py-2 flex gap-2 select-none items-center justify-end bg-linear-to-r" :class="currentPath === nav.href ? `from-transparent to-primary text-black` : `from-transparent to-background/20`"
                   @click="navigateTo(nav.href)"
                 >
-                  <div v-if="currentPath === nav.href" class="text-xl" i-carbon-triangle-right-solid />
+                  <div v-if="currentPath === nav.href" class="text-xl" i="carbon-triangle-right-solid" />
                   <span class="text-5xl tracking-wider uppercase">
                     {{ t(nav.i18n) }}
                   </span>
@@ -133,7 +133,7 @@ const socials = [
                   :class="currentPath === work.href ? `from-transparent to-primary text-black` : `from-transparent to-background/20`"
                   @click="navigateTo(work.href)"
                 >
-                  <div v-if="currentPath === work.href" class="text-xl" i-carbon-triangle-right-solid />
+                  <div v-if="currentPath === work.href" class="text-xl" i="carbon-triangle-right-solid" />
                   <span class="text-5xl tracking-wider uppercase">
                     {{ work.label }}
                   </span>
@@ -156,14 +156,14 @@ const socials = [
                   <li v-for="social in socials" :key="social.href">
                     <a :href="social.href" target="_blank" class="inline-flex gap-1 items-center">
                       <span>{{ social.label }}</span>
-                      <div i-carbon-arrow-up-right />
+                      <div i="carbon-arrow-up-right" />
                     </a>
                   </li>
                 </ul>
               </div>
               <div flex="~ col" class="gap-3">
                 <a href="https://github.com/Say1ddd/personal-space/" target="_blank" p="y-2 x-3" class="text-sm bg-foreground/20 inline-flex gap-2 w-fit items-center">
-                  <div i-carbon-logo-github />
+                  <div i="carbon-logo-github" />
                   <span>Source code</span>
                 </a>
                 <div class="text-xs inline-flex flex-col *:p-0.5">
diff --git a/src/components/partials/about/BackgroundText.vue b/src/components/partials/about/BackgroundText.vue
index 293e721..5f9ad70 100644
--- a/src/components/partials/about/BackgroundText.vue
+++ b/src/components/partials/about/BackgroundText.vue
@@ -25,7 +25,7 @@ const isVisible = useElementVisibility(ref)
   right: 3rem;
   user-select: none;
   pointer-events: none;
-  position: absolute;
+  position: fixed;
   opacity: 0.2;
   overflow: hidden;
 }
diff --git a/src/layouts/404.vue b/src/layouts/404.vue
index a5ebe36..7ffada6 100644
--- a/src/layouts/404.vue
+++ b/src/layouts/404.vue
@@ -9,7 +9,7 @@ useHead({
 <template>
   <main p="x4 y10" text="center teal-700 dark:gray-200">
     <div text-4xl>
-      <div i-carbon-warning inline-block />
+      <div i="carbon-warning" inline-block />
     </div>
     <RouterView />
     <div>
diff --git a/src/pages/about.vue b/src/pages/about.vue
index 1f0cf5d..d6af9a1 100644
--- a/src/pages/about.vue
+++ b/src/pages/about.vue
@@ -37,7 +37,7 @@ function isSocialSection(key: string) {
 
 <template>
   <div flex="~ col" overflow="y-auto x-hidden" class="justify-between relative from-background to-background/50 from-75% bg-linear-to-b">
-    <div flex="~ col lg:row" gap="y-2 md:y-8 x-4" class="mx-auto container" p="t-16 x-3">
+    <div flex="~ 1 col lg:row" gap="y-2 md:y-8 x-4" class="mx-auto container" p="t-16 x-3">
       <div text="xl xl:2xl" leading="relaxed sm:loose" class="tracking-wide flex-1 max-w-3xl">
         <h1>{{ t('about.title') }}</h1>
         <h1>{{ t('about.subtitle') }}</h1>
diff --git a/src/pages/index.vue b/src/pages/index.vue
index c7532d4..6878425 100644
--- a/src/pages/index.vue
+++ b/src/pages/index.vue
@@ -6,7 +6,7 @@ const { top: isOnTop, bottom: isOnBottom } = toRefs(arrivedState)
 const { left: toLeft, right: toRight, top: toTop, bottom: toBottom } = toRefs(directions)
  */
 
-const { t } = useI18n()
+const { t, tm } = useI18n()
 
 useHead({
   title: () => t('button.home'),
@@ -48,9 +48,12 @@ const works = [
     <section class="section-divider gap-3 justify-center" p="4" flex="~ col" snap="always center" h="full">
       <div class="items-center justify-center" flex="~ 1" p="4">
         <div container flex="~ col" gap="4" border="l-4 primary" class="pl-4 container">
-          <h1 class="heading-1">
+          <h1 v-if="tm('home.section_1')" class="heading-1">
             {{ t('home.section_1') }}
           </h1>
+          <h1 v-else>
+            Welcome to my personal website.
+          </h1>
           <div flex="1" class="">
             <RouterLink to="/about" data-cy="about" p="y-2 x-3" class="text-primary font-bold tracking-widest bg-background w-fit select-none" hover="bg-primary text-black" border="~ r-4 primary">
               <span>ABOUT ME</span>
diff --git a/src/pages/work/[slug].vue b/src/pages/work/[slug].vue
new file mode 100644
index 0000000..1320d4a
--- /dev/null
+++ b/src/pages/work/[slug].vue
@@ -0,0 +1,40 @@
+<script setup lang="ts">
+const route = useRoute()
+
+definePage({
+  beforeEnter: (to) => {
+    // @ts-expect-error suppress "Property slug does not exist on type" error
+    if (to.params.slug && !['sim-web', 'stage-two', 'og-tool'].includes(to.params.slug))
+      return 'work-not-found'
+  },
+})
+</script>
+
+<template>
+  <div class="bg-background overflow-y-scroll">
+    <section class="flex h-full items-center">
+      <div flex="1" class="relative">
+        <div class="title font-plaster right-16 top-0 absolute">
+          {{ route.params.slug }}
+        </div>
+        <div class="hero" />
+      </div>
+    </section>
+  </div>
+</template>
+
+<style scoped>
+.hero {
+  height: calc(100dvh - (100dvh / 5 * 2));
+  mask-image: var(--image-texture);
+  background: linear-gradient(to top right, var(--color-foreground), transparent 75%);
+}
+
+.title {
+  text-transform: uppercase;
+  font-size: 6em;
+  font-weight: 800;
+  -webkit-text-stroke: 1px var(--color-foreground);
+  color: transparent;
+}
+</style>

From 4fa4a88218b85556e1fc4493b449f76457d9b2dd Mon Sep 17 00:00:00 2001
From: Sayiddd <sajidmuhammadikhlas@gmail.com>
Date: Thu, 12 Feb 2026 21:37:02 +0700
Subject: [PATCH 2/2] Remove unused slug page, temporarily remove CLS cause,
 fix interact-able element pointer events

---
 src/components/TheHeader.vue |  6 +++---
 src/pages/about.vue          |  2 ++
 src/pages/work/[slug].vue    | 40 ------------------------------------
 3 files changed, 5 insertions(+), 43 deletions(-)
 delete mode 100644 src/pages/work/[slug].vue

diff --git a/src/components/TheHeader.vue b/src/components/TheHeader.vue
index 337650b..84017b1 100644
--- a/src/components/TheHeader.vue
+++ b/src/components/TheHeader.vue
@@ -95,13 +95,13 @@ const socials = [
         <span aria-hidden="true" i="carbon-language" block />
         <span class="text-sm font-medium truncate sr-only md:not-sr-only">{{ t('button.toggle_lang') }}</span>
       </ToggleButton>
-      <ToggleButton class="flex-1 hover:bg-primary/10" :state="isDark" :truthy-label="t('button.toggle_theme.dark')" :falsy-label="t('button.toggle_theme.light')" @click="toggleDark()">
+      <ToggleButton class="flex-1 pointer-events-auto hover:bg-primary/10" :state="isDark" :truthy-label="t('button.toggle_theme.dark')" :falsy-label="t('button.toggle_theme.light')" @click="toggleDark()">
         <span aria-hidden="true" block i="carbon-sun dark:carbon-moon" />
         <span class="text-sm font-medium truncate sr-only md:not-sr-only">{{ t('button.toggle_theme._label') }}</span>
       </ToggleButton>
-      <button flex="~ 1" class="text-foreground bg-foreground/20 h-full items-center justify-center relative z-30 md:hidden" @click="toggleSidebar">
-        <span sr-only>Menu</span>
+      <button flex="~ 1" class="text-foreground bg-foreground/20 h-full pointer-events-auto items-center justify-center relative z-30 md:hidden" @click="toggleSidebar">
         <span aria-hidden="true" i="carbon-menu" block />
+        <span sr-only>Menu</span>
       </button>
     </div>
   </header>
diff --git a/src/pages/about.vue b/src/pages/about.vue
index d6af9a1..ebbf807 100644
--- a/src/pages/about.vue
+++ b/src/pages/about.vue
@@ -85,7 +85,9 @@ function isSocialSection(key: string) {
       </div>
     </div>
     <AboutFooter />
+    <!--
     <BackgroundText>ABOUT ME</BackgroundText>
+    -->
   </div>
 </template>
 
diff --git a/src/pages/work/[slug].vue b/src/pages/work/[slug].vue
deleted file mode 100644
index 1320d4a..0000000
--- a/src/pages/work/[slug].vue
+++ /dev/null
@@ -1,40 +0,0 @@
-<script setup lang="ts">
-const route = useRoute()
-
-definePage({
-  beforeEnter: (to) => {
-    // @ts-expect-error suppress "Property slug does not exist on type" error
-    if (to.params.slug && !['sim-web', 'stage-two', 'og-tool'].includes(to.params.slug))
-      return 'work-not-found'
-  },
-})
-</script>
-
-<template>
-  <div class="bg-background overflow-y-scroll">
-    <section class="flex h-full items-center">
-      <div flex="1" class="relative">
-        <div class="title font-plaster right-16 top-0 absolute">
-          {{ route.params.slug }}
-        </div>
-        <div class="hero" />
-      </div>
-    </section>
-  </div>
-</template>
-
-<style scoped>
-.hero {
-  height: calc(100dvh - (100dvh / 5 * 2));
-  mask-image: var(--image-texture);
-  background: linear-gradient(to top right, var(--color-foreground), transparent 75%);
-}
-
-.title {
-  text-transform: uppercase;
-  font-size: 6em;
-  font-weight: 800;
-  -webkit-text-stroke: 1px var(--color-foreground);
-  color: transparent;
-}
-</style>