<a id=“about-link” style=“font-size: 2rem; position: fixed; right: 20px; z-index: 3; transition: transform 0.1s linear; bottom: 20px; color: #444”>{% if site.bio.img_url %}<img class=“avatar” style=“box-shadow: -1px 2px 2px 0 rgba(20, 20, 20, .5); max-height: 50px; border-radius: 50%;” src=“{{site.bio.img_url}}”/>{% else %}{% include bio.svg %}{% endif %}</a>

<div id=“info” style=“height: 100vh; width: 500px; max-width: 100%; transform: translateX(535px); transition: transform 0.2s cubic-bezier(0.445, 0.05, 0.55, 0.95); background: white; position: fixed; top: 0; right: 0; box-shadow: 2px 2px 4px 1px rgba(20, 20, 20, .5);”>

<div class="container" style="max-width: 85%">
  <h1 style="margin-bottom: 1rem;">{{site.bio.heading}}</h1>
  <h5 style="margin: 0">{{site.bio.subheading}}</h5>
  <p style="line-height: 1.7;">{{site.bio.body}}</p>
</div>

</div>

<script type=“text/javascript”>

const link = document.getElementById('about-link');
const infoPanel = document.getElementById('info');
const main = document.getElementsByTagName('main')[0];
link.onclick = () => {
  link.classList.toggle('open');
  if (link.classList.contains('open')) {
    infoPanel.style.transform = 'translateX(0)';
    link.style.transform = 'rotate(180deg)';
  } else {
    infoPanel.style.transform = 'translateX(535px)';
    link.style.transform = 'rotate(0)';
  }
}

if (!link.classList.contains('open')){
  main.onclick = () => {
    infoPanel.style.transform = 'translateX(535px)';
    link.classList.toggle('open');
    link.style.transform = 'rotate(0)';
  }
}

function animateBioLink() {

let lastScrollTop = 0;
if (window.innerWidth <= 950) {
  window.onscroll = () => {
    let currentScrollTop = window.scrollY || document.body.scrollTop;
    if (currentScrollTop > lastScrollTop) {
      //console.log('Moving on down!');
          link.style.transform = 'translateY(200px)';

      } else {
      //console.log('Moving on up!');
          link.style.transform = 'translateY(0)';
    }
    lastScrollTop = currentScrollTop;
  }
}

}

{% if site.bio.scrollAnimate %}

animateBioLink();

{% endif %}

</script>