Skip to content

Fix CV PDF export layout and preserve scroll-reveal animations #57

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

Open
google-labs-jules wants to merge 2 commits into
base: main
Choose a base branch
from
Open

Fix CV PDF export layout and preserve scroll-reveal animations #57

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
233f755
fix(cv): clean pdf export layout and preserve animation states
Jul 15, 2026
9d1cde1
style: run prettier to fix formatting issues in cv page
Jul 15, 2026
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
7 changes: 7 additions & 0 deletions src/app.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -56,6 +56,13 @@
transform: translateY(0);
}

/* Temporary override during print compilation to force full layout visibility without transitions */
.exporting-pdf .reveal {
opacity: 1 !important;
transform: none !important;
transition: none !important;
}

/* Staggered children */
.reveal-stagger > .reveal:nth-child(1) {
transition-delay: 0ms;
Expand Down
79 changes: 34 additions & 45 deletions src/routes/cv/+page.svelte
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
<script lang="ts">
import { onMount } from 'svelte';
import { onMount, tick } from 'svelte';
import Icon from '$lib/components/Icon.svelte';
import Contact from '$lib/components/cv/Contact.svelte';
import { getEducationElements } from '$lib/helpers/educationProvider';
Expand All @@ -24,9 +24,12 @@
});
});

function exportCVPDF() {
async function exportCVPDF() {
if (!html2pdf) return;
showLinks = false;
document.body.classList.add('exporting-pdf');
await tick();

var opt = {
margin: 10,
pagebreak: { mode: ['avoid-all', 'css', 'legacy'] },
Expand All @@ -40,20 +43,14 @@
},
jsPDF: { unit: 'mm', format: 'a4', orientation: 'portrait' }
};
html2pdf()
.set(opt)
.from(container)
.save()
.then(async () => {
showLinks = true;
const { tick } = await import('svelte');
await tick();
if (container) {
container.parentElement?.querySelectorAll('.reveal').forEach((el) => {
el.classList.add('visible');
});
}
});

try {
await html2pdf().set(opt).from(container).save();
} finally {
showLinks = true;
document.body.classList.remove('exporting-pdf');
await tick();
}
}
</script>

Expand All @@ -68,7 +65,7 @@
<div use:reveal class="flex flex-col gap-6">
<div bind:this={container} class="flex flex-col {showLinks ? 'gap-6' : 'gap-2 pb-8'}">
<!-- Header -->
<section class="section-shell {showLinks ? 'reveal' : ''}">
<section class="section-shell reveal">
<div class="flex items-start justify-between gap-4">
<div>
<p class="eyebrow mb-2">Curriculum Vitae</p>
Expand Down Expand Up @@ -96,15 +93,15 @@
</section>

<!-- Education -->
<section class="section-shell {showLinks ? 'reveal' : ''}">
<section class="section-shell reveal">
<div class="flex items-center gap-4">
<h2 class={showLinks ? '' : '!text-xl text-h2'}>Education</h2>
{#if showLinks}<div class="h-px flex-1 bg-primary/10"></div>{/if}
</div>
<div class="{showLinks ? 'reveal-stagger' : ''} flex flex-col gap-3">
<div class="reveal-stagger flex flex-col gap-3">
{#each getEducationElements() as edu}
<div
class="pdf-entry {showLinks ? 'reveal' : ''} rounded-2xl {showLinks
class="pdf-entry reveal rounded-2xl {showLinks
? 'border border-transparent bg-background-card/80 p-4 shadow-sm backdrop-blur-sm'
: 'pb-3'}"
>
Expand Down Expand Up @@ -135,15 +132,15 @@
</section>

<!-- Positions -->
<section class="section-shell {showLinks ? 'reveal' : ''}">
<section class="section-shell reveal">
<div class="flex items-center gap-4">
<h2 class={showLinks ? '' : '!text-xl text-h2'}>Positions</h2>
{#if showLinks}<div class="h-px flex-1 bg-primary/10"></div>{/if}
</div>
<div class="{showLinks ? 'reveal-stagger' : ''} flex flex-col gap-3">
<div class="reveal-stagger flex flex-col gap-3">
{#each work as employment}
<div
class="pdf-entry {showLinks ? 'reveal' : ''} rounded-2xl {showLinks
class="pdf-entry reveal rounded-2xl {showLinks
? 'border border-transparent bg-background-card/80 p-4 shadow-sm backdrop-blur-sm'
: 'pb-3'}"
>
Expand All @@ -163,17 +160,15 @@
</section>

<!-- Publications -->
<section class="section-shell {showLinks ? 'reveal' : ''}">
<section class="section-shell reveal">
<div class="flex items-center gap-4">
<h2 class={showLinks ? '' : '!text-xl text-h2'}>Publications</h2>
{#if showLinks}<div class="h-px flex-1 bg-primary/10"></div>{/if}
</div>
<div
class="{showLinks ? 'reveal-stagger' : ''} flex flex-col {showLinks ? 'gap-3' : 'gap-1'}"
>
<div class="reveal-stagger flex flex-col {showLinks ? 'gap-3' : 'gap-1'}">
{#each getResearchProjects() as pub}
<div
class="pdf-entry {showLinks ? 'reveal' : ''} rounded-2xl {showLinks
class="pdf-entry reveal rounded-2xl {showLinks
? 'border border-transparent bg-background-card/80 p-4 shadow-sm backdrop-blur-sm'
: 'pb-2'}"
>
Expand Down Expand Up @@ -271,17 +266,15 @@
{/if}

<!-- Teaching -->
<section class="section-shell {showLinks ? 'reveal' : ''}">
<section class="section-shell reveal">
<div class="flex items-center gap-4">
<h2 class={showLinks ? '' : '!text-xl text-h2'}>Teaching</h2>
{#if showLinks}<div class="h-px flex-1 bg-primary/10"></div>{/if}
</div>
<div
class="{showLinks ? 'reveal-stagger' : ''} flex flex-col {showLinks ? 'gap-3' : 'gap-1'}"
>
<div class="reveal-stagger flex flex-col {showLinks ? 'gap-3' : 'gap-1'}">
{#each lectures as lecture}
<div
class="pdf-entry {showLinks ? 'reveal' : ''} rounded-2xl {showLinks
class="pdf-entry reveal rounded-2xl {showLinks
? 'border border-transparent bg-background-card/80 p-4 shadow-sm backdrop-blur-sm'
: 'pb-2'}"
>
Expand All @@ -296,17 +289,15 @@
</section>

<!-- Mentoring -->
<section class="section-shell {showLinks ? 'reveal' : ''}">
<section class="section-shell reveal">
<div class="flex items-center gap-4">
<h2 class={showLinks ? '' : '!text-xl text-h2'}>Mentoring</h2>
{#if showLinks}<div class="h-px flex-1 bg-primary/10"></div>{/if}
</div>
<div
class="{showLinks ? 'reveal-stagger' : ''} flex flex-col {showLinks ? 'gap-3' : 'gap-1'}"
>
<div class="reveal-stagger flex flex-col {showLinks ? 'gap-3' : 'gap-1'}">
{#each getMentorshipActivities() as m}
<div
class="pdf-entry {showLinks ? 'reveal' : ''} rounded-2xl {showLinks
class="pdf-entry reveal rounded-2xl {showLinks
? 'border border-transparent bg-background-card/80 p-4 shadow-sm backdrop-blur-sm'
: 'pb-2'}"
>
Expand All @@ -322,17 +313,15 @@
</section>

<!-- Funding -->
<section class="section-shell {showLinks ? 'reveal' : ''}">
<section class="section-shell reveal">
<div class="flex items-center gap-4">
<h2 class={showLinks ? '' : '!text-xl text-h2'}>Funding</h2>
{#if showLinks}<div class="h-px flex-1 bg-primary/10"></div>{/if}
</div>
<div
class="{showLinks ? 'reveal-stagger' : ''} flex flex-col {showLinks ? 'gap-3' : 'gap-1'}"
>
<div class="reveal-stagger flex flex-col {showLinks ? 'gap-3' : 'gap-1'}">
{#each getFunding() as fund}
<div
class="pdf-entry {showLinks ? 'reveal' : ''} rounded-2xl {showLinks
class="pdf-entry reveal rounded-2xl {showLinks
? 'border border-transparent bg-background-card/80 p-4 shadow-sm backdrop-blur-sm'
: 'pb-2'}"
>
Expand All @@ -347,13 +336,13 @@
</section>

<!-- Reviewing & Service -->
<section class="section-shell {showLinks ? 'reveal' : ''}">
<section class="section-shell reveal">
<div class="flex items-center gap-4">
<h2 class={showLinks ? '' : '!text-xl text-h2'}>Reviewing and Service</h2>
{#if showLinks}<div class="h-px flex-1 bg-primary/10"></div>{/if}
</div>
<div
class="{showLinks ? 'reveal' : ''} rounded-2xl {showLinks
class="reveal rounded-2xl {showLinks
? 'border border-transparent bg-background-card/80 p-4 shadow-sm backdrop-blur-sm'
: ''}"
>
Expand Down
Loading