From a1dc01dbb601940aca0dc2e92922377daf97f975 Mon Sep 17 00:00:00 2001
From: Techit Thawiang <techit@thawia.ng>
Date: Tue, 14 Oct 2025 13:38:00 +0700
Subject: [PATCH] beauty treatment #2

---
 app/assets/css/additional.css | 15 ++++++++++++
 app/assets/css/main.css       | 45 ++++++++++++++++++++++++++++-------
 app/pages/collections.vue     |  6 ++---
 app/pages/index.vue           | 17 +++++++------
 app/pages/posts/[...slug].vue | 22 ++++++++++++++++-
 app/pages/posts/index.vue     |  6 ++---
 nuxt.config.ts                |  2 +-
 7 files changed, 90 insertions(+), 23 deletions(-)
 create mode 100644 app/assets/css/additional.css

diff --git a/app/assets/css/additional.css b/app/assets/css/additional.css
new file mode 100644
index 0000000..6cd0f01
--- /dev/null
+++ b/app/assets/css/additional.css
@@ -0,0 +1,15 @@
+.about-me-photo-grid {
+    display: grid;
+    grid-template-columns: repeat(1, minmax(0, 1fr));
+    gap: calc(var(--ui-spacing)*1);
+}
+.about-me-photo-grid > img {
+    height: 100%;
+    object-fit: cover;
+    aspect-ratio: 16/9;
+}
+@media screen and (min-width: 768px) {
+    .about-me-photo-grid {
+        grid-template-columns: repeat(3, minmax(0, 1fr));
+    }
+}
\ No newline at end of file
diff --git a/app/assets/css/main.css b/app/assets/css/main.css
index 8322d9c..5554e7b 100644
--- a/app/assets/css/main.css
+++ b/app/assets/css/main.css
@@ -26,7 +26,7 @@
 
     --font-sans: Roboto, Sarabun, sans-serif;
     --font-sans--font-feature-settings: "liga", "calt";
-    --font-mono: RobotoMono, "Roboto Mono", ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
+    --font-mono: RobotoMono, "Roboto Mono", "SF Mono", ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
     --font-serif: RobotoSerif, NotoSerifThai, Georgia, Garamond, "Times New Roman", Times, serif;
     --font-math: CMUSerif, "Cambria Math", "LatinModern Math", "STIXGeneral", math;
 
@@ -37,7 +37,7 @@
 @supports (font-variation-settings: normal) {
     :root {
         --font-sans: RobotoVariable, Sarabun, sans-serif;
-        --font-mono: RobotoMonoVariable, ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
+        --font-mono: RobotoMonoVariable, "SF Mono", ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
         --font-serif: RobotoSerifVariable, NotoSerifThai, Georgia, Garamond, "Times New Roman", Times, serif;
         font-optical-sizing: auto;
     }
@@ -45,15 +45,15 @@
 @keyframes ring {
     0% {
         outline: 0px solid var(--ui-ring-color);
-    outline-offset: var(--ui-ring-offset);
+        outline-offset: var(--ui-ring-offset);
     }
     25% {
         outline: 12px solid var(--ui-ring-color);
-    outline-offset: var(--ui-ring-offset);
+        outline-offset: var(--ui-ring-offset);
     }
     100% {
         outline: var(--ui-ring-size) solid var(--ui-ring-color);
-    outline-offset: var(--ui-ring-offset);
+        outline-offset: var(--ui-ring-offset);
     }
 }
 * {
@@ -166,7 +166,7 @@ a {
         align-items: center;
     }
 }
-@media screen and (min-width: 640px) {
+@media screen and (min-width: 1024px) {
     .web-heading {
         .web-heading-right-section {
             display: flex;
@@ -189,7 +189,7 @@ p {
 .web-title {
     font-size: 30px;
     font-weight: 700;
-    margin-block: 0.7em;
+    margin-block: 0.4em;
     transition-property: color;
     transition-duration: 100ms;
     transition-timing-function: cubic-bezier(var(--ease-fluid));
@@ -235,6 +235,32 @@ p {
     margin-inline: auto;
     padding-inline: calc(var(--ui-spacing)*4);
 }
+.web-section.web-section-split {
+    display: flex;
+    flex-direction: column;
+    gap: calc(var(--ui-spacing)*4);
+}
+.web-section.web-section-split .about-me-photo-grid {
+    display: grid;
+    grid-template-columns: repeat(1, minmax(0, 1fr));
+    gap: calc(var(--ui-spacing)*1);
+}
+.web-section.web-section-big-text {
+    font-size: 20px;
+    line-height: 1.5;
+}
+@media screen and (min-width: 768px) {
+    .web-section.web-section-split {
+        flex-direction: row;
+        gap: calc(var(--ui-spacing)*8);
+    }
+    .web-section.web-section-split > .web-section-pane:first-child:not(:only-child) {
+        width: 35%;
+    }
+    .web-section.web-section-split > .web-section-pane:last-child:not(:only-child) {
+        width: 65%;
+    }
+}
 .web-section.web-section-narrow {
     max-width: var(--ui-container-narrow);
 }
@@ -352,7 +378,7 @@ p {
 .hamburger-toggle.placeholder {
     background: none;
 }
-@media screen and (min-width: 640px) {
+@media screen and (min-width: 1024px) {
     .hamburger-toggle.no-autohide {
         display: flex!important;
         visibility: visible!important;
@@ -507,6 +533,9 @@ a.btn {
 
 .btn {
     all: unset;
+    display: flex;
+    align-items: center;
+    width: fit-content;
     height: calc(var(--ui-spacing)*10);
     background: var(--color-primary);
     color: var(--color-on-primary);
diff --git a/app/pages/collections.vue b/app/pages/collections.vue
index 901e047..7635d8f 100644
--- a/app/pages/collections.vue
+++ b/app/pages/collections.vue
@@ -2,8 +2,8 @@
     <main>
         <article class="article">
             <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>
+                <h1 id="hero" class="font-hero">Techit's {{ TITLE }}</h1>
+                <p id="hero-desc" class="font-hero-desc">{{ DESC }}</p>
             </section>
             <section class="web-section" aria-labelledby="docs" aria-describedby="docs-desc">
                 <h3 id="docs" class="web-title">All Bookmarks</h3>
@@ -20,7 +20,7 @@
 <script setup>
 const config = useRuntimeConfig();
 const TITLE = "Collections"
-const DESC = "Techit's personal-public collections"
+const DESC = "Techit's personal-public collection of various interesting, trending media/materials."
 
 useSeoMeta({
   title: TITLE,
diff --git a/app/pages/index.vue b/app/pages/index.vue
index e957f54..251471f 100644
--- a/app/pages/index.vue
+++ b/app/pages/index.vue
@@ -2,27 +2,30 @@
     <main>
         <article class="article">
             <section class="web-section" aria-labelledby="hero" aria-describedby="what-does-he-do?">
-                <img width="240" height="240" class="mb-6" src="https://files.thawia.ng/files/assets/profile/techit/1758801557516.jpeg" alt="Techit Thawiang's avatar.">
+                <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>
             </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>
+                <h2 class="web-title" id="about">
+                    <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">
+            <section class="web-section" aria-labelledby="posts" aria-describedby="posts-paragraph-1">
                 <h2 class="web-title" id="posts">
                     <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/>
-            </section> -->
+                <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">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">
diff --git a/app/pages/posts/[...slug].vue b/app/pages/posts/[...slug].vue
index 0028551..5ac3f9a 100644
--- a/app/pages/posts/[...slug].vue
+++ b/app/pages/posts/[...slug].vue
@@ -1,6 +1,6 @@
 <template>
     <main>
-        <article class="article">
+        <article v-if="post" class="article">
             <section class="web-section" aria-labelledby="hero" aria-describedby="hero-desc">
                 <section class="max-w-6xl mx-auto z-[1]">
                   <small class="prose-blog-pretext" aria-hidden="true">You are reading blog post:</small>
@@ -19,6 +19,26 @@
                 </div>
             </section>
         </article>
+        <article v-else class="article">
+            <section class="web-section" aria-labelledby="hero" aria-describedby="hero-desc">
+                <section class="max-w-6xl mx-auto z-[1]">
+                  <small class="prose-blog-pretext" aria-hidden="true">An error occurred:</small>
+                  <h1 id="hero" class="font-hero">Post not found!</h1>
+                  <div class="post-cover">
+                    <section class="w-full">
+                      <p id="hero-desc" class="font-hero-desc">Check the URL; there might be a misspelling, or the post may not actually exist.</p>
+                      <NuxtLink class="btn" to="/posts">All posts</NuxtLink>
+                    </section>
+                    <img :width="512" class="img-cover" src="https://files.thawia.ng/files/assets/zUJfK8p1i.webp" />
+                  </div>
+                </section>
+            </section>
+            <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>
+            </section>
+        </article>
     </main>
 </template>
   
diff --git a/app/pages/posts/index.vue b/app/pages/posts/index.vue
index 28fe6d8..287f380 100644
--- a/app/pages/posts/index.vue
+++ b/app/pages/posts/index.vue
@@ -2,8 +2,8 @@
     <main>
         <article class="article">
             <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>
+                <h1 id="hero" class="font-hero">{{ TITLE }}</h1>
+                <p id="hero-desc" class="font-hero-desc">{{ DESC }}</p>
             </section>
             <section class="web-section" aria-labelledby="latest-posts" aria-describedby="latest-posts-paragraph-1">
                 <h2 class="web-title" id="latest-posts">All Posts</h2>
@@ -16,7 +16,7 @@
 <script setup>
 const config = useRuntimeConfig();
 const TITLE = "Posts"
-const DESC = "Techit's posts and writings."
+const DESC = "Also known as blog because this is where I post my thoughts, articles, and updates."
 
 useSeoMeta({
   title: TITLE,
diff --git a/nuxt.config.ts b/nuxt.config.ts
index dc6c436..d1d8fc9 100644
--- a/nuxt.config.ts
+++ b/nuxt.config.ts
@@ -3,7 +3,7 @@ export default defineNuxtConfig({
   compatibilityDate: '2025-05-15',
   devtools: { enabled: false },
   ssr: true,
-  css: ["/assets/css/main.css"],
+  css: ["/assets/css/main.css", "/assets/css/additional.css"],
   runtimeConfig: {
     public: {
       baseUrl: process?.env?.NUXT_PUBLIC_BASE_URL,