refactor: use icons instead of timestamps in Timeline component

src/components/TimelineItem.vue

@@ -1,37 +1,12 @@
-<script setup lang="ts">
-import { computed } from "vue";
-
-interface Props {
-  datetime: string;
-}
-
-const props = defineProps<Props>();
-
-const dateLabels = computed<Record<string, string>>(() => {
-  const date = new Date(props.datetime);
-  const locale = "de-DE";
-
-  const dates = {
-    year: date.toLocaleDateString(locale, { year: "numeric" }),
-    month: date.toLocaleDateString(locale, { month: "short" }),
-    day: date.toLocaleDateString(locale, { day: "numeric" }),
-  };
-
-  return dates;
-});
-</script>
-
 <template>
   <li class="timeline-item">
-    <time class="timeline-item__datetime" :datetime="datetime">
+    <div class="timeline-item__icon">
-      <div class="timeline-item__label">{{ dateLabels.day }}</div>
+      <slot name="icon"></slot>
-      <div class="timeline-item__label">{{ dateLabels.month }}</div>
+    </div>
-      <div class="timeline-item__label">{{ dateLabels.year }}</div>
-    </time>
     <section class="timeline-item__content">
-      <h1 class="timeline-item__headline">
+      <h2 class="timeline-item__headline">
         <slot name="headline"></slot>
-      </h1>
+      </h2>
 
       <div class="timeline-item__text">
         <slot name="content"></slot>
@@ -73,7 +48,7 @@ const dateLabels = computed<Record<string, string>>(() => {
           right: var(--timeline-stroke-position-horizontal);
         }
 
-        .timeline-item__datetime {
+        .timeline-item__icon {
           order: 1;
         }
 
@@ -84,25 +59,26 @@ const dateLabels = computed<Record<string, string>>(() => {
       }
     }
 
-    &__datetime {
+    &__icon {
-      font-size: var(--timeline-circle-font-size);
-      text-align: center;
-      line-height: 1.1;
-
-      background-color: var(--timeline-circle-background);
-
       flex: 0 0 var(--timeline-circle-size);
+      display: flex;
+      align-items: center;
+      justify-content: center;
+
       width: var(--timeline-circle-size);
       height: var(--timeline-circle-size);
 
+      background-color: var(--timeline-circle-background);
+
       margin: 0;
       border: var(--timeline-stroke-thickness) solid
         var(--timeline-stroke-color);
       border-radius: 100%;
       padding: var(--timeline-circle-padding);
-    }
 
-    &__label {
+      svg {
+        fill: var(--timeline-icon-color);
+      }
     }
 
     &__content {

src/views/CareerPathView.vue

@@ -1,11 +1,26 @@
 <script setup lang="ts">
 import TimelineList from "@/components/TimelineList.vue";
 import TimelineItem from "@/components/TimelineItem.vue";
+import WhiskeyGlassIcon from "@/assets/icons/WhiskeyGlassIcon.vue";
+import TreeIcon from "@/assets/icons/TreeIcon.vue";
+import CarIcon from "@/assets/icons/CarIcon.vue";
+import HelmetSafetyIcon from "@/assets/icons/HelmetSafetyIcon.vue";
+import BoxesIcon from "@/assets/icons/BoxesIcon.vue";
+import TextBlock from "@/components/TextBlock.vue";
 </script>
 
 <template>
+  <TextBlock>
+    <h1>{{ $route.meta.title }}</h1>
+    <p>
+      Viktor's had many different jobs in the past, some of which where very
+      formative, other's just paid the bills.
+    </p>
+  </TextBlock>
+
   <TimelineList>
-    <TimelineItem datetime="2011-11-11">
+    <TimelineItem>
+      <template #icon><WhiskeyGlassIcon /></template>
       <template #headline>Bartender</template>
       <template #content>
         <p>
@@ -22,7 +37,8 @@ import TimelineItem from "@/components/TimelineItem.vue";
         </p>
       </template>
     </TimelineItem>
-    <TimelineItem datetime="2012-12-12">
+    <TimelineItem>
+      <template #icon><TreeIcon /></template>
       <template #headline>Lumberjack</template>
       <template #content>
         <p>
@@ -32,7 +48,8 @@ import TimelineItem from "@/components/TimelineItem.vue";
         </p>
       </template>
     </TimelineItem>
-    <TimelineItem datetime="2012-12-12">
+    <TimelineItem>
+      <template #icon><CarIcon /></template>
       <template #headline>Car Mechanic</template>
       <template #content>
         <p>
@@ -41,13 +58,15 @@ import TimelineItem from "@/components/TimelineItem.vue";
         </p>
       </template>
     </TimelineItem>
-    <TimelineItem datetime="2012-12-12">
+    <TimelineItem>
+      <template #icon><HelmetSafetyIcon /></template>
       <template #headline>Construction Worker</template>
       <template #content>
         <p>Later, he worked as a construction worker.</p>
       </template>
     </TimelineItem>
-    <TimelineItem datetime="2012-12-12">
+    <TimelineItem>
+      <template #icon><BoxesIcon /></template>
       <template #headline>Werehouse Worker</template>
       <template #content>
         <p>