diff options
Diffstat (limited to 'app')
| -rw-r--r-- | app/assets/index.html | 38 | ||||
| -rw-r--r-- | app/base.styl | 27 | ||||
| -rw-r--r-- | app/media.styl | 10 | ||||
| -rw-r--r-- | app/print.styl | 20 | ||||
| -rw-r--r-- | app/stylesheets/print/skills.styl | 13 | ||||
| -rw-r--r-- | app/stylesheets/web/skills.styl | 24 |
6 files changed, 70 insertions, 62 deletions
diff --git a/app/assets/index.html b/app/assets/index.html index a8a633c..871a859 100644 --- a/app/assets/index.html +++ b/app/assets/index.html @@ -60,43 +60,43 @@ </article> <article class="skills"> <h1 class="skills__header section-header">Skills</h1> - <dl> - <dt>DevOps</dt> - <dd>Ansible, Terraform, Docker, Vagrant, Makefile, certbot.</dd> + <dl class="skills__content"> + <dt class="skills__content__title">DevOps</dt> + <dd class="skills__content__items">Ansible, Terraform, Docker, Vagrant, Makefile, certbot.</dd> - <dt>Back-end</dt> - <dd>Ruby on Rails, PostgreSQL, Redis, MongoDB, MySQL, Django.</dd> + <dt class="skills__content__title">Back-end</dt> + <dd class="skills__content__items">Ruby on Rails, PostgreSQL, Redis, MongoDB, MySQL, Django.</dd> - <dt>Front-end</dt> - <dd>ReactJS, HTML5, Next.js, StimulusJS, TypeScript.</dd> + <dt class="skills__content__title">Front-end</dt> + <dd class="skills__content__items">ReactJS, HTML5, Next.js, StimulusJS, TypeScript.</dd> - <dt>Programming</dt> - <dd>Ruby, Python, Bash, TypeScript, Rust.</dd> + <dt class="skills__content__title">Programming</dt> + <dd class="skills__content__items">Ruby, Python, Bash, TypeScript, Rust.</dd> - <dt>Paradigms</dt> - <dd> + <dt class="skills__content__title">Paradigms</dt> + <dd class="skills__content__items"> Design Patterns, Test Driven Development (<abbr>TDD</abbr>), Behavior Driven Development (<abbr>BDD</abbr>), Continuous Integration and Delivery (<abbr>CI/CD</abbr>), RESTful APIs. </dd> - <dt>Tools</dt> - <dd> + <dt class="skills__content__title">Tools</dt> + <dd class="skills__content__items"> Vim, Git, tmux, ssh, Asana, Atlassian, CircleCI, TravisCI, Terminal, bash, Notion, Sidekiq, ... </dd> - <dt>Security</dt> - <dd> + <dt class="skills__content__title">Security</dt> + <dd class="skills__content__items"> nc, nmap, curl, ffuf, gobuster, sqlmap, xxd, searchsploit, meta-sploit, commix, gdb, ltrace, ... </dd> - <dt>Platforms</dt> - <dd> + <dt class="skills__content__title">Platforms</dt> + <dd class="skills__content__items"> Amazon Web Services (<abbr>AWS</abbr>), DigitalOcean, Heroku, Google Cloud Platform (<abbr>GCP</abbr>), Ubuntu/CentOS/ParrotOS Linux. </dd> - <dt>Languages</dt> - <dd>English (Professional), German (Basic), Arabic (Native).</dd> + <dt class="skills__content__title">Languages</dt> + <dd class="skills__content__items">English (Professional), German (Basic), Arabic (Native).</dd> </dl> </article> diff --git a/app/base.styl b/app/base.styl index b135591..88894c5 100644 --- a/app/base.styl +++ b/app/base.styl @@ -44,32 +44,7 @@ a:link, a:visited, a:hover, a:active { @require "stylesheets/web/header.styl" @require "stylesheets/web/summary.styl" - -.skills { - dl { - display: flex - flex-flow: row wrap - } - - dt { - min-width: 15% - font-weight: 900 - text-align: right - @media screen and (max-width: 740px) { - text-align: left - } - } - - dd { - width: 80% - margin-left: 30px - margin-bottom: 0.1em - @media screen and (max-width: 740px) { - margin-bottom: 1em - width: 100% - } - } -} +@require "stylesheets/web/skills.styl" .work { article { diff --git a/app/media.styl b/app/media.styl index 0f8eb63..82e4a85 100644 --- a/app/media.styl +++ b/app/media.styl @@ -12,3 +12,13 @@ } } +@media screen and (max-width: 780px) { + .skills__content__title { + text-align: left + } + + .skills__content__items { + margin-bottom: 1em + width: 100% + } +} diff --git a/app/print.styl b/app/print.styl index 86c20b8..8642f61 100644 --- a/app/print.styl +++ b/app/print.styl @@ -1,6 +1,6 @@ @page { - padding-left: 1cm - padding-right: 1cm + margin-left: 1cm + margin-right: 1cm padding-top: 1cm padding-bottom: 0.3cm } @@ -16,21 +16,7 @@ body { @require "stylesheets/print/header.styl" @require "stylesheets/print/summary.styl" - -.skills { - dl { - margin-top: 1.5em - } - dt { - min-width: 12% - } - - dd { - width: 80% - margin-left: 20px - margin-bottom: 0 - } -} +@require "stylesheets/print/skills.styl" .work { // avoid page breaks inside a work experience section diff --git a/app/stylesheets/print/skills.styl b/app/stylesheets/print/skills.styl new file mode 100644 index 0000000..63c04d6 --- /dev/null +++ b/app/stylesheets/print/skills.styl @@ -0,0 +1,13 @@ +.skills__content { + margin-top: 1.5em +} + +.skills__content__title { + min-width: 12% + margin-left: 15px +} + +.skills__content__items { + margin-bottom: 0.1em + margin-left: 15px +} diff --git a/app/stylesheets/web/skills.styl b/app/stylesheets/web/skills.styl new file mode 100644 index 0000000..9432b96 --- /dev/null +++ b/app/stylesheets/web/skills.styl @@ -0,0 +1,24 @@ +.skills { +} + +.skills__header { +} + +.skills__content { + display: flex + flex-flow: row wrap + +} + +.skills__content__title { + min-width: 14% + text-align: right + font-weight: 900 +} + +.skills__content__items { + width: 80% + margin-bottom: 0.1em + margin-left: 25px +} + |