diff options
Diffstat (limited to 'app')
| -rw-r--r-- | app/assets/index.html | 45 | ||||
| -rw-r--r-- | app/base.styl | 46 | ||||
| -rw-r--r-- | app/media.styl | 14 | ||||
| -rw-r--r-- | app/print.styl | 21 | ||||
| -rw-r--r-- | app/stylesheets/print/header.styl | 24 | ||||
| -rw-r--r-- | app/stylesheets/web/header.styl | 36 |
6 files changed, 105 insertions, 81 deletions
diff --git a/app/assets/index.html b/app/assets/index.html index c15476b..47ea414 100644 --- a/app/assets/index.html +++ b/app/assets/index.html @@ -23,20 +23,28 @@ <body> <main> - <header> - <h1>Ahmed AbdelHalim</h1> - <em>Senior Software Developer · DevOps</em> - <address> - <div class="loc">Berlin, Germany</div> - <div class="tel"><a href="tel:+491770126386">+49 (0)177 912 6386</a> · </div> - <div class="email"><a href="mailto:[email protected]">[email protected]</a> · </div> - <div class="web"><a href="https://a14m.me">website</a> · </div> - <div class="srht"><a href="https://git.sr.ht/~a14m">sr.ht</a> · </div> - <div class="github"><a href="https://github.com/a14m">Github</a> · </div> - <div class="stkflw"> + <header class="header"> + <h1 class="header__name">Ahmed AbdelHalim</h1> + <em class="header__job-title">Senior Software Developer · DevOps</em> + <address class="header__contact-info"> + <div class="header__contact-info__location">Berlin, Germany</div> + <div class="header__contact-info__tel"> + <a href="tel:+491770126386">+49 (0)177 912 6386</a> · + </div> + <div class="header__contact-info__email"> + <a href="mailto:[email protected]">[email protected]</a> · + </div> + <div class="header__contact-info__website"><a href="https://a14m.me">website</a> · </div> + <div class="header__contact-info__srht"> + <a href="https://git.sr.ht/~a14m">sr.ht</a> · + </div> + <div class="header__contact-info__github"> + <a href="https://github.com/a14m">Github</a> · + </div> + <div class="header__contact-info__stackoverflow"> <a href="https://stackoverflow.com/users/1769515/a14m">StackOverflow</a> · </div> - <div class="lnkdin"><a href="https://www.linkedin.com/in/a14m">LinkedIn</a></div> + <div class="header__contact-info__linkedin"><a href="https://www.linkedin.com/in/a14m">LinkedIn</a></div> </address> </header> @@ -44,11 +52,10 @@ <h1>Summary</h1> <p> Current senior backend and infrastructure developer at <a href="https://sapera.com">Sapera GmbH</a>, with 9+ - years experience in development (backend/API focused), 4+ years in infrastructure automation and DevOps, - 0+ years Security analysis and Red Team exploit testing. - An avid fan of automation, sustainability, design patterns, and clean code. Always interested in deriving a - better problem-solving method for challenging tasks, and learning sensible new technologies and tools (if the - need arises). + years experience in development (backend/API focused), 4+ years in infrastructure automation and DevOps, 0+ + years Security analysis and Red Team exploit testing. An avid fan of automation, sustainability, design + patterns, and clean code. Always interested in deriving a better problem-solving method for challenging tasks, + and learning sensible new technologies and tools (if the need arises). </p> </article> <article class="skills"> @@ -173,8 +180,8 @@ </li> <li> Reimplemented the “Extract” step in the - <abbr title="Extract, Transform, Load">ETL</abbr> process (using an API based crawler instead of - phantomJS browser). + <abbr title="Extract, Transform, Load">ETL</abbr> process (using an API based crawler instead of phantomJS + browser). </li> </ul> </article> diff --git a/app/base.styl b/app/base.styl index f6edae9..31b12d7 100644 --- a/app/base.styl +++ b/app/base.styl @@ -1,25 +1,11 @@ secondaryColor = #DB0A16 -@media (prefers-color-scheme: dark) { - html { - color: #FFFFFF - background-color: #181818 - } -} - -@media (prefers-color-scheme: light) { - html { - color: #000000 - background-color: #FFFFFF - } -} - body { font-family: "PT Sans", Arial, sans-serif max-width: 1024px min-width: 375px - margin: 0 auto !important - float: none !important + margin: 0 auto + float: none } main { @@ -34,33 +20,7 @@ a:link, a:visited, a:hover, a:active { border-bottom: 1px solid secondaryColor } -// Header section styling -header { - text-align: center - line-height: 1.3 - font-style: normal - - // Name - h1 { - font-size: 3rem - margin-bottom: 0 - } - - // Position - em { - font-style: inherit - } - - // Address/Contacts - address { - font-style: inherit - - div { display: inline } - .loc { display: block } - .tel { display: none } - .web { display: none } - } -} +@require "stylesheets/web/header.styl" article { h1 { diff --git a/app/media.styl b/app/media.styl new file mode 100644 index 0000000..0f8eb63 --- /dev/null +++ b/app/media.styl @@ -0,0 +1,14 @@ +@media (prefers-color-scheme: dark) { + html { + color: #FFFFFF + background-color: #181818 + } +} + +@media (prefers-color-scheme: light) { + html { + color: #000000 + background-color: #FFFFFF + } +} + diff --git a/app/print.styl b/app/print.styl index c28d6f4..043e442 100644 --- a/app/print.styl +++ b/app/print.styl @@ -1,32 +1,15 @@ @page { margin-left: 1cm margin-right: 1cm - margin-top: 1.5cm + margin-top: 1cm margin-bottom: 0.3cm } body { - margin-left: 0 - margin-right: 0 font-size: 9pt } -// Header section styling -header { - - // Name - h1 { - font-size: 27pt - margin-top: 0.2em - margin-bottom: 0 - } - - // Address/Contacts - address { - .tel { display: inline } - .web { display: inline } - } -} +@require "stylesheets/print/header.styl" article { h1 { diff --git a/app/stylesheets/print/header.styl b/app/stylesheets/print/header.styl new file mode 100644 index 0000000..e7a97d3 --- /dev/null +++ b/app/stylesheets/print/header.styl @@ -0,0 +1,24 @@ +.header { +} + +.header__name { +} + +.header__job-title { +} + +.header__contact-info { +} + +.header__contact-info__location { +} + +.header__contact-info__tel, +.header__contact-info__website, +.header__contact-info__email, +.header__contact-info__srht, +.header__contact-info__github, +.header__contact-info__stackoverflow, +.header__contact-info__linkedin { + display: inline +} diff --git a/app/stylesheets/web/header.styl b/app/stylesheets/web/header.styl new file mode 100644 index 0000000..147c9e3 --- /dev/null +++ b/app/stylesheets/web/header.styl @@ -0,0 +1,36 @@ +.header { + text-align: center + font-style: normal +} + +.header__name { + font-size: 3.3em + margin-bottom: 0.1em +} + +.header__job-title { + font-style: italic +} + +.header__contact-info { + font-style: normal +} + +.header__contact-info__location { + display: block + font-style: italic + margin-bottom: 1em +} + +.header__contact-info__tel, +.header__contact-info__website { + display: none +} + +.header__contact-info__email, +.header__contact-info__srht, +.header__contact-info__github, +.header__contact-info__stackoverflow, +.header__contact-info__linkedin { + display: inline +} |