port-ui/index.html

<html>
  <head>
    <title>Kevin Veen-Birkenbach - Consulting and Coaching Services</title>
    <meta charset="utf-8" >
    <link rel="icon" type="image/x-icon" href="favicon.ico">
    <!-- 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-body {
        display: flex;
        flex-direction: column;
        align-items: center; /* Zentriert die Inhalte horizontal */
        text-align: center; /* Zentriert den Text */
      }

      .card-icon {
        display: flex;
        justify-content: center; /* Zentriert das Icon horizontal */
      }
      
      .card-text,
      .card ul {
        text-align: left; /* Stellt sicher, dass der Text linksbündig ist */
      }

      .card{
        flex: 1; /* Stellt sicher, dass die Karten die ganze Höhe ihrer Container ausfüllen */
      }

      h3.card-title{
        font-size: 1.3em;
      }

      .card .stretched-link{
        font-size: 0.7em;
      }
    </style>
  </head>
  <body>
    <div class="container">
      <div class="header">
        <img src="512x512/logo.png" alt="logo"/>
        <h1>Kevin Veen-Birkenbach</h1>
        <h2>Consulting and Coaching Services</h2>
        <p></p>
      </div>
      <div class="row">
        <div class="col-md-6 col-lg-1 equal-height mt-2 mt-lg-0">
          <div class="card h-100 d-flex flex-column">
            <div class="card-body d-flex flex-column">
              <div class="card-img-top">
                <img src="512x512/logo_agile-coach.png" alt="Agile Coach" style="width: 100px; height: auto;"> 
              </div>
              <hr />
              <h3 class="card-title">Agile Coach</h3>
              <p class="card-text">I facilitate agile transformations, DevOps integration and improving team dynamics through Scrum Master, Release Train Engineer, Business Mediator and Agile Coach support.</p>          
              <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-md-6 col-lg-1 equal-height mt-2 mt-lg-0">
          <div class="card h-100 d-flex flex-column">
            <div class="card-body d-flex flex-column">
              <div class="card-img-top">
                <img src="512x512/logo_personal-coach.png" alt="Personal Coach" style="width: 100px; height: auto;"> 
              </div>
              <hr />
              <h3 class="card-title">Personal Coach</h3>
              <p class="card-text">I offer personal growth and professional development through customized coaching strategies, hypnotherapy, mediation, tantric and holistic improvement techniques.</p>
              <a href="https://www.personalcoach.berlin" class="mt-auto btn btn-light stretched-link"  ><i class="fa-solid fa-globe"></i> www.personalcoach.berlin</a>
            </div>
          </div>
        </div>
        <div class="col-md-6 col-lg-1 equal-height mt-2 mt-lg-0">
          <div class="card h-100 d-flex flex-column">
            <div class="card-body d-flex flex-column">
              <div class="card-img-top">
                <img src="512x512/logo_yachtmaster.png" alt="Yachtmaster" style="width: 100px; height: auto;"> 
              </div>
              <hr />
              <h3 class="card-title">Yachtmaster</h3>
              <p class="card-text">I teach and coach sailing, deliver yachts, help in planning voyages and offer services as skipper, ship chief cook, rescue swimmer and diver on yachts.</p>
              <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-md-6 col-lg-1 equal-height mt-2 mt-lg-0">
          <div class="card h-100 d-flex flex-column">
            <div class="card-body d-flex flex-column">
              <div class="card-img-top">
                <img src="512x512/logo_cross-domain-consultant.png" alt="Cross Domain Consultant" style="width: 100px; height: auto;"> 
              </div>
              <hr />
              <h3 class="card-title">Polymath</h3>
              <p class="card-text">I help people and insititutions to appraise, plan, monitor, execute and evaluate complex cross-domain projects in the land, sea, sky, cyber, information and psychological domain.</p>
              <a href="https://www.crossdomain.consulting/" class="mt-auto btn btn-light stretched-link"  ><i class="fa-solid fa-globe"></i> www.crossdomain.consulting</a>
            </div>
          </div>
        </div>
        <div class="col-md-6 col-lg-1 equal-height mt-2 mt-lg-0">
          <div class="card h-100 d-flex flex-column">
            <div class="card-body d-flex flex-column">
              <div class="card-img-top">
                <img src="512x512/logo_cybermaster.png" alt="Cyber Master" style="width: 100px; height: auto;"> 
              </div>
              <hr />
              <h3 class="card-title">Cyber Master</h3>
              <p class="card-text">I develope robust open source IT infrastructure and software solutions tailored for German SMBs, with an emphasis on automation, security, reliability, and efficient operations.</p>
              <a href="https://www.cybermaster.space" class="mt-auto btn btn-light stretched-link"  ><i class="fa-solid fa-globe"></i> www.cybermaster.space</a>
            </div>
          </div>
        </div>
      </div>
      <p></p>
      <div class="row">
        <div class="col">
          <h3>Social Media</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.facebook.com/kevinveenbirkenbach">
                <i class="fa-brands fa-facebook"></i> facebook
              </a>
            </li>
          <ul>
        </div>
        <div class="col">
          <h3>Fediverse</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-cloud"></i>
                cloud.veen.world
              </a>
            </li>
            <li class="list-group-item">
              <a rel="me" href="https://mastodon.veen.world/@kevinveenbirkenbach">
                <i class="fa-brands fa-mastodon"></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-camera"></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-video"></i>
                peertube.veen.world
              </a>
            </li>
            <li class="list-group-item">
              <a rel="me" href="https://blog.veen.world">
                <i class="fa-solid fa-blog"></i>
                blog.veen.world
              </a>
            </li>
          <ul>
        </div>
        <div class="col">
          <h3>Other</h3>
          <ul class="list-group list-group-flush">
            <li class="list-group-item">
              <a rel="me" href="https://matomo.veen.world/" class="link">
                <i class="fa-solid fa-chart-simple"></i>
                matomo.veen.world
              </a>
            </li>
            <li class="list-group-item">
              <a rel="me" href="https://baserow.veen.world/" class="link">
                <i class="fa-solid fa-table"></i>
                baserow.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-code"></i>
                git.veen.world
              </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.com
              </a>
            </li>
            <li class="list-group-item">
              <a rel="me" href="imprint.html">
                <i class="fa-solid fa-scale-balanced"></i> imprint
              </a>
            </li>
          <ul>
        </div>
        <div class="col">
          <h3>Contact</h3>
          <div itemscope itemtype="http://schema.org/LocalBusiness" class="small">
            <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>
          </div>
        </div>
      </div>
    </div>
  </body>
</html>