Skip to content

Add section navigation to resume page #73

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Closed
wants to merge 1 commit into from
Closed

Add section navigation to resume page #73

Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
53 changes: 43 additions & 10 deletions src/pages/ResumePage.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -13,16 +13,49 @@
<!-- Middle area -->
<div class="grow">
<div class="max-w-[700px]">
<section>
<!-- Page title -->
<h1 class="h1 font-aspekta mb-12">My resume</h1>
<!-- Page content -->
<div class="text-slate-500 dark:text-slate-400 space-y-12">
<EducationPartial v-if="education" :education="education" />
<ExperiencePartial v-if="experience" :experience="experience" />
<RecommendationPartial v-if="recommendations" :recommendations="recommendations" />
</div>
</section>
<section>
<!-- Page title -->
<h1 class="h1 font-aspekta mb-6 md:mb-8">My resume</h1>

<nav
class="flex flex-wrap items-center gap-3 text-sm font-medium text-slate-500 dark:text-slate-400 border border-slate-200 dark:border-slate-800 rounded-full px-4 py-2 mb-10"
aria-label="Resume sections"
>
<a
class="transition-colors hover:text-slate-700 dark:hover:text-slate-200"
href="#education"
>
Education
</a>
<span class="text-slate-300 dark:text-slate-700">·</span>
<a
class="transition-colors hover:text-slate-700 dark:hover:text-slate-200"
href="#work-experience"
>
Work experience
</a>
<span class="text-slate-300 dark:text-slate-700">·</span>
<a
class="transition-colors hover:text-slate-700 dark:hover:text-slate-200"
href="#recommendations"
>
Recommendations
</a>
</nav>
Comment on lines +20 to +44
Copy link

@gemini-code-assist gemini-code-assist bot Sep 26, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

high

The navigation links are currently static. This means that even if a section (like 'Recommendations') has no content, the link to it will still be displayed. This can lead to a confusing user experience where a user clicks a link and is scrolled to an empty part of the page.

To improve this, the navigation should be generated dynamically based on the presence of data for each section. I suggest creating a computed property, for example navLinks, which filters the sections that have content. Then, you can loop through this property to render the links.

Here is an example of what the computed property could look like in your <script> section:

import { computed } from 'vue';

const navLinks = computed(() => {
    const links = [];
    if (education.value && education.value.length > 0) {
        links.push({ href: '#education', text: 'Education' });
    }
    if (experience.value && experience.value.length > 0) {
        links.push({ href: '#work-experience', text: 'Work experience' });
    }
    if (recommendations.value && recommendations.value.length > 0) {
        links.push({ href: '#recommendations', text: 'Recommendations' });
    }
    return links;
});

With this computed property, you can simplify the template significantly and also hide the navigation bar completely if no sections have content.

                                                                        <nav
                                                                                v-if="navLinks.length"
                                                                                class="flex flex-wrap items-center gap-3 text-sm font-medium text-slate-500 dark:text-slate-400 border border-slate-200 dark:border-slate-800 rounded-full px-4 py-2 mb-10"
                                                                                aria-label="Resume sections"
                                                                        >
                                                                                <template v-for="(link, index) in navLinks" :key="link.href">
                                                                                        <a
                                                                                                class="transition-colors hover:text-slate-700 dark:hover:text-slate-200"
                                                                                                :href="link.href"
                                                                                        >
                                                                                                {{ link.text }}
                                                                                        </a>
                                                                                        <span v-if="index < navLinks.length - 1" class="text-slate-300 dark:text-slate-700">·</span>
                                                                                </template>
                                                                        </nav>


<!-- Page content -->
<div class="text-slate-500 dark:text-slate-400 space-y-12">
<section id="education" class="scroll-mt-24">
<EducationPartial v-if="education" :education="education" />
</section>
<section id="work-experience" class="scroll-mt-24">
<ExperiencePartial v-if="experience" :experience="experience" />
</section>
<section id="recommendations" class="scroll-mt-24">
<RecommendationPartial v-if="recommendations" :recommendations="recommendations" />
</section>
Comment on lines +48 to +56
Copy link

@gemini-code-assist gemini-code-assist bot Sep 26, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

medium

Currently, the <section> wrappers are always rendered, even if there is no data for them. This can lead to empty sections in the DOM. For example, if education is null, an empty <section id="education"> is rendered. If education is an empty array, the EducationPartial component will render a heading but no content, which might not be the desired behavior.

To make the code cleaner and avoid rendering empty sections, it's better to conditionally render the entire <section> block. You can move the v-if directive to the <section> element and check if the data array is not empty. This also makes the v-if on the child component redundant.

This change, combined with the dynamic navigation links I suggested earlier, will ensure that links are only shown for sections that actually have content, and those sections are only rendered when they have data.

                                                                                <section v-if="education && education.length" id="education" class="scroll-mt-24">
                                                                                        <EducationPartial :education="education" />
                                                                                </section>
                                                                                <section v-if="experience && experience.length" id="work-experience" class="scroll-mt-24">
                                                                                        <ExperiencePartial :experience="experience" />
                                                                                </section>
                                                                                <section v-if="recommendations && recommendations.length" id="recommendations" class="scroll-mt-24">
                                                                                        <RecommendationPartial :recommendations="recommendations" />
                                                                                </section>

</div>
</section>
Comment on lines +16 to +58
Copy link

@coderabbitai coderabbitai bot Sep 26, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

⚠️ Potential issue | 🔴 Critical

🧩 Analysis chain

Fix formatting to satisfy CI (Prettier/format check).

The “Test Format Workflow” is failing on this file. Run the repo’s formatter and commit the result so CI passes.

Try this script to auto-fix and show the diff:

🏁 Script executed:

#!/bin/bash
set -euo pipefail

# Try project formatter if available
if command -v pnpm >/dev/null 2>&1; then
  pnpm -s run format:check || pnpm -s run format || true
elif command -v npm >/dev/null 2>&1; then
  npm run -s format:check || npm run -s format || true
elif command -v yarn >/dev/null 2>&1; then
  yarn -s format:check || yarn -s format || true
fi

# Fallback to Prettier directly on the changed file
npx --yes prettier@3 --write "src/pages/ResumePage.vue" || true

# Show the resulting diff for this file
git diff -- src/pages/ResumePage.vue

Length of output: 6461

Commit Prettier formatting updates to src/pages/ResumePage.vue
CI’s “Test Format Workflow” is failing; commit the diff from Prettier to satisfy the formatting check.

🤖 Prompt for AI Agents 
In src/pages/ResumePage.vue around lines 16-58 the file needs Prettier
formatting applied and committed to satisfy CI’s "Test Format Workflow"; run
your project's Prettier/format command (e.g., npm/yarn format or npx prettier
--write) on this file (or the repo), review the changes, stage the resulting
formatted file, and create a new commit (with a message like "chore: run
Prettier on ResumePage.vue") so the CI formatting check passes.

</div>
</div>

Expand Down
Loading