Polish CV components: add print button, fade transition, and list styling
All checks were successful
Deploy with Docker Compose / deploy (push) Successful in 19s

- Add Print button and fade transition between CV variants in CV.vue
- Fix bullet point styling with list-disc list-inside across all CV variants
- Minor content tweaks: reorder modules, fix date range, reformat text

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
2026-03-27 14:21:42 +00:00
parent 31d4b4c268
commit f7d69f048e
5 changed files with 76 additions and 64 deletions

View File

@@ -22,10 +22,14 @@ function select(index) {
selected.value = index;
currentComponent.value = templates[index].component;
}
function print() {
window.print();
}
</script>
<template>
<div>
<div class="cv-root">
<div class="no-print cv-selector">
<button
v-for="(t, i) in templates"
@@ -35,12 +39,19 @@ function select(index) {
>
{{ t.label }}
</button>
<button class="cv-btn cv-print-btn" @click="print()">Print</button>
</div>
<component :is="currentComponent" />
<Transition name="cv-fade" mode="out-in">
<component :is="currentComponent" :key="selected" />
</Transition>
</div>
</template>
<style scoped>
.cv-root {
background: white;
}
.cv-selector {
position: sticky;
top: 0;
@@ -73,6 +84,25 @@ function select(index) {
color: white;
}
.cv-print-btn {
margin-left: 1rem;
}
.cv-fade-enter-active,
.cv-fade-leave-active {
transition: opacity 0.15s ease, transform 0.15s ease;
}
.cv-fade-enter-from {
opacity: 0;
transform: translateY(6px);
}
.cv-fade-leave-to {
opacity: 0;
transform: translateY(-6px);
}
@media print {
.no-print {
display: none !important;