diff options
| -rw-r--r-- | app/assets/index.html | 60 | ||||
| -rw-r--r-- | app/print.styl | 15 | ||||
| -rw-r--r-- | app/stylesheets/print/work.styl | 30 | ||||
| -rw-r--r-- | app/stylesheets/web/work.styl | 67 | ||||
| -rw-r--r-- | app/web.styl | 70 |
5 files changed, 129 insertions, 113 deletions
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 - } - } - } -} |