port-ui/index.html

<html>
  <header>
    <title>Kevin Veen-Birkenbach - Consulting and Coaching Services</title>
    <meta charset="utf-8" >
    <link rel="icon" href="logo_100x100.png" type="image/x-icon">
    <!-- Bootstrap CSS only -->
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-Zenh87qX5JnK2Jl0vWa8Ck2rdkQ2Bzep5IDxbcnCeuOxjzrPF/et3URy9Bv1WTRi" crossorigin="anonymous">
    <!-- Bootstrap JavaScript Bundle with Popper -->
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-OERcA2EqjJCMA+/3y+gxIOqMEjwtxJY7qPCqsdltbNJuaOe923+mo//f6V8Qbsw3" crossorigin="anonymous"></script>
    <!-- Bootstrap Icons -->
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.9.1/font/bootstrap-icons.css">
    <!-- Fontawesome -->
    <script src="https://kit.fontawesome.com/56f96da298.js" crossorigin="anonymous"></script>
    <style>
      a {
        text-decoration: none;
        color: #000000;
      }
      .header img {
        float: right;
        width: 100px;
        height: 100px;
      }

      .header h1 {
        position: relative;
      }
      .equal-height {
        display: flex;
        flex: 1;
      }
      
      .card {
        flex: 1; /* Stellt sicher, dass die Karten die ganze Höhe ihrer Container ausfüllen */
      }
    </style>
  </header>
  <body>
    <div class="container">
      <div class="header">
        <img src="logo_100x100.png" alt="logo"/>
        <h1>Kevin Veen-Birkenbach</h1>
        <h2>Consulting and Coaching Services</h2>
        <p></p>
      </div>
      <div class="row">
        <div class="col equal-height">
          <div class="card h-100 d-flex flex-column">
            <div class="card-body d-flex flex-column">
              <div class="card-img-top">
                <i class="fa-solid fa-users fa-10x"></i>
              </div>
              <hr />
              <h3 class="card-title">Agile Coach</h3>
              <p class="card-text">Facilitating agile transformations and improving team dynamics through Scrum Master support, conflict mediation, and DevOps integration.</p>
              <ul>
                <li>Scrum Mastering</li>
                <li>Agile Coaching</li>
                <li>Conflict Resolution</li>
                <li>Agile Methodologies</li>
                <li>Continuous Improvement</li>
                <li>Stress Management</li>
                <li>Team Building</li>
              </ul>              
              <hr />
              <a href="https://www.agile-coach.world" class="mt-auto btn btn-light stretched-link"><i class="fa-solid fa-globe"></i> www.agile-coach.world</a>
            </div>
          </div>
        </div>
        <div class="col equal-height">
          <div class="card h-100 d-flex flex-column">
            <div class="card-body d-flex flex-column">
              <div class="card-img-top">
                <i class="fa-solid fa-user fa-10x"></i>
              </div>
              <hr />
              <h3 class="card-title">Personal Coach</h3>
              <p class="card-text">Interdisciplinary coaching for individuals and institutions</p>
              <hr />
              <a href="https://www.coachandconsult.world" class="mt-auto btn btn-light stretched-link"><i class="fa-solid fa-globe"></i> www.coachandconsult.world</a>
            </div>
          </div>
        </div>
        <div class="col equal-height">
          <div class="card h-100 d-flex flex-column">
            <div class="card-body d-flex flex-column">
              <div class="card-img-top">
                <i class="fa-solid fa-sailboat fa-10x"></i>
              </div>
              <hr />
              <h3 class="card-title">Yachtmaster</h3>
              <p class="card-text">I coach you how to sail, plan passages and navigate your sailing veciles</p>
              <hr />
              <a href="https://www.yachtmaster.world" class="mt-auto btn btn-light stretched-link"><i class="fa-solid fa-globe"></i> www.yachtmaster.world</a>
            </div>
          </div>
        </div>
        <div class="col equal-height">
          <div class="card h-100 d-flex flex-column">
            <div class="card-body d-flex flex-column">
              <div class="card-img-top">
                <i class="fa-solid fa-computer fa-10x"></i>
              </div>
              <hr />
              <h3 class="card-title">IT Consultant</h3>
              <p class="card-text">Interdisciplinary coaching for individuals and institutions</p>
              <hr />
              <a href="https://www.mittelstand.world" class="mt-auto btn btn-light stretched-link"><i class="fa-solid fa-globe"></i> www.mittelstand.world</a>
            </div>
          </div>
        </div>
      </div>
      <p></p>
      <div class="row">
        <div class="col">
          <h3>I'm on:</h3>
          <ul class="list-group list-group-flush">
            <li class="list-group-item">
              <a rel="me" href="https://github.com/kevinveenbirkenbach">
                <i class="bi bi-github"></i>
                github.com
              </a>
            </li>
            <li class="list-group-item">
              <a rel="me" href="https://www.instagram.com/kevinveenbirkenbach/">
                <i class="fa-brands fa-instagram"></i>
                instagram.com
              </a>
            </li>
            <li class="list-group-item">
              <a rel="me" href="https://www.xing.com/profile/Kevin_VeenBirkenbach">
                <i class="bi bi-building"></i>
                xing.com
              </a>
            </li>
            <li class="list-group-item">
              <a rel="me" href="https://www.linkedin.com/in/kevinveenbirkenbach">
                <i class="bi bi-linkedin"></i>
                linkedin.com
              </a>
            </li>
            <li class="list-group-item">
              <a rel="me" href="https://www.duolingo.com/profile/kevinbirkenbach">
                <i class="fa-solid fa-language"></i> duolingo
              </a>
            </li>
            <li class="list-group-item">
              <a rel="me" href="https://www.facebook.com/kevinveenbirkenbach">
                <i class="fa-brands fa-facebook"></i> facebook
              </a>
            </li>
          <ul>
        </div>
        <div class="col">
          <h3>I host:</h3>
          <ul class="list-group list-group-flush">
            <li class="list-group-item">
              <a rel="me" href="https://cloud.veen.world/u/kevinveenbirkenbach" class="link">
                <i class="fa-solid fa-link"></i>
                cloud.veen.world
              </a>
            </li>
            <li class="list-group-item">
              <a rel="me" href="https://git.veen.world/kevinveenbirkenbach" class="link">
                <i class="fa-solid fa-link"></i>
                git.veen.world
              </a>
            </li>
            <li class="list-group-item">
              <a rel="me" href="https://blog.veen.world">
                <i class="fa-solid fa-link"></i>
                blog.veen.world
              </a>
            </li>
            <li class="list-group-item">
              <a rel="me" href="https://mastodon.veen.world/@kevinveenbirkenbach">
                <i class="fa-solid fa-link"></i>
                mastodon.veen.world
              </a>
            </li>
            <li class="list-group-item">
              <a rel="me" href="https://pixelfed.veen.world/kevinveenbirkenbach">
                <i class="fa-solid fa-link"></i>
                pixelfed.veen.world
              </a>
            </li>
            <li class="list-group-item">
              <a rel="me" href="https://peertube.veen.world/a/kevinveenbirkenbach">
                <i class="fa-solid fa-link"></i>
                peertube.veen.world
              </a>
            </li>
          <ul>
        </div>
        <div class="col">
          <h3>Contact</h3>
          <div itemscope itemtype="http://schema.org/LocalBusiness">
            <p itemprop="name">Kevin Veen-Birkenbach <br/> Beratungs- und Coachingdienstleistungen</p>
            <p itemprop="address">Afrikanische Straße 43<br>DE-13351 Berlin<br>Germany</p>
            <p>Phone: <span itemprop="telephone"><a href="tel:+491781798023">+491781798023</a></span><br>
            Email: <span itemprop="email"><a href="mailto:kevin@veen.world">kevin@veen.world</a></span><br>
            PGP-Key: <a href="https://s.veen.world/pgp">s.veen.world/pgp</a></p>
            <a href="imprint.html">
              <i class="fa-solid fa-link"></i>
              imprint
            </a>
          </div>
        </div>
      </div>
    </div>
  </body>
</html>