diff --git a/src/components/CvIcon.vue b/src/components/CvIcon.vue index 3cbe46d..b712987 100644 --- a/src/components/CvIcon.vue +++ b/src/components/CvIcon.vue @@ -17,12 +17,19 @@ type IconName = | 'skills' | 'additional' | 'interests' + | 'terminal' + | 'server' + | 'git-branch' + | 'cpu' + | 'mountain' + | 'dumbbell' const props = defineProps<{ name: IconName }>() // Sourced from lucide-static (ISC license): phone, mail, map-pin, linkedin, // github, code, badge-check, file-text, briefcase, graduation-cap, award, -// languages, chart-column, layers, heart. +// languages, chart-column, layers, heart, terminal, server, git-branch, cpu, +// mountain, dumbbell. const MARKUP: Record = { phone: '', @@ -53,6 +60,15 @@ const MARKUP: Record = { '', interests: '', + terminal: '', + server: + '', + 'git-branch': + '', + cpu: '', + mountain: '', + dumbbell: + '', } const markup = computed(() => MARKUP[props.name]) diff --git a/src/views/CvView.vue b/src/views/CvView.vue index c0e4c34..9f05405 100644 --- a/src/views/CvView.vue +++ b/src/views/CvView.vue @@ -63,6 +63,11 @@ interface AdditionalExperience { desc: string } +interface Interest { + name: string + icon: 'terminal' | 'server' | 'git-branch' | 'cpu' | 'mountain' | 'dumbbell' +} + const SKILL_MAX = 8 const LANGUAGE_MAX = 5 @@ -176,13 +181,13 @@ const languages: Language[] = [ { name: 'Spanish', level: 'Beginner', rating: 1 }, ] -const interests: string[] = [ - 'Software Development', - 'Linux', - 'Open Source', - 'Raspberry Pi', - 'Rock climbing', - 'Calisthenics', +const interests: Interest[] = [ + { name: 'Software Development', icon: 'terminal' }, + { name: 'Linux', icon: 'server' }, + { name: 'Open Source', icon: 'git-branch' }, + { name: 'Raspberry Pi', icon: 'cpu' }, + { name: 'Rock climbing', icon: 'mountain' }, + { name: 'Calisthenics', icon: 'dumbbell' }, ] const skills: Skill[] = [ @@ -273,7 +278,10 @@ const additionalExperiences: AdditionalExperience[] = [

LinkedIn - robin-dittmar

@@ -398,8 +406,11 @@ const additionalExperiences: AdditionalExperience[] = [

Interests

-
- {{ interest }} +
+
+ + {{ interest.name }} +
@@ -812,13 +823,47 @@ const additionalExperiences: AdditionalExperience[] = [ color: var(--c-text); } -/* tags */ -.tags { +/* interests */ +.interests { display: flex; flex-wrap: wrap; - gap: 0.4rem; + gap: 0.55rem; } +.interest-chip { + display: inline-flex; + align-items: center; + gap: 0.5rem; + padding: 0.3rem 0.8rem 0.3rem 0.35rem; + border-radius: 999px; + border: 1px solid var(--c-border); + background: var(--c-bg-soft); + font-size: 0.8rem; + color: var(--c-text); + transition: + border-color 0.15s ease-in-out, + transform 0.15s ease-in-out; +} + +.interest-chip:hover { + border-color: var(--c-accent-soft); + transform: translateY(-1px); +} + +.interest-icon { + display: flex; + align-items: center; + justify-content: center; + width: 1.5rem; + height: 1.5rem; + flex-shrink: 0; + border-radius: 50%; + background: var(--c-accent-bg); + color: var(--c-accent-strong); + font-size: 0.75rem; +} + +/* tags */ .tag { display: inline-flex; font-size: 0.72rem;