Merge pull request 'CV: spiced up interests section' (#26) from dev into main

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<IconName, string> = {
   phone:
     '<path d="M13.832 16.568a1 1 0 0 0 1.213-.303l.355-.465A2 2 0 0 1 17 15h3a2 2 0 0 1 2 2v3a2 2 0 0 1-2 2A18 18 0 0 1 2 4a2 2 0 0 1 2-2h3a2 2 0 0 1 2 2v3a2 2 0 0 1-.8 1.6l-.468.351a1 1 0 0 0-.292 1.233 14 14 0 0 0 6.392 6.384" />',
@@ -53,6 +60,15 @@ const MARKUP: Record<IconName, string> = {
     '<path d="M12.83 2.18a2 2 0 0 0-1.66 0L2.6 6.08a1 1 0 0 0 0 1.83l8.58 3.91a2 2 0 0 0 1.66 0l8.58-3.9a1 1 0 0 0 0-1.83z" /><path d="M2 12a1 1 0 0 0 .58.91l8.6 3.91a2 2 0 0 0 1.65 0l8.58-3.9A1 1 0 0 0 22 12" /><path d="M2 17a1 1 0 0 0 .58.91l8.6 3.91a2 2 0 0 0 1.65 0l8.58-3.9A1 1 0 0 0 22 17" />',
   interests:
     '<path d="M2 9.5a5.5 5.5 0 0 1 9.591-3.676.56.56 0 0 0 .818 0A5.49 5.49 0 0 1 22 9.5c0 2.29-1.5 4-3 5.5l-5.492 5.313a2 2 0 0 1-3 .019L5 15c-1.5-1.5-3-3.2-3-5.5" />',
+  terminal: '<path d="M12 19h8" /><path d="m4 17 6-6-6-6" />',
+  server:
+    '<rect width="20" height="8" x="2" y="2" rx="2" ry="2" /><rect width="20" height="8" x="2" y="14" rx="2" ry="2" /><line x1="6" x2="6.01" y1="6" y2="6" /><line x1="6" x2="6.01" y1="18" y2="18" />',
+  'git-branch':
+    '<path d="M15 6a9 9 0 0 0-9 9V3" /><circle cx="18" cy="6" r="3" /><circle cx="6" cy="18" r="3" />',
+  cpu: '<path d="M12 20v2" /><path d="M12 2v2" /><path d="M17 20v2" /><path d="M17 2v2" /><path d="M2 12h2" /><path d="M2 17h2" /><path d="M2 7h2" /><path d="M20 12h2" /><path d="M20 17h2" /><path d="M20 7h2" /><path d="M7 20v2" /><path d="M7 2v2" /><rect x="4" y="4" width="16" height="16" rx="2" /><rect x="8" y="8" width="8" height="8" rx="1" />',
+  mountain: '<path d="m8 3 4 8 5-5 5 15H2L8 3z" />',
+  dumbbell:
+    '<path d="M17.596 12.768a2 2 0 1 0 2.829-2.829l-1.768-1.767a2 2 0 0 0 2.828-2.829l-2.828-2.828a2 2 0 0 0-2.829 2.828l-1.767-1.768a2 2 0 1 0-2.829 2.829z" /><path d="m2.5 21.5 1.4-1.4" /><path d="m20.1 3.9 1.4-1.4" /><path d="M5.343 21.485a2 2 0 1 0 2.829-2.828l1.767 1.768a2 2 0 1 0 2.829-2.829l-6.364-6.364a2 2 0 1 0-2.829 2.829l1.768 1.767a2 2 0 0 0-2.828 2.829z" /><path d="m9.6 14.4 4.8-4.8" />',
 }
 
 const markup = computed(() => MARKUP[props.name])

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[] = [
       </p>
       <p class="row">
         <span class="row-label"><CvIcon name="linkedin" />LinkedIn</span>
-        <a href="https://www.linkedin.com/in/robin-dittmar-948424310/" target="_blank" rel="noopener"
+        <a
+          href="https://www.linkedin.com/in/robin-dittmar-948424310/"
+          target="_blank"
+          rel="noopener"
           >robin-dittmar</a
         >
       </p>
@@ -398,8 +406,11 @@ const additionalExperiences: AdditionalExperience[] = [
 
     <h1 class="section-heading"><CvIcon name="interests" />Interests</h1>
     <section class="card info-card">
-      <div class="tags">
-        <span v-for="interest in interests" :key="interest" class="tag">{{ interest }}</span>
+      <div class="interests">
+        <div v-for="interest in interests" :key="interest.name" class="interest-chip">
+          <span class="interest-icon"><CvIcon :name="interest.icon" /></span>
+          <span>{{ interest.name }}</span>
+        </div>
       </div>
     </section>
   </main>
@@ -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;