Website/_includes/header.html

<span class="mobile btn-mobile-menu">
  <i class="fas fa-bars btn-mobile-menu__icon"></i>
  <i class="far fa-times-circle btn-mobile-close__icon hidden"></i>
</span>

<header class="panel-cover" style="background-image: url({{ site.baseurl }}{{ site.bkimage }})">
  <div class="panel-main">

    <div class="panel-main__inner panel-inverted">
   <div class="panel-main__content">
  <a href="{{ site.baseurl }}/" title="link to home of {{ site.title }}">
    <div class="user-images">
      <img src="{{ site.baseurl }}{{ site.profilepic }}" class="user-image" alt="My Profile Photo">
    <div class="user-divider"></div>
      <img src="{{ site.baseurl }}{{ site.secondprofilepic }}" class="user-image" alt="Second Profile Photo">
    </div>
    <h1 class="panel-cover__title panel-title">{{ site.title }}</h1>
  </a>
  <hr class="panel-cover__divider">
  <p class="panel-cover__description">
    PhD-Student in Chemistry Didactics, 3D-Artist, Musician, Game Developer
  </p>
  <hr class="panel-cover__divider panel-cover__divider--secondary">
</div>

        <div class="navigation-wrapper">

          <nav class="cover-navigation navigation--social">
            <ul class="navigation">

              <!-- https://mastodon.social/@tzuehlke@mstdn.social -->
            {% if site.author.mastodon %}
              <!-- Mastodon -->
              <li class="navigation__item">
                <a href="https://mastodon.social/@{{ site.author.mastodon }}" title="@{{ site.author.mastodon }} on Mastodon" target="_blank">
                  <i class="fa-brands fa-mastodon"></i>
                  <span class="label">Mastodon</span>
                </a>
              </li>
            {% endif %}

            {% if site.author.twitter_username %}
              <!-- Twitter -->
              <li class="navigation__item">
                <a href="https://twitter.com/{{ site.author.twitter_username }}" title="@{{ site.author.twitter_username }} on Twitter" target="_blank">
                  <!--<i class="icon icon-social-twitter"></i>-->
                  <i class="fa-brands fa-twitter"></i>
                  <span class="label">Twitter</span>
                </a>
              </li>
            {% endif %}

            {% if site.author.facebook_username %}
              <!-- Facebook -->
              <li class="navigation__item">
                <a href="http://fb.me/{{ site.author.facebook_username }}" title="{{ site.author.facebook_username }} on Facebook" target="_blank">
                  <!--<i class="icon icon-social-facebook"></i>-->
                  <i class="fa-brands fa-facebook"></i>
                  <span class="label">Facebook</span>
                </a>
              </li>
            {% endif %}

            {% if site.author.linkedin_username %}
              <!-- LinkedIn -->
              <li class="navigation__item">
                <a href="https://www.linkedin.com/in/{{ site.author.linkedin_username }}" title="{{ site.author.linkedin_username }} on LinkedIn" target="_blank">
                  <!--<i class="icon icon-social-linkedin"></i>-->
                  <i class="fa-brands fa-linkedin"></i>
                  <span class="label">LinkedIn</span>
                </a>
              </li>
            {% endif %}

            {% if site.author.github_username %}
              <!-- GitHub -->
              <li class="navigation__item">
                <a href="https://www.github.com/{{ site.author.github_username }}" title="{{ site.author.github_username }} on GitHub" target="_blank">
                  <!--<i class="icon icon-social-github"></i>-->
                  <i class="fa-brands fa-github"></i>
                  <span class="label">GitHub</span>
                </a>
              </li>
            {% endif %}

            {% if site.author.meetup_name %}
            <!-- Meetup -->
            <li class="navigation__item">
              <a href="https://www.meetup.com/{{ site.author.meetup_name }}" title="Meetup {{ site.author.meetup_name }}" target="_blank">
                <!--<div style="font-size: 1.4rem;"><i class="fab fa-meetup fa-lg"></i></div>-->
                <i class="fa-brands fa-meetup"></i>
                <span class="label">Meetup</span>
              </a>
            </li>
            {% endif %}

            {% if site.author.email %}
              <!-- Email -->
              <li class="navigation__item">
                <a href="mailto:{{ site.author.email }}" title="Email {{ site.author.email }}" target="_blank">
                  <!--<i class="icon icon-mail"></i>-->
                  <i class="fa-solid fa-envelope"></i>
                  <span class="label">Email</span>
                </a>
              </li>
            {% endif %}

            </ul>
          </nav>
          
          <!--<nav class="cover-navigation cover-navigation--primary">-->
          <nav class="cover-navigation navigation--social">
            <ul class="navigation">
              <li class="navigation__item"><a href="https://blog.zuehlke.cloud" title="link to Blog"><i class="fa-solid fa-link"></i>&nbsp;Blog</a></li>
              <!--<li class="navigation__item"><a href="{{ site.baseurl }}/#" title="link to Tweets" class="panel-button"><i class="icon icon-social-twitter"></i>&nbsp;Tweets</a></li>-->
              <li class="navigation__item"><a href="{{ site.baseurl }}/#projects" title="List of Projects" class="panel-button projects-button"><i class="fa-solid fa-file-code"></i>&nbsp;Projects</a></li>
              <li class="navigation__item"><a href="{{ site.baseurl }}/#projects" title="List of Projects" class="panel-button projects-button"><i class="fa-solid fa-file-code"></i>&nbsp;Art</a></li>
              <li class="navigation__item"><a href="/gallery" title="List of Projects" class="panel-button projects-button"><i class="fa-solid fa-file-code"></i>&nbsp;arts™</a></li>
            </ul>
          </nav>

        </div>

      </div>

    </div>

    <div class="panel-cover--overlay"></div>
  </div>
</header>