From d44d3436e706a1be00860b03ae1271c49f39930c Mon Sep 17 00:00:00 2001
From: Ahmed Abdelhalim <pm@a14m.dev>
Date: Mon, 5 Jul 2021 13:19:24 +0200
Subject: Convert the work experience to a BEM convention

---
 app/assets/index.html           | 60 +++++++++++++++++------------------
 app/print.styl                  | 15 +--------
 app/stylesheets/print/work.styl | 30 ++++++++++++++++++
 app/stylesheets/web/work.styl   | 67 +++++++++++++++++++++++++++++++++++++++
 app/web.styl                    | 70 +----------------------------------------
 5 files changed, 129 insertions(+), 113 deletions(-)
 create mode 100644 app/stylesheets/print/work.styl
 create mode 100644 app/stylesheets/web/work.styl

diff --git a/app/assets/index.html b/app/assets/index.html
index 4ee82f2..9898d2a 100644
--- a/app/assets/index.html
+++ b/app/assets/index.html
@@ -101,15 +101,15 @@
       </article>
 
       <article class="work">
-        <h1>Work Experience</h1>
-        <article>
-          <div class="info">
-            <h2><a href="https://sapera.com/">Sapera GmbH.</a></h2>
-            <em>Senior Developer/DevOps</em>
-            <em>Berlin, Germany</em>
-            <em>Apr. 2018 - Present</em>
+        <h1 class="work__header section-header">Work Experience</h1>
+        <article class="work__experience">
+          <div class="job-position">
+            <h2 class="job-position__company"><a href="https://sapera.com/">Sapera GmbH.</a></h2>
+            <em class="job-position__title">Senior Developer/DevOps</em>
+            <em class="job-position__duration">Apr. 2018 - Present</em>
+            <em class="job-position__location">Berlin, Germany</em>
           </div>
-          <ul>
+          <ul class="tasks">
             <li>
               Implemented infrastructure as code (<abbr>IaC</abbr>) for different projects using Terraform and Ansible.
             </li>
@@ -135,14 +135,14 @@
             <li>Provisioned and rewrote the data pipelines to adhere to better CI/CD standards.</li>
           </ul>
         </article>
-        <article>
-          <div class="info">
-            <h2><a href="https://liqid.de/">LIQID GmbH.</a></h2>
-            <em>Senior Backend Developer</em>
-            <em>Berlin, Germany</em>
-            <em>Mar. 2016 - Dec. 2017</em>
+        <article class="work__experience">
+          <div class="job-position">
+            <h2 class="job-position__company"><a href="https://liqid.de/">LIQID GmbH.</a></h2>
+            <em class="job-position__title">Senior Backend Developer</em>
+            <em class="job-position__duration">Mar. 2016 - Dec. 2017</em>
+            <em class="job-position__location">Berlin, Germany</em>
           </div>
-          <ul>
+          <ul class="tasks">
             <li>Maintained the RESTful API (used by admins and front-end).</li>
             <li>Implemented and maintained the integration with Deutsche Bank.</li>
             <li>
@@ -161,15 +161,15 @@
             <li>Implemented day to day business/marketing/technical requirements.</li>
           </ul>
         </article>
-        <article>
-          <div class="info">
-            <h2>PrioriData GmbH.</h2>
-            <em>Full Stack Developer</em>
-            <em>Berlin, Germany</em>
-            <em>Jul. 2015 - Mar. 2016</em>
+        <article class="work__experience">
+          <div class="job-position">
+            <h2 class="job-position__company">PrioriData GmbH.</h2>
+            <em class="job-position__title">Full Stack Developer</em>
+            <em class="job-position__duration">Jul. 2015 - Mar. 2016</em>
+            <em class="job-position__location">Berlin, Germany</em>
           </div>
-          <p>Was acquired by <a href="https://airnow.com/">Airnow Data Ltd.</a></p>
-          <ul>
+          <p class="note">Was acquired by <a href="https://airnow.com/">Airnow Data Ltd.</a></p>
+          <ul class="tasks">
             <li>Maintained the Rails web (dashboard) app.</li>
             <li>Optimized the scraping process of getting the data from Apple and GooglePlay stores.</li>
             <li>Reimplemented the queueing and monitoring around the scrapers.</li>
@@ -185,14 +185,14 @@
             </li>
           </ul>
         </article>
-        <article>
-          <div class="info">
-            <h2>AskNative</h2>
-            <em>Backend Developer/DevOps</em>
-            <em>Remote, Egypt</em>
-            <em>May. 2013 - Jul. 2015</em>
+        <article class="work__experience">
+          <div class="job-position">
+            <h2 class="job-position__company">AskNative</h2>
+            <em class="job-position__title">Backend Developer/DevOps</em>
+            <em class="job-position__duration">May. 2013 - Jul. 2015</em>
+            <em class="job-position__location">Remote, Egypt</em>
           </div>
-          <ul>
+          <ul class="tasks">
             <li>
               Reimplemented large portions of the API to follow better design patterns<br />
               (Hexagonal Architecture, and <abbr title="Publish-Subscribe">Pub/Sub</abbr> pattern).
diff --git a/app/print.styl b/app/print.styl
index 5e3b05e..5ce2c4d 100644
--- a/app/print.styl
+++ b/app/print.styl
@@ -17,24 +17,11 @@ body {
 @require "stylesheets/print/header.styl"
 @require "stylesheets/print/summary.styl"
 @require "stylesheets/print/skills.styl"
+@require "stylesheets/print/work.styl"
 @require "stylesheets/print/writing.styl"
 @require "stylesheets/print/projects.styl"
 @require "stylesheets/print/education.styl"
 
-.work {
-  // avoid page breaks inside a work experience section
-  article {
-    page-break-inside: avoid
-  }
-
-  article > .info {
-    // company
-    h2 {
-      margin-top: 0.8em
-    }
-  }
-}
-
 footer {
   display: block
   position: fixed
diff --git a/app/stylesheets/print/work.styl b/app/stylesheets/print/work.styl
new file mode 100644
index 0000000..17179ba
--- /dev/null
+++ b/app/stylesheets/print/work.styl
@@ -0,0 +1,30 @@
+.work {
+}
+
+.work__header {
+}
+
+.work__experience {
+  page-break-inside: avoid
+}
+
+.job-postion {
+}
+
+.job-position__company {
+}
+
+.job-position__title {
+}
+
+.job-position__duration {
+}
+
+.job-position__location {
+}
+
+.note {
+}
+
+.tasks {
+}
diff --git a/app/stylesheets/web/work.styl b/app/stylesheets/web/work.styl
new file mode 100644
index 0000000..caa127d
--- /dev/null
+++ b/app/stylesheets/web/work.styl
@@ -0,0 +1,67 @@
+.work {
+}
+
+.work__header {
+}
+
+.work__experience {
+}
+
+.job-position {
+  display: flex
+  flex-flow: row wrap
+  justify-content: space-between
+  @media screen and (max-width: 780px) {
+    flex-flow: column wrap
+  }
+}
+
+.job-position__company
+.job-position__title
+.job-position__duration
+.job-position__location {
+  min-width: 50%
+}
+
+.job-position__company {
+  order: 0
+  margin-bottom: 0
+  font-size: 1.4em
+}
+
+.job-position__title {
+  order: 2
+  @media screen and (max-width: 780px) {
+    order: 1
+  }
+}
+
+.job-position__duration {
+  order: 1
+  text-align: right
+  align-self: flex-end
+  @media screen and (max-width: 780px) {
+    order: 2
+    text-align: left
+    align-self: flex-start
+  }
+}
+
+.job-position__location {
+  order: 3
+  text-align: right
+  align-self: flex-end
+  @media screen and (max-width: 780px) {
+    text-align: left
+    align-self: flex-start
+  }
+}
+
+.note {
+  margin-top: 0.4em
+  margin-bottom: 0.4em
+}
+
+.tasks {
+  margin-top: 0.4em
+}
diff --git a/app/web.styl b/app/web.styl
index 8f62889..203ef9e 100644
--- a/app/web.styl
+++ b/app/web.styl
@@ -59,75 +59,7 @@ a:link, a:visited, a:hover, a:active {
 @require "stylesheets/web/header.styl"
 @require "stylesheets/web/summary.styl"
 @require "stylesheets/web/skills.styl"
+@require "stylesheets/web/work.styl"
 @require "stylesheets/web/writing.styl"
 @require "stylesheets/web/projects.styl"
 @require "stylesheets/web/education.styl"
-
-.work {
-  article {
-    ul {
-      margin-top: 0.4em
-    }
-
-    p {
-      margin-top: 0.4em
-      margin-bottom: 0.4em
-    }
-  }
-
-  article > .info {
-    display: flex
-    flex-flow: row wrap
-    justify-content: space-between;
-    number: 2
-
-    @media screen and (max-width: 740px) {
-      flex-flow: column wrap
-    }
-
-    // company
-    h2 {
-      order: 0
-      min-width: 50%
-      margin-top: 0.2em
-      margin-bottom: 0
-    }
-
-    // title
-    em:nth-of-type(1) {
-      order: 2
-      min-width: 50%
-
-      @media screen and (max-width: 740px) {
-        order: 1
-      }
-    }
-
-    // location
-    em:nth-of-type(2) {
-      order 1
-      min-width: 50%
-      text-align: right
-      align-self: flex-end
-
-      @media screen and (max-width: 740px) {
-        order: 2
-        text-align: left
-        align-self: flex-start
-      }
-    }
-
-    // duration
-    em:nth-of-type(3) {
-      order: 3
-      min-width: 50%
-      text-align: right
-      align-self: flex-end
-
-      @media screen and (max-width: 740px) {
-        text-align: left
-        align-self: flex-start
-      }
-    }
-  }
-}
-- 
cgit v1.2.3