feat: Add back-to-top links to resume sections

[gocanto]

Summary

• add a resume page anchor that serves as the destination for back-to-top controls
• show back-to-top buttons beside the work experience and recommendations section headers while keeping education unchanged

Testing

• make format
• npm test -- --runInBand (fails: vitest not found in environment)

---

https://chatgpt.com/codex/tasks/task_e_68df8f77047483339f5a5a624d15ada1

Summary by CodeRabbit

• New Features
  • Added “Back to top” links in the Work Experience and Recommendations section headers for quicker navigation.
  • Main resume title now includes an anchor target, enabling direct jumps back to the top of the resume.

[coderabbitai]

Caution

Review failed

The pull request is closed.

Note

Other AI code review bot(s) detected

CodeRabbit has detected other AI code review bot(s) in this pull request and will avoid duplicating their findings in the review comments. This may lead to a less comprehensive review.

Walkthrough

Adds an anchor id to the resume page title and introduces a reusable BackToTopLink component, then places that link beside the H2 headings in the Experience and Recommendation partials by converting each header into a flex wrapper.

Changes

Cohort / File(s)	Summary
Resume top anchor src/pages/ResumePage.vue	Adds id="resume-top" to the main <h1> to serve as the anchor target for back-to-top links.
New back-to-top component src/partials/BackToTopLink.vue	Adds a new Vue component that renders an anchor linking to #resume-top with text and an up-arrow.
Section headers updated src/partials/ExperiencePartial.vue, src/partials/RecommendationPartial.vue	Replaces standalone <h2> headings with a flex wrapper that includes the original title and the imported BackToTopLink component; DOM structure changed, data/logic unchanged.

Sequence Diagram(s)

sequenceDiagram
  participant User as User
  participant Section as Experience/Recommendation Section
  participant Browser as Browser/Viewport
  participant Page as ResumePage (id="resume-top")

  User->>Section: Click "Back to top"
  Section->>Browser: Anchor navigation to #resume-top
  Browser->>Page: Scroll/jump to element with id="resume-top"
  Note right of Browser: Viewport aligns to the top title

Loading

Estimated code review effort

🎯 2 (Simple) | ⏱️ ~10 minutes

Possibly related PRs

• [feature] Resumen page #3 — Modifies RecommendationPartial.vue rendering; likely related to header structure or props used when integrating the back-to-top link.

Poem

I’m a rabbit with a tiny hop,
I plant an anchor, give scrolls a stop.
Titling flexed and links that pop,
Up-arrow leads you to the top.
Nibble, bounce — resume unlocked. 🥕✨

Pre-merge checks and finishing touches

✅ Passed checks (3 passed)

Check name	Status	Explanation
Description Check	✅ Passed	Check skipped - CodeRabbit’s high-level summary is enabled.
Docstring Coverage	✅ Passed	No functions found in the changes. Docstring coverage check skipped.
Title Check	✅ Passed	The pull request title “feat: Add back-to-top links to resume sections” concisely and accurately reflects the primary change of adding back-to-top navigation links to the resume page sections without extraneous detail. It clearly summarizes the feature from the developer’s perspective and is specific enough for team members to understand the scope at a glance. The title is formatted correctly, is short, and focuses on the main change.

---

📜 Recent review details

Configuration used: CodeRabbit UI

Review profile: CHILL

Plan: Pro

📥 Commits

Reviewing files that changed from the base of the PR and between 167cbcc and 3c03bf6.

📒 Files selected for processing (3)

• src/partials/BackToTopLink.vue (1 hunks)
• src/partials/ExperiencePartial.vue (2 hunks)
• src/partials/RecommendationPartial.vue (2 hunks)

---

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

• X
• Mastodon
• Reddit
• LinkedIn

_{Comment @coderabbitai help to get the list of available commands and usage tips.}

[gemini-code-assist]

Summary of Changes

Hello @gocanto, I'm Gemini Code Assist¹! I'm currently reviewing this pull request and will post my feedback shortly. In the meantime, here's a summary to help you and other reviewers quickly get up to speed!

This pull request enhances the user experience on the resume page by introducing 'back-to-top' navigation links. These links are strategically placed within the 'Work Experience' and 'Recommendations' sections, allowing users to effortlessly return to the top of the page, improving overall site navigation, especially on longer pages.

Highlights

• Resume Page Anchor: An id="resume-top" anchor has been added to the main 'My resume' title on the ResumePage.vue to serve as a destination for 'back-to-top' links.
• Work Experience Back-to-Top Link: A 'Back to top' link has been introduced next to the 'Work Experience' section header in ExperiencePartial.vue, allowing users to quickly navigate to the top of the resume page.
• Recommendations Back-to-Top Link: A 'Back to top' link has been added alongside the 'Recommendations' section header in RecommendationPartial.vue, providing quick navigation back to the top of the resume page.

Using Gemini Code Assist

The full guide for Gemini Code Assist can be found on our documentation page, here are some quick tips.

Invoking Gemini

You can request assistance from Gemini at any point by creating a comment using either /gemini <command> or @gemini-code-assist <command>. Below is a summary of the supported commands on the current page.

Feature	Command	Description
Code Review	/gemini review	Performs a code review for the current pull request in its current state.
Pull Request Summary	/gemini summary	Provides a summary of the current pull request in its current state.
Comment	@gemini-code-assist	Responds in comments when explicitly tagged, both in pull request comments and review comments.
Help	/gemini help	Displays a list of available commands.

Customization

To customize Gemini Code Assist for GitHub experience, repository maintainers can create a configuration file and/or provide a custom code review style guide (such as PEP-8 for Python) by creating and adding files to a .gemini/ folder in the base of the repository. Detailed instructions can be found here.

Limitations & Feedback

Gemini Code Assist may make mistakes. Please leave feedback on any instances where its feedback is incorrect or counter productive. You can react with 👍 and 👎 on @gemini-code-assist comments. If you're interested in giving your feedback about your experience with Gemini Code Assist for Github and other Google products, sign up here.

You can also get AI-powered code generation, chat, as well as code reviews directly in the IDE at no cost with the Gemini Code Assist IDE Extension.

Footnotes

1. Review the Privacy Notices, Generative AI Prohibited Use Policy, Terms of Service, and learn how to configure Gemini Code Assist in GitHub here. Gemini can make mistakes, so double check it and use code with caution. ↩

[gemini-code-assist]

Code Review

This pull request adds 'back-to-top' links to the 'Work Experience' and 'Recommendations' sections of the resume page. The implementation is straightforward, adding an anchor ID to the page title and then adding links in the respective section partials. My main feedback is regarding code duplication for the 'back-to-top' link, which is identical in two different components. I've recommended extracting this into a reusable component to improve maintainability.

[coderabbitai]

Actionable comments posted: 0

🧹 Nitpick comments (1)

src/partials/RecommendationPartial.vue (1)

3-12: Consider extracting the duplicated header pattern.

The back-to-top link implementation (lines 5-11) is duplicated identically in ExperiencePartial.vue (lines 5-11). To improve maintainability and follow DRY principles, consider creating a reusable component for section headers with back-to-top links.

Example extraction:

<!-- New file: src/partials/SectionHeaderPartial.vue -->
<template>
  <div class="flex flex-wrap items-center justify-between gap-4">
    <h2 :class="headingClass">
      <slot />
    </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>
</template>

<script setup lang="ts">
defineProps<{
  headingClass?: string;
}>();
</script>

Then use it in both partials:

<SectionHeaderPartial heading-class="h2 font-aspekta text-slate-700 dark:text-slate-300">
  Work Experience
</SectionHeaderPartial>

📜 Review details

Configuration used: CodeRabbit UI

Review profile: CHILL

Plan: Pro

📥 Commits

Reviewing files that changed from the base of the PR and between d753b3f and 167cbcc.

📒 Files selected for processing (3)

• src/pages/ResumePage.vue (1 hunks)
• src/partials/ExperiencePartial.vue (1 hunks)
• src/partials/RecommendationPartial.vue (1 hunks)

🔇 Additional comments (2)

src/pages/ResumePage.vue (1)

18-18: LGTM! Clean anchor implementation.

The id="resume-top" attribute on the main heading provides a proper target for the back-to-top links without affecting semantics or accessibility.

src/partials/ExperiencePartial.vue (1)

3-12: Well-structured back-to-top implementation.

The flex container properly positions the heading and back-to-top link. The arrow icon is correctly marked as aria-hidden="true" since the "Back to top" text provides sufficient context.

However, verify consistency with the implementation in RecommendationPartial.vue (lines 3-12) to ensure both partials use identical styling and structure. Consider extracting this header pattern into a reusable component if the duplication extends beyond these two files.