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

Add other CVs back
All checks were successful
Deploy with Docker Compose / deploy (push) Successful in 21m27s
Details

Browse Source
This commit is contained in:
Adam French
2026-04-23 13:58:55 +01:00
parent 12967c573b
commit 22a836cb95
1 changed files with 64 additions and 61 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -1,121 +1,124 @@
<script setup> <script setup>
import { ref, shallowRef, defineAsyncComponent } from "vue"; import { ref, shallowRef } from "vue";
import { RouterLink } from "vue-router"; import { RouterLink } from "vue-router";
import CVGeneral from "./CVGeneral.vue"; import CVGeneral from "./CVGeneral.vue";
import CVBackend from "./CVBackend.vue"; import CVBackend from "./CVBackend.vue";
import CVFrontend from "./CVFrontend.vue"; import CVFrontend from "./CVFrontend.vue";
import CVTemp from "./CVTemp.vue"; import CVTemp from "./CVTemp.vue";
import CVElectrical from "./CVElectrical.vue"; import CVElectrical from "./CVElectrical.vue";
import CVHospitality from "./CVHospitality.vue";
const CVHospitality = defineAsyncComponent(() => import("./CVHospitality.vue"));
const templates = [ const templates = [
{ label: "General", component: CVGeneral }, { label: "General", component: CVGeneral },
{ label: "Electrical", component: CVElectrical }, { label: "Backend", component: CVBackend },
{ label: "Frontend", component: CVFrontend },
{ label: "Temp", component: CVTemp },
{ label: "Electrical", component: CVElectrical },
{ label: "Hospitality", component: CVHospitality },
]; ];
const selected = ref(0); const selected = ref(0);
const currentComponent = shallowRef(templates[0].component); const currentComponent = shallowRef(templates[0].component);
function select(index) { function select(index) {
selected.value = index; selected.value = index;
currentComponent.value = templates[index].component; currentComponent.value = templates[index].component;
} }
function print() { function print() {
window.print(); window.print();
} }
</script> </script>
<template> <template>
<div class="cv-root"> <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"
:key="t.label" :key="t.label"
:class="['cv-btn', { active: selected === i }]" :class="['cv-btn', { active: selected === i }]"
@click="select(i)" @click="select(i)"
> >
{{ t.label }} {{ t.label }}
</button> </button>
<button class="cv-btn cv-print-btn" @click="print()">Print</button> <button class="cv-btn cv-print-btn" @click="print()">Print</button>
<RouterLink to="/cv/jobs" class="cv-btn cv-jobs-btn">Jobs</RouterLink> <RouterLink to="/cv/jobs" class="cv-btn cv-jobs-btn">Jobs</RouterLink>
</div>
<Transition name="cv-fade" mode="out-in">
<component :is="currentComponent" :key="selected" />
</Transition>
</div> </div>
<Transition name="cv-fade" mode="out-in">
<component :is="currentComponent" :key="selected" />
</Transition>
</div>
</template> </template>
<style scoped> <style scoped>
.cv-root { .cv-root {
background: white; background: white;
} }
.cv-selector { .cv-selector {
position: sticky; position: sticky;
top: 0; top: 0;
z-index: 40; z-index: 40;
display: flex; display: flex;
flex-wrap: wrap; flex-wrap: wrap;
justify-content: center; justify-content: center;
gap: 0.5rem; gap: 0.5rem;
padding: 0.5rem; padding: 0.5rem;
background: white; background: white;
border-bottom: 1px solid #ddd; border-bottom: 1px solid #ddd;
} }
.cv-btn { .cv-btn {
padding: 0.4rem 1rem; padding: 0.4rem 1rem;
border: 1px solid #333; border: 1px solid #333;
border-radius: 4px; border-radius: 4px;
background: white; background: white;
color: #333; color: #333;
cursor: pointer; cursor: pointer;
font-size: 0.9rem; font-size: 0.9rem;
transition: transition:
background 0.15s, background 0.15s,
color 0.15s; color 0.15s;
} }
.cv-btn:hover { .cv-btn:hover {
background: #eee; background: #eee;
} }
.cv-btn.active { .cv-btn.active {
background: #333; background: #333;
color: white; color: white;
} }
.cv-print-btn { .cv-print-btn {
margin-left: 1rem; margin-left: 1rem;
} }
.cv-jobs-btn { .cv-jobs-btn {
text-decoration: none; text-decoration: none;
margin-left: auto; margin-left: auto;
} }
.cv-fade-enter-active, .cv-fade-enter-active,
.cv-fade-leave-active { .cv-fade-leave-active {
transition: transition:
opacity 0.15s ease, opacity 0.15s ease,
transform 0.15s ease; transform 0.15s ease;
} }
.cv-fade-enter-from { .cv-fade-enter-from {
opacity: 0; opacity: 0;
transform: translateY(6px); transform: translateY(6px);
} }
.cv-fade-leave-to { .cv-fade-leave-to {
opacity: 0; opacity: 0;
transform: translateY(-6px); transform: translateY(-6px);
} }
@media print { @media print {
.no-print { .no-print {
display: none !important; display: none !important;
} }
} }
</style> </style>