From 8a31d53b97abb1f14fe9117103d15c99dedd2699 Mon Sep 17 00:00:00 2001
From: Gus <gocanto@users.noreply.github.com>
Date: Tue, 30 Sep 2025 17:06:44 +0800
Subject: [PATCH 1/8] Add loading skeletons to project listings

---
 src/pages/ProjectsPage.vue                  | 48 ++++++-----
 src/partials/FeaturedProjectsPartial.vue    | 92 ++++++++++++---------
 src/partials/ProjectCardSkeletonPartial.vue | 23 ++++++
 3 files changed, 103 insertions(+), 60 deletions(-)
 create mode 100644 src/partials/ProjectCardSkeletonPartial.vue

diff --git a/src/pages/ProjectsPage.vue b/src/pages/ProjectsPage.vue
index 4521da88..21484592 100644
--- a/src/pages/ProjectsPage.vue
+++ b/src/pages/ProjectsPage.vue
@@ -28,16 +28,22 @@
 												Feel free to dive into my open-source repos and client case studies to see how I turn complex requirements into reliable, maintainable systems.
 											</p>
 										</div>
-										<section v-if="projects.length > 0">
-											<h2 class="font-aspekta text-xl font-[650] mb-6">Open Source / Client Projects</h2>
-											<div class="grid sm:grid-cols-2 md:grid-cols-1 lg:grid-cols-2 gap-5">
-												<ProjectCardPartial v-for="project in projects" :key="project.uuid" :item="project" />
-											</div>
-										</section>
-									</div>
-								</section>
-							</div>
-						</div>
+                                                                                <section>
+                                                                                        <h2 class="font-aspekta text-xl font-[650] mb-6">Open Source / Client Projects</h2>
+                                                                                        <div class="grid sm:grid-cols-2 md:grid-cols-1 lg:grid-cols-2 gap-5">
+                                                                                                <template v-if="isLoadingProjects">
+                                                                                                        <ProjectCardSkeletonPartial v-for="index in 4" :key="`projects-page-skeleton-${index}`" />
+                                                                                                </template>
+                                                                                                <template v-else-if="projects.length > 0">
+                                                                                                        <ProjectCardPartial v-for="project in projects" :key="project.uuid" :item="project" />
+                                                                                                </template>
+                                                                                                <p v-else class="text-sm text-slate-500 dark:text-slate-400">No projects are available at the moment. Please check back soon.</p>
+                                                                                        </div>
+                                                                                </section>
+                                                                        </div>
+                                                                </section>
+                                                        </div>
+                                                </div>
 
 						<!-- Right sidebar -->
 						<aside class="md:w-[240px] lg:w-[300px] shrink-0">
@@ -63,6 +69,7 @@ import FooterPartial from '@partials/FooterPartial.vue';
 import HeaderPartial from '@partials/HeaderPartial.vue';
 import SideNavPartial from '@partials/SideNavPartial.vue';
 import ProjectCardPartial from '@partials/ProjectCardPartial.vue';
+import ProjectCardSkeletonPartial from '@partials/ProjectCardSkeletonPartial.vue';
 import WidgetSkillsPartial from '@partials/WidgetSkillsPartial.vue';
 import WidgetSponsorPartial from '@partials/WidgetSponsorPartial.vue';
 import type { ProfileResponse, ProjectsResponse } from '@api/response/index.ts';
@@ -71,6 +78,7 @@ import { useSeo, SITE_NAME, ABOUT_IMAGE, siteUrlFor, buildKeywords, PERSON_JSON_
 const apiStore = useApiStore();
 const projects = ref<ProjectsResponse[]>([]);
 const profile = ref<ProfileResponse | null>(null);
+const isLoadingProjects = ref(true);
 
 useSeo({
 	title: 'Projects',
@@ -92,18 +100,20 @@ useSeo({
 });
 
 onMounted(async () => {
-	try {
-		const [userProfileResponse, projectsResponse] = await Promise.all([apiStore.getProfile(), apiStore.getProjects()]);
+        try {
+                const [userProfileResponse, projectsResponse] = await Promise.all([apiStore.getProfile(), apiStore.getProjects()]);
 
-		if (userProfileResponse.data) {
+                if (userProfileResponse.data) {
 			profile.value = userProfileResponse.data;
 		}
 
-		if (projectsResponse.data) {
-			projects.value = projectsResponse.data;
-		}
-	} catch (error) {
-		debugError(error);
-	}
+                if (projectsResponse.data) {
+                        projects.value = projectsResponse.data;
+                }
+        } catch (error) {
+                debugError(error);
+        } finally {
+                isLoadingProjects.value = false;
+        }
 });
 </script>
diff --git a/src/partials/FeaturedProjectsPartial.vue b/src/partials/FeaturedProjectsPartial.vue
index 9579bc25..974cfca5 100644
--- a/src/partials/FeaturedProjectsPartial.vue
+++ b/src/partials/FeaturedProjectsPartial.vue
@@ -2,59 +2,69 @@
 	<section>
 		<h2 class="font-aspekta text-xl font-[650] mb-5">Open-Source Projects</h2>
 
-		<!-- Cards -->
-		<div class="grid sm:grid-cols-2 md:grid-cols-1 lg:grid-cols-2 gap-5">
-			<a
-				v-for="project in projects"
-				:key="project.uuid"
-				v-lazy-link
-				class="rounded-lg border border-slate-200 dark:border-slate-800 dark:bg-linear-to-t dark:from-slate-800 dark:to-slate-800/30 odd:-rotate-1 even:rotate-1 hover:rotate-0 transition-transform duration-700 hover:duration-100 ease-in-out p-5"
-				:href="project.url"
-				target="_blank"
-				rel="noopener noreferrer"
-			>
-				<div class="flex flex-col h-full">
-					<div class="grow">
-						<div class="h-10 w-10 flex items-center justify-center border border-slate-200 dark:border-slate-700 rounded-full mb-2 text-fuchsia-500 dark:text-teal-500">
-							<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" class="fill-current">
-								<path
-									fill-rule="evenodd"
-									d="M9.97 14.758c-.018 1.796-.497 3.248-1.072 3.242-.574-.006-1.026-1.466-1.008-3.262.017-1.796.497-3.247 1.071-3.242.575.006 1.026 1.466 1.009 3.262Zm-3.332-.408c-.977 1.502-2.16 2.461-2.64 2.143-.48-.318-.076-1.793.902-3.294.977-1.501 2.159-2.46 2.64-2.143.48.318.076 1.793-.902 3.294Zm-2.587-2.154c-1.628.73-3.137.893-3.37.364-.233-.53.897-1.55 2.524-2.28 1.628-.73 3.136-.893 3.37-.363.233.529-.897 1.55-2.524 2.28Zm2.328-3.764c-.087.573-1.585.815-3.346.542-1.76-.273-3.116-.959-3.029-1.531.087-.573 1.585-.815 3.346-.542 1.76.273 3.117.959 3.03 1.531Zm.632-1.363c-.38.434-1.77-.179-3.105-1.368C2.57 4.51 1.798 3.195 2.178 2.76c.38-.434 1.77.179 3.106 1.368C6.618 5.32 7.392 6.635 7.01 7.07Zm1.26-.797c-.554.157-1.395-1.116-1.88-2.844C5.906 1.7 5.961.17 6.514.013c.553-.158 1.394 1.116 1.879 2.844.485 1.728.43 3.257-.123 3.415Zm3.417-2.79C11.17 5.2 10.304 6.456 9.754 6.287c-.55-.168-.575-1.698-.056-3.416.519-1.718 1.385-2.974 1.934-2.806.55.169.575 1.698.056 3.417Zm2.443 2.321c-1.358 1.163-2.76 1.748-3.132 1.307-.372-.442.427-1.742 1.785-2.905 1.357-1.163 2.76-1.748 3.131-1.306.372.441-.427 1.742-1.784 2.904Zm.807 3.286c-1.765.238-3.258-.034-3.334-.608-.077-.575 1.293-1.233 3.058-1.471 1.766-.238 3.259.034 3.335.608.076.574-1.293 1.233-3.059 1.47Zm2.278 3.635c-.244.525-1.75.332-3.362-.43-1.613-.762-2.723-1.806-2.48-2.33.245-.525 1.75-.332 3.363.43s2.722 1.806 2.479 2.33Zm-3.393 3.87c-.486.308-1.65-.674-2.597-2.195-.948-1.52-1.323-3.003-.836-3.311.486-.308 1.649.674 2.597 2.195.948 1.52 1.322 3.003.836 3.31Z"
-								/>
-							</svg>
-						</div>
-						<div class="text-lg font-aspekta font-[650] mb-1">{{ project.title }}</div>
-						<p class="text-sm text-slate-500 dark:text-slate-400 mb-2">{{ project.excerpt }}</p>
-					</div>
-					<div class="text-fuchsia-500 dark:text-teal-500 flex justify-end">
-						<svg class="fill-current" xmlns="http://www.w3.org/2000/svg" width="14" height="12">
-							<path d="M9.586 5 6.293 1.707 7.707.293 13.414 6l-5.707 5.707-1.414-1.414L9.586 7H0V5h9.586Z" />
-						</svg>
-					</div>
-				</div>
-			</a>
-		</div>
-	</section>
+                <!-- Cards -->
+                <div class="grid sm:grid-cols-2 md:grid-cols-1 lg:grid-cols-2 gap-5">
+                        <template v-if="isLoading">
+                                <ProjectCardSkeletonPartial v-for="index in 2" :key="`featured-project-skeleton-${index}`" />
+                        </template>
+                        <template v-else-if="projects.length > 0">
+                                <a
+                                        v-for="project in projects"
+                                        :key="project.uuid"
+                                        v-lazy-link
+                                        class="rounded-lg border border-slate-200 dark:border-slate-800 dark:bg-linear-to-t dark:from-slate-800 dark:to-slate-800/30 odd:-rotate-1 even:rotate-1 hover:rotate-0 transition-transform duration-700 hover:duration-100 ease-in-out p-5"
+                                        :href="project.url"
+                                        target="_blank"
+                                        rel="noopener noreferrer"
+                                >
+                                        <div class="flex flex-col h-full">
+                                                <div class="grow">
+                                                        <div class="h-10 w-10 flex items-center justify-center border border-slate-200 dark:border-slate-700 rounded-full mb-2 text-fuchsia-500 dark:text-teal-500">
+                                                                <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" class="fill-current">
+                                                                        <path
+                                                                                fill-rule="evenodd"
+                                                                                d="M9.97 14.758c-.018 1.796-.497 3.248-1.072 3.242-.574-.006-1.026-1.466-1.008-3.262.017-1.796.497-3.247 1.071-3.242.575.006 1.026 1.466 1.009 3.262Zm-3.332-.408c-.977 1.502-2.16 2.461-2.64 2.143-.48-.318-.076-1.793.902-3.294.977-1.501 2.159-2.46 2.64-2.143.48.318.076 1.793-.902 3.294Zm-2.587-2.154c-1.628.73-3.137.893-3.37.364-.233-.53.897-1.55 2.524-2.28 1.628-.73 3.136-.893 3.37-.363.233.529-.897 1.55-2.524 2.28Zm2.328-3.764c-.087.573-1.585.815-3.346.542-1.76-.273-3.116-.959-3.029-1.531.087-.573 1.585-.815 3.346-.542 1.76.273 3.117.959 3.03 1.531Zm.632-1.363c-.38.434-1.77-.179-3.105-1.368C2.57 4.51 1.798 3.195 2.178 2.76c.38-.434 1.77.179 3.106 1.368C6.618 5.32 7.392 6.635 7.01 7.07Zm1.26-.797c-.554.157-1.395-1.116-1.88-2.844C5.906 1.7 5.961.17 6.514.013c.553-.158 1.394 1.116 1.879 2.844.485 1.728.43 3.257-.123 3.415Zm3.417-2.79C11.17 5.2 10.304 6.456 9.754 6.287c-.55-.168-.575-1.698-.056-3.416.519-1.718 1.385-2.974 1.934-2.806.55.169.575 1.698.056 3.417Zm2.443 2.321c-1.358 1.163-2.76 1.748-3.132 1.307-.372-.442.427-1.742 1.785-2.905 1.357-1.163 2.76-1.748 3.131-1.306.372.441-.427 1.742-1.784 2.904Zm.807 3.286c-1.765.238-3.258-.034-3.334-.608-.077-.575 1.293-1.233 3.058-1.471 1.766-.238 3.259.034 3.335.608.076.574-1.293 1.233-3.059 1.47Zm2.278 3.635c-.244.525-1.75.332-3.362-.43-1.613-.762-2.723-1.806-2.48-2.33.245-.525 1.75-.332 3.363.43s2.722 1.806 2.479 2.33Zm-3.393 3.87c-.486.308-1.65-.674-2.597-2.195-.948-1.52-1.323-3.003-.836-3.311.486-.308 1.649.674 2.597 2.195.948 1.52 1.322 3.003.836 3.31Z"
+                                                                        />
+                                                                </svg>
+                                                        </div>
+                                                        <div class="text-lg font-aspekta font-[650] mb-1">{{ project.title }}</div>
+                                                        <p class="text-sm text-slate-500 dark:text-slate-400 mb-2">{{ project.excerpt }}</p>
+                                                </div>
+                                                <div class="text-fuchsia-500 dark:text-teal-500 flex justify-end">
+                                                        <svg class="fill-current" xmlns="http://www.w3.org/2000/svg" width="14" height="12">
+                                                                <path d="M9.586 5 6.293 1.707 7.707.293 13.414 6l-5.707 5.707-1.414-1.414L9.586 7H0V5h9.586Z" />
+                                                        </svg>
+                                                </div>
+                                        </div>
+                                </a>
+                        </template>
+                        <p v-else class="text-sm text-slate-500 dark:text-slate-400">Projects will be added soon. Check back later!</p>
+                </div>
+        </section>
 </template>
 
 <script setup lang="ts">
 import { ref, onMounted } from 'vue';
 import { useApiStore } from '@api/store.ts';
 import { debugError } from '@api/http-error.ts';
+import ProjectCardSkeletonPartial from '@partials/ProjectCardSkeletonPartial.vue';
 import type { ProjectsResponse } from '@api/response/index.ts';
 
 const apiStore = useApiStore();
 const projects = ref<ProjectsResponse[]>([]);
+const isLoading = ref(true);
 
 onMounted(async () => {
-	try {
-		const projectsResponse = await apiStore.getProjects();
+        try {
+                const projectsResponse = await apiStore.getProjects();
 
-		if (projectsResponse.data) {
-			projects.value = projectsResponse.data.slice(0, 2);
-		}
-	} catch (error) {
-		debugError(error);
-	}
+                if (projectsResponse.data) {
+                        projects.value = projectsResponse.data.slice(0, 2);
+                }
+        } catch (error) {
+                debugError(error);
+        } finally {
+                isLoading.value = false;
+        }
 });
 </script>
diff --git a/src/partials/ProjectCardSkeletonPartial.vue b/src/partials/ProjectCardSkeletonPartial.vue
new file mode 100644
index 00000000..99949b0f
--- /dev/null
+++ b/src/partials/ProjectCardSkeletonPartial.vue
@@ -0,0 +1,23 @@
+<template>
+        <div
+                class="rounded-lg border border-slate-200 dark:border-slate-800 dark:bg-linear-to-t dark:from-slate-800 dark:to-slate-800/30 p-5 animate-pulse"
+        >
+                <div class="flex flex-col h-full">
+                        <div class="grow">
+                                <div class="flex items-center justify-between space-x-2">
+                                        <div class="h-10 w-10 flex items-center justify-center border border-slate-200 dark:border-slate-700 rounded-full mb-2">
+                                                <div class="h-5 w-5 rounded-full bg-slate-200 dark:bg-slate-700"></div>
+                                        </div>
+                                        <div class="h-5 w-20 rounded-full bg-slate-200 dark:bg-slate-700"></div>
+                                </div>
+                                <div class="h-5 bg-slate-200 dark:bg-slate-700 rounded mb-3 w-3/4"></div>
+                                <div class="space-y-2">
+                                        <div class="h-3 bg-slate-200 dark:bg-slate-700 rounded"></div>
+                                        <div class="h-3 bg-slate-200 dark:bg-slate-700 rounded w-5/6"></div>
+                                        <div class="h-3 bg-slate-200 dark:bg-slate-700 rounded w-2/3"></div>
+                                </div>
+                        </div>
+                        <div class="mt-4 h-3 w-10 bg-slate-200 dark:bg-slate-700 rounded self-end"></div>
+                </div>
+        </div>
+</template>

From 32dd513f24b613b7f1baf66fe9caccb75f96ddef Mon Sep 17 00:00:00 2001
From: Gus <gocanto@users.noreply.github.com>
Date: Thu, 2 Oct 2025 16:13:48 +0800
Subject: [PATCH 2/8] Ensure projects fallback spans full grid width

---
 src/pages/ProjectsPage.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/pages/ProjectsPage.vue b/src/pages/ProjectsPage.vue
index 21484592..5e5b168c 100644
--- a/src/pages/ProjectsPage.vue
+++ b/src/pages/ProjectsPage.vue
@@ -37,7 +37,7 @@
                                                                                                 <template v-else-if="projects.length > 0">
                                                                                                         <ProjectCardPartial v-for="project in projects" :key="project.uuid" :item="project" />
                                                                                                 </template>
-                                                                                                <p v-else class="text-sm text-slate-500 dark:text-slate-400">No projects are available at the moment. Please check back soon.</p>
+                                                                                                <p v-else class="col-span-full text-sm text-slate-500 dark:text-slate-400">No projects are available at the moment. Please check back soon.</p>
                                                                                         </div>
                                                                                 </section>
                                                                         </div>

From 7001d06fb20b96d9949d146018363d64efed3753 Mon Sep 17 00:00:00 2001
From: Gus <gocanto@users.noreply.github.com>
Date: Thu, 2 Oct 2025 16:23:18 +0800
Subject: [PATCH 3/8] Fix skeleton gradient class typo

---
 src/partials/ProjectCardSkeletonPartial.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/partials/ProjectCardSkeletonPartial.vue b/src/partials/ProjectCardSkeletonPartial.vue
index 99949b0f..b1eb78be 100644
--- a/src/partials/ProjectCardSkeletonPartial.vue
+++ b/src/partials/ProjectCardSkeletonPartial.vue
@@ -1,6 +1,6 @@
 <template>
         <div
-                class="rounded-lg border border-slate-200 dark:border-slate-800 dark:bg-linear-to-t dark:from-slate-800 dark:to-slate-800/30 p-5 animate-pulse"
+                class="rounded-lg border border-slate-200 dark:border-slate-800 dark:bg-gradient-to-t dark:from-slate-800 dark:to-slate-800/30 p-5 animate-pulse"
         >
                 <div class="flex flex-col h-full">
                         <div class="grow">

From 4c63ca5f4529b5fe9f488c313faa9f415dbc3688 Mon Sep 17 00:00:00 2001
From: Gus <gocanto@users.noreply.github.com>
Date: Thu, 2 Oct 2025 16:27:32 +0800
Subject: [PATCH 4/8] Fix dark mode gradient utility in featured projects

---
 src/partials/FeaturedProjectsPartial.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/partials/FeaturedProjectsPartial.vue b/src/partials/FeaturedProjectsPartial.vue
index 974cfca5..ae6c899e 100644
--- a/src/partials/FeaturedProjectsPartial.vue
+++ b/src/partials/FeaturedProjectsPartial.vue
@@ -12,7 +12,7 @@
                                         v-for="project in projects"
                                         :key="project.uuid"
                                         v-lazy-link
-                                        class="rounded-lg border border-slate-200 dark:border-slate-800 dark:bg-linear-to-t dark:from-slate-800 dark:to-slate-800/30 odd:-rotate-1 even:rotate-1 hover:rotate-0 transition-transform duration-700 hover:duration-100 ease-in-out p-5"
+                                        class="rounded-lg border border-slate-200 dark:border-slate-800 dark:bg-gradient-to-t dark:from-slate-800 dark:to-slate-800/30 odd:-rotate-1 even:rotate-1 hover:rotate-0 transition-transform duration-700 hover:duration-100 ease-in-out p-5"
                                         :href="project.url"
                                         target="_blank"
                                         rel="noopener noreferrer"

From 5380af3c7d9898e02eeda1750ffd763b5f82bc13 Mon Sep 17 00:00:00 2001
From: Gus <gocanto@users.noreply.github.com>
Date: Thu, 2 Oct 2025 16:30:10 +0800
Subject: [PATCH 5/8] Ensure featured projects fallback spans grid

---
 src/partials/FeaturedProjectsPartial.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/partials/FeaturedProjectsPartial.vue b/src/partials/FeaturedProjectsPartial.vue
index ae6c899e..b92a858e 100644
--- a/src/partials/FeaturedProjectsPartial.vue
+++ b/src/partials/FeaturedProjectsPartial.vue
@@ -38,7 +38,7 @@
                                         </div>
                                 </a>
                         </template>
-                        <p v-else class="text-sm text-slate-500 dark:text-slate-400">Projects will be added soon. Check back later!</p>
+                        <p v-else class="col-span-full text-sm text-slate-500 dark:text-slate-400">Projects will be added soon. Check back later!</p>
                 </div>
         </section>
 </template>

From 9ba97cf758410178428aa9466c0350ab2d4eb546 Mon Sep 17 00:00:00 2001
From: Gus <gocanto@users.noreply.github.com>
Date: Thu, 2 Oct 2025 16:33:00 +0800
Subject: [PATCH 6/8] Add rotation classes to featured project skeletons

---
 src/partials/FeaturedProjectsPartial.vue    | 6 +++++-
 src/partials/ProjectCardSkeletonPartial.vue | 7 +++++++
 2 files changed, 12 insertions(+), 1 deletion(-)

diff --git a/src/partials/FeaturedProjectsPartial.vue b/src/partials/FeaturedProjectsPartial.vue
index b92a858e..fca488d8 100644
--- a/src/partials/FeaturedProjectsPartial.vue
+++ b/src/partials/FeaturedProjectsPartial.vue
@@ -5,7 +5,11 @@
                 <!-- Cards -->
                 <div class="grid sm:grid-cols-2 md:grid-cols-1 lg:grid-cols-2 gap-5">
                         <template v-if="isLoading">
-                                <ProjectCardSkeletonPartial v-for="index in 2" :key="`featured-project-skeleton-${index}`" />
+                                <ProjectCardSkeletonPartial
+                                        v-for="index in 2"
+                                        :key="`featured-project-skeleton-${index}`"
+                                        wrapper-class="odd:-rotate-1 even:rotate-1"
+                                />
                         </template>
                         <template v-else-if="projects.length > 0">
                                 <a
diff --git a/src/partials/ProjectCardSkeletonPartial.vue b/src/partials/ProjectCardSkeletonPartial.vue
index b1eb78be..de569b2e 100644
--- a/src/partials/ProjectCardSkeletonPartial.vue
+++ b/src/partials/ProjectCardSkeletonPartial.vue
@@ -1,6 +1,7 @@
 <template>
         <div
                 class="rounded-lg border border-slate-200 dark:border-slate-800 dark:bg-gradient-to-t dark:from-slate-800 dark:to-slate-800/30 p-5 animate-pulse"
+                :class="wrapperClass"
         >
                 <div class="flex flex-col h-full">
                         <div class="grow">
@@ -21,3 +22,9 @@
                 </div>
         </div>
 </template>
+
+<script setup lang="ts">
+const { wrapperClass } = defineProps<{
+        wrapperClass?: string;
+}>();
+</script>

From d27db2d6aed8f26f53399e8d06bb8ddbf6d86bd9 Mon Sep 17 00:00:00 2001
From: Gustavo Ocanto <gustavoocanto@gmail.com>
Date: Thu, 2 Oct 2025 17:02:44 +0800
Subject: [PATCH 7/8] format

---
 src/pages/ProjectsPage.vue                  |  54 +++++------
 src/pages/ResumePage.vue                    |  61 ++++++------
 src/partials/EducationPartial.vue           |   2 +-
 src/partials/ExperiencePartial.vue          |   2 +-
 src/partials/FeaturedProjectsPartial.vue    | 102 ++++++++++----------
 src/partials/ProjectCardSkeletonPartial.vue |  43 ++++-----
 src/partials/RecommendationPartial.vue      |   2 +-
 7 files changed, 128 insertions(+), 138 deletions(-)

diff --git a/src/pages/ProjectsPage.vue b/src/pages/ProjectsPage.vue
index 5e5b168c..bc716e6d 100644
--- a/src/pages/ProjectsPage.vue
+++ b/src/pages/ProjectsPage.vue
@@ -28,22 +28,22 @@
 												Feel free to dive into my open-source repos and client case studies to see how I turn complex requirements into reliable, maintainable systems.
 											</p>
 										</div>
-                                                                                <section>
-                                                                                        <h2 class="font-aspekta text-xl font-[650] mb-6">Open Source / Client Projects</h2>
-                                                                                        <div class="grid sm:grid-cols-2 md:grid-cols-1 lg:grid-cols-2 gap-5">
-                                                                                                <template v-if="isLoadingProjects">
-                                                                                                        <ProjectCardSkeletonPartial v-for="index in 4" :key="`projects-page-skeleton-${index}`" />
-                                                                                                </template>
-                                                                                                <template v-else-if="projects.length > 0">
-                                                                                                        <ProjectCardPartial v-for="project in projects" :key="project.uuid" :item="project" />
-                                                                                                </template>
-                                                                                                <p v-else class="col-span-full text-sm text-slate-500 dark:text-slate-400">No projects are available at the moment. Please check back soon.</p>
-                                                                                        </div>
-                                                                                </section>
-                                                                        </div>
-                                                                </section>
-                                                        </div>
-                                                </div>
+										<section>
+											<h2 class="font-aspekta text-xl font-[650] mb-6">Open Source / Client Projects</h2>
+											<div class="grid sm:grid-cols-2 md:grid-cols-1 lg:grid-cols-2 gap-5">
+												<template v-if="isLoadingProjects">
+													<ProjectCardSkeletonPartial v-for="index in 4" :key="`projects-page-skeleton-${index}`" />
+												</template>
+												<template v-else-if="projects.length > 0">
+													<ProjectCardPartial v-for="project in projects" :key="project.uuid" :item="project" />
+												</template>
+												<p v-else class="col-span-full text-sm text-slate-500 dark:text-slate-400">No projects are available at the moment. Please check back soon.</p>
+											</div>
+										</section>
+									</div>
+								</section>
+							</div>
+						</div>
 
 						<!-- Right sidebar -->
 						<aside class="md:w-[240px] lg:w-[300px] shrink-0">
@@ -100,20 +100,20 @@ useSeo({
 });
 
 onMounted(async () => {
-        try {
-                const [userProfileResponse, projectsResponse] = await Promise.all([apiStore.getProfile(), apiStore.getProjects()]);
+	try {
+		const [userProfileResponse, projectsResponse] = await Promise.all([apiStore.getProfile(), apiStore.getProjects()]);
 
-                if (userProfileResponse.data) {
+		if (userProfileResponse.data) {
 			profile.value = userProfileResponse.data;
 		}
 
-                if (projectsResponse.data) {
-                        projects.value = projectsResponse.data;
-                }
-        } catch (error) {
-                debugError(error);
-        } finally {
-                isLoadingProjects.value = false;
-        }
+		if (projectsResponse.data) {
+			projects.value = projectsResponse.data;
+		}
+	} catch (error) {
+		debugError(error);
+	} finally {
+		isLoadingProjects.value = false;
+	}
 });
 </script>
diff --git a/src/pages/ResumePage.vue b/src/pages/ResumePage.vue
index 1c758e37..406be242 100644
--- a/src/pages/ResumePage.vue
+++ b/src/pages/ResumePage.vue
@@ -13,36 +13,33 @@
 						<!-- Middle area -->
 						<div class="grow">
 							<div class="max-w-[700px]">
-                                                                <section>
-                                                                        <!-- Page title -->
-                                                                        <h1 class="h1 font-aspekta mb-6">My resume</h1>
+								<section>
+									<!-- Page title -->
+									<h1 class="h1 font-aspekta mb-6">My resume</h1>
 
-                                                                        <nav
-                                                                                aria-label="Resume sections"
-                                                                                class="flex flex-wrap items-center gap-3 text-sm font-medium text-slate-500 dark:text-slate-400 mb-12"
-                                                                        >
-                                                                                <a
-                                                                                        v-for="item in navigationItems"
-                                                                                        :key="item.href"
-                                                                                        class="inline-flex items-center gap-2 rounded-full border border-slate-200/70 dark:border-slate-700/80 px-4 py-2 transition-colors hover:border-fuchsia-400/70 hover:text-slate-800 dark:hover:text-slate-100"
-                                                                                        :href="item.href"
-                                                                                >
-                                                                                        <span class="size-2 rounded-full bg-fuchsia-400/70"></span>
-                                                                                        {{ item.text }}
-                                                                                </a>
-                                                                        </nav>
-                                                                        <!-- Page content -->
-                                                                        <div class="text-slate-500 dark:text-slate-400 space-y-12">
-                                                                                <span id="education" class="block h-0" aria-hidden="true"></span>
-                                                                                <EducationPartial v-if="education" :education="education" />
-                                                                                <span id="experience" class="block h-0" aria-hidden="true"></span>
-                                                                                <ExperiencePartial v-if="experience" :experience="experience" />
-                                                                                <span id="recommendations" class="block h-0" aria-hidden="true"></span>
-                                                                                <RecommendationPartial v-if="recommendations" :recommendations="recommendations" />
-                                                                        </div>
-                                                                </section>
-                                                        </div>
-                                                </div>
+									<nav aria-label="Resume sections" class="flex flex-wrap items-center gap-3 text-sm font-medium text-slate-500 dark:text-slate-400 mb-12">
+										<a
+											v-for="item in navigationItems"
+											:key="item.href"
+											class="inline-flex items-center gap-2 rounded-full border border-slate-200/70 dark:border-slate-700/80 px-4 py-2 transition-colors hover:border-fuchsia-400/70 hover:text-slate-800 dark:hover:text-slate-100"
+											:href="item.href"
+										>
+											<span class="size-2 rounded-full bg-fuchsia-400/70"></span>
+											{{ item.text }}
+										</a>
+									</nav>
+									<!-- Page content -->
+									<div class="text-slate-500 dark:text-slate-400 space-y-12">
+										<span id="education" class="block h-0" aria-hidden="true"></span>
+										<EducationPartial v-if="education" :education="education" />
+										<span id="experience" class="block h-0" aria-hidden="true"></span>
+										<ExperiencePartial v-if="experience" :experience="experience" />
+										<span id="recommendations" class="block h-0" aria-hidden="true"></span>
+										<RecommendationPartial v-if="recommendations" :recommendations="recommendations" />
+									</div>
+								</section>
+							</div>
+						</div>
 
 						<!-- Right sidebar -->
 						<aside class="md:w-[240px] lg:w-[300px] shrink-0">
@@ -77,9 +74,9 @@ import { useSeo, SITE_NAME, ABOUT_IMAGE, siteUrlFor, buildKeywords, PERSON_JSON_
 import type { ProfileResponse, EducationResponse, ExperienceResponse, RecommendationsResponse } from '@api/response/index.ts';
 
 const navigationItems = [
-        { href: '#education', text: 'Education' },
-        { href: '#experience', text: 'Work Experience' },
-        { href: '#recommendations', text: 'Recommendations' },
+	{ href: '#education', text: 'Education' },
+	{ href: '#experience', text: 'Work Experience' },
+	{ href: '#recommendations', text: 'Recommendations' },
 ] as const;
 
 const apiStore = useApiStore();
diff --git a/src/partials/EducationPartial.vue b/src/partials/EducationPartial.vue
index 46cdac66..8e033b98 100644
--- a/src/partials/EducationPartial.vue
+++ b/src/partials/EducationPartial.vue
@@ -1,5 +1,5 @@
 <template>
-        <section class="space-y-8">
+	<section class="space-y-8">
 		<h2 class="h3 font-aspekta text-slate-800 dark:text-slate-100">Education</h2>
 		<ul class="space-y-8">
 			<!-- Item -->
diff --git a/src/partials/ExperiencePartial.vue b/src/partials/ExperiencePartial.vue
index 04ea9d50..9a22c725 100644
--- a/src/partials/ExperiencePartial.vue
+++ b/src/partials/ExperiencePartial.vue
@@ -1,5 +1,5 @@
 <template>
-        <section class="space-y-8">
+	<section class="space-y-8">
 		<h2 class="h2 font-aspekta text-slate-700 dark:text-slate-300">Work Experience</h2>
 		<ul class="space-y-8">
 			<!-- Item -->
diff --git a/src/partials/FeaturedProjectsPartial.vue b/src/partials/FeaturedProjectsPartial.vue
index fca488d8..8e09e72a 100644
--- a/src/partials/FeaturedProjectsPartial.vue
+++ b/src/partials/FeaturedProjectsPartial.vue
@@ -2,49 +2,45 @@
 	<section>
 		<h2 class="font-aspekta text-xl font-[650] mb-5">Open-Source Projects</h2>
 
-                <!-- Cards -->
-                <div class="grid sm:grid-cols-2 md:grid-cols-1 lg:grid-cols-2 gap-5">
-                        <template v-if="isLoading">
-                                <ProjectCardSkeletonPartial
-                                        v-for="index in 2"
-                                        :key="`featured-project-skeleton-${index}`"
-                                        wrapper-class="odd:-rotate-1 even:rotate-1"
-                                />
-                        </template>
-                        <template v-else-if="projects.length > 0">
-                                <a
-                                        v-for="project in projects"
-                                        :key="project.uuid"
-                                        v-lazy-link
-                                        class="rounded-lg border border-slate-200 dark:border-slate-800 dark:bg-gradient-to-t dark:from-slate-800 dark:to-slate-800/30 odd:-rotate-1 even:rotate-1 hover:rotate-0 transition-transform duration-700 hover:duration-100 ease-in-out p-5"
-                                        :href="project.url"
-                                        target="_blank"
-                                        rel="noopener noreferrer"
-                                >
-                                        <div class="flex flex-col h-full">
-                                                <div class="grow">
-                                                        <div class="h-10 w-10 flex items-center justify-center border border-slate-200 dark:border-slate-700 rounded-full mb-2 text-fuchsia-500 dark:text-teal-500">
-                                                                <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" class="fill-current">
-                                                                        <path
-                                                                                fill-rule="evenodd"
-                                                                                d="M9.97 14.758c-.018 1.796-.497 3.248-1.072 3.242-.574-.006-1.026-1.466-1.008-3.262.017-1.796.497-3.247 1.071-3.242.575.006 1.026 1.466 1.009 3.262Zm-3.332-.408c-.977 1.502-2.16 2.461-2.64 2.143-.48-.318-.076-1.793.902-3.294.977-1.501 2.159-2.46 2.64-2.143.48.318.076 1.793-.902 3.294Zm-2.587-2.154c-1.628.73-3.137.893-3.37.364-.233-.53.897-1.55 2.524-2.28 1.628-.73 3.136-.893 3.37-.363.233.529-.897 1.55-2.524 2.28Zm2.328-3.764c-.087.573-1.585.815-3.346.542-1.76-.273-3.116-.959-3.029-1.531.087-.573 1.585-.815 3.346-.542 1.76.273 3.117.959 3.03 1.531Zm.632-1.363c-.38.434-1.77-.179-3.105-1.368C2.57 4.51 1.798 3.195 2.178 2.76c.38-.434 1.77.179 3.106 1.368C6.618 5.32 7.392 6.635 7.01 7.07Zm1.26-.797c-.554.157-1.395-1.116-1.88-2.844C5.906 1.7 5.961.17 6.514.013c.553-.158 1.394 1.116 1.879 2.844.485 1.728.43 3.257-.123 3.415Zm3.417-2.79C11.17 5.2 10.304 6.456 9.754 6.287c-.55-.168-.575-1.698-.056-3.416.519-1.718 1.385-2.974 1.934-2.806.55.169.575 1.698.056 3.417Zm2.443 2.321c-1.358 1.163-2.76 1.748-3.132 1.307-.372-.442.427-1.742 1.785-2.905 1.357-1.163 2.76-1.748 3.131-1.306.372.441-.427 1.742-1.784 2.904Zm.807 3.286c-1.765.238-3.258-.034-3.334-.608-.077-.575 1.293-1.233 3.058-1.471 1.766-.238 3.259.034 3.335.608.076.574-1.293 1.233-3.059 1.47Zm2.278 3.635c-.244.525-1.75.332-3.362-.43-1.613-.762-2.723-1.806-2.48-2.33.245-.525 1.75-.332 3.363.43s2.722 1.806 2.479 2.33Zm-3.393 3.87c-.486.308-1.65-.674-2.597-2.195-.948-1.52-1.323-3.003-.836-3.311.486-.308 1.649.674 2.597 2.195.948 1.52 1.322 3.003.836 3.31Z"
-                                                                        />
-                                                                </svg>
-                                                        </div>
-                                                        <div class="text-lg font-aspekta font-[650] mb-1">{{ project.title }}</div>
-                                                        <p class="text-sm text-slate-500 dark:text-slate-400 mb-2">{{ project.excerpt }}</p>
-                                                </div>
-                                                <div class="text-fuchsia-500 dark:text-teal-500 flex justify-end">
-                                                        <svg class="fill-current" xmlns="http://www.w3.org/2000/svg" width="14" height="12">
-                                                                <path d="M9.586 5 6.293 1.707 7.707.293 13.414 6l-5.707 5.707-1.414-1.414L9.586 7H0V5h9.586Z" />
-                                                        </svg>
-                                                </div>
-                                        </div>
-                                </a>
-                        </template>
-                        <p v-else class="col-span-full text-sm text-slate-500 dark:text-slate-400">Projects will be added soon. Check back later!</p>
-                </div>
-        </section>
+		<!-- Cards -->
+		<div class="grid sm:grid-cols-2 md:grid-cols-1 lg:grid-cols-2 gap-5">
+			<template v-if="isLoading">
+				<ProjectCardSkeletonPartial v-for="index in 2" :key="`featured-project-skeleton-${index}`" wrapper-class="odd:-rotate-1 even:rotate-1" />
+			</template>
+			<template v-else-if="projects.length > 0">
+				<a
+					v-for="project in projects"
+					:key="project.uuid"
+					v-lazy-link
+					class="rounded-lg border border-slate-200 dark:border-slate-800 dark:bg-gradient-to-t dark:from-slate-800 dark:to-slate-800/30 odd:-rotate-1 even:rotate-1 hover:rotate-0 transition-transform duration-700 hover:duration-100 ease-in-out p-5"
+					:href="project.url"
+					target="_blank"
+					rel="noopener noreferrer"
+				>
+					<div class="flex flex-col h-full">
+						<div class="grow">
+							<div class="h-10 w-10 flex items-center justify-center border border-slate-200 dark:border-slate-700 rounded-full mb-2 text-fuchsia-500 dark:text-teal-500">
+								<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" class="fill-current">
+									<path
+										fill-rule="evenodd"
+										d="M9.97 14.758c-.018 1.796-.497 3.248-1.072 3.242-.574-.006-1.026-1.466-1.008-3.262.017-1.796.497-3.247 1.071-3.242.575.006 1.026 1.466 1.009 3.262Zm-3.332-.408c-.977 1.502-2.16 2.461-2.64 2.143-.48-.318-.076-1.793.902-3.294.977-1.501 2.159-2.46 2.64-2.143.48.318.076 1.793-.902 3.294Zm-2.587-2.154c-1.628.73-3.137.893-3.37.364-.233-.53.897-1.55 2.524-2.28 1.628-.73 3.136-.893 3.37-.363.233.529-.897 1.55-2.524 2.28Zm2.328-3.764c-.087.573-1.585.815-3.346.542-1.76-.273-3.116-.959-3.029-1.531.087-.573 1.585-.815 3.346-.542 1.76.273 3.117.959 3.03 1.531Zm.632-1.363c-.38.434-1.77-.179-3.105-1.368C2.57 4.51 1.798 3.195 2.178 2.76c.38-.434 1.77.179 3.106 1.368C6.618 5.32 7.392 6.635 7.01 7.07Zm1.26-.797c-.554.157-1.395-1.116-1.88-2.844C5.906 1.7 5.961.17 6.514.013c.553-.158 1.394 1.116 1.879 2.844.485 1.728.43 3.257-.123 3.415Zm3.417-2.79C11.17 5.2 10.304 6.456 9.754 6.287c-.55-.168-.575-1.698-.056-3.416.519-1.718 1.385-2.974 1.934-2.806.55.169.575 1.698.056 3.417Zm2.443 2.321c-1.358 1.163-2.76 1.748-3.132 1.307-.372-.442.427-1.742 1.785-2.905 1.357-1.163 2.76-1.748 3.131-1.306.372.441-.427 1.742-1.784 2.904Zm.807 3.286c-1.765.238-3.258-.034-3.334-.608-.077-.575 1.293-1.233 3.058-1.471 1.766-.238 3.259.034 3.335.608.076.574-1.293 1.233-3.059 1.47Zm2.278 3.635c-.244.525-1.75.332-3.362-.43-1.613-.762-2.723-1.806-2.48-2.33.245-.525 1.75-.332 3.363.43s2.722 1.806 2.479 2.33Zm-3.393 3.87c-.486.308-1.65-.674-2.597-2.195-.948-1.52-1.323-3.003-.836-3.311.486-.308 1.649.674 2.597 2.195.948 1.52 1.322 3.003.836 3.31Z"
+									/>
+								</svg>
+							</div>
+							<div class="text-lg font-aspekta font-[650] mb-1">{{ project.title }}</div>
+							<p class="text-sm text-slate-500 dark:text-slate-400 mb-2">{{ project.excerpt }}</p>
+						</div>
+						<div class="text-fuchsia-500 dark:text-teal-500 flex justify-end">
+							<svg class="fill-current" xmlns="http://www.w3.org/2000/svg" width="14" height="12">
+								<path d="M9.586 5 6.293 1.707 7.707.293 13.414 6l-5.707 5.707-1.414-1.414L9.586 7H0V5h9.586Z" />
+							</svg>
+						</div>
+					</div>
+				</a>
+			</template>
+			<p v-else class="col-span-full text-sm text-slate-500 dark:text-slate-400">Projects will be added soon. Check back later!</p>
+		</div>
+	</section>
 </template>
 
 <script setup lang="ts">
@@ -59,16 +55,16 @@ const projects = ref<ProjectsResponse[]>([]);
 const isLoading = ref(true);
 
 onMounted(async () => {
-        try {
-                const projectsResponse = await apiStore.getProjects();
+	try {
+		const projectsResponse = await apiStore.getProjects();
 
-                if (projectsResponse.data) {
-                        projects.value = projectsResponse.data.slice(0, 2);
-                }
-        } catch (error) {
-                debugError(error);
-        } finally {
-                isLoading.value = false;
-        }
+		if (projectsResponse.data) {
+			projects.value = projectsResponse.data.slice(0, 2);
+		}
+	} catch (error) {
+		debugError(error);
+	} finally {
+		isLoading.value = false;
+	}
 });
 </script>
diff --git a/src/partials/ProjectCardSkeletonPartial.vue b/src/partials/ProjectCardSkeletonPartial.vue
index de569b2e..61431031 100644
--- a/src/partials/ProjectCardSkeletonPartial.vue
+++ b/src/partials/ProjectCardSkeletonPartial.vue
@@ -1,30 +1,27 @@
 <template>
-        <div
-                class="rounded-lg border border-slate-200 dark:border-slate-800 dark:bg-gradient-to-t dark:from-slate-800 dark:to-slate-800/30 p-5 animate-pulse"
-                :class="wrapperClass"
-        >
-                <div class="flex flex-col h-full">
-                        <div class="grow">
-                                <div class="flex items-center justify-between space-x-2">
-                                        <div class="h-10 w-10 flex items-center justify-center border border-slate-200 dark:border-slate-700 rounded-full mb-2">
-                                                <div class="h-5 w-5 rounded-full bg-slate-200 dark:bg-slate-700"></div>
-                                        </div>
-                                        <div class="h-5 w-20 rounded-full bg-slate-200 dark:bg-slate-700"></div>
-                                </div>
-                                <div class="h-5 bg-slate-200 dark:bg-slate-700 rounded mb-3 w-3/4"></div>
-                                <div class="space-y-2">
-                                        <div class="h-3 bg-slate-200 dark:bg-slate-700 rounded"></div>
-                                        <div class="h-3 bg-slate-200 dark:bg-slate-700 rounded w-5/6"></div>
-                                        <div class="h-3 bg-slate-200 dark:bg-slate-700 rounded w-2/3"></div>
-                                </div>
-                        </div>
-                        <div class="mt-4 h-3 w-10 bg-slate-200 dark:bg-slate-700 rounded self-end"></div>
-                </div>
-        </div>
+	<div class="rounded-lg border border-slate-200 dark:border-slate-800 dark:bg-gradient-to-t dark:from-slate-800 dark:to-slate-800/30 p-5 animate-pulse" :class="wrapperClass">
+		<div class="flex flex-col h-full">
+			<div class="grow">
+				<div class="flex items-center justify-between space-x-2">
+					<div class="h-10 w-10 flex items-center justify-center border border-slate-200 dark:border-slate-700 rounded-full mb-2">
+						<div class="h-5 w-5 rounded-full bg-slate-200 dark:bg-slate-700"></div>
+					</div>
+					<div class="h-5 w-20 rounded-full bg-slate-200 dark:bg-slate-700"></div>
+				</div>
+				<div class="h-5 bg-slate-200 dark:bg-slate-700 rounded mb-3 w-3/4"></div>
+				<div class="space-y-2">
+					<div class="h-3 bg-slate-200 dark:bg-slate-700 rounded"></div>
+					<div class="h-3 bg-slate-200 dark:bg-slate-700 rounded w-5/6"></div>
+					<div class="h-3 bg-slate-200 dark:bg-slate-700 rounded w-2/3"></div>
+				</div>
+			</div>
+			<div class="mt-4 h-3 w-10 bg-slate-200 dark:bg-slate-700 rounded self-end"></div>
+		</div>
+	</div>
 </template>
 
 <script setup lang="ts">
 const { wrapperClass } = defineProps<{
-        wrapperClass?: string;
+	wrapperClass?: string;
 }>();
 </script>
diff --git a/src/partials/RecommendationPartial.vue b/src/partials/RecommendationPartial.vue
index b4886402..bdfebc80 100644
--- a/src/partials/RecommendationPartial.vue
+++ b/src/partials/RecommendationPartial.vue
@@ -1,5 +1,5 @@
 <template>
-        <section class="space-y-8">
+	<section class="space-y-8">
 		<h2 class="h3 font-aspekta text-slate-800 dark:text-slate-100">Recommendations</h2>
 		<ul class="space-y-8">
 			<!-- Item -->

From cc12bf3b81200ba2e30efe6adadbae282b1f2c19 Mon Sep 17 00:00:00 2001
From: Gustavo Ocanto <gustavoocanto@gmail.com>
Date: Thu, 2 Oct 2025 17:05:19 +0800
Subject: [PATCH 8/8] format

---
 src/pages/ProjectsPage.vue               | 4 ++--
 src/partials/FeaturedProjectsPartial.vue | 4 ++--
 2 files changed, 4 insertions(+), 4 deletions(-)

diff --git a/src/pages/ProjectsPage.vue b/src/pages/ProjectsPage.vue
index bc716e6d..1171479c 100644
--- a/src/pages/ProjectsPage.vue
+++ b/src/pages/ProjectsPage.vue
@@ -69,16 +69,16 @@ import FooterPartial from '@partials/FooterPartial.vue';
 import HeaderPartial from '@partials/HeaderPartial.vue';
 import SideNavPartial from '@partials/SideNavPartial.vue';
 import ProjectCardPartial from '@partials/ProjectCardPartial.vue';
-import ProjectCardSkeletonPartial from '@partials/ProjectCardSkeletonPartial.vue';
 import WidgetSkillsPartial from '@partials/WidgetSkillsPartial.vue';
 import WidgetSponsorPartial from '@partials/WidgetSponsorPartial.vue';
 import type { ProfileResponse, ProjectsResponse } from '@api/response/index.ts';
+import ProjectCardSkeletonPartial from '@partials/ProjectCardSkeletonPartial.vue';
 import { useSeo, SITE_NAME, ABOUT_IMAGE, siteUrlFor, buildKeywords, PERSON_JSON_LD } from '@/support/seo';
 
 const apiStore = useApiStore();
+const isLoadingProjects = ref(true);
 const projects = ref<ProjectsResponse[]>([]);
 const profile = ref<ProfileResponse | null>(null);
-const isLoadingProjects = ref(true);
 
 useSeo({
 	title: 'Projects',
diff --git a/src/partials/FeaturedProjectsPartial.vue b/src/partials/FeaturedProjectsPartial.vue
index 8e09e72a..7a87554c 100644
--- a/src/partials/FeaturedProjectsPartial.vue
+++ b/src/partials/FeaturedProjectsPartial.vue
@@ -47,12 +47,12 @@
 import { ref, onMounted } from 'vue';
 import { useApiStore } from '@api/store.ts';
 import { debugError } from '@api/http-error.ts';
-import ProjectCardSkeletonPartial from '@partials/ProjectCardSkeletonPartial.vue';
 import type { ProjectsResponse } from '@api/response/index.ts';
+import ProjectCardSkeletonPartial from '@partials/ProjectCardSkeletonPartial.vue';
 
+const isLoading = ref(true);
 const apiStore = useApiStore();
 const projects = ref<ProjectsResponse[]>([]);
-const isLoading = ref(true);
 
 onMounted(async () => {
 	try {