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

@@ -1,19 +1,17 @@
-<ul webc:root="override">
-  <li class="job" webc:for="job of jobs">
-    <div class="icon"><icon :@icon="job.icon"></icon></div>
-    <p class="title" @text="job.title"></p>
-    <p class="text" @text="job.desc"></p>
-  </li>
-</ul>
+<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="timeline">
+<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-block: 1em;
+    margin: 0;
     padding: 0;
 
     @media (min-width: 32em) {
@@ -21,7 +19,7 @@
     }
   }
 
-  :host .job {
+  :host {
     display: grid;
     grid-template-areas:
       'icon title'
@@ -29,7 +27,7 @@
     column-gap: 1em;
   }
 
-  :host .job::before {
+  :host::before {
     content: '';
 
     grid-row: icon / line;
@@ -42,18 +40,18 @@
     background-color: var(--timeline-stroke-color);
   }
 
-  :host .job:first-child::before {
+  :host:first-of-type::before {
     align-self: end;
     height: calc(100% - var(--timeline-circle-size));
   }
 
-  :host .job:last-child::before {
+  :host:last-of-type::before {
     grid-row: icon;
     align-self: start;
     height: 50%;
   }
 
-  :host .job > .icon {
+  :host > .icon {
     grid-area: icon;
     align-self: center;