feat: cv page now features "check out my work" section and small icons

src/components/CvIcon.vue

@@ -0,0 +1,78 @@
+<script setup lang="ts">
+import { computed } from 'vue'
+
+type IconName =
+  | 'phone'
+  | 'email'
+  | 'location'
+  | 'linkedin'
+  | 'github'
+  | 'code'
+  | 'summary'
+  | 'experience'
+  | 'education'
+  | 'achievements'
+  | 'languages'
+  | 'skills'
+  | 'additional'
+  | 'interests'
+
+const props = defineProps<{ name: IconName }>()
+
+// Sourced from lucide-static (ISC license): phone, mail, map-pin, linkedin,
+// github, file-text, briefcase, graduation-cap, award, languages,
+// chart-column, layers, heart.
+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" />',
+  email:
+    '<path d="m22 7-8.991 5.727a2 2 0 0 1-2.009 0L2 7" /><rect x="2" y="4" width="20" height="16" rx="2" />',
+  location:
+    '<path d="M20 10c0 4.993-5.539 10.193-7.399 11.799a1 1 0 0 1-1.202 0C9.539 20.193 4 14.993 4 10a8 8 0 0 1 16 0" /><circle cx="12" cy="10" r="3" />',
+  linkedin:
+    '<path d="M16 8a6 6 0 0 1 6 6v7h-4v-7a2 2 0 0 0-2-2 2 2 0 0 0-2 2v7h-4v-7a6 6 0 0 1 6-6z" /><rect width="4" height="12" x="2" y="9" /><circle cx="4" cy="4" r="2" />',
+  github:
+    '<path d="M15 22v-4a4.8 4.8 0 0 0-1-3.5c3 0 6-2 6-5.5.08-1.25-.27-2.48-1-3.5.28-1.15.28-2.35 0-3.5 0 0-1 0-3 1.5-2.64-.5-5.36-.5-8 0C6 2 5 2 5 2c-.3 1.15-.3 2.35 0 3.5A5.403 5.403 0 0 0 4 9c0 3.5 3 5.5 6 5.5-.39.49-.68 1.05-.85 1.65-.17.6-.22 1.23-.15 1.85v4" /><path d="M9 18c-4.51 2-5-2-7-2" />',
+  code: '<path d="m16 18 6-6-6-6" /><path d="m8 6-6 6 6 6" />',
+  summary:
+    '<path d="M6 22a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h8a2.4 2.4 0 0 1 1.704.706l3.588 3.588A2.4 2.4 0 0 1 20 8v12a2 2 0 0 1-2 2z" /><path d="M14 2v5a1 1 0 0 0 1 1h5" /><path d="M10 9H8" /><path d="M16 13H8" /><path d="M16 17H8" />',
+  experience:
+    '<path d="M16 20V4a2 2 0 0 0-2-2h-4a2 2 0 0 0-2 2v16" /><rect width="20" height="14" x="2" y="6" rx="2" />',
+  education:
+    '<path d="M21.42 10.922a1 1 0 0 0-.019-1.838L12.83 5.18a2 2 0 0 0-1.66 0L2.6 9.08a1 1 0 0 0 0 1.832l8.57 3.908a2 2 0 0 0 1.66 0z" /><path d="M22 10v6" /><path d="M6 12.5V16a6 3 0 0 0 12 0v-3.5" />',
+  achievements:
+    '<path d="m15.477 12.89 1.515 8.526a.5.5 0 0 1-.81.47l-3.58-2.687a1 1 0 0 0-1.197 0l-3.586 2.686a.5.5 0 0 1-.81-.469l1.514-8.526" /><circle cx="12" cy="8" r="6" />',
+  languages:
+    '<path d="m5 8 6 6" /><path d="m4 14 6-6 2-3" /><path d="M2 5h12" /><path d="M7 2h1" /><path d="m22 22-5-10-5 10" /><path d="M14 18h6" />',
+  skills:
+    '<path d="M3 3v16a2 2 0 0 0 2 2h16" /><path d="M18 17V9" /><path d="M13 17V5" /><path d="M8 17v-3" />',
+  additional:
+    '<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" />',
+}
+
+const markup = computed(() => MARKUP[props.name])
+</script>
+
+<template>
+  <svg
+    class="cv-icon"
+    viewBox="0 0 24 24"
+    fill="none"
+    stroke="currentColor"
+    stroke-width="2"
+    stroke-linecap="round"
+    stroke-linejoin="round"
+    aria-hidden="true"
+    v-html="markup"
+  ></svg>
+</template>
+
+<style scoped>
+.cv-icon {
+  width: 1em;
+  height: 1em;
+  flex-shrink: 0;
+}
+</style>

src/views/CvView.vue

@@ -1,6 +1,7 @@
 <script setup lang="ts">
 import { onBeforeUnmount, onMounted } from 'vue'
 import cvPhoto from '@/assets/cv-photo.jpg'
+import CvIcon from '@/components/CvIcon.vue'
 
 // This is a public sub-page with no link from the rest of the app, and it
 // shouldn't show up in search results. index.html is shared across every
@@ -55,6 +56,13 @@ interface AdditionalExperience {
   desc: string
 }
 
+interface Project {
+  title: string
+  repo: string
+  desc: string
+  url: string
+}
+
 const SKILL_MAX = 8
 const LANGUAGE_MAX = 5
 
@@ -203,6 +211,21 @@ const skills: Skill[] = [
   { name: 'Claude Code', rating: 4 },
 ]
 
+const projects: Project[] = [
+  {
+    title: 'Frontend',
+    repo: 'dttmr-fe',
+    desc: 'Offline-first PWA for shared, syncable to-do lists. Vue 3 + TypeScript.',
+    url: 'https://git.dittmar.dev/robin/dttmr-fe',
+  },
+  {
+    title: 'API',
+    repo: 'dttmr-api',
+    desc: 'Go backend powering auth and sync for the to-do list app.',
+    url: 'https://git.dittmar.dev/robin/dttmr-api',
+  },
+]
+
 const additionalExperiences: AdditionalExperience[] = [
   {
     title: 'Minecraft Mod',
@@ -236,30 +259,46 @@ const additionalExperiences: AdditionalExperience[] = [
     <section class="card info-card">
       <h4>Contacts</h4>
       <p class="row">
-        <span>Phone</span>
+        <span class="row-label"><CvIcon name="phone" />Phone</span>
         <strong class="mono-num">+49159/01668799</strong>
       </p>
       <p class="row">
-        <span>Email</span>
+        <span class="row-label"><CvIcon name="email" />Email</span>
         <strong>robindittmar@gmail.com</strong>
       </p>
       <p class="row">
-        <span>Location</span>
+        <span class="row-label"><CvIcon name="location" />Location</span>
         <strong>Düsseldorf</strong>
       </p>
       <p class="row">
-        <span>LinkedIn</span>
+        <span class="row-label"><CvIcon name="linkedin" />LinkedIn</span>
         <a href="https://www.linkedin.com/in/robin-dittmar-948424310/" target="_blank" rel="noopener"
           >robindittmar</a
         >
       </p>
       <p class="row">
-        <span>GitHub</span>
+        <span class="row-label"><CvIcon name="github" />GitHub</span>
         <a href="https://github.com/rdttmr" target="_blank" rel="noopener">rdttmr</a>
       </p>
     </section>
 
-    <h1 class="section-heading">Summary</h1>
+    <h1 class="section-heading"><CvIcon name="code" />Check Out My Work</h1>
+    <ul class="cards">
+      <li v-for="project in projects" :key="project.repo">
+        <a class="card project-card" :href="project.url" target="_blank" rel="noopener">
+          <span class="project-icon"><CvIcon name="code" /></span>
+          <span class="project-body">
+            <span class="project-title">
+              {{ project.title }}
+              <span class="mono-num project-repo">{{ project.repo }}</span>
+            </span>
+            <span class="project-desc">{{ project.desc }}</span>
+          </span>
+        </a>
+      </li>
+    </ul>
+
+    <h1 class="section-heading"><CvIcon name="summary" />Summary</h1>
     <section class="card info-card">
       <p class="summary-text">
         Passionate Software Developer professional with over 8 years of experience in backend
@@ -270,7 +309,7 @@ const additionalExperiences: AdditionalExperience[] = [
       </p>
     </section>
 
-    <h1 class="section-heading">Experience</h1>
+    <h1 class="section-heading"><CvIcon name="experience" />Experience</h1>
     <ul class="cards">
       <li v-for="job in experience" :key="job.company + job.dates">
         <article class="card job-card">
@@ -287,7 +326,7 @@ const additionalExperiences: AdditionalExperience[] = [
       </li>
     </ul>
 
-    <h1 class="section-heading">Education</h1>
+    <h1 class="section-heading"><CvIcon name="education" />Education</h1>
     <ul class="cards">
       <li v-for="edu in education" :key="edu.school">
         <article class="card job-card">
@@ -300,7 +339,7 @@ const additionalExperiences: AdditionalExperience[] = [
       </li>
     </ul>
 
-    <h1 class="section-heading">Key Achievements</h1>
+    <h1 class="section-heading"><CvIcon name="achievements" />Key Achievements</h1>
     <section class="card info-card">
       <div v-for="item in achievements" :key="item.title" class="achievement-row">
         <h4>{{ item.title }}</h4>
@@ -308,7 +347,7 @@ const additionalExperiences: AdditionalExperience[] = [
       </div>
     </section>
 
-    <h1 class="section-heading">Languages</h1>
+    <h1 class="section-heading"><CvIcon name="languages" />Languages</h1>
     <section class="card info-card">
       <div v-for="lang in languages" :key="lang.name" class="rating-row">
         <p class="row">
@@ -321,7 +360,7 @@ const additionalExperiences: AdditionalExperience[] = [
       </div>
     </section>
 
-    <h1 class="section-heading">Industry Experience</h1>
+    <h1 class="section-heading"><CvIcon name="skills" />Industry Experience</h1>
     <section class="card info-card">
       <div class="skill-grid">
         <div v-for="skill in skills" :key="skill.name" class="skill-row">
@@ -333,7 +372,7 @@ const additionalExperiences: AdditionalExperience[] = [
       </div>
     </section>
 
-    <h1 class="section-heading">Additional Experience</h1>
+    <h1 class="section-heading"><CvIcon name="additional" />Additional Experience</h1>
     <ul class="cards">
       <li v-for="item in additionalExperiences" :key="item.title">
         <article class="card job-card">
@@ -343,7 +382,7 @@ const additionalExperiences: AdditionalExperience[] = [
       </li>
     </ul>
 
-    <h1 class="section-heading">Interests</h1>
+    <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>
@@ -390,10 +429,19 @@ const additionalExperiences: AdditionalExperience[] = [
 }
 
 .section-heading {
+  display: flex;
+  align-items: center;
+  gap: 0.45rem;
   font-size: 1.1rem;
   margin: 1.75rem 0 0.75rem;
 }
 
+.section-heading .cv-icon {
+  font-size: 0.85rem;
+  color: var(--c-accent-strong);
+  opacity: 0.85;
+}
+
 .info-card {
   padding: 1rem 1.1rem;
 }
@@ -421,6 +469,16 @@ const additionalExperiences: AdditionalExperience[] = [
   color: var(--c-heading);
 }
 
+.row-label {
+  display: inline-flex;
+  align-items: center;
+  gap: 0.4rem;
+}
+
+.row-label .cv-icon {
+  color: var(--c-text-soft);
+}
+
 .row a {
   color: var(--c-accent-strong);
 }
@@ -539,6 +597,65 @@ const additionalExperiences: AdditionalExperience[] = [
   background: var(--c-accent);
 }
 
+/* project links */
+.project-card {
+  display: flex;
+  align-items: center;
+  gap: 0.9rem;
+  padding: 0.9rem 1.1rem;
+  border: 1px solid var(--c-accent-soft);
+  transition:
+    transform 0.15s ease-in-out,
+    border-color 0.15s ease-in-out,
+    box-shadow 0.15s ease-in-out;
+}
+
+.project-card:hover,
+.project-card:focus-visible {
+  border-color: var(--c-accent-strong);
+  box-shadow: var(--shadow-md);
+  transform: translateY(-1px);
+}
+
+.project-icon {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 2.2rem;
+  height: 2.2rem;
+  flex-shrink: 0;
+  border-radius: var(--radius-md);
+  background: var(--c-accent-bg);
+  color: var(--c-accent-strong);
+  font-size: 1.1rem;
+}
+
+.project-body {
+  display: flex;
+  flex-direction: column;
+  gap: 0.2rem;
+  min-width: 0;
+}
+
+.project-title {
+  display: flex;
+  align-items: baseline;
+  gap: 0.5rem;
+  font-weight: 600;
+  color: var(--c-heading);
+  font-size: 0.95rem;
+}
+
+.project-repo {
+  font-size: 0.75rem;
+  color: var(--c-accent-strong);
+}
+
+.project-desc {
+  font-size: 0.82rem;
+  color: var(--c-text-soft);
+}
+
 /* skills */
 .skill-grid {
   display: grid;