From 2cd8b4d20138dd3736d9bc5520991cfbd99a2df9 Mon Sep 17 00:00:00 2001
From: Gustavo Ocanto <gustavoocanto@gmail.com>
Date: Fri, 14 Nov 2025 16:58:11 +0800
Subject: [PATCH 1/4] wip

---
 src/components/WidgetSkillsTransitionWrapper.vue | 2 +-
 src/components/WidgetSocialTransitionWrapper.vue | 2 +-
 src/pages/AboutPage.vue                          | 2 +-
 src/pages/PostPage.vue                           | 2 +-
 src/pages/ProjectsPage.vue                       | 2 +-
 src/pages/ResumePage.vue                         | 4 ++--
 src/pages/TagPostsPage.vue                       | 2 +-
 src/partials/ArticlesListPartial.vue             | 2 +-
 src/partials/FeaturedProjectsPartial.vue         | 2 +-
 src/partials/TalksPartial.vue                    | 2 +-
 10 files changed, 11 insertions(+), 11 deletions(-)

diff --git a/src/components/WidgetSkillsTransitionWrapper.vue b/src/components/WidgetSkillsTransitionWrapper.vue
index 01770ae..be306ff 100644
--- a/src/components/WidgetSkillsTransitionWrapper.vue
+++ b/src/components/WidgetSkillsTransitionWrapper.vue
@@ -1,6 +1,6 @@
 <template>
 	<div class="relative min-h-[18rem]">
-		<transition name="fade" appear>
+		<transition name="fade" appear mode="out-in">
 			<WidgetSkillsSkeletonPartial v-if="isLoading || !profile" key="skeleton" />
 			<WidgetSkillsPartial v-else key="skills" :skills="profile.skills" />
 		</transition>
diff --git a/src/components/WidgetSocialTransitionWrapper.vue b/src/components/WidgetSocialTransitionWrapper.vue
index 4e21090..cb0bc19 100644
--- a/src/components/WidgetSocialTransitionWrapper.vue
+++ b/src/components/WidgetSocialTransitionWrapper.vue
@@ -1,6 +1,6 @@
 <template>
 	<div class="relative min-h-[200px]">
-		<transition name="fade" appear>
+		<transition name="fade" appear mode="out-in">
 			<WidgetSocialSkeletonPartial v-if="isLoading" key="skeleton" />
 			<WidgetSocialPartial v-else key="social" :social="social" />
 		</transition>
diff --git a/src/pages/AboutPage.vue b/src/pages/AboutPage.vue
index a8566cb..b9744c4 100644
--- a/src/pages/AboutPage.vue
+++ b/src/pages/AboutPage.vue
@@ -53,7 +53,7 @@
 										<div class="mt-5 space-y-5">
 											<h2 class="h2 font-aspekta text-slate-700 dark:text-slate-300">Let's Connect</h2>
 											<div class="relative min-h-[5rem]">
-												<transition name="fade" appear>
+												<transition name="fade" appear mode="out-in">
 													<p v-if="profile" key="connect">
 														I'm happy to connect by
 														<a v-lazy-link class="blog-link" title="send me an email" aria-label="send me an email" :href="`mailto:${profile.email}`"> email </a>
diff --git a/src/pages/PostPage.vue b/src/pages/PostPage.vue
index 74c5a10..8173511 100644
--- a/src/pages/PostPage.vue
+++ b/src/pages/PostPage.vue
@@ -28,7 +28,7 @@
 								</div>
 
 								<div class="relative min-h-[25rem]">
-									<transition name="fade" appear>
+									<transition name="fade" appear mode="out-in">
 										<PostPageSkeletonPartial v-if="isLoading" key="skeleton" />
 
 										<article v-else-if="post" key="post">
diff --git a/src/pages/ProjectsPage.vue b/src/pages/ProjectsPage.vue
index c370e2f..cbfcd72 100644
--- a/src/pages/ProjectsPage.vue
+++ b/src/pages/ProjectsPage.vue
@@ -31,7 +31,7 @@
 										<section>
 											<h2 class="font-aspekta text-xl font-[650] mb-6">Open Source / Client Projects</h2>
 											<div class="relative min-h-[25rem]">
-												<transition name="fade" appear>
+												<transition name="fade" appear mode="out-in">
 													<div v-if="isLoadingProjects" key="loading" data-testid="projects-skeleton-grid" class="blog-projects-grid">
 														<ProjectCardSkeletonPartial
 															v-for="index in 4"
diff --git a/src/pages/ResumePage.vue b/src/pages/ResumePage.vue
index 33d5c21..66f79f8 100644
--- a/src/pages/ResumePage.vue
+++ b/src/pages/ResumePage.vue
@@ -30,11 +30,11 @@
 									</nav>
 									<!-- Page content -->
 									<div class="text-slate-500 dark:text-slate-400 relative">
-										<transition name="fade" appear>
+										<transition name="fade" appear mode="out-in">
 											<div v-if="shouldShowSkeleton" key="skeleton" :class="['space-y-12', resumeSectionsTotalHeight]">
 												<ResumePageSkeletonPartial :show-refresh-button="hasProfileError" @retry="refreshResumePage" />
 											</div>
-											<div v-else key="content" class="space-y-12">
+											<div v-else key="content" :class="['space-y-12', resumeSectionsTotalHeight]">
 												<div :class="resumeSectionHeights.education">
 													<span id="education" class="block h-0" aria-hidden="true"></span>
 													<EducationPartial v-if="education" :education="education" />
diff --git a/src/pages/TagPostsPage.vue b/src/pages/TagPostsPage.vue
index 74c9346..fde3940 100644
--- a/src/pages/TagPostsPage.vue
+++ b/src/pages/TagPostsPage.vue
@@ -46,7 +46,7 @@
 										<section role="status">
 											<h2 class="font-aspekta text-xl font-[650] mb-6">Articles</h2>
 											<div class="relative min-h-[20rem]">
-												<transition name="fade" appear>
+												<transition name="fade" appear mode="out-in">
 													<div v-if="isLoading" key="skeleton" class="space-y-5" data-testid="tag-posts-skeleton">
 														<ArticleItemSkeletonPartial v-for="skeleton in skeletonCount" :key="`tag-post-skeleton-${skeleton}`" />
 													</div>
diff --git a/src/partials/ArticlesListPartial.vue b/src/partials/ArticlesListPartial.vue
index a0cb598..1c48a1f 100644
--- a/src/partials/ArticlesListPartial.vue
+++ b/src/partials/ArticlesListPartial.vue
@@ -22,7 +22,7 @@
 
 		<!-- Articles list -->
 		<div class="relative min-h-[24rem]">
-			<transition name="fade" appear>
+			<transition name="fade" appear mode="out-in">
 				<div v-if="isLoading" key="skeleton" aria-busy="true" class="min-h-[24rem]">
 					<ArticleItemSkeletonPartial v-for="skeleton in skeletonCount" :key="`article-skeleton-${skeleton}`" />
 				</div>
diff --git a/src/partials/FeaturedProjectsPartial.vue b/src/partials/FeaturedProjectsPartial.vue
index c7234d2..57545d1 100644
--- a/src/partials/FeaturedProjectsPartial.vue
+++ b/src/partials/FeaturedProjectsPartial.vue
@@ -4,7 +4,7 @@
 
 		<!-- Cards -->
 		<div class="relative min-h-[300px]">
-			<transition name="fade" appear>
+			<transition name="fade" appear mode="out-in">
 				<div v-if="isLoading" key="loading" class="blog-projects-grid">
 					<ProjectCardSkeletonPartial v-for="index in 2" :key="`featured-project-skeleton-${index}`" wrapper-class="odd:-rotate-1 even:rotate-1" />
 				</div>
diff --git a/src/partials/TalksPartial.vue b/src/partials/TalksPartial.vue
index 1c39297..09e16f8 100644
--- a/src/partials/TalksPartial.vue
+++ b/src/partials/TalksPartial.vue
@@ -4,7 +4,7 @@
 
 		<!-- Cards -->
 		<div class="relative min-h-[300px]">
-			<transition name="fade" appear>
+			<transition name="fade" appear mode="out-in">
 				<div v-if="isLoadingTalks || talks.length === 0" key="skeleton" class="blog-projects-grid">
 					<TalkCardSkeletonPartial v-for="index in 4" :key="`talk-skeleton-${index}`" :is-animated="isLoadingTalks && talks.length === 0" />
 				</div>

From 1d2bf727383674cb4146653c70367d74a88855a7 Mon Sep 17 00:00:00 2001
From: Gustavo Ocanto <gustavoocanto@gmail.com>
Date: Fri, 14 Nov 2025 17:01:51 +0800
Subject: [PATCH 2/4] wip

---
 src/pages/ProjectsPage.vue | 8 ++++++--
 1 file changed, 6 insertions(+), 2 deletions(-)

diff --git a/src/pages/ProjectsPage.vue b/src/pages/ProjectsPage.vue
index cbfcd72..65992b3 100644
--- a/src/pages/ProjectsPage.vue
+++ b/src/pages/ProjectsPage.vue
@@ -34,7 +34,7 @@
 												<transition name="fade" appear mode="out-in">
 													<div v-if="isLoadingProjects" key="loading" data-testid="projects-skeleton-grid" class="blog-projects-grid">
 														<ProjectCardSkeletonPartial
-															v-for="index in 4"
+															v-for="index in skeletonCount"
 															:key="`projects-page-skeleton-${index}`"
 															:is-animated="isLoadingProjects && projects.length === 0"
 														/>
@@ -72,7 +72,7 @@
 </template>
 
 <script setup lang="ts">
-import { ref, onMounted } from 'vue';
+import { ref, onMounted, computed } from 'vue';
 import { useApiStore } from '@api/store.ts';
 import { debugError } from '@api/http-error.ts';
 import FooterPartial from '@partials/FooterPartial.vue';
@@ -92,6 +92,10 @@ const projects = ref<ProjectsResponse[]>([]);
 const profile = ref<ProfileResponse | null>(null);
 const isLoadingProfile = ref(true);
 
+const skeletonCount = computed(() => {
+	return projects.value.length > 0 ? projects.value.length : 4;
+});
+
 useSeo({
 	title: 'Projects',
 	image: ABOUT_IMAGE,

From ac6d1ef03929272244db3b15793e8c8c29a937fd Mon Sep 17 00:00:00 2001
From: Gustavo Ocanto <gustavoocanto@gmail.com>
Date: Fri, 14 Nov 2025 17:10:53 +0800
Subject: [PATCH 3/4] wip

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

diff --git a/src/components/AccessibleDialog.vue b/src/components/AccessibleDialog.vue
index e3bc951..3a9aa7b 100644
--- a/src/components/AccessibleDialog.vue
+++ b/src/components/AccessibleDialog.vue
@@ -1,6 +1,6 @@
 <template>
 	<Teleport to="body">
-		<Transition :name="transitionName">
+		<Transition :name="transitionName" mode="out-in">
 			<div v-if="modelValue" :class="['fixed inset-0 z-50 flex items-center justify-center p-4', rootClass]">
 				<div :class="['absolute inset-0 bg-slate-900/70 dark:bg-slate-950/80', overlayClass]" @click="handleBackdropClick" />
 

From eb85eb0aff8ba7fd3449121d462c8db1a287e000 Mon Sep 17 00:00:00 2001
From: Gustavo Ocanto <gustavoocanto@gmail.com>
Date: Fri, 14 Nov 2025 17:22:43 +0800
Subject: [PATCH 4/4] wip

---
 src/css/support/blog.css        | 20 ++++++--------------
 src/partials/SideNavPartial.vue |  9 +--------
 2 files changed, 7 insertions(+), 22 deletions(-)

diff --git a/src/css/support/blog.css b/src/css/support/blog.css
index 4ad7824..801fe4f 100644
--- a/src/css/support/blog.css
+++ b/src/css/support/blog.css
@@ -35,6 +35,11 @@
 	@apply dark:text-teal-600 dark:after:bg-teal-600 dark:hover:after:bg-slate-500;
 }
 
+.blog-side-nav-social-link {
+	@apply text-slate-200 hover:text-fuchsia-500 after:bg-slate-200 hover:after:bg-fuchsia-600;
+	@apply dark:text-slate-700 dark:hover:text-teal-600 dark:after:bg-slate-800 dark:hover:after:bg-teal-600;
+}
+
 /* --- footer --- */
 .blog-footer-social-li {
 	@apply flex justify-center items-center h-10 w-10 bg-gray-400 border border-gray-400 rounded-md;
@@ -225,20 +230,7 @@
 	opacity: 0;
 }
 
-/* Prevent layout shift during fade transitions by overlaying elements */
-.fade-enter-active {
-	position: absolute;
-	top: 0;
-	left: 0;
-	width: 100%;
-	z-index: 1;
-}
-
+/* Ensure smooth transitions without layout shift */
 .fade-leave-active {
-	position: absolute;
-	top: 0;
-	left: 0;
-	width: 100%;
 	pointer-events: none;
-	z-index: 0;
 }
diff --git a/src/partials/SideNavPartial.vue b/src/partials/SideNavPartial.vue
index 88bcd4f..19f51ff 100644
--- a/src/partials/SideNavPartial.vue
+++ b/src/partials/SideNavPartial.vue
@@ -72,14 +72,7 @@
 
 						<ul v-if="!isLoadingSocialLinks && socialNavLinks.length > 0" class="flex flex-col items-center space-y-4">
 							<li v-for="item in socialNavLinks" :key="item.href" class="py-2">
-								<a
-									v-lazy-link
-									:href="item.href"
-									class="h6 blog-side-nav-router-link-a blog-side-nav-router-link-a-resting"
-									target="_blank"
-									rel="noopener noreferrer"
-									:aria-label="item.label"
-								>
+								<a v-lazy-link :href="item.href" class="h6 blog-side-nav-router-link-a blog-side-nav-social-link" target="_blank" rel="noopener noreferrer" :aria-label="item.label">
 									<svg class="blog-side-nav-icon fill-current" viewBox="0 0 24 24" aria-hidden="true">
 										<path :d="item.icon" />
 									</svg>