---
title: Badge
permalink: /badge/

img:
  src: /assets/images/avatar.jpeg
  alt: A picture of me.
---

<!DOCTYPE html>
<html class="" lang="en">
  <head>
    {% include default_head_tags.html %}
    <style>

header {
    display: flex;
    height: 100vh;
    justify-content: unset;
    font-size: min(3vw, 3vh);
}

.pic-name-text {
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    height: 60vh;
    padding: 1rem;
}

.pic-name {
    display: flex;
    gap: 1em;
    margin-bottom: 1em;
}

.card-container {
    height: 30vh;
}

p {
    font-size: 1rem;
}

.pic {
    border-radius: 50%;
    padding: 5px;
    border: 1px solid var(--theme-text-color);
    transition: border-color var(--night-mode-fade-time) ease-in-out;
    width: 40vw;
    height: 40vw;
  }

img.qr {
    --dimension: calc(0.6 * min(50vw, 100vh));
    width: var(--dimension);
    height: var(--dimension);
    z-index: 1;
}

header h1 {
    font-size: 3rem;
    margin:0;
}

.professional-links {
    margin-bottom: 10vh;
}

.light-dark-toggle {
    position: absolute;
    top: 0px;
    left: 100%;
    padding-top: 0px;
    transform: translate(calc(-100% - 0.5em), 0.5em);
}

.card {
    padding: 20px;
    position: relative;
    display: inline-flex;
    place-content: center;
    place-items: center;
    overflow: hidden;
    border-radius: 25px;
  }
  
  .card::before {
    content: '';
    position: absolute;
    width: 30%;
    background: var(--theme-highlight-color);
    height: 150%;
    animation: rotBGimg 7s linear infinite;
    transition: all 0.2s linear;
  }
  
  @keyframes rotBGimg {
    from {
      transform: rotate(0deg);
    }
  
    to {
      transform: rotate(360deg);
    }
  }
  
  .card::after {
    content: '';
    position: absolute;
    background: var(--theme-bg-color);
    ;
    inset: 10px;
    border-radius: 15px;
  }  

  #mastospan {
    text-wrap: nowrap;
  }

  svg#svg1826 {
    display: inline;
  }

  @media (orientation: landscape) {
    header {
      flex-direction: row;
    }
    .card-container {
        width: 50vw;
    }

    .pic-name-text {
        width: 50vw;
        height: 100vh;
    }

    .pic-name {
        align-items: center;
    }
    .pic {
        --dimension: calc(0.6 * min(50vw, 100vh));
        width: var(--dimension);
        height: var(--dimension);
    }
  }
  
  
    </style>
  </head>
  <body class = "">
    <header class="h-card">
    <div class="pic-name-text">
      <div class="pic-name">
        <img
          src="/assets/images/avatar.jpeg"
          class="u-photo pic"
          alt="A picture of me."
          height="175"
          width="175"
        />
        <a class="p-name u-url u-uid" href="{{ site.url }}"
          ><h1>Tom Hodson</h1></a
        >
      </div>
      <p class="p-note bio">
        <span>Maker, Baker</span>
        <span>Programmer</span>
        <span><a href="/thesis">Reformed&nbsp;Physicist</a></span>
        <span><a href="https://ecmwf.int">RSE@ECMWF</a> </span>
      </p>
      <!-- <h2>Links</h2> -->
      <p class="professional-links">
        <a href="https://github.com/TomHodson" rel="me authn" class="u-url"
          >@TomHodson {% include icons/github.svg %}</a
        >
        <a href="https://tech.lgbt/@Tomhodson" rel="me" class="u-url"
          ><span id="mastospan">tech.lgbt/@Tomhodson</span> {% include icons/mastodon.svg %}</a
        >
        </p>
      </div>
      </div>

      <div class="card-container">
      <a href = "/">
      <div class = "card">
        <img
        src="/assets/badge/qr.svg"
        class="qr invertable"
        alt="A QR code pointing to this page"
        height="175"
        width="175"
      />
      </div>
      </a>
      </div>


    <div class="light-dark-toggle">
        <div role="status" class="visually-hidden js-mode-status"></div>
        <button class="toggle-button js-mode-toggle" aria-label="Night Mode Toggle">
          <span class="toggle-button__icon" aria-hidden="true"></span>
        </button>
      </div>
    </header>
  </body>
</html>