github-style/layouts/partials/user-profile.html

{{ partial "menus.html" . }}
<div class="container-xl px-3 px-md-4 px-lg-5">
  <div class="gutter-condensed gutter-lg flex-column flex-md-row d-flex">
    <div class="flex-shrink-0 col-12 col-md-3 mb-4 mb-md-0">
      <div class="h-card mt-md-n5" style="margin-top:24px">
        <div class="user-profile-sticky-bar js-user-profile-sticky-bar d-none d-md-block" id="headerStuck">
          <div class="user-profile-mini-vcard d-table">
            <span class="user-profile-mini-avatar d-table-cell v-align-middle lh-condensed-ultra pr-2">
              {{ with $.Site.Params.avatar }}
              <img class="rounded-1 avatar-user" height="32" width="32" src="{{ $.Site.Params.avatar }}">
              {{ else }}
              <img class="rounded-1 avatar-user" height="32" width="32" src="{{ "images/avatar.png" | absURL }}">
              {{ end }}
            </span>
            <span class="d-table-cell v-align-middle lh-condensed">
              <strong>{{ .Site.Params.author }}</strong>
            </span>
          </div>
        </div>
        <div class="clearfix d-flex d-md-block flex-items-center mb-4 mb-md-0">
          <div class="position-relative d-inline-block col-2 col-md-12 mr-3 mr-md-0 flex-shrink-0" style="z-index:4;">
            {{ with $.Site.Params.avatar }}
            <a href="{{ $.Site.Params.avatar }}">
              <img style="height:auto;" alt="Avatar" width="260" height="260" id="headerImg"
                class="avatar avatar-user width-full border bg-white" src="{{ $.Site.Params.avatar }}">
            </a>
            {{ else }}
            <a href="{{ "images/avatar.png" | absURL }}">
              <img style="height:auto;" alt="Avatar" width="260" height="260" id="headerImg"
                class="avatar avatar-user width-full border bg-white" src="{{ "images/avatar.png" | absURL }}">
            </a>
            {{ end }}
            {{ with $.Site.Params.userStatusEmoji }}
            <div class="user-status-container position-relative hide-sm hide-md">
              <div class="f5 user-status-circle-badge-container">
                <div class="user-status-circle-badge d-inline-block lh-condensed-ultra p-2">
                  <div class="d-flex flex-items-center flex-items-stretch">
                    <div class="f6 lh-condensed user-status-header d-inline-flex user-status-emoji-only-header circle">
                      <div class="user-status-emoji-container flex-shrink-0 mr-2 d-flex flex-items-center flex-justify-center ">
                        <div><g-emoji class="g-emoji">{{ $.Site.Params.userStatusEmoji }}</g-emoji></div>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
            {{ end }}
          </div>

          <div
            class="vcard-names-container float-left col-10 col-md-12 pt-1 pt-md-3 pb-1 pb-md-3 js-sticky js-user-profile-sticky-fields"
            data-original-top="0px" style="position: sticky;">
            <h1 class="vcard-names pl-2 pl-md-0">
              <span class="p-name vcard-fullname d-block overflow-hidden">{{ .Site.Params.author }}</span>
              {{ if .Site.Params.github }}
              <span class="p-nickname vcard-username d-block">{{ .Site.Params.github }}</span>
              {{ end }}
            </h1>
          </div>
        </div>

        <div class="p-note user-profile-bio mb-3 js-user-profile-bio f4">
          <div>{{ .Site.Params.Description }}</div>
        </div>

        <div class="d-flex flex-column">
          <div class="js-profile-editable-area d-flex flex-column d-md-block">
            <ul class="vcard-details">
              {{ if .Site.Params.location }}
              <li class="vcard-detail pt-1 css-truncate css-truncate-target hide-sm hide-md">
                <svg class="octicon octicon-location" viewBox="0 0 16 16" version="1.1" width="16" height="16">
                  <path fill-rule="evenodd"
                    d="M11.536 3.464a5 5 0 010 7.072L8 14.07l-3.536-3.535a5 5 0 117.072-7.072v.001zm1.06 8.132a6.5 6.5 0 10-9.192 0l3.535 3.536a1.5 1.5 0 002.122 0l3.535-3.536zM8 9a2 2 0 100-4 2 2 0 000 4z">
                  </path>
                </svg>
                <span class="p-label">{{ .Site.Params.location }}</span>
              </li>
              {{ end }}

              {{ if .Site.Params.email }}
              <li class="vcard-detail pt-1 css-truncate css-truncate-target ">
                <svg class="octicon octicon-mail" viewBox="0 0 16 16" version="1.1" width="16" height="16">
                  <path fill-rule="evenodd"
                    d="M1.75 2A1.75 1.75 0 000 3.75v.736a.75.75 0 000 .027v7.737C0 13.216.784 14 1.75 14h12.5A1.75 1.75 0 0016 12.25v-8.5A1.75 1.75 0 0014.25 2H1.75zM14.5 4.07v-.32a.25.25 0 00-.25-.25H1.75a.25.25 0 00-.25.25v.32L8 7.88l6.5-3.81zm-13 1.74v6.441c0 .138.112.25.25.25h12.5a.25.25 0 00.25-.25V5.809L8.38 9.397a.75.75 0 01-.76 0L1.5 5.809z">
                  </path>
                </svg>
                <a class="u-email link-gray-dark " href="mailto:{{ .Site.Params.Email }}">{{ .Site.Params.Email }}</a>
              </li>
              {{ end }}

              <li class="vcard-detail pt-1 css-truncate css-truncate-target ">
                <svg class="octicon octicon-link" viewBox="0 0 16 16" version="1.1" width="16" height="16">
                  <path fill-rule="evenodd"
                    d="M7.775 3.275a.75.75 0 001.06 1.06l1.25-1.25a2 2 0 112.83 2.83l-2.5 2.5a2 2 0 01-2.83 0 .75.75 0 00-1.06 1.06 3.5 3.5 0 004.95 0l2.5-2.5a3.5 3.5 0 00-4.95-4.95l-1.25 1.25zm-4.69 9.64a2 2 0 010-2.83l2.5-2.5a2 2 0 012.83 0 .75.75 0 001.06-1.06 3.5 3.5 0 00-4.95 0l-2.5 2.5a3.5 3.5 0 004.95 4.95l1.25-1.25a.75.75 0 00-1.06-1.06l-1.25 1.25a2 2 0 01-2.83 0z">
                  </path>
                </svg>
                {{ if .Site.Params.url }}
                <a rel="nofollow me" class="link-gray-dark" href="{{ .Site.Params.url }}">{{ .Site.Params.url }}</a>
                {{ else }}
                <a rel="nofollow me" class="link-gray-dark" href="{{ .Site.BaseURL }}">{{ .Site.BaseURL }}</a>
                {{ end }}
              </li>
            </ul>
          </div>
        </div>

        <div class="border-top color-border-secondary pt-3 mt-3 clearfix hide-sm hide-md">
          <h2 class="mb-2 h4">Organizations</h2>
          <div style="display:flex;justify-content:flex-start;flex-wrap:wrap;margin-bottom:3px;">
          {{ if .Site.Params.github}}
          <a style="margin: 0 10px 10px 0;" href="https://github.com/{{ .Site.Params.github }}">
            <svg id="github-icon" viewBox="0 0 16 16" version="1.1" width="32" height="32" fill="#24292e">
              <path fill-rule="evenodd" d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.013 8.013 0 0016 8c0-4.42-3.58-8-8-8z">
              </path>
            </svg>
          </a>
          {{ end }}

          {{ if .Site.Params.twitter}}
          <a style="margin: 0 10px 10px 0;" href="https://twitter.com/{{ .Site.Params.twitter }}">
            <svg  width="32" height="32" viewBox="0 0 1200 1227" fill="none" xmlns="http://www.w3.org/2000/svg">
              <path id="twitter-icon" d="M714.163 519.284L1160.89 0H1055.03L667.137 450.887L357.328 0H0L468.492 681.821L0 1226.37H105.866L515.491 750.218L842.672 1226.37H1200L714.137 519.284H714.163ZM569.165 687.828L521.697 619.934L144.011 79.6944H306.615L611.412 515.685L658.88 583.579L1055.08 1150.3H892.476L569.165 687.854V687.828Z" fill="white"/>
            </svg>
          </a>
          {{ end }}

          {{ if .Site.Params.facebook}}
          <a style="margin: 0 10px 10px 0;" href="https://facebook.com/{{ .Site.Params.facebook }}">
            <img alt="@facebook" width="32" height="32" src="{{ "images/facebook.png" | absURL }}" class="avatar">
          </a>
          {{ end }}

          {{ if .Site.Params.linkedin }}
          <a style="margin: 0 10px 10px 0;" href="https://linkedin.com/in/{{ .Site.Params.linkedin }}">
            <img alt="@linkedin" width="32" height="32" src="{{ "images/linkedin.png" | absURL }}" class="avatar">
          </a>
          {{ end }}

          {{ if .Site.Params.instagram }}
          <a style="margin: 0 10px 10px 0;" href="https://instagram.com/{{ .Site.Params.instagram }}">
            <img alt="@instagram" width="32" height="32" src="{{ "images/instagram.png" | absURL }}" class="avatar">
          </a>
          {{ end }}

          {{ if .Site.Params.tumblr }}
          <a style="margin: 0 10px 10px 0;" href="https://{{ .Site.Params.tumblr }}.tumblr.com/">
            <img alt="@tumblr" width="32" height="32" src="{{ "images/tumblr.png" | absURL }}" class="avatar">
          </a>
          {{ end }}

          {{ if .Site.Params.stackoverflow }}
          <a style="margin: 0 10px 10px 0;" href="https://stackoverflow.com/u/{{ .Site.Params.stackoverflow }}">
            <img alt="@stackoverflow" width="32" height="32" src="{{ "images/stackoverflow.png" | absURL }}" class="avatar">
          </a>
          {{ end }}

          {{ if .Site.Params.bluesky}}
          <a style="margin: 0 10px 10px 0;" href="https://bsky.app/profile/{{ .Site.Params.bluesky }}">
            <img alt="@bluesky" width="32" height="32" src="{{ "images/bluesky.png" | absURL }}" class="avatar">
          </a>
          {{ end }}

          {{ if .Site.Params.links }}
          {{ range .Site.Params.links }}
          {{ if .icon }}
          <a style="margin: 0 10px 10px 0;" href="{{ .href }}">
            <img alt="@{{ .title }}" width="32" height="32" src="{{ .icon }}" class="avatar">
          </a>
          {{ else }}
          <a style="margin: 0 10px 10px 0;" href="{{ .href }}">
            <img alt="@{{ .title }}" width="32" height="32" src='{{ "images/link.png" | absURL }}' class="avatar">
          </a>
          {{ end }}
          {{ end }}
          {{ end }}

          {{ if .Site.Params.rss }}
          <a style="margin: 0 10px 10px 0;" href="{{ "index.xml" | absURL }}">
            <img alt="@rss" width="32" height="32" src="{{ "images/rss.png" | absURL }}" class="avatar">
          </a>
          {{ end }}
         </div>
        </div>
      </div>
    </div>

    <div class="flex-shrink-0 col-12 col-md-9 mb-4 mb-md-0">
      {{ partial "mobile-menus.html" . }}
      {{ if .IsHome }}
      {{ block "overview" . }}{{ end }}
      {{ else }}
      {{ block "posts" . }}{{ end }}
      {{ end }}
    </div>
  </div>
</div>
<script>
window.onscroll = function (e) {
  const headerImg = document.querySelector('#headerImg');
  const headerStuck = document.querySelector('#headerStuck');
  if (headerImg.getBoundingClientRect().bottom <= 0) {
    headerStuck.classList.add('is-stuck');
    if (window.innerWidth >= 1280) {
      headerStuck.setAttribute('style', 'top: 12px;')
    } else {
      headerStuck.setAttribute('style', 'top: 0;')
    }
  } else {
    headerStuck.classList.remove('is-stuck');
  }
};

var style = localStorage.getItem('data-color-mode')
githubIconElement = document.getElementById('github-icon')
twitterIconElement = document.getElementById('twitter-icon')
if (style == 'light') {
  if (githubIconElement) githubIconElement.setAttribute('fill', '#24292e')
  if (twitterIconElement) twitterIconElement.setAttribute('fill', 'black')
}
else {
  if (githubIconElement) {
    githubIconElement.removeAttribute('fill')
    githubIconElement.setAttribute('class', 'octicon')
    githubIconElement.setAttribute('color', '#f0f6fc')
  }
  if (twitterIconElement)  twitterIconElement.setAttribute('fill', 'white') 
}
</script>