From fb40034e43c1bf4536ef487dc8405aad884f67c2 Mon Sep 17 00:00:00 2001
From: andwati <andwatiian@gmail.com>
Date: Fri, 13 Feb 2026 22:16:59 +0300
Subject: [PATCH] feat: Update personal name to Ian Andwati across the site and
 add a new projects section to the homepage.

---
 app/app.vue              |  4 +-
 app/pages/about.vue      |  8 ++--
 app/pages/blog/index.vue |  2 +-
 app/pages/index.vue      | 96 ++++++++++++++++++++++++++++++++++++++--
 4 files changed, 100 insertions(+), 10 deletions(-)

diff --git a/app/app.vue b/app/app.vue
index 9daa416..b7834e6 100644
--- a/app/app.vue
+++ b/app/app.vue
@@ -34,7 +34,7 @@ const navItems = computed<NavigationMenuItem[]>(() => [
         <NuxtLink to="/" class="flex items-center gap-2">
           <span class="inline-flex items-center justify-center size-8 rounded-full bg-primary-600 text-white text-sm font-bold">IW</span>
           <div class="flex flex-col leading-tight">
-            <span class="font-semibold text-sm">Ian Wati</span>
+            <span class="font-semibold text-sm">Ian Andwati</span>
             <span class="text-xs text-(--ui-text-muted)">Software Engineer</span>
           </div>
         </NuxtLink>
@@ -78,7 +78,7 @@ const navItems = computed<NavigationMenuItem[]>(() => [
     <UFooter>
       <template #left>
         <p class="text-sm text-(--ui-text-muted)">
-          © {{ new Date().getFullYear() }} Ian Wati. Built with Nuxt.
+          © {{ new Date().getFullYear() }} Ian Andwati. Built with Nuxt.
         </p>
       </template>
 
diff --git a/app/pages/about.vue b/app/pages/about.vue
index 0f72e62..693d2b6 100644
--- a/app/pages/about.vue
+++ b/app/pages/about.vue
@@ -1,8 +1,8 @@
 <script setup lang="ts">
 useSeoMeta({
-	title: "About — Ian Wati",
+	title: "About — Ian Andwati",
 	description:
-		"Learn more about Ian Wati — software engineer passionate about building great products.",
+		"Learn more about Ian Andwati — software engineer passionate about building great products.",
 });
 
 const skills = [
@@ -28,12 +28,12 @@ const skills = [
         <div class="flex flex-col sm:flex-row items-center sm:items-start gap-8 max-w-3xl">
           <img
             src="https://avatars.githubusercontent.com/u/andwati"
-            alt="Ian Wati"
+            alt="Ian Andwati"
             class="rounded-full size-32 ring-4 ring-primary-200 dark:ring-primary-800 shadow-lg flex-shrink-0"
           />
           <div class="space-y-4 text-center sm:text-left">
             <p class="text-xs font-semibold tracking-[0.2em] uppercase text-(--ui-text-muted)">About</p>
-            <h1 class="text-3xl sm:text-4xl font-bold">Ian Wati</h1>
+            <h1 class="text-3xl sm:text-4xl font-bold">Ian Andwati</h1>
             <p class="text-lg text-(--ui-text-muted) leading-relaxed">
               I'm a software engineer who loves building tools and products that make a difference.
               My interests span full-stack development, open source, and exploring new technologies.
diff --git a/app/pages/blog/index.vue b/app/pages/blog/index.vue
index 5c3abc0..748c49a 100644
--- a/app/pages/blog/index.vue
+++ b/app/pages/blog/index.vue
@@ -4,7 +4,7 @@ const { data: posts } = await useAsyncData("blog-posts", () =>
 );
 
 useSeoMeta({
-	title: "Blog — Ian Wati",
+	title: "Blog — Ian Andwati",
 	description:
 		"Thoughts on software development, technology, and the things I learn along the way.",
 });
diff --git a/app/pages/index.vue b/app/pages/index.vue
index 5f69c93..c91a380 100644
--- a/app/pages/index.vue
+++ b/app/pages/index.vue
@@ -4,13 +4,13 @@ const { data: recentPosts } = await useAsyncData("recent-posts", () =>
 );
 
 useSeoMeta({
-	title: "Ian Wati — Software Engineer",
+	title: "Ian Andwati — Software Engineer",
 	description:
 		"Software engineer passionate about building great products. I write about development, technology, and the things I learn along the way.",
 });
 
 const codeSnippet = `const softwareEngineer = {
-  name: 'Ian Wati',
+  name: 'Ian Andwati',
   role: 'Software Engineer',
   skills: [
     'TypeScript', 'Vue.js', 'Nuxt',
@@ -37,7 +37,7 @@ const codeSnippet = `const softwareEngineer = {
             </p>
 
             <h1 class="text-4xl sm:text-5xl lg:text-6xl font-bold leading-tight">
-              Hi, I'm <span class="text-primary-600 dark:text-primary-400">Ian Wati</span>
+              Hi, I'm <span class="text-primary-600 dark:text-primary-400">Ian Andwati</span>
             </h1>
 
             <p class="text-lg sm:text-xl text-(--ui-text-muted) leading-relaxed max-w-xl">
@@ -204,6 +204,96 @@ const codeSnippet = `const softwareEngineer = {
       </UContainer>
     </section>
 
+    <!-- Projects Section -->
+    <section id="projects" class="py-16 lg:py-24">
+      <UContainer>
+        <div class="text-center mb-12">
+          <p class="text-xs font-semibold tracking-[0.2em] uppercase text-primary-600 dark:text-primary-400 mb-3">Projects</p>
+          <h2 class="text-3xl sm:text-4xl font-bold">Things I've Built</h2>
+          <p class="mt-2 text-(--ui-text-muted)">A selection of projects I've worked on — from side experiments to production apps.</p>
+        </div>
+
+        <div class="grid sm:grid-cols-2 lg:grid-cols-3 gap-6">
+          <UCard>
+            <div class="space-y-3">
+              <div class="flex items-center justify-between">
+                <div class="inline-flex items-center justify-center size-10 rounded-lg bg-primary-100 dark:bg-primary-900/30">
+                  <UIcon name="i-lucide-layout-dashboard" class="size-5 text-primary-600 dark:text-primary-400" />
+                </div>
+                <UButton
+                  icon="i-simple-icons-github"
+                  color="neutral"
+                  variant="ghost"
+                  size="sm"
+                  to="https://github.com/andwati"
+                  target="_blank"
+                  aria-label="View source"
+                />
+              </div>
+              <h3 class="font-semibold text-lg">Personal Website</h3>
+              <p class="text-sm text-(--ui-text-muted) leading-relaxed">This site! Built with Nuxt, Nuxt Content, and Nuxt UI. Features a blog, dark mode, and responsive design.</p>
+              <div class="flex flex-wrap gap-2 pt-1">
+                <UBadge label="Nuxt" variant="subtle" size="sm" />
+                <UBadge label="Vue" variant="subtle" size="sm" />
+                <UBadge label="Tailwind" variant="subtle" size="sm" />
+              </div>
+            </div>
+          </UCard>
+
+          <UCard>
+            <div class="space-y-3">
+              <div class="flex items-center justify-between">
+                <div class="inline-flex items-center justify-center size-10 rounded-lg bg-primary-100 dark:bg-primary-900/30">
+                  <UIcon name="i-lucide-terminal" class="size-5 text-primary-600 dark:text-primary-400" />
+                </div>
+                <UButton
+                  icon="i-simple-icons-github"
+                  color="neutral"
+                  variant="ghost"
+                  size="sm"
+                  to="https://github.com/andwati"
+                  target="_blank"
+                  aria-label="View source"
+                />
+              </div>
+              <h3 class="font-semibold text-lg">CLI Toolkit</h3>
+              <p class="text-sm text-(--ui-text-muted) leading-relaxed">A collection of developer CLI tools for automating workflows, generating boilerplate, and managing projects.</p>
+              <div class="flex flex-wrap gap-2 pt-1">
+                <UBadge label="Go" variant="subtle" size="sm" />
+                <UBadge label="CLI" variant="subtle" size="sm" />
+              </div>
+            </div>
+          </UCard>
+
+          <UCard>
+            <div class="space-y-3">
+              <div class="flex items-center justify-between">
+                <div class="inline-flex items-center justify-center size-10 rounded-lg bg-primary-100 dark:bg-primary-900/30">
+                  <UIcon name="i-lucide-database" class="size-5 text-primary-600 dark:text-primary-400" />
+                </div>
+                <UButton
+                  icon="i-simple-icons-github"
+                  color="neutral"
+                  variant="ghost"
+                  size="sm"
+                  to="https://github.com/andwati"
+                  target="_blank"
+                  aria-label="View source"
+                />
+              </div>
+              <h3 class="font-semibold text-lg">API Starter</h3>
+              <p class="text-sm text-(--ui-text-muted) leading-relaxed">A production-ready REST API boilerplate with authentication, rate limiting, and database migrations.</p>
+              <div class="flex flex-wrap gap-2 pt-1">
+                <UBadge label="Node.js" variant="subtle" size="sm" />
+                <UBadge label="PostgreSQL" variant="subtle" size="sm" />
+                <UBadge label="Docker" variant="subtle" size="sm" />
+              </div>
+            </div>
+          </UCard>
+        </div>
+      </UContainer>
+    </section>
+
     <!-- Contact Section -->
     <section id="contact" class="py-16 lg:py-24">
       <UContainer>