index.html

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>Nino Reiter | Senior Software Developer</title>
    <link
      href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta1/dist/css/bootstrap.min.css"
      rel="stylesheet"
      integrity="sha384-giJF6kkoqNQ00vy+HMDP7azOuL0xtbfIcaT9wjKHr8RbDVddVHyTfAAsrekwKmP1"
      crossorigin="anonymous"
    />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <style>
      body {
        background-color: #f5f4f2;
        color: #808080;
        font-family: "avenir";
        padding-top: 80px;
        padding-bottom: 50px;
      }

      h1 {
        color: #4dbdd6;
        font-weight: 900;
        font-size: 3em;
        text-align: center;
        padding: 0px;
        margin: 0px;
      }

      h2 {
        color: #808080;
        font-weight: 400;
        font-size: 2em;
        text-align: center;
        padding: 0px;
        margin: 0px;
      }

      a {
        color: #808080;
      }

      a:hover {
        color: #4dbdd6;
      }

      @media (prefers-color-scheme: dark) {
        body {
          background-color: #222;
          color: #ccc;
        }

        h1 {
          color: #00bdda;
        }

        h2 {
          color: #ccc;
        }

        h4.blue {
          color: #00bdda;
        }

        a {
          color: #ccc;
        }

        a:hover {
          color: #00bdda;
        }

        .chip.blue {
          background-color: #00bdda;
        }

        .chip.blue-faded {
        background-color: rgba(0, 189, 218, 0.5);
      }
      }

      h3 {
        font-size: 1.5em;
        font-weight: 600;
        color: #676767;
        text-align: center;
        margin-top: 1em;
        margin-bottom: 1em;
      }

      .skills-container {
        margin-top: 2em;
      }

      .chip {
        display: inline-block;
        color: #fff;
        border-radius: 3px;
        padding: 5px 10px;
        text-align: justify;
        margin-right: 10px;
        margin-bottom: 10px;
        white-space: nowrap;
      }

      .chip.meter {
        display: block;
        padding: 0px;
      }

      .chip.blue-faded {
        background-color: rgba(77, 189, 214, 0.5);
      }
      .chip.blue {
        background-color: #4dbdd6;
      }
      .chip.green {
        background-color: #84c273;
      }
      .chip.pink {
        background-color: #d34b83;
      }
      .chip.orange {
        background-color: #d6794c;
      }

      h4 {
        font-size: 1.5em;
        text-align: center;
      }

      h4.blue {
        color: #4dbdd6;
      }

      h4.green {
        color: #84c273;
      }

      h4.pink {
        color: #d34b83;
      }

      h4.orange {
        color: #d6794c;
      }
    </style>
  </head>
  <body>
    <div class="container">
      <h1>NINO REITER</h1>
      <h2>Master of Science | Computer Science</h2>
      <section>
        <h3>
          Passionate Software Developer in Germany and technology's best friend.
        </h3>
        <div class="row">
          <div class="skills-container col-md-6 col-lg-3">
            <h4 class="blue">Languages</h4>
            <div class="chip meter blue-faded">
              <div class="chip blue" style="width: 90%; margin: 0px">Swift</div>
            </div>
            <div class="chip meter blue-faded">
              <div class="chip blue" style="width: 80%; margin: 0px">
                TypeScript
              </div>
            </div>
            <div class="chip meter blue-faded">
              <div class="chip blue" style="width: 60%; margin: 0px">
                Kotlin
              </div>
            </div>
            <div class="chip meter blue-faded">
              <div class="chip blue" style="width: 70%; margin: 0px">Java</div>
            </div>
            <div class="chip meter blue-faded">
              <div class="chip blue" style="width: 75%; margin: 0px">SQL</div>
            </div>
            <div class="chip meter blue-faded">
              <div class="chip blue" style="width: 80%; margin: 0px">
                HTML | CSS | SCSS
              </div>
            </div>
          </div>
          <div class="skills-container col-md-6 col-lg-3">
            <h4 class="green">Frameworks</h4>
            <span class="chip green">iOS</span>
            <span class="chip green">UIKit</span>
            <span class="chip green">SwiftUI</span>
            <span class="chip green">RxSwift</span>
            <span class="chip green">Combine</span>
            <span class="chip green">RxCocoa</span>
            <span class="chip green">Core Location</span>
            <span class="chip green">Core Bluetooth</span>
            <span class="chip green">Push Notification</span>
            <span class="chip green">Vert.x</span>
            <span class="chip green">Vapor</span>
            <span class="chip green">RxJava</span>
            <span class="chip green">HTTP</span>
            <span class="chip green">React.js</span>
            <span class="chip green">Redux</span>
          </div>
          <div class="skills-container col-md-6 col-lg-3">
            <h4 class="pink">Tools</h4>
            <span class="chip pink">macOS</span>
            <span class="chip pink">Xcode</span>
            <span class="chip pink">Docker</span>
            <span class="chip pink">Git</span>
            <span class="chip pink">Fastlane</span>
            <span class="chip pink">GitLab CD | CD</span>
            <span class="chip pink">Jira</span>
            <span class="chip pink">Bamboo</span>
            <span class="chip pink">UNIX</span>
            <span class="chip pink">Confluence</span>
            <span class="chip pink">Shell</span>
            <span class="chip pink">SQLite</span>
            <span class="chip pink">PostgreSQL</span>
            <span class="chip pink">CocoaPods</span>
            <span class="chip pink">NPM</span>
            <span class="chip pink">TestFlight</span>
            <span class="chip pink">Swift Package Manager</span>
          </div>
          <div class="skills-container col-md-6 col-lg-3">
            <h4 class="orange">Methods</h4>
            <span class="chip orange">Clean Code</span>
            <span class="chip orange">Clean Architecture</span>
            <span class="chip orange">MVVM</span>
            <span class="chip orange">VIPER</span>
            <span class="chip orange">TDD</span>
            <span class="chip orange">BDD</span>
            <span class="chip orange">Parallel Computing</span>
            <span class="chip orange">Agile | Scrum</span>
            <span class="chip orange">CI | CD</span>
            <span class="chip orange">Unit Testing</span>
            <span class="chip orange">UI Testing</span>
            <span class="chip orange">UX Experienced</span>
            <span class="chip orange">Team Motivation</span>
          </div>
        </div>
      </section>
      <section>
        <h3>Contact</h3>
        <p style="text-align: center; margin-top: 1em">
          <a href="https://www.xing.com/profile/Nino_Reiter/"><img src="xing.svg" style="width:40px;"></a>
          <a href="https://www.linkedin.com/in/nino-reiter"><img src="linkedin.svg" style="width:40px;"></a>
        </p>
      </section>
    </div>
  </body>
</html>