From 136c5136309c96ee41b17fae76ce0c929cf721fb Mon Sep 17 00:00:00 2001
From: Techit Thawiang <techit@thawia.ng>
Date: Mon, 25 Aug 2025 21:13:33 +0700
Subject: [PATCH] change new layout

---
 components/web-footer.vue       |  40 ++++----
 components/web-header.vue       | 142 ++++++++++++++--------------
 components/web-theme-toggle.vue |  46 +++++----
 layouts/default.vue             |  12 +--
 pages/collections.vue           |  72 +++++++-------
 pages/contact.vue               | 120 +++++++++++------------
 pages/fonts.vue                 | 162 +++++++++++++++++++++++---------
 pages/index.vue                 | 120 ++++++++++++-----------
 pages/portal.vue                |  76 +++++++--------
 9 files changed, 428 insertions(+), 362 deletions(-)

diff --git a/components/web-footer.vue b/components/web-footer.vue
index d8a9be9..fcbfcb4 100644
--- a/components/web-footer.vue
+++ b/components/web-footer.vue
@@ -1,20 +1,22 @@
-<script setup lang="ts">
-import WebThemeToggle from './web-theme-toggle.vue';
-
-</script>
-
-<template>
-    <footer>
-        <div class="article">
-            <section class="web-section">
-                <h3 class="text-3xl md:text-5xl mb-4">Techit's Home /// thawia.ng</h3>
-                <small>
-                    Copyright &copy; Techit Thawiang 2025 (2568). All rights reserved.<br>
-                    PGP/GPG Key: <code style="font-size: 12px;"><a href="/portal/f/Techit Thawiang_0xE649CED321557334_public.asc">4116 33BE 1B4A 19D4 8D77  9ADE E649 CED3 2155 7334</a></code><br>
-                    Powered by <a href="https://dailitation.xyz">dailitation.xyz</a>, <a href="https://github.com/TechitWinner/web">Source Code</a>.
-                </small><br/>
-                <WebThemeToggle/>
-            </section>
-        </div>
-    </footer>
+<script setup lang="ts">
+import WebThemeToggle from './web-theme-toggle.vue';
+
+</script>
+
+<template>
+    <footer>
+        <div class="article">
+            <section class="web-section">
+                <h3 class="text-2xl md:text-3xl mb-4 font-light">Techit's Home /// thawia.ng</h3>
+                <p>
+                    <small>
+                        Copyright &copy; Techit Thawiang 2025 (2568). All rights reserved.<br>
+                        PGP/GPG Key: <code style="font-size: 12px;"><a href="/portal/f/Techit Thawiang_0xE649CED321557334_public.asc">4116 33BE 1B4A 19D4 8D77  9ADE E649 CED3 2155 7334</a></code><br>
+                        Powered by <a class="link" href="https://dailitation.xyz">dailitation.xyz</a>, <a class="link" href="https://github.com/TechitWinner/web">Source Code</a>.
+                    </small>
+                </p>
+                <WebThemeToggle/>
+            </section>
+        </div>
+    </footer>
 </template>
\ No newline at end of file
diff --git a/components/web-header.vue b/components/web-header.vue
index 35fe380..751d99e 100644
--- a/components/web-header.vue
+++ b/components/web-header.vue
@@ -1,75 +1,69 @@
-<template>
-    <header class="web-header">
-        <section class="web-heading">
-            <NuxtLink href="/" class="web-heading-left-section hover:bg-(--ui-text)/5 active:bg-(--ui-text)/10">
-                <div class="flex items-center h-full bg-[#0066FF]">
-                    <img width="36" height="36"src="/favicon.ico">
-                </div>
-                <p class="web-nav-title mx-2 text-(--ui-text)">thawia.ng</p>
-            </NuxtLink>
-            <div class="web-heading-right-section">
-                <nav class="nav-links">
-                    <ul class="nav-wrapper">
-                        <li class="nav-link">
-                            <NuxtLink href="/">Home</NuxtLink>
-                        </li>
-                        <!-- <li class="nav-link">
-                            <NuxtLink href="/blog">Blog</NuxtLink>
-                        </li>
-                        <li class="nav-link">
-                            <NuxtLink href="/projects">Projects</NuxtLink>
-                        </li> 
-                        <li class="nav-link">
-                            <NuxtLink href="/about">About</NuxtLink>
-                        </li>-->
-                        <li class="nav-link">
-                            <NuxtLink href="/contact">Contact</NuxtLink>
-                        </li>
-                        <li class="nav-link">
-                            <NuxtLink href="/fonts">Fonts</NuxtLink>
-                        </li>
-                        <li class="nav-link">
-                            <NuxtLink href="/collections">Collections</NuxtLink>
-                        </li>
-                    </ul>
-                </nav>
-                <button class="hamburger-toggle" @click="toggleMobileHamburger">
-                    <Icon name="oundr:menu"/>
-                </button>
-            </div>
-        </section>
-        <nav v-if="mobileHamburger" class="hamburger-menu">
-            <ul class="nav-wrapper">
-                <li class="nav-link">
-                    <NuxtLink @click="toggleMobileHamburger" href="/">Home</NuxtLink>
-                </li>
-                <!-- <li class="nav-link">
-                    <NuxtLink href="/blog">Blog</NuxtLink>
-                </li>
-                <li class="nav-link">
-                    <NuxtLink href="/projects">Projects</NuxtLink>
-                </li> 
-                <li class="nav-link">
-                    <NuxtLink href="/about">About</NuxtLink>
-                </li>-->
-                <li class="nav-link">
-                    <NuxtLink @click="toggleMobileHamburger" href="/contact">Contact</NuxtLink>
-                </li>
-                <li class="nav-link">
-                    <NuxtLink @click="toggleMobileHamburger" href="/fonts">Fonts</NuxtLink>
-                </li>
-                <li class="nav-link">
-                    <NuxtLink @click="toggleMobileHamburger" href="/collections">Collections</NuxtLink>
-                </li>
-            </ul>
-        </nav>
-    </header>
-</template>
-
-<script setup>
-const mobileHamburger = ref(false);
-
-function toggleMobileHamburger() {
-    mobileHamburger.value = !mobileHamburger.value
-}
+<template>
+    <header class="web-header web-header-bg web-header-emit-shadow-when-top">
+        <section class="web-heading">
+            <NuxtLink href="/" @click="closeMobileHamburger" class="web-heading-left-section text-(--ui-text) hover:text-primary">
+                <div class="flex items-center h-full bg-[#0066FF]">
+                    <img width="36" height="36"src="/favicon.ico">
+                </div>
+                <p title="thawia.ng, Go home" class="web-nav-title mx-2">thawia.ng/</p>
+            </NuxtLink>
+            <div class="web-heading-right-section">
+                <nav class="nav-links">
+                    <ul class="nav-wrapper">
+                        <li class="nav-link">
+                            <NuxtLink href="/posts">/posts</NuxtLink>
+                        </li>
+                        <!-- <li class="nav-link">
+                            <NuxtLink href="/projects">Projects</NuxtLink>
+                        </li> 
+                        <li class="nav-link">
+                            <NuxtLink href="/about">About</NuxtLink>
+                        </li> -->
+                        <li class="nav-link">
+                            <NuxtLink title="Contact" href="/contact">/contact</NuxtLink>
+                        </li>
+                        <li class="nav-link">
+                            <NuxtLink title="Fonts" href="/fonts">/fonts</NuxtLink>
+                        </li>
+                        <li class="nav-link">
+                            <NuxtLink title="Collection" href="/collections">/collections</NuxtLink>
+                        </li>
+                    </ul>
+                </nav>
+                <button class="hamburger-toggle" @click="toggleMobileHamburger">
+                    <Icon name="oundr:menu"/>
+                </button>
+            </div>
+        </section>
+        <nav v-if="mobileHamburger" class="hamburger-menu">
+            <ul class="nav-wrapper">
+                <li class="nav-link">
+                    <NuxtLink aria-label="Go home" @click="closeMobileHamburger" href="/">/</NuxtLink>
+                </li>
+                <li class="nav-link">
+                    <NuxtLink aria-label="Go to posts" @click="closeMobileHamburger" href="/posts">/posts</NuxtLink>
+                </li>
+                <li class="nav-link">
+                    <NuxtLink aria-label="Go to contact" @click="closeMobileHamburger" href="/contact">/contact</NuxtLink>
+                </li>
+                <li class="nav-link">
+                    <NuxtLink aria-label="Go to fonts" @click="closeMobileHamburger" href="/fonts">/fonts</NuxtLink>
+                </li>
+                <li class="nav-link">
+                    <NuxtLink aria-label="Go to collections" @click="closeMobileHamburger" href="/collections">/collections</NuxtLink>
+                </li>
+            </ul>
+        </nav>
+    </header>
+</template>
+
+<script setup>
+const mobileHamburger = ref(false);
+
+function toggleMobileHamburger() {
+    mobileHamburger.value = !mobileHamburger.value
+}
+function closeMobileHamburger() {
+    mobileHamburger.value = false
+}
 </script>
\ No newline at end of file
diff --git a/components/web-theme-toggle.vue b/components/web-theme-toggle.vue
index b5e8ac9..a6e0cb6 100644
--- a/components/web-theme-toggle.vue
+++ b/components/web-theme-toggle.vue
@@ -1,25 +1,21 @@
-<script setup>
-const colorMode = useColorMode()
-defineProps({
-  isCompact: Boolean,
-  size: 'xs' | 'sm' | 'md' | 'lg' | 'xl'
-})
-const isDark = computed({
-  get() {
-    return colorMode.value === 'dark'
-  },
-  set() {
-    colorMode.preference = colorMode.value === 'dark' ? 'light' : 'dark'
-  }
-})
-</script>
-
-<template>
-  <ClientOnly v-if="!colorMode?.forced">
-    <button @click="isDark = !isDark" class="btn btn-neutral">Toggle Theme</button>
-
-    <template #fallback>
-      <button class="btn btn-neutral">Loading...</button>
-    </template>
-  </ClientOnly>
-</template>
+<script setup>
+const colorMode = useColorMode()
+const isDark = computed({
+  get() {
+    return colorMode.value === 'dark'
+  },
+  set() {
+    colorMode.preference = colorMode.value === 'dark' ? 'light' : 'dark'
+  }
+})
+</script>
+
+<template>
+  <ClientOnly v-if="!colorMode?.forced">
+    <button @click="isDark = !isDark" class="btn btn-sm btn-neutral">Toggle Theme</button>
+
+    <template #fallback>
+      <button class="btn btn-sm btn-neutral">Loading...</button>
+    </template>
+  </ClientOnly>
+</template>
diff --git a/layouts/default.vue b/layouts/default.vue
index c1111c0..cc7c7a2 100644
--- a/layouts/default.vue
+++ b/layouts/default.vue
@@ -1,7 +1,7 @@
-<template>
-    <div>
-        <WebHeader/>
-        <slot/>
-        <WebFooter/>
-    </div>
+<template>
+    <div>
+        <WebHeader/>
+        <slot/>
+        <WebFooter/>
+    </div>
 </template>
\ No newline at end of file
diff --git a/pages/collections.vue b/pages/collections.vue
index fd43ea2..f456856 100644
--- a/pages/collections.vue
+++ b/pages/collections.vue
@@ -1,37 +1,37 @@
-<template>
-    <main>
-        <article class="article">
-            <section class="web-hero" aria-labelledby="hero" aria-describedby="hero-desc">
-                <h1 id="hero" class="font-hero">Techit's Collection</h1>
-                <p id="hero-desc" class="font-hero-desc">Techit's personal collection of various interesting, trending media/materials.</p>
-            </section>
-            <section class="web-section" aria-labelledby="docs" aria-describedby="docs-desc">
-                <h3 id="docs" class="web-title">Interesting Documents</h3>
-                <ul>
-                    <li><a class="link" href="https://thawia.ng/portal/f/act/Copyright_Act2_TH.pdf">Thailand Copyright Act: พระราชบัญญัติลิขสิทธิ์ พ.ศ. ๒๕๓๗</a></li>
-                </ul>
-            </section>
-            <section class="web-section" aria-labelledby="tools" aria-describedby="tools-desc">
-                <h3 id="tools" class="web-title">Interesting Tools</h3>
-                <ul>
-                    <li><a class="link" href="https://github.com/Tyrrrz/YoutubeDownloader">YoutubeDownloader: Downloads videos and playlists from YouTube</a></li>
-                </ul>
-            </section>
-        </article>
-    </main>
-</template>
-
-<script setup>
-const TITLE = "Collections"
-const DESC = "Techit's personal-public collections"
-
-useHead({
-  title: TITLE,
-  meta: [
-    { name: 'description', content: DESC },
-    { property: 'og:title', content: TITLE },
-    { property: 'og:description', content: DESC },
-    { property: 'og:type', content: 'website' }
-  ]
-})
+<template>
+    <main>
+        <article class="article">
+            <section class="web-hero web-hero-bg" aria-labelledby="hero" aria-describedby="hero-desc">
+                <h1 id="hero" class="font-hero">Techit's Collection</h1>
+                <p id="hero-desc" class="font-hero-desc">Techit's personal collection of various interesting, trending media/materials.</p>
+            </section>
+            <section class="web-section" aria-labelledby="docs" aria-describedby="docs-desc">
+                <h3 id="docs" class="web-title">Interesting Documents</h3>
+                <ul>
+                    <li><a class="link" href="https://thawia.ng/portal/f/act/Copyright_Act2_TH.pdf">Thailand Copyright Act: พระราชบัญญัติลิขสิทธิ์ พ.ศ. ๒๕๓๗</a></li>
+                </ul>
+            </section>
+            <section class="web-section" aria-labelledby="tools" aria-describedby="tools-desc">
+                <h3 id="tools" class="web-title">Interesting Tools</h3>
+                <ul>
+                    <li><a class="link" href="https://github.com/Tyrrrz/YoutubeDownloader">YoutubeDownloader: Downloads videos and playlists from YouTube</a></li>
+                </ul>
+            </section>
+        </article>
+    </main>
+</template>
+
+<script setup>
+const TITLE = "Collections"
+const DESC = "Techit's personal-public collections"
+
+useHead({
+  title: TITLE,
+  meta: [
+    { name: 'description', content: DESC },
+    { property: 'og:title', content: TITLE },
+    { property: 'og:description', content: DESC },
+    { property: 'og:type', content: 'website' }
+  ]
+})
 </script>
\ No newline at end of file
diff --git a/pages/contact.vue b/pages/contact.vue
index df62832..e185bdb 100644
--- a/pages/contact.vue
+++ b/pages/contact.vue
@@ -1,61 +1,61 @@
-<template>
-    <main>
-        <article class="article">
-            <section class="web-hero" aria-labelledby="hero" aria-describedby="hero-desc">
-                <h1 id="hero" class="font-hero">Contact Techit</h1>
-                <p id="hero-desc" class="font-hero-desc">You can reach me in countless ways — I’m on basically every social media app out there.</p>
-            </section>
-            <section class="web-section" aria-labelledby="decentralized" aria-describedby="decentralized-paragraph-1">
-                <h2 class="web-title" id="decentralized">Decentral&shy;ized Ways</h2>
-                <p id="decentralized-paragraph-1">I recommended to contact me via these given ways.</p>
-                <ul class="list-disc">
-                    <li>
-                        <p>techit@thawia.ng — E-mail Address</p>
-                    </li>
-                    <li>
-                        <p>@techit@furnu.org — Mastodon</p>
-                    </li>
-                    <li>
-                        <p>@techitwinner:matrix.org — Matrix</p>
-                    </li>
-                </ul>
-            </section>
-            <section class="web-section" aria-labelledby="centralized" aria-describedby="centralized-paragraph-1">
-                <h2 class="web-title" id="centralized">Social Media</h2>
-                <p id="centralized-paragraph-1">If I do not reply to messages sent via contact above, plesae kindly contact me via these social media accounts.</p>
-                <ul class="list-disc">
-                    <li>
-                        <p>@techitwinner — X (Twitter)</p>
-                    </li>
-                    <li>
-                        <p>@techitwinner — TikTok</p>
-                    </li>
-                    <li>
-                        <p>@techitwinner — Instagram</p>
-                    </li>
-                    <li>
-                        <p>@techitwinner — Facebook</p>
-                    </li>
-                    <li>
-                        <p>@thawia.ng — BlueSky</p>
-                    </li>
-                </ul>
-            </section>
-        </article>
-    </main>
-</template>
-
-<script setup>
-const TITLE = "Contact"
-const DESC = "How to contact Techit"
-
-useHead({
-  title: TITLE,
-  meta: [
-    { name: 'description', content: DESC },
-    { property: 'og:title', content: TITLE },
-    { property: 'og:description', content: DESC },
-    { property: 'og:type', content: 'website' }
-  ]
-})
+<template>
+    <main>
+        <article class="article">
+            <section class="web-hero web-hero-bg" aria-labelledby="hero" aria-describedby="hero-desc">
+                <h1 id="hero" class="font-hero">Contact Techit</h1>
+                <p id="hero-desc" class="font-hero-desc">You can reach me in countless ways — I’m on basically every social media app out there.</p>
+            </section>
+            <section class="web-section" aria-labelledby="decentralized" aria-describedby="decentralized-paragraph-1">
+                <h2 class="web-title" id="decentralized">Decentral&shy;ized Ways</h2>
+                <p id="decentralized-paragraph-1">I recommended to contact me via these given ways.</p>
+                <ul class="list-disc">
+                    <li>
+                        <p>techit@thawia.ng — E-mail Address</p>
+                    </li>
+                    <li>
+                        <p>@techit@furnu.org — Mastodon</p>
+                    </li>
+                    <li>
+                        <p>@techitwinner:matrix.org — Matrix</p>
+                    </li>
+                </ul>
+            </section>
+            <section class="web-section" aria-labelledby="centralized" aria-describedby="centralized-paragraph-1">
+                <h2 class="web-title" id="centralized">Social Media</h2>
+                <p id="centralized-paragraph-1">If I do not reply to messages sent via contact above, plesae kindly contact me via these social media accounts.</p>
+                <ul class="list-disc">
+                    <li>
+                        <p>@techitwinner — X (Twitter)</p>
+                    </li>
+                    <li>
+                        <p>@techitwinner — TikTok</p>
+                    </li>
+                    <li>
+                        <p>@techitwinner — Instagram</p>
+                    </li>
+                    <li>
+                        <p>@techitwinner — Facebook</p>
+                    </li>
+                    <li>
+                        <p>@thawia.ng — BlueSky</p>
+                    </li>
+                </ul>
+            </section>
+        </article>
+    </main>
+</template>
+
+<script setup>
+const TITLE = "Contact"
+const DESC = "How to contact Techit"
+
+useHead({
+  title: TITLE,
+  meta: [
+    { name: 'description', content: DESC },
+    { property: 'og:title', content: TITLE },
+    { property: 'og:description', content: DESC },
+    { property: 'og:type', content: 'website' }
+  ]
+})
 </script>
\ No newline at end of file
diff --git a/pages/fonts.vue b/pages/fonts.vue
index 1111eed..15a99f0 100644
--- a/pages/fonts.vue
+++ b/pages/fonts.vue
@@ -1,48 +1,116 @@
-<template>
-    <main>
-        <article class="article">
-            <section class="web-hero" aria-labelledby="hero" aria-describedby="hero-desc">
-                <h1 id="hero" class="font-hero">Fonts</h1>
-                <p id="hero-desc" class="font-hero-desc">Welcome to /fonts! This page were created to list all fonts I have hosted it here, so you can use it too.</p>
-            </section>
-            <section class="web-section" aria-labelledby="roboto" aria-describedby="roboto-desc">
-                <h3 id="roboto" class="web-title">Roboto Family</h3>
-                <p id="roboto-desc">All Roboto Family hosted here, here's the CSS files</p>
-                <ul>
-                    <li><a class="link" href="/fonts/roboto/roboto.css">Roboto</a></li>
-                    <li><a class="link" href="/fonts/roboto/serif/serif.css">Roboto Serif</a></li>
-                    <li><a class="link" href="/fonts/roboto/mono/mono.css">Roboto Mono</a></li>
-                </ul>
-            </section>
-            <section class="web-section" aria-labelledby="noto" aria-describedby="noto-desc">
-                <h3 id="noto" class="web-title">Noto Sans</h3>
-                <p id="noto-desc">Noto Sans, only Thai is hosted here right now and here's the CSS files</p>
-                <ul>
-                    <li><a class="link" href="/fonts/noto/thai/thai.css">Noto Sans Thai</a></li>
-                </ul>
-            </section>
-            <section class="web-section" aria-labelledby="tiktok" aria-describedby="tiktok-desc">
-                <h3 id="tiktok" class="web-title">TikTok Sans</h3>
-                <p id="tiktok-desc">TikTok Sans from TikTok. Here's the CSS files</p>
-                <ul>
-                    <li><a class="link" href="/fonts/tiktoksans/tiktoksans.css">TikTok Sans</a></li>
-                </ul>
-            </section>
-        </article>
-    </main>
-</template>
-
-<script setup>
-const TITLE = "Fonts"
-const DESC = "Fonts hosted on thawia.ng"
-
-useHead({
-  title: TITLE,
-  meta: [
-    { name: 'description', content: DESC },
-    { property: 'og:title', content: TITLE },
-    { property: 'og:description', content: DESC },
-    { property: 'og:type', content: 'website' }
-  ]
-})
+<template>
+    <main>
+        <article class="article">
+            <section class="web-hero web-hero-bg" aria-labelledby="hero" aria-describedby="hero-desc">
+                <h1 id="hero" class="font-hero">Fonts</h1>
+                <p id="hero-desc" class="font-hero-desc">Welcome to /fonts! This page were created to list all fonts I have hosted it here, so you can use it too.</p>
+            </section>
+            <section v-for="family in fonts" class="web-section" :aria-labelledby="family.id" aria-describedby="family.desc">
+                <h3 id="noto" class="web-title">{{ family.family }}</h3>
+                <p id="noto-desc">{{ family.desc }}</p>
+                <div class="font-cards">
+                    <a v-for="font in family.childrens" :disabled="font.disabled" :href="font.css" class="font-card">
+                        <div class="font-card-content">
+                            <h3>{{ font.name }}</h3>
+                            <p>{{ font.css }}</p>
+                        </div>
+                   </a>
+                </div>
+            </section>
+        </article>
+    </main>
+</template>
+
+<script setup>
+const fonts = [
+    {
+        id: "roboto",
+        family: "Roboto Family",
+        desc: "Roboto, a neo-grotesque sans-serif typeface family developed by Google as the system font for its mobile operating system Android.",
+        childrens: [
+            {
+                id: "roboto",
+                name: "Roboto",
+                css: "/fonts/roboto/roboto.css"
+            },
+            {
+                id: "roboto-mono",
+                name: "Roboto Mono",
+                css: "/fonts/roboto-mono/roboto-mono.css"
+            },
+            {
+                id: "roboto-serif",
+                name: "Roboto Serif",
+                css: "/fonts/roboto-serif/roboto-serif.css"
+            }
+        ]
+    },
+    {
+        id: "inter",
+        family: "Inter Family",
+        desc: "Inter, a typeface designed for computer screens. It features a tall x-height to aid in readability of mixed-case and lower-case text.",
+        childrens: [
+            {
+                id: "inter",
+                name: "Inter",
+                css: "/fonts/inter/inter.css"
+            }
+        ]
+    },
+    {
+        id: "noto",
+        family: "Noto Family",
+        desc: "Noto Sans, a free font family from Google that aims to support all languages with a harmonious look and feel.",
+        childrens: [
+            {
+                id: "noto-sans",
+                name: "Noto Sans",
+                css: "/fonts/noto-sans/noto-sans.css"
+            },
+            {
+                id: "noto-sans-mono",
+                name: "Noto Sans Mono",
+                css: "/fonts/noto-sans-mono/noto-sans-mono.css"
+            },
+            {
+                id: "noto-sans-thai",
+                name: "Noto Sans Thai",
+                css: "/fonts/noto-sans-thai/noto-sans-thai.css"
+            },
+            {
+                disabled: true,
+                id: "noto-sans-thai-looped",
+                name: "Noto Sans Thai Looped",
+                css: "/fonts/noto-sans-thai-looped/noto-sans-thai-looped.css"
+            }
+        ]
+    },
+    {
+        id: "tiktok-sans",
+        family: "TikTok Sans",
+        desc: "TikTok Sans, the official typeface of TikTok, designed to reflect the brand's dynamic and creative spirit.",
+        childrens: [
+            {
+                id: "tiktok-sans",
+                name: "TikTok Sans",
+                css: "/fonts/tiktok-sans/tiktok-sans.css"
+            }
+        ]
+    }
+]
+
+const config = useRuntimeConfig();
+const TITLE = "Fonts"
+const DESC = "Fonts hosted on thawia.ng"
+const baseUrl = config.public.baseUrl
+
+useHead({
+  title: TITLE,
+  meta: [
+    { name: 'description', content: DESC },
+    { property: 'og:title', content: TITLE },
+    { property: 'og:description', content: DESC },
+    { property: 'og:type', content: 'website' }
+  ]
+})
 </script>
\ No newline at end of file
diff --git a/pages/index.vue b/pages/index.vue
index df758c8..92c6592 100644
--- a/pages/index.vue
+++ b/pages/index.vue
@@ -1,57 +1,63 @@
-<template>
-    <main>
-        <article class="article">
-            <section class="web-hero" aria-labelledby="hero" aria-describedby="what-does-he-do?">
-                <img width="240" height="240" class="mb-6" src="https://thawia.ng/portal/f/assets/profile/techit/techit2025_student-cropped.jpg">
-                <h1 id="hero" class="font-hero">Techit Thawiang</h1>
-                <p id="what-does-he-do?" class="font-hero-desc">A 10th grader who's exploring computer science.</p>
-            </section>
-            <section class="web-section" aria-labelledby="about-me" aria-describedby="about-me-paragraph-1">
-                <!-- <h2 class="web-title" id="about-me"><NuxtLink href="/about" title="Navigate to about me page." class="link link-no-underline">About Me <span aria-hidden="true" class="inline-icon">→</span></NuxtLink></h2> -->
-                <h2 class="web-title" id="about-me">About Me</h2>
-                <p id="about-me-paragraph-1">I'm a 15 years old 10th grader at Ko Pho Tuay Ngam Wittaya School. In my free time, I usually spend my time playing games or learning more about software engineering.</p>
-                <p id="about-me-paragraph-2">In the future, I dream of having my own tech company, being a network engineer or being a civil engineer.</p>
-            </section>
-            <section class="web-section" aria-labelledby="projects" aria-describedby="projects-paragraph-1">
-                <!-- <h2 class="web-title" id="projects"><NuxtLink href="/projects" title="Navigate to projects page." class="link link-no-underline">Projects <span aria-hidden="true" class="inline-icon">→</span></NuxtLink></h2> -->
-                <h2 class="web-title" id="projects">Projects</h2>
-                <p id="projects-paragraph-1">As I said above, I usually spend my free time learning more about software engineering. This includes server administration for <a class="link" href="https://dailitation.xyz">dailitation.xyz</a>. Over time, small and large projects have been born and have died.</p>
-                <p id="projects-paragraph-2">Let's go take a look of my projects collection!</p>
-                <div class="grid grid-cols-1 md:grid-cols-3 gap-2">
-                    <a target="_blank" href="https://github.com/TechitWinner/warehouse" class="project-card">
-                        <img :src="baseUrl + '/portal/f/assets/warehouse.jpg'">
-                        <h3>Warehouse</h3>
-                        <p title="I planned it to be my API for personal website and other stuff; written in Rust and Axum.">I planned it to be my API for personal website and other stuff; written in Rust and Axum.</p>
-                    </a>
-                    <a target="_blank" href="https://github.com/TechitWinner/web" class="project-card">
-                        <img :src="baseUrl + '/portal/f/assets/web.png'">
-                        <h3>Web</h3>
-                        <p title="Nothing much, just this website written in Nuxt (Vue) and some cool CSS.">Nothing much, just this website written in Nuxt (Vue) and some cool CSS.</p>
-                    </a>
-                    <a target="_blank" href="https://github.com/TechitWinner/coinbag-pro" class="project-card">
-                        <img src="https://opengraph.githubassets.com/79ca3021ce93e3d277062d399d623842564bc2f9407600e5b6102036f01e8277/TechitWinner/coinbag-pro">
-                        <h3>Coinbag Pro</h3>
-                        <p title="A handwriting typeface, created by me but it is a dead project now.">A handwriting typeface, created by me but it is a dead project now.</p>
-                    </a>
-                </div>
-            </section>
-        </article>
-    </main>
-</template>
-
-<script setup>
-const config = useRuntimeConfig();
-const TITLE = "Home"
-const DESC = "Welcome to thawia.ng, a Techit's website."
-const baseUrl = config.public.baseUrl
-
-useHead({
-  title: TITLE,
-  meta: [
-    { name: 'description', content: DESC },
-    { property: 'og:title', content: TITLE },
-    { property: 'og:description', content: DESC },
-    { property: 'og:type', content: 'website' }
-  ]
-})
-</script>
+<template>
+    <main>
+        <article class="article">
+            <section class="web-hero web-hero-bg" aria-labelledby="hero" aria-describedby="what-does-he-do?">
+                <img width="240" height="240" class="mb-6" src="https://thawia.ng/portal/f/assets/profile/techit/sumo-clipart.png" alt="Techit Thawiang's avatar.">
+                <h1 id="hero" class="font-hero">Techit Thawiang</h1>
+                <p id="what-does-he-do?" class="font-hero-desc">A 10th grader <span class="text-pink-500">hobbyist developer</span>, <span class="text-green-600">a math nerd</span>, <span class="text-blue-500">self-hoster</span> and a KDE user who's exploring computer science.</p>
+            </section>
+            <section class="web-section" aria-labelledby="about-me" aria-describedby="about-me-paragraph-1">
+                <!-- <h2 class="web-title" id="about-me"><NuxtLink href="/about" title="Navigate to about me page." class="link link-no-underline">About Me <span aria-hidden="true" class="inline-icon">→</span></NuxtLink></h2> -->
+                <h2 class="web-title" id="about-me">Who am I?</h2>
+                <p id="about-me-paragraph-1">My name is Techit Thawiang, aka <u>TechitWinner</u>. I'm a 15 years old 10th grader at Ko Pho Tuay Ngam Wittaya School. In my free time, I usually spend my time playing video games or learning more about software engineering.</p>
+                <p id="about-me-paragraph-2">In the future, I dream of having my own tech company, being a network engineer or a software engineer.</p>
+            </section>
+            <section class="web-section" aria-labelledby="projects" aria-describedby="projects-paragraph-1">
+                <!-- <h2 class="web-title" id="projects"><NuxtLink href="/projects" title="Navigate to projects page." class="link link-no-underline">Projects <span aria-hidden="true" class="inline-icon">→</span></NuxtLink></h2> -->
+                <h2 class="web-title" id="projects">Projects</h2>
+                <p id="projects-paragraph-1">As I said above, I usually spend my free time learning more about software engineering. This includes server administration for <a class="link" href="https://dailitation.xyz">dailitation.xyz</a>. Over time, small and large projects have born and died.</p>
+                <p id="projects-paragraph-2">Let's go take a look of my projects collection!</p>
+                <div class="project-cards">
+                    <a target="_blank" href="https://github.com/TechitWinner/warehouse" class="project-card">
+                        <img :src="baseUrl + '/portal/f/assets/warehouse.jpg'">
+                        <div class="project-card-content">
+                            <h3>Warehouse</h3>
+                            <p title="I planned it to be my API for personal website and other stuff; written in Rust and Axum.">I planned it to be my API for personal website and other stuff; written in Rust and Axum.</p>
+                        </div>
+                   </a>
+                    <a target="_blank" href="https://github.com/TechitWinner/web" class="project-card">
+                        <img :src="baseUrl + '/portal/f/assets/web.png'">
+                        <div class="project-card-content">
+                            <h3>Web</h3>
+                            <p title="Nothing much, just this website written in Nuxt (Vue) and some cool CSS.">Nothing much, just this website written in Nuxt (Vue) and some cool CSS.</p>
+                        </div>
+                    </a>
+                    <a target="_blank" href="https://github.com/TechitWinner/coinbag-pro" class="project-card">
+                        <img src="https://opengraph.githubassets.com/79ca3021ce93e3d277062d399d623842564bc2f9407600e5b6102036f01e8277/TechitWinner/coinbag-pro">
+                        <div class="project-card-content">
+                            <h3>Coinbag Pro</h3>
+                            <p title="A handwriting typeface, created by me but it is a dead project now.">A handwriting typeface, created by me but it is a dead project now.</p>
+                        </div>
+                    </a>
+                </div>
+            </section>
+        </article>
+    </main>
+</template>
+
+<script setup>
+const config = useRuntimeConfig();
+const baseUrl = config.public.baseUrl
+const TITLE = "Home"
+const DESC = "Welcome to thawia.ng, a Techit's website."
+
+useHead({
+  title: TITLE,
+  meta: [
+    { name: 'description', content: DESC },
+    { property: 'og:title', content: TITLE },
+    { property: 'og:description', content: DESC },
+    { property: 'og:type', content: 'website' }
+  ]
+})
+</script>
diff --git a/pages/portal.vue b/pages/portal.vue
index e016b67..185cec5 100644
--- a/pages/portal.vue
+++ b/pages/portal.vue
@@ -1,38 +1,38 @@
-<template>
-    <main>
-        <article class="article">
-            <section class="web-hero" aria-labelledby="hero" aria-describedby="hero-desc">
-                <h1 id="hero" class="font-hero">Portal</h1>
-                <p id="hero-desc" class="font-hero-desc">Take a portal to travel to various dimensions.</p>
-            </section>
-            <section class="web-section" aria-labelledby="projects" aria-describedby="projects-paragraph-1">
-                <div class="grid grid-cols-1 md:grid-cols-3 gap-2">
-                    <a :href="baseUrl + '/portal/f/'" class="project-card">
-                        <div class="flex flex-row gap-2 items-center">
-                            <Icon name="oundr:folder"/>
-                            <h3>Files</h3>
-                        </div>
-                        <p title="A portal that collects this website data, whether it's mine or not.">A portal that collects this website data, whether it's mine or not.</p>
-                    </a>
-                </div>
-            </section>
-        </article>
-    </main>
-</template>
-
-<script setup>
-const config = useRuntimeConfig();
-const TITLE = "Portal"
-const DESC = "Choose your way wisely."
-const baseUrl = config.public.baseUrl
-
-useHead({
-  title: TITLE,
-  meta: [
-    { name: 'description', content: DESC },
-    { property: 'og:title', content: TITLE },
-    { property: 'og:description', content: DESC },
-    { property: 'og:type', content: 'website' }
-  ]
-})
-</script>
+<template>
+    <main>
+        <article class="article">
+            <section class="web-hero web-hero-bg" aria-labelledby="hero" aria-describedby="hero-desc">
+                <h1 id="hero" class="font-hero">Portal</h1>
+                <p id="hero-desc" class="font-hero-desc">Take a portal to travel to various dimensions.</p>
+            </section>
+            <section class="web-section" aria-labelledby="projects" aria-describedby="projects-paragraph-1">
+                <div class="grid grid-cols-1 md:grid-cols-3 gap-2">
+                    <a :href="baseUrl + '/portal/f/'" class="project-card">
+                        <div class="flex flex-row gap-2 items-center">
+                            <Icon name="oundr:folder"/>
+                            <h3>Files</h3>
+                        </div>
+                        <p title="A portal that collects this website data, whether it's mine or not.">A portal that collects this website data, whether it's mine or not.</p>
+                    </a>
+                </div>
+            </section>
+        </article>
+    </main>
+</template>
+
+<script setup>
+const config = useRuntimeConfig();
+const TITLE = "Portal"
+const DESC = "Choose your way wisely."
+const baseUrl = config.public.baseUrl
+
+useHead({
+  title: TITLE,
+  meta: [
+    { name: 'description', content: DESC },
+    { property: 'og:title', content: TITLE },
+    { property: 'og:description', content: DESC },
+    { property: 'og:type', content: 'website' }
+  ]
+})
+</script>