From 0bd95c38c4e0716f218f7faa5c2c9dc853b7f7be Mon Sep 17 00:00:00 2001
From: Sebin Nyshkim <sebin.nyshkim@icloud.com>
Date: Fri, 4 Apr 2025 18:55:32 +0200
Subject: [PATCH] feat: :sparkles: add character timeline component

---
 src/components/timeline.webc | 75 ++++++++++++++++++++++++++++++++++++
 1 file changed, 75 insertions(+)
 create mode 100644 src/components/timeline.webc

diff --git a/src/components/timeline.webc b/src/components/timeline.webc
new file mode 100644
index 0000000..c57c824
--- /dev/null
+++ b/src/components/timeline.webc
@@ -0,0 +1,75 @@
+<dl class="timeline">
+  <div class="job" webc:for="job of jobs">
+    <icon class="icon" :icon="job.icon"></icon>
+    <div class="content">
+      <dt @text="job.title"></dt>
+      <dd @text="job.desc"></dd>
+    </div>
+  </div>
+</dl>
+
+<style>
+  .timeline {
+    --timeline-circle-size: 4em;
+    --timeline-stroke-thickness: calc(var(--timeline-circle-size) / 16);
+    --timeline-stroke-color: var(--clr-timeline-stroke);
+
+    position: relative;
+    margin: 0;
+    padding: 0;
+
+    & .job {
+      display: flex;
+      flex-flow: row nowrap;
+      gap: 1em;
+
+      margin: 1.5rem 0;
+
+      position: relative;
+
+      &:not(:last-child):before {
+        content: '';
+        position: absolute;
+        inset: var(--timeline-circle-size) auto auto
+          calc(var(--timeline-circle-size) / 2 - var(--timeline-stroke-thickness) / 2);
+        height: calc(100% - var(--timeline-circle-size) + 1.5rem);
+        border-left: var(--timeline-stroke-thickness) solid var(--timeline-stroke-color);
+      }
+    }
+
+    & .icon {
+      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: calc(var(--timeline-circle-size) * 0.2);
+    }
+
+    & .content {
+      flex: 1 0 0;
+      margin: 0;
+    }
+
+    & dt {
+      font-family: var(--font-family-headings);
+      font-size: calc(var(--timeline-circle-size) / 2);
+      font-weight: bold;
+      line-height: calc(var(--timeline-circle-size) / 2);
+    }
+
+    & dd {
+      margin-inline: 0;
+      line-height: 1.5;
+      text-align: justify;
+    }
+  }
+</style>