beauty treatment #3

app/components/web-footer.vue

@@ -5,19 +5,13 @@ import WebThemeToggle from './web-theme-toggle.vue';
 
 <template>
     <footer>
-        <div class="article">
+        <div class="article article-footer">
             <section class="web-section">
-                <img src="/favicon.ico" alt="" width="48" height="48">
-                <h3 class="web-footer-title">Techit Thawiang's Website /// techit.win</h3>
                 <p class="web-footer-notice">
                     Copyright &copy; Techit Thawiang 2025 (2568). All rights reserved.<br>
                     PGP/GPG Key: <code style="font-size: 12px;"><a href="https://files.thawia.ng/files/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>.
+                    Powered by <a class="link" href="https://dailitation.xyz">dailitation.xyz</a>. <a class="link" href="https://github.com/TechitWinner/web">Source Code</a> is available under GPL-3.0 license.
                 </p>
-                <p class="web-footer-notice">
-                    More from me: <a class="link" href="https://unix.in.th">unix.in.th</a> and <a class="link" href="https://uptime.dailitation.xyz">Network Status</a>
-                </p>
-                <!-- <WebThemeToggle/> -->
             </section>
         </div>
     </footer>

app/pages/about.vue

@@ -1,6 +1,6 @@
 <template>
     <main>
-        <article class="article">
+        <article class="article article-special">
             <section class="web-section web-section-split web-section-big-text">
                 <div class="web-section-pane">
                     <img width="342" height="342" style="margin-bottom: calc(var(--ui-spacing)*6);" src="https://files.thawia.ng/files/assets/profile/techit/1758801557516.jpeg" alt="Techit Thawiang's avatar.">

app/pages/index.vue

@@ -4,28 +4,21 @@
             <section class="web-section" aria-labelledby="hero" aria-describedby="what-does-he-do?">
                 <img width="240" height="240" style="margin-bottom: calc(var(--ui-spacing)*6);" src="https://files.thawia.ng/files/assets/profile/techit/1758801557516.jpeg" 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 lover</span> and a <span class="text-blue-500">self-hoster</span> who's exploring computer science.</p>
+                <p id="what-does-he-do?" class="font-hero-desc">A 10th grader <span style="color: #0066ff;">hobbyist developer</span> and a <span style="color: #ff6600;">self-hoster</span> 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">
+                <h2 class="web-title" id="about-me">Who am I?</h2>
-                    <NuxtLink href="/about" title="Navigate to about me page." class="link link-no-underline">Who am I?<span aria-hidden="true" class="link-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="posts" aria-describedby="posts-paragraph-1">
-                <h2 class="web-title" id="posts">
+                <h2 class="web-title" id="posts">My posts</h2>
-                    <NuxtLink href="/posts" title="Navigate to posts page." class="link link-no-underline">Posts<span aria-hidden="true" class="link-inline-icon">→</span></NuxtLink>
-                </h2>
                 <p id="posts-paragraph-1"></p>
                 <p id="posts-paragraph-2">Let's go take a look of my posts collection!</p>
                 <PostsArticleList :limit="4"/>
             </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">My projects</h2>
-                <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="link-inline-icon">→</span></NuxtLink>
-                </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-card-container">