refactor: ♻️ make job component independent, move page content out of data files

By making the job component independent it allows content to live in content page files instead of data files

src/components/job.webc

@@ -0,0 +1,87 @@
+<section webc:root="override">
+  <div class="icon"><icon :@icon="icon"></icon></div>
+  <p class="title" @text="title"></p>
+  <p class="text"><slot></slot></p>
+</section>
+
+<style webc:scoped="job">
+  :host {
+    --timeline-circle-size: 3rem;
+    --timeline-circle-background: var(--clr-box-background);
+    --timeline-stroke-color: var(--clr-timeline-stroke);
+    --timeline-stroke-thickness: calc(var(--timeline-circle-size) / 16);
+
+    margin: 0;
+    padding: 0;
+
+    @media (min-width: 32em) {
+      --timeline-circle-size: 4rem;
+    }
+  }
+
+  :host {
+    display: grid;
+    grid-template-areas:
+      'icon title'
+      'line text';
+    column-gap: 1em;
+  }
+
+  :host::before {
+    content: '';
+
+    grid-row: icon / line;
+    grid-column: line;
+    justify-self: center;
+
+    width: var(--timeline-stroke-thickness);
+    height: 100%;
+
+    background-color: var(--timeline-stroke-color);
+  }
+
+  :host:first-of-type::before {
+    align-self: end;
+    height: calc(100% - var(--timeline-circle-size));
+  }
+
+  :host:last-of-type::before {
+    grid-row: icon;
+    align-self: start;
+    height: 50%;
+  }
+
+  :host > .icon {
+    grid-area: icon;
+    align-self: center;
+
+    width: var(--timeline-circle-size);
+    height: var(--timeline-circle-size);
+
+    background-color: var(--timeline-circle-background);
+
+    border: var(--timeline-stroke-thickness) solid var(--timeline-stroke-color);
+    border-radius: 100%;
+    padding: calc(var(--timeline-circle-size) * 0.2);
+  }
+
+  :host .title {
+    grid-area: title;
+    align-self: center;
+
+    font-family: var(--font-family-headings);
+    font-size: calc(var(--timeline-circle-size) / 2);
+    font-weight: bold;
+    text-align: start;
+    margin-block: calc(var(--timeline-circle-size) / 4);
+  }
+
+  :host .text {
+    grid-area: text;
+
+    margin-inline: 0;
+    margin-block: 0;
+    line-height: 1.5;
+    text-align: justify;
+  }
+</style>