chore: Vue transition elements across multiple page and component

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" />
 

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>

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>

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;
 }

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>

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">

src/pages/ProjectsPage.vue

@@ -31,10 +31,10 @@
 										<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"
+															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,

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" />

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>

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>

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>

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>

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>