From 167cbcc1a512361c853f25fbf036e4dcd5e9a03b Mon Sep 17 00:00:00 2001
From: Gus <gocanto@users.noreply.github.com>
Date: Fri, 3 Oct 2025 17:35:52 +0800
Subject: [PATCH 1/2] Add back to top links to resume sections

---
 src/pages/ResumePage.vue               |  2 +-
 src/partials/ExperiencePartial.vue     | 11 ++++++++++-
 src/partials/RecommendationPartial.vue | 11 ++++++++++-
 3 files changed, 21 insertions(+), 3 deletions(-)

diff --git a/src/pages/ResumePage.vue b/src/pages/ResumePage.vue
index 0c165198..9d44f5b1 100644
--- a/src/pages/ResumePage.vue
+++ b/src/pages/ResumePage.vue
@@ -15,7 +15,7 @@
 							<div class="max-w-[700px]">
 								<section>
 									<!-- Page title -->
-									<h1 class="h1 font-aspekta mb-6">My resume</h1>
+									<h1 id="resume-top" 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
diff --git a/src/partials/ExperiencePartial.vue b/src/partials/ExperiencePartial.vue
index 9a22c725..115608b0 100644
--- a/src/partials/ExperiencePartial.vue
+++ b/src/partials/ExperiencePartial.vue
@@ -1,6 +1,15 @@
 <template>
 	<section class="space-y-8">
-		<h2 class="h2 font-aspekta text-slate-700 dark:text-slate-300">Work Experience</h2>
+		<div class="flex flex-wrap items-center justify-between gap-4">
+			<h2 class="h2 font-aspekta text-slate-700 dark:text-slate-300">Work Experience</h2>
+			<a
+				class="inline-flex items-center gap-2 rounded-full border border-slate-200/70 px-4 py-2 text-sm font-medium text-slate-600 transition-colors hover:border-fuchsia-400/70 hover:text-slate-800 dark:border-slate-700/80 dark:text-slate-300 dark:hover:text-slate-100"
+				href="#resume-top"
+			>
+				<span aria-hidden="true">↑</span>
+				Back to top
+			</a>
+		</div>
 		<ul class="space-y-8">
 			<!-- Item -->
 			<li v-for="item in props.experience" :key="item.uuid" class="relative group">
diff --git a/src/partials/RecommendationPartial.vue b/src/partials/RecommendationPartial.vue
index bdfebc80..fe90bc99 100644
--- a/src/partials/RecommendationPartial.vue
+++ b/src/partials/RecommendationPartial.vue
@@ -1,6 +1,15 @@
 <template>
 	<section class="space-y-8">
-		<h2 class="h3 font-aspekta text-slate-800 dark:text-slate-100">Recommendations</h2>
+		<div class="flex flex-wrap items-center justify-between gap-4">
+			<h2 class="h3 font-aspekta text-slate-800 dark:text-slate-100">Recommendations</h2>
+			<a
+				class="inline-flex items-center gap-2 rounded-full border border-slate-200/70 px-4 py-2 text-sm font-medium text-slate-600 transition-colors hover:border-fuchsia-400/70 hover:text-slate-800 dark:border-slate-700/80 dark:text-slate-300 dark:hover:text-slate-100"
+				href="#resume-top"
+			>
+				<span aria-hidden="true">↑</span>
+				Back to top
+			</a>
+		</div>
 		<ul class="space-y-8">
 			<!-- Item -->
 			<li v-for="item in processedRecommendations" :key="item.uuid" class="relative group">

From 3c03bf6799ac114f2092360a6458fd6f9e89f71f Mon Sep 17 00:00:00 2001
From: Gus <gocanto@users.noreply.github.com>
Date: Fri, 3 Oct 2025 19:47:20 +0800
Subject: [PATCH 2/2] refactor: reuse resume back-to-top link

---
 src/partials/BackToTopLink.vue         | 9 +++++++++
 src/partials/ExperiencePartial.vue     | 9 ++-------
 src/partials/RecommendationPartial.vue | 9 ++-------
 3 files changed, 13 insertions(+), 14 deletions(-)
 create mode 100644 src/partials/BackToTopLink.vue

diff --git a/src/partials/BackToTopLink.vue b/src/partials/BackToTopLink.vue
new file mode 100644
index 00000000..aaeedd40
--- /dev/null
+++ b/src/partials/BackToTopLink.vue
@@ -0,0 +1,9 @@
+<template>
+	<a
+		class="inline-flex items-center gap-2 rounded-full border border-slate-200/70 px-4 py-2 text-sm font-medium text-slate-600 transition-colors hover:border-fuchsia-400/70 hover:text-slate-800 dark:border-slate-700/80 dark:text-slate-300 dark:hover:text-slate-100"
+		href="#resume-top"
+	>
+		<span aria-hidden="true">↑</span>
+		Back to top
+	</a>
+</template>
diff --git a/src/partials/ExperiencePartial.vue b/src/partials/ExperiencePartial.vue
index 115608b0..d0e9e570 100644
--- a/src/partials/ExperiencePartial.vue
+++ b/src/partials/ExperiencePartial.vue
@@ -2,13 +2,7 @@
 	<section class="space-y-8">
 		<div class="flex flex-wrap items-center justify-between gap-4">
 			<h2 class="h2 font-aspekta text-slate-700 dark:text-slate-300">Work Experience</h2>
-			<a
-				class="inline-flex items-center gap-2 rounded-full border border-slate-200/70 px-4 py-2 text-sm font-medium text-slate-600 transition-colors hover:border-fuchsia-400/70 hover:text-slate-800 dark:border-slate-700/80 dark:text-slate-300 dark:hover:text-slate-100"
-				href="#resume-top"
-			>
-				<span aria-hidden="true">↑</span>
-				Back to top
-			</a>
+			<BackToTopLink />
 		</div>
 		<ul class="space-y-8">
 			<!-- Item -->
@@ -49,6 +43,7 @@
 	</section>
 </template>
 <script setup lang="ts">
+import BackToTopLink from '@partials/BackToTopLink.vue';
 import type { ExperienceResponse } from '@api/response/index.ts';
 
 const props = defineProps<{
diff --git a/src/partials/RecommendationPartial.vue b/src/partials/RecommendationPartial.vue
index fe90bc99..f9c31471 100644
--- a/src/partials/RecommendationPartial.vue
+++ b/src/partials/RecommendationPartial.vue
@@ -2,13 +2,7 @@
 	<section class="space-y-8">
 		<div class="flex flex-wrap items-center justify-between gap-4">
 			<h2 class="h3 font-aspekta text-slate-800 dark:text-slate-100">Recommendations</h2>
-			<a
-				class="inline-flex items-center gap-2 rounded-full border border-slate-200/70 px-4 py-2 text-sm font-medium text-slate-600 transition-colors hover:border-fuchsia-400/70 hover:text-slate-800 dark:border-slate-700/80 dark:text-slate-300 dark:hover:text-slate-100"
-				href="#resume-top"
-			>
-				<span aria-hidden="true">↑</span>
-				Back to top
-			</a>
+			<BackToTopLink />
 		</div>
 		<ul class="space-y-8">
 			<!-- Item -->
@@ -38,6 +32,7 @@
 <script setup lang="ts">
 import { computed } from 'vue';
 import DOMPurify from 'dompurify';
+import BackToTopLink from '@partials/BackToTopLink.vue';
 import { image, date } from '@/public.ts';
 import type { RecommendationsResponse } from '@api/response/recommendations-response.ts';
 import { renderMarkdown } from '@/support/markdown.ts';