adamf/web_server
1
1
Fork 0
Code Issues 5 Pull Requests Actions Packages Projects Releases Wiki Activity

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

Browse Source 
- 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:
Adam French
2026-03-27 14:21:42 +00:00
parent 31d4b4c268
commit f7d69f048e
5 changed files with 76 additions and 64 deletions
Download Patch File Download Diff File Expand all files Collapse all files

34
vue/src/views/CV/CV.vue
View File

@@ -22,10 +22,14 @@ function select(index) {
selected.value = index; selected.value = index;
currentComponent.value = templates[index].component; currentComponent.value = templates[index].component;
} }
function print() {
window.print();
}
</script> </script>
<template> <template>
<div> <div class="cv-root">
<div class="no-print cv-selector"> <div class="no-print cv-selector">
<button <button
v-for="(t, i) in templates" v-for="(t, i) in templates"
@@ -35,12 +39,19 @@ function select(index) {
> >
{{ t.label }} {{ t.label }}
</button> </button>
<button class="cv-btn cv-print-btn" @click="print()">Print</button>
</div> </div>
<component :is="currentComponent" /> <Transition name="cv-fade" mode="out-in">
<component :is="currentComponent" :key="selected" />
</Transition>
</div> </div>
</template> </template>
<style scoped> <style scoped>
.cv-root {
background: white;
}
.cv-selector { .cv-selector {
position: sticky; position: sticky;
top: 0; top: 0;
@@ -73,6 +84,25 @@ function select(index) {
color: white; 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 { @media print {
.no-print { .no-print {
display: none !important; display: none !important;

25
vue/src/views/CV/CVBackend.vue
View File

@@ -93,8 +93,8 @@ import Project from "./Project.vue";
<p> <p>
CLI tool for building and navigating interactive code CLI tool for building and navigating interactive code
tutorials, with version-traversal semantics inspired by Git. tutorials, with version-traversal semantics inspired by Git.
Designed for robustness with comprehensive error handling and Designed for robustness with comprehensive error handling
structured file operations. and structured file operations.
</p> </p>
</Project> </Project>
<Project class="border-b border-dotted"> <Project class="border-b border-dotted">
@@ -153,18 +153,14 @@ import Project from "./Project.vue";
<div <div
class="flex-row flex place-content-between m-auto place-items-center" class="flex-row flex place-content-between m-auto place-items-center"
> >
<small>81.1% — First Class Honours</small> <small>First Class Honours (81.1%)</small>
<small>2021–2025</small> <small>2021–2025</small>
</div> </div>
<small <small>BSc Computer Science with Mathematics </small>
>BSc Computer Science with Mathematics <ul class="list-disc list-inside">
(International)</small
>
<ul>
<li>Algorithms & Data Structures I & II</li>
<li>Compiler Design and Construction</li> <li>Compiler Design and Construction</li>
<li>Graph Algorithms & Complexity Theory</li> <li>Graph Algorithms & Complexity Theory</li>
<li>Formal Languages & Finite Automata</li> <li>Algorithms & Data Structures I & II</li>
<li>Databases · Computer Processors</li> <li>Databases · Computer Processors</li>
</ul> </ul>
</div> </div>
@@ -176,12 +172,11 @@ import Project from "./Project.vue";
<small>Year abroad</small> <small>Year abroad</small>
<small>2023–2024</small> <small>2023–2024</small>
</div> </div>
<ul> <ul class="list-disc list-inside">
<li>Applied Cryptography</li> <li>Applied Cryptography</li>
<li>Introduction to Computer Graphics</li> <li>Introduction to Computer Graphics</li>
<li> <li>Introduction to Rings and Fields with Applications</li>
Introduction to Rings and Fields with Applications <li>Formal Languages & Finite Automata</li>
</li>
</ul> </ul>
</div> </div>
</div> </div>
@@ -209,7 +204,7 @@ import Project from "./Project.vue";
</p> </p>
</Project> </Project>
<h2>Interests</h2> <h2>Interests</h2>
<ul> <ul class="list-disc list-inside">
<li>Leetcode — daily competitive problem solving</li> <li>Leetcode — daily competitive problem solving</li>
<li>Learning Mandarin</li> <li>Learning Mandarin</li>
<li>Rhythm Games</li> <li>Rhythm Games</li>

19
vue/src/views/CV/CVFrontend.vue
View File

@@ -154,18 +154,13 @@ import Project from "./Project.vue";
<small>81.1% — First Class Honours</small> <small>81.1% — First Class Honours</small>
<small>2021–2025</small> <small>2021–2025</small>
</div> </div>
<small <small>BSc Computer Science with Mathematics </small>
>BSc Computer Science with Mathematics <ul class="list-disc list-inside">
(International)</small
>
<ul>
<li>Algorithms & Data Structures I & II</li> <li>Algorithms & Data Structures I & II</li>
<li>Compiler Design and Construction</li> <li>Compiler Design and Construction</li>
<li>Formal Languages & Finite Automata</li> <li>Formal Languages & Finite Automata</li>
<li>Graph Algorithms & Complexity Theory</li> <li>Graph Algorithms & Complexity Theory</li>
<li> <li>Machine Learning & Databases & Computer Processors</li>
Machine Learning · Databases · Computer Processors
</li>
</ul> </ul>
</div> </div>
<div class="flex-1 pl-3"> <div class="flex-1 pl-3">
@@ -176,12 +171,10 @@ import Project from "./Project.vue";
<small>Year abroad</small> <small>Year abroad</small>
<small>2023–2024</small> <small>2023–2024</small>
</div> </div>
<ul> <ul class="list-disc list-inside">
<li>Applied Cryptography</li> <li>Applied Cryptography</li>
<li>Introduction to Computer Graphics</li> <li>Introduction to Computer Graphics</li>
<li> <li>Introduction to Rings and Fields with Applications</li>
Introduction to Rings and Fields with Applications
</li>
</ul> </ul>
</div> </div>
</div> </div>
@@ -209,7 +202,7 @@ import Project from "./Project.vue";
</p> </p>
</Project> </Project>
<h2>Interests</h2> <h2>Interests</h2>
<ul> <ul class="list-disc list-inside">
<li>Leetcode — daily competitive problem solving</li> <li>Leetcode — daily competitive problem solving</li>
<li>Learning Mandarin</li> <li>Learning Mandarin</li>
<li>Rhythm Games</li> <li>Rhythm Games</li>

13
vue/src/views/CV/CVGeneral.vue
View File

@@ -150,14 +150,11 @@ import Project from "./Project.vue";
<div <div
class="flex-row flex place-content-between m-auto place-items-center" class="flex-row flex place-content-between m-auto place-items-center"
> >
<small>81.1% — First Class Honours</small> <small>First Class Honours (81.1%)</small>
<small>2021–2025</small> <small>2021–2025</small>
</div> </div>
<small <small>BSc Computer Science with Mathematics </small>
>BSc Computer Science with Mathematics <ul class="list-disc list-inside">
(International)</small
>
<ul>
<li>Algorithms & Data Structures I & II</li> <li>Algorithms & Data Structures I & II</li>
<li>Compiler Design and Construction</li> <li>Compiler Design and Construction</li>
<li>Formal Languages & Finite Automata</li> <li>Formal Languages & Finite Automata</li>
@@ -175,7 +172,7 @@ import Project from "./Project.vue";
<small>Year abroad</small> <small>Year abroad</small>
<small>2023–2024</small> <small>2023–2024</small>
</div> </div>
<ul> <ul class="list-disc list-inside">
<li>Applied Cryptography</li> <li>Applied Cryptography</li>
<li>Introduction to Computer Graphics</li> <li>Introduction to Computer Graphics</li>
<li> <li>
@@ -208,7 +205,7 @@ import Project from "./Project.vue";
</p> </p>
</Project> </Project>
<h2>Interests</h2> <h2>Interests</h2>
<ul> <ul class="list-disc list-inside">
<li>Leetcode — daily competitive problem solving</li> <li>Leetcode — daily competitive problem solving</li>
<li>Learning Mandarin</li> <li>Learning Mandarin</li>
<li>Rhythm Games</li> <li>Rhythm Games</li>

49
vue/src/views/CV/CVHospitality.vue
View File

@@ -22,11 +22,11 @@ import Project from "./Project.vue";
<h2>Profile</h2> <h2>Profile</h2>
<p> <p>
First Class Honours graduate in Computer Science with First Class Honours graduate in Computer Science with
Mathematics from the University of Leeds (81.1%). Dependable Mathematics from the University of Leeds (81.1%). Dependable and
and personable team player with five years of hospitality personable team player with five years of hospitality experience
experience across busy bars, restaurants, and event venues. across busy bars, restaurants, and event venues. Thrives under
Thrives under pressure, communicates clearly, and takes pressure, communicates clearly, and takes pride in providing
pride in providing excellent customer service. excellent customer service.
</p> </p>
<h2>Experience</h2> <h2>Experience</h2>
@@ -37,13 +37,13 @@ import Project from "./Project.vue";
</template> </template>
<template #top> <template #top>
<small>Bartender & Waiter</small> <small>Bartender & Waiter</small>
<small>2021–2023</small> <small>2021–2025</small>
</template> </template>
<p> <p>
Served food and drinks in a high-volume live-music venue Served food and drinks in a high-volume live-music venue in
in Leeds. Handled busy weekend shifts, managed multiple Leeds. Handled busy weekend shifts, managed multiple tables
tables simultaneously, and maintained a calm, friendly simultaneously, and maintained a calm, friendly demeanour
demeanour during peak hours. during peak hours.
</p> </p>
</Project> </Project>
<Project class="border-b border-dotted"> <Project class="border-b border-dotted">
@@ -55,10 +55,10 @@ import Project from "./Project.vue";
<small>2020–2021</small> <small>2020–2021</small>
</template> </template>
<p> <p>
Worked front-of-house at a busy pub, pulling pints, Worked front-of-house at a busy pub, pulling pints, taking
taking orders, and ensuring a welcoming atmosphere. orders, and ensuring a welcoming atmosphere. Built rapport
Built rapport with regulars and adapted quickly to with regulars and adapted quickly to changing priorities
changing priorities during service. during service.
</p> </p>
</Project> </Project>
<Project class="border-b border-dotted"> <Project class="border-b border-dotted">
@@ -70,10 +70,10 @@ import Project from "./Project.vue";
<small>2018–2020</small> <small>2018–2020</small>
</template> </template>
<p> <p>
Operated the till, served customers, and helped Operated the till, served customers, and helped coordinate
coordinate table service at a café on London's South table service at a café on London's South Bank. Developed
Bank. Developed strong cash-handling accuracy and strong cash-handling accuracy and customer interaction
customer interaction skills in a fast-paced environment. skills in a fast-paced environment.
</p> </p>
</Project> </Project>
@@ -81,8 +81,8 @@ import Project from "./Project.vue";
<div class="skills-grid"> <div class="skills-grid">
<div> <div>
<strong>Service</strong><br /><small <strong>Service</strong><br /><small
>Bar work, Table service, Cash handling, Till >Bar work, Table service, Cash handling, Till operation,
operation, Food hygiene</small Food hygiene</small
> >
</div> </div>
<div> <div>
@@ -112,13 +112,10 @@ import Project from "./Project.vue";
<div <div
class="flex-row flex place-content-between m-auto place-items-center" class="flex-row flex place-content-between m-auto place-items-center"
> >
<small>81.1% — First Class Honours</small> <small>First Class Honours (81.1%)</small>
<small>2021–2025</small> <small>2021–2025</small>
</div> </div>
<small <small>BSc Computer Science with Mathematics </small>
>BSc Computer Science with Mathematics
(International)</small
>
</div> </div>
<div class="flex-1 pl-3"> <div class="flex-1 pl-3">
<h3>University of Waterloo</h3> <h3>University of Waterloo</h3>
@@ -132,7 +129,7 @@ import Project from "./Project.vue";
</div> </div>
<h2>Interests</h2> <h2>Interests</h2>
<ul> <ul class="list-disc list-inside">
<li>Leetcode — daily competitive problem solving</li> <li>Leetcode — daily competitive problem solving</li>
<li>Learning Mandarin</li> <li>Learning Mandarin</li>
<li>Rhythm Games</li> <li>Rhythm Games</li>