101 lines
2.1 KiB
Vue
101 lines
2.1 KiB
Vue
<script setup lang="ts">
|
|
import { computed } from "vue";
|
|
import { data as cvItems } from "../composables/cv.data";
|
|
|
|
import CVTimelineItem from "../layout/CVTimelineItem.vue";
|
|
import CVProjectCard from "../layout/CVProjectCard.vue";
|
|
|
|
function sortByDateDesc(a, b) {
|
|
return b.startValue - a.startValue || (b.endValue || 0) - (a.endValue || 0);
|
|
}
|
|
|
|
const educationItems = computed(() =>
|
|
cvItems.filter((i) => i.section === "education").sort(sortByDateDesc),
|
|
);
|
|
|
|
const workItems = computed(() =>
|
|
cvItems.filter((i) => i.section === "work-experience").sort(sortByDateDesc),
|
|
);
|
|
|
|
const projectItems = computed(() =>
|
|
cvItems.filter((i) => i.section === "projects").sort(sortByDateDesc),
|
|
);
|
|
</script>
|
|
|
|
<template>
|
|
<div class="cv-index">
|
|
<section v-if="educationItems.length" class="cv-section">
|
|
<h1>Education</h1>
|
|
<div class="cv-timeline">
|
|
<CVTimelineItem
|
|
v-for="(item, idx) in educationItems"
|
|
:key="item.url + idx"
|
|
:item="item"
|
|
/>
|
|
</div>
|
|
</section>
|
|
|
|
<section v-if="workItems.length" class="cv-section">
|
|
<h1>Work Experience</h1>
|
|
<div class="cv-timeline">
|
|
<CVTimelineItem
|
|
v-for="(item, idx) in workItems"
|
|
:key="item.url + idx"
|
|
:item="item"
|
|
/>
|
|
</div>
|
|
</section>
|
|
|
|
<section v-if="projectItems.length" class="cv-section">
|
|
<h1>Projects</h1>
|
|
<div class="cv-project-list">
|
|
<CVProjectCard
|
|
v-for="(item, idx) in projectItems"
|
|
:key="item.url + idx"
|
|
:item="item"
|
|
/>
|
|
</div>
|
|
</section>
|
|
</div>
|
|
</template>
|
|
|
|
<style scoped>
|
|
.cv-index {
|
|
}
|
|
|
|
.cv-section {
|
|
margin-bottom: 3em;
|
|
}
|
|
|
|
.cv-section h1 {
|
|
margin-bottom: 1em;
|
|
font-size: 1.8em;
|
|
position: relative;
|
|
}
|
|
|
|
.cv-timeline {
|
|
position: relative;
|
|
margin: 1em 0;
|
|
}
|
|
|
|
.cv-timeline::before {
|
|
content: "";
|
|
position: absolute;
|
|
top: 0;
|
|
bottom: 0;
|
|
left: 1rem;
|
|
width: 3px;
|
|
background: linear-gradient(
|
|
180deg,
|
|
var(--highlight-color) 0%,
|
|
var(--primary-color) 100%
|
|
);
|
|
border-radius: 2px;
|
|
}
|
|
|
|
.cv-project-list {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 1em;
|
|
}
|
|
</style>
|