Update the work structure/templates and styling

This template edits allows having multiple positions in the same company

6 files changed, 101 insertions, 94 deletions

diff --git a/assets/scss/print/_base.scss b/assets/scss/print/_base.scss
index fba5300..b511b25 100644
--- a/assets/scss/print/_base.scss
+++ b/assets/scss/print/_base.scss
@@ -1,6 +1,6 @@
 @page {
-  margin-left: 1cm;
-  margin-right: 1cm;
+  margin-left: 1.5cm;
+  margin-right: 1.5cm;
 }
 
 body {
diff --git a/assets/scss/print/_work.scss b/assets/scss/print/_work.scss
index a2779cb..954cdd8 100644
--- a/assets/scss/print/_work.scss
+++ b/assets/scss/print/_work.scss
@@ -3,23 +3,24 @@
 }
 
 .work__header {
-  margin-bottom: 0.2rem;
+  margin-bottom: 1.7rem;
 }
 
-.work__experience {
+.work__company {
   page-break-inside: avoid;
-
   // only show the first 4 jobs completely and hide the details of the
   // rest of the older jobs (but keep the names in the CV)
   &:not(&:nth-child(-n+5)) {
-    > .tasks, .footnote {
+    > .work__company__tasks,
+      .work__company__note,
+      .work__company__footnote {
       display: none;
     }
   }
 }
 
 // Style the Company name links in the PDF with thicker underline
-.job-position__company {
+.work__company__name {
   margin-top: 0.6rem;
   font-size: 11pt;
   a:link, a:visited, a:hover, a:active {
@@ -27,19 +28,19 @@
   }
 }
 
-.job-position__title,
-.job-position__duration,
-.job-position__location {
+.work__company__location,
+.work__company__position__title,
+.work__company__position__duration{
 }
 
-.note {
+.work__company__note {
   max-width: 100%;
 }
 
-.tasks {
+.work__company__tasks {
   max-width: 90%;
 }
 
-.footnote {
+.work__company__footnote {
   font-size: 7pt;
 }
diff --git a/assets/scss/web/_base.scss b/assets/scss/web/_base.scss
index cd56020..0789eb5 100644
--- a/assets/scss/web/_base.scss
+++ b/assets/scss/web/_base.scss
@@ -45,11 +45,6 @@ body {
   }
 }
 
-main {
-  margin-left: 0.5cm;
-  margin-right: 0.5cm;
-}
-
 a {
   &:link, &:visited, &:active {
     text-decoration-color: $secondaryColor;
diff --git a/assets/scss/web/_work.scss b/assets/scss/web/_work.scss
index 0bb807e..811da2f 100644
--- a/assets/scss/web/_work.scss
+++ b/assets/scss/web/_work.scss
@@ -4,35 +4,41 @@
 }
 
 .work__header {
+  margin-bottom: 1.5rem;
 }
 
-.work__experience {
+.work__company {
+  margin-top: -1.5rem;
+  display: flex;
+  flex-flow: row wrap;
+  justify-content: space-between;
+  @media (max-width: 780px) {
+    flex-flow: column wrap;
+  }
+
+  // Add horizontal line after each work experience
   &:after {
-    display: flex;
+    display: block;
+    flex: 1 100%;
     content: "";
     border-bottom: 1px solid;
-    margin: auto;
-    max-width: 75%;
+    margin-top: 1.5rem;
+    margin-bottom: 1.5rem;
+    margin-left: auto;
+    margin-right: auto;
+    max-width: 80%;
   }
+
+  // Remove the extra horizontal line after the last work article
   &:last-of-type:after {
-    // remove the extra horizontal line after the last work__experience
     display: none;
   }
 }
 
-.job-position {
-  display: flex;
-  flex-flow: row wrap;
-  justify-content: space-between;
-  @media (max-width: 780px) {
-    flex-flow: column wrap;
-  }
-}
-
-.job-position__company,
-.job-position__title,
-.job-position__duration,
-.job-position__location {
+.work__company__name,
+.work__company__location,
+.work__company__position__title,
+.work__company__position__duration {
   min-width: 50%;
   @media (max-width: 812px) {
     @media (orientation: landscape) {
@@ -41,34 +47,13 @@
   }
 }
 
-.job-position__company {
-  order: 0;
-  margin-bottom: 0;
+.work__company__name {
+  margin-bottom: 0%;
   font-size: 1.5rem;
 }
 
-.job-position__title {
-  order: 2;
-  text-align: left;
-  align-self: flex-start;
-  @media (max-width: 780px) {
-    order: 1;
-  }
-}
-
-.job-position__duration {
-  order: 1;
-  text-align: right;
-  align-self: flex-end;
-  @media (max-width: 780px) {
-    order: 2;
-    text-align: left;
-    align-self: flex-start;
-  }
-}
-
-.job-position__location {
-  order: 3;
+.work__company__location,
+.work__company__position__duration {
   text-align: right;
   align-self: flex-end;
   @media (max-width: 780px) {
@@ -77,15 +62,15 @@
   }
 }
 
-.note {
+.work__company__note {
   max-width: 93%;
   margin-top: 0.6rem;
   margin-bottom: 0.6rem;
 }
 
-.tasks {
+.work__company__tasks {
   max-width: 90%;
-  margin-top: 0.4rem;
+  margin-bottom: 0%;
 
   @media (max-width: 812px) {
     max-width: 99%;
@@ -101,7 +86,7 @@
   }
 }
 
-.footnote {
-  margin-bottom: 0.8rem;
-  font-size: 0.8rem;
+.work__company__footnote {
+  min-width: 100%;
+  font-size: 0.9rem;
 }
diff --git a/data/home/work.yaml b/data/home/work.yaml
index 08990fe..c0cfcdb 100644
--- a/data/home/work.yaml
+++ b/data/home/work.yaml
@@ -1,8 +1,16 @@
 Work:
-  - Company: <a href="https://mbition.io">MBition GmbH.</a>
-    Title: Senior Build Engineer (SRE)
-    Duration: Apr. 2023 - Present
+  - Company: MBition GmbH.
+    Link: https://mbition.io
     Location: Berlin, Germany
+    Positions:
+      - Title: Senior Build Engineer (SRE)
+        Duration: Apr. 2023 - Apr. 2025
+    Note:
+      Worked as part of <b>Build Enablement</b>, and <b>SwF Runners</b> teams, who worked on the build and test tooling,
+      docs, platform, infrastructure, GitLab runners, pipelines, and security optimizations.
+      These toolings and pipelines were used by various development teams across the globe to ship the
+      software to 3 generations of Mercedes-Benz cars.<br>
+      Below, are some of the tasks I did&colon;
     Tasks:
       - Improved the execution time of the build step from 60+ minutes to be ~6 minutes.
       - Improved the generation of Logical Blocks step time from 90+ minutes to be ~60 minutes.
@@ -13,12 +21,14 @@ Work:
         and releases LTS on both Jenkins and Gitlab CI.
       - Implemented the Change Control Board (CCB) for reviewing tickets and improve refinement process.
 
-  - Company: <a href="https://group.springernature.com/gp/group">Springer Nature AG & Co. KGaA</a>
-    Title: Platform Engineer
-    Duration: Feb. 2022 - Aug. 2022
+  - Company: Springer Nature AG & Co. KGaA
+    Link: https://group.springernature.com/gp/group
     Location: Berlin, Germany
+    Positions:
+      - Title: Platform Engineer
+        Duration: Feb. 2022 - Aug. 2022
     Note:
-      Worked as part of the <b>Engineering Enablement</b> team, who provides infrastructure, internal tooling, docs,
+      Worked as part of the <b>Engineering Enablement</b> team, who provided infrastructure, internal tooling, docs,
       CloudFoundry platform, and Kubernetes clusters, to help the development teams with their daily tasks and provide
       them with a nice UX. These included&colon;
     Tasks:
@@ -32,10 +42,12 @@ Work:
       - Maintaining the team docs used by other development teams, to integrate with and use internal platforms.
       - Maintaining terraform-provisioned infrastructure.
 
-  - Company: <a href="https://sapera.com/">Sapera GmbH.</a>
-    Title: Senior Developer/DevOps
-    Duration: Apr. 2018 - Nov. 2021
+  - Company: Sapera GmbH.
+    Link: https://sapera.com
     Location: Berlin, Germany
+    Positions:
+      - Title: Senior Developer/DevOps
+        Duration: Apr. 2018 - Nov. 2021
     Tasks:
       - Implemented infrastructure as code (IaC) for different projects using Terraform and Ansible.
       - Standardized the deployment process (and maintained the process documentation).
@@ -54,10 +66,12 @@ Work:
       <a href="https://scrollytelling.net/"> Scrolly Telling GmbH</a> and still worked on by them as seen at
       <a href="https://five-times.com/">Five-Times</a> and <a href="https://scrlly.com">Scrlly</a>.
 
-  - Company: <a href="https://liqid.de/">LIQID GmbH.</a>
-    Title: Senior Backend Developer
-    Duration: Mar. 2016 - Dec. 2017
+  - Company: LIQID GmbH.
+    Link: https://liqid.de
     Location: Berlin, Germany
+    Positions:
+      - Title: Senior Backend Developer
+        Duration: Mar. 2016 - Dec. 2017
     Tasks:
       - Maintained the RESTful API (used by admins and front-end).
       - Implemented and maintained the integration with Deutsche Bank.
@@ -71,9 +85,10 @@ Work:
       - Implemented day to day business/marketing/technical requirements.
 
   - Company: PrioriData GmbH.
-    Title: Full Stack Developer
-    Duration: Jul. 2015 - Feb. 2016
     Location: Berlin, Germany
+    Positions:
+      - Title: Full Stack Developer
+        Duration: Jul. 2015 - Feb. 2016
     Tasks:
       - Maintained the Rails web (dashboard) app.
       - Optimized the scraping process of getting the data from Apple and GooglePlay stores.
@@ -85,9 +100,10 @@ Work:
       Was acquired by <a href="https://airnow.com/">Airnow Data Ltd.</a>
 
   - Company: AskNative
-    Title: Backend Developer/DevOps
-    Duration: May. 2013 - Jul. 2015
     Location: Remote, Egypt
+    Positions:
+      - Title: Backend Developer/DevOps
+        Duration: May. 2013 - Jul. 2015
     Tasks:
       - Implemented the test suite for the API.
       - Implemented events booking feature via Stripe.
diff --git a/layouts/partials/home/work.html b/layouts/partials/home/work.html
index c3e38be..3cdfe8b 100644
--- a/layouts/partials/home/work.html
+++ b/layouts/partials/home/work.html
@@ -1,20 +1,30 @@
 <article class="work">
   <h2 class="work__header section-header">Work Experience</h2>
   {{ range . }}
-    <article class="work__experience">
-      <div class="job-position">
-        <h2 class="job-position__company">{{ .Company | safeHTML }}</h2>
-        <em class="job-position__title">{{ .Title }}</em>
-        <em class="job-position__duration">{{ .Duration }}</em>
-        <em class="job-position__location">{{ .Location }}</em>
-      </div>
-      <p class="note">{{ .Note | safeHTML }}</p>
-      <ul class="tasks">
+    <article class="work__company">
+      {{ if .Link }}
+        <h2 class="work__company__name">
+          <a href="{{ .Link }}">{{ .Company }}</a>
+        </h2>
+      {{ else }}
+        <h2 class="work__company__name">{{ .Company }}</h2>
+      {{ end }}
+      <em class="work__company__location">{{ .Location }}</em>
+      {{ range .Positions }}
+        <em class="work__company__position__title">{{ .Title }}</em>
+        <em class="work__company__position__duration">{{ .Duration }}</em>
+      {{ end }}
+      {{ if .Note }}
+        <p class="work__company__note">{{ .Note | safeHTML }}</p>
+      {{ end }}
+      <ul class="work__company__tasks">
         {{ range .Tasks }}
           <li>{{ . | safeHTML }}</li>
         {{ end }}
       </ul>
-      <p class="footnote">{{ .FootNote | safeHTML }}</p>
+      {{ if .FootNote }}
+        <p class="work__company__footnote">{{ .FootNote | safeHTML }}</p>
+      {{ end }}
     </article>
   {{ end }}
 </article>