Update structure

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>