From e8d201e95513330d4eb3c5fb94681c9db34613c1 Mon Sep 17 00:00:00 2001
From: Techit Thawiang <techit@dailitation.xyz>
Date: Sat, 12 Jul 2025 23:22:31 +0700
Subject: [PATCH] Update structure

---
 pages/collections.vue | 33 +++++++++++++--------------
 pages/contact.vue     | 53 ++++++++++++++++++++++++++++++++-----------
 pages/fonts.vue       | 49 +++++++++++++++++++++------------------
 pages/index.vue       | 46 +++++++++++++++++++++++++++----------
 4 files changed, 117 insertions(+), 64 deletions(-)

diff --git a/pages/collections.vue b/pages/collections.vue
index 95d23f2..fd43ea2 100644
--- a/pages/collections.vue
+++ b/pages/collections.vue
@@ -1,23 +1,22 @@
 <template>
     <main>
         <article class="article">
-            <h1>Techit's Collections</h1>
-            <p>
-                Collections of interesting documents.
-            </p>
-            <ul>
-                <li>
-                    <a href="/portal/f/act/Copyright_Act2_TH.pdf"><b>Thailand Copyright Act</b>: พระราชบัญญัติลิขสิทธิ์ พ.ศ. ๒๕๓๗</a>
-                </li>
-            </ul>
-            <p>
-                Collections of interesting tools.
-            </p>
-            <ul>
-                <li>
-                    <a href="https://github.com/Tyrrrz/YoutubeDownloader"><b>YoutubeDownloader</b>: Downloads videos and playlists from YouTube</a>
-                </li>
-            </ul>
+            <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>
diff --git a/pages/contact.vue b/pages/contact.vue
index aaa777f..df62832 100644
--- a/pages/contact.vue
+++ b/pages/contact.vue
@@ -1,19 +1,46 @@
 <template>
     <main>
         <article class="article">
-            <h1>Contact Techit</h1>
-            <p>
-                You can reach me in countless ways — I’m on basically every social media app out there.
-            </p>
-                <ul>
-                <li>E-mail: <a href="mailto:techit@dailitation.xyz">techit@dailitation.xyz</a> (PGP/GPG available in footer section)</li>
-                <li>Matrix: @techitwinner:matrix.org</li>
-                <li>Facebook: Techit Thawiang (@techitwinner)</li>
-                <li>Instagram: Techit Thawiang (@techitwinner)</li>
-                <li>Twitter: Techit Thawiang (@techitwinner)</li>
-                <li>TikTok: Techit Thawiang (@techitwinner)</li>
-                <li>Bluesky: Techit Thawiang (@thawia.ng)</li>
-            </ul>
+            <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>
diff --git a/pages/fonts.vue b/pages/fonts.vue
index 841c6c2..1111eed 100644
--- a/pages/fonts.vue
+++ b/pages/fonts.vue
@@ -1,28 +1,33 @@
 <template>
     <main>
         <article class="article">
-            <h1>Fonts</h1>
-            <p>
-                Welcome to /fonts! This page were created to list all fonts I have hosted it here, so you can use it too.
-            </p>
-            <ul>
-                <li>
-                    <h3>Roboto Family</h3>
-                    <p>All Roboto Family hosted here, here's the CSS files</p>
-                    <ul>
-                        <li><a href="/fonts/roboto/roboto.css">Roboto</a></li>
-                        <li><a href="/fonts/roboto/serif/serif.css">Roboto Serif</a></li>
-                        <li><a href="/fonts/roboto/mono/mono.css">Roboto Mono</a></li>
-                    </ul>
-                </li>
-                <li>
-                    <h3>Noto Sans Thai</h3>
-                    <p>Noto Sans Thai, here's the CSS files</p>
-                    <ul>
-                        <li><a href="/fonts/noto/thai/thai.css">Noto Sans Thai</a></li>
-                    </ul>
-                </li>
-            </ul>
+            <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>
diff --git a/pages/index.vue b/pages/index.vue
index a91c40d..fd9f401 100644
--- a/pages/index.vue
+++ b/pages/index.vue
@@ -1,18 +1,40 @@
 <template>
     <main>
         <article class="article">
-            <h1>Welcome to thawia.ng</h1>
-            <p>
-                Hi, My name is Techit Thawiang, I'm a 10th grade student at Ko Pho Tuay Ngam Wittaya. I'm passionated in coding and developing software.
-            </p>
-            <p>
-                In my free time, I usually spend my time playing games or learning more about software engineering. 
-            </p>
-            <p>
-                In the future, I dream of having my own tech company, or being a civil engineer.
-            </p>
-            <hr>
-            <p>Recommended article on Wikipedia: <a href="https://th.wikipedia.org/wiki/%E0%B8%81%E0%B8%B2%E0%B8%A3%E0%B8%A3%E0%B8%B1%E0%B9%88%E0%B8%A7%E0%B9%84%E0%B8%AB%E0%B8%A5%E0%B8%82%E0%B8%AD%E0%B8%87%E0%B8%9A%E0%B8%97%E0%B8%AA%E0%B8%99%E0%B8%97%E0%B8%99%E0%B8%B2%E0%B8%97%E0%B8%B2%E0%B8%87%E0%B9%82%E0%B8%97%E0%B8%A3%E0%B8%A8%E0%B8%B1%E0%B8%9E%E0%B8%97%E0%B9%8C%E0%B8%A3%E0%B8%B0%E0%B8%AB%E0%B8%A7%E0%B9%88%E0%B8%B2%E0%B8%87%E0%B9%84%E0%B8%97%E0%B8%A2%E2%80%93%E0%B8%81%E0%B8%B1%E0%B8%A1%E0%B8%9E%E0%B8%B9%E0%B8%8A%E0%B8%B2">การรั่วไหลของบทสนทนาทางโทรศัพท์ระหว่างไทย–กัมพูชา</a></p>
+            <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="flex flex-row border border-(--ui-border-accented) overflow-x-auto">
+                    <a href="https://github.com/TechitWinner/warehouse" class="project-card">
+                        <img src="https://thawia.ng/portal/f/assets/warehouseAPI.jpg">
+                        <h3>Warehouse</h3>
+                        <p>I planned it to be my API for personal website and other stuff; written in Rust and Axum.</p>
+                    </a>
+                    <a href="https://github.com/TechitWinner/web" class="project-card">
+                        <img src="https://opengraph.githubassets.com/79ca3021ce93e3d277062d399d623842564bc2f9407600e5b6102036f01e8277/TechitWinner/web">
+                        <h3>Web</h3>
+                        <p>Nothing much, just this website written in Nuxt (Vue) and some cool CSS.</p>
+                    </a>
+                    <a 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>A handwriting typeface, created by me but it is a dead project now.</p>
+                    </a>
+                </div>
+            </section>
         </article>
     </main>
 </template>