From 4184918a5d7e56eb9b9994a300a78e92bac9a10d Mon Sep 17 00:00:00 2001
From: Techit Thawiang <techit@thawia.ng>
Date: Wed, 1 Oct 2025 20:05:16 +0700
Subject: [PATCH] change layout class

---
 components/post-card.vue          |  4 ++--
 components/posts-article-list.vue |  2 +-
 components/web-footer.vue         |  5 +++++
 pages/collections.vue             |  2 +-
 pages/contact.vue                 |  2 +-
 pages/fonts.vue                   |  6 +++---
 pages/index.vue                   |  8 ++++----
 pages/portal.vue                  | 29 +++++++++++++++++++----------
 pages/posts/[...slug].vue         | 12 ++++++++----
 pages/posts/index.vue             |  2 +-
 pages/terminal.vue                |  2 +-
 11 files changed, 46 insertions(+), 28 deletions(-)

diff --git a/components/post-card.vue b/components/post-card.vue
index 0246472..2eac25a 100644
--- a/components/post-card.vue
+++ b/components/post-card.vue
@@ -1,8 +1,8 @@
 <template>
     <template v-if="post">
-        <NuxtLink class="project-card" :to="post.path">
+        <NuxtLink class="post-card" :to="post.path">
             <img :src="baseUrl + '/portal/f/assets/' + post.coverImage" :alt="post?.title + '’s cover image'"/>
-            <div class="project-card-content">
+            <div class="post-card-content">
                 <h3>{{ post.title }}</h3>
                 <p :title="post.description">{{ post.description }}</p>
                 <p class="mt-4 text-xs" :title="useFormatDate(post.dateUpdated)">{{ useRelativeDate(post.dateUpdated) }}</p>
diff --git a/components/posts-article-list.vue b/components/posts-article-list.vue
index 8a464e0..6272c5f 100644
--- a/components/posts-article-list.vue
+++ b/components/posts-article-list.vue
@@ -1,5 +1,5 @@
 <template>
-    <section class="project-cards">
+    <section class="post-card-container">
         <template v-for="post in posts" :key="post.id">
             <PostCard :post="post" />
         </template>
diff --git a/components/web-footer.vue b/components/web-footer.vue
index fcbfcb4..b77ffb9 100644
--- a/components/web-footer.vue
+++ b/components/web-footer.vue
@@ -15,6 +15,11 @@ import WebThemeToggle from './web-theme-toggle.vue';
                         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>
+                <p>
+                    <small>
+                        More from me: <a class="link" href="https://unix.in.th">unix.in.th</a>, <NuxtLink class="link" href="/portal">Portal</NuxtLink> and <a class="link" href="https://uptime.dailitation.xyz">Network Status</a>
+                    </small>
+                </p>
                 <WebThemeToggle/>
             </section>
         </div>
diff --git a/pages/collections.vue b/pages/collections.vue
index 6fe1c6d..1c4c424 100644
--- a/pages/collections.vue
+++ b/pages/collections.vue
@@ -1,7 +1,7 @@
 <template>
     <main>
         <article class="article">
-            <section class="web-hero" aria-labelledby="hero" aria-describedby="hero-desc">
+            <section class="web-section" 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>
diff --git a/pages/contact.vue b/pages/contact.vue
index 74bdfec..4368b74 100644
--- a/pages/contact.vue
+++ b/pages/contact.vue
@@ -1,7 +1,7 @@
 <template>
     <main>
         <article class="article">
-            <section class="web-hero" aria-labelledby="hero" aria-describedby="hero-desc">
+            <section class="web-section" 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>
diff --git a/pages/fonts.vue b/pages/fonts.vue
index c752049..923ba3a 100644
--- a/pages/fonts.vue
+++ b/pages/fonts.vue
@@ -1,7 +1,7 @@
 <template>
     <main>
         <article class="article">
-            <section class="web-hero" aria-labelledby="hero" aria-describedby="hero-desc">
+            <section class="web-section" aria-labelledby="hero" aria-describedby="hero-desc">
                 <h1 id="hero" class="font-hero">Fonts</h1>
                 <p id="hero-desc" class="font-hero-desc">This page were created to list all fonts I have hosted it here, so you can use it too.</p>
             </section>
@@ -16,10 +16,10 @@
             <section v-else-if="fonts" v-for="family in fonts" key="family.id" class="web-section" :aria-labelledby="family.id + '-title'" :aria-describedby="family.desc + '-desc'">
                 <h2 :id="family.id + '-title'" class="web-title">{{ family.family }}</h2>
                 <p :id="family.id + '-desc'">{{ family.desc }}</p>
-                <ul class="font-cards">
+                <ul class="font-card-container">
                     <li v-for="font in family.children" :key="font.id">
                         <a :class="'font-card', {disabled: font.disabled}" :href="fontUrl + font.css">
-                            <div class="font-card-content text-2xl">
+                            <div class="font-card-content text-xl">
                                 {{ font.name }}
                                 <!-- <p>{{ fontUrl + font.css }}</p> -->
                             </div>
diff --git a/pages/index.vue b/pages/index.vue
index 799c69c..2edd155 100644
--- a/pages/index.vue
+++ b/pages/index.vue
@@ -1,10 +1,10 @@
 <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/sumo-clipart.png" alt="Techit Thawiang's avatar.">
+            <section class="web-section" 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/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>, <span class="text-blue-500">self-hoster</span> and a KDE user who's exploring computer science.</p>
+                <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>
             </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> -->
@@ -17,7 +17,7 @@
                 <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">
+                <div class="project-card-container">
                     <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">
diff --git a/pages/portal.vue b/pages/portal.vue
index 5888fe5..c4768b5 100644
--- a/pages/portal.vue
+++ b/pages/portal.vue
@@ -1,20 +1,29 @@
 <template>
     <main>
         <article class="article">
-            <section class="web-hero" aria-labelledby="hero" aria-describedby="hero-desc">
+            <section class="web-section" 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>
+                <ul class="font-card-container">
+                    <li>
+                        <a :class="'font-card'" :href="baseUrl + '/portal/f/'">
+                            <div class="font-card-content">
+                                <h3>Files</h3>
+                                <p>A portal that collects this website data, whether it's mine or not.</p>
+                            </div>
+                        </a>
+                    </li>
+                    <li>
+                        <a :class="'font-card'" :href="baseUrl + '/portal/s/'">
+                            <div class="font-card-content">
+                                <h3>Share</h3>
+                                <p>A portal that were created by me to share media, It works like Google Drive public share.</p>
+                            </div>
+                        </a>
+                    </li>
+                </ul>
             </section>
         </article>
     </main>
diff --git a/pages/posts/[...slug].vue b/pages/posts/[...slug].vue
index 59aa302..14f4576 100644
--- a/pages/posts/[...slug].vue
+++ b/pages/posts/[...slug].vue
@@ -1,14 +1,18 @@
 <template>
     <main>
         <article class="article">
-            <section class="web-hero-post web-hero-bg relative bg-cover bg-center" :style="`background-image: url('${baseUrl + '/portal/f/assets/' + post?.coverImage}');`" aria-labelledby="hero" aria-describedby="hero-desc">
-                <div class="absolute inset-0 bg-(--color-deep-semidark)/80"></div>
+            <section class="web-section" aria-labelledby="hero" aria-describedby="hero-desc">
                 <section class="max-w-6xl mx-auto z-[1]">
                   <h1 id="hero" class="font-hero">{{ post?.title }}</h1>
-                  <p id="hero-desc" class="font-hero-desc">{{ post?.description }}</p>
+                  <div class="post-cover">
+                    <section class="w-full">
+                      <p id="hero-desc" class="font-hero-desc">{{ post?.description }}</p>
+                    </section>
+                    <img :width="512" class="max-w-[55%] aspect-[4/3] w-full object-cover" :src="baseUrl + '/portal/f/assets/' + post?.coverImage" />
+                  </div>
                 </section>
             </section>
-            <section class="web-section web-section-narrow" aria-labelledby="post-content" aria-describedby="post-content-desc">
+            <section class="web-section web-section" aria-labelledby="post-content" aria-describedby="post-content-desc">
                 <div class="prose">
                     <ContentRenderer v-if="post" :value="post"/>
                 </div>
diff --git a/pages/posts/index.vue b/pages/posts/index.vue
index 6386c50..20a5420 100644
--- a/pages/posts/index.vue
+++ b/pages/posts/index.vue
@@ -1,7 +1,7 @@
 <template>
     <main>
         <article class="article">
-            <section class="web-hero" aria-labelledby="hero" aria-describedby="hero-desc">
+            <section class="web-section" aria-labelledby="hero" aria-describedby="hero-desc">
                 <h1 id="hero" class="font-hero">Posts</h1>
                 <p id="hero-desc" class="font-hero-desc">This is where I post my thoughts, articles, and updates.</p>
             </section>
diff --git a/pages/terminal.vue b/pages/terminal.vue
index 750c9c3..78b5dde 100644
--- a/pages/terminal.vue
+++ b/pages/terminal.vue
@@ -1,7 +1,7 @@
 <template>
     <main>
         <article class="article">
-            <section class="web-hero" aria-labelledby="hero" aria-describedby="what-does-he-do?">
+            <section class="web-section" aria-labelledby="hero" aria-describedby="what-does-he-do?">
                 <h1 id="hero" class="font-hero">Terminal</h1>
                 <p id="what-does-he-do?" class="font-hero-desc">This will be a emulator for website visitor (simulator)</p>
             </section>