<footer class=“site-footer”>

<div class="wrapper">
  <ul class="footer-contact-list">
  {% if site.github_username %}
    <li>
      <a href="https://github.com/{{ site.github_username }}" target="_blank" rel="noopener">
        <i class="fa fa-github-alt"></i><span>Github</span>
      </a>
    </li>
  {% endif %}
  {% if site.stackoverflow_username %}
    <li>
      <a href="https://stackoverflow.com/users/{{ site.stackoverflow_username }}" target="_blank" rel="noopener">
        <i class="fa fa-stack-overflow"></i><span>Stack Overflow</span>
      </a>
    </li>
  {% endif %}
  {% if site.stackexchange_username %}
    <li>
      <a href="https://stackexchange.com/users/{{ site.stackexchange_username }}?tab=accounts" target="_blank" rel="noopener">
        <i class="fa fa-stack-exchange"></i><span>Stack Exchange</span>
      </a>
    </li>
  {% endif %}
  {% if site.medium_username %}
    <li>
      <a href="https://medium.com/@{{ site.medium_username }}" target="_blank" rel="noopener">
        <i class="fa fa-medium"></i><span>Medium</span>
      </a>
    </li>
  {% endif %}
  {% if site.linkedin_username %}
    <li>
      <a href="https://linkedin.com/in/{{ site.linkedin_username }}" target="_blank" rel="noopener">
        <i class="fa fa-linkedin-square"></i><span>Linkedin</span>
      </a>
    </li>
  {% endif %}
  {% if site.twitter_username %}
    <li>
      <a href="https://twitter.com/{{ site.twitter_username }}" target="_blank" rel="noopener">
        <i class="fa fa-twitter"></i><span>Twitter</span>
      </a>
    </li>
  {% endif %}

  {% if site.facebook_username %}
    <li>
      <a href="https://facebook.com/{{ site.facebook_username }}" target="_blank" rel="noopener">
        <i class="fa fa-facebook"></i><span>Facebook</span>
      </a>
    </li>
  {% endif %}
  {% if site.googleplus_username %}
    <li>
      <a href="https://plus.google.com/{{ site.googleplus_username }}" target="_blank" rel="noopener">
        <i class="fa fa-google-plus-square"></i><span>Google+</span>
      </a>
    </li>
  {% endif %}
  {% if site.codepen_username %}
    <li>
      <a href="https://codepen.io/{{ site.codepen_username }}/" target="_blank" rel="noopener">
        <i class="fa fa-codepen"></i><span>Codepen</span>
      </a>
    </li>
  {% endif %}
  {% if site.angellist_username %}
    <li>
      <a href="https://angel.co/{{ site.angellist_username }}" target="_blank" rel="noopener">
        <i class="fa fa-angellist"></i><span>AngelList</span>
      </a>
    </li>
  {% endif %}
  {% if site.youtube_username %}
    <li>
      <a href="https://youtube.com/user/{{ site.youtube_username }}" target="_blank" rel="noopener">
        <i class="fa fa-youtube-play"></i><span>Youtube</span>
      </a>
    </li>
  {% endif %}
  {% if site.dribbble_username %}
    <li>
      <a href="https://dribbble.com/{{ site.dribbble_username }}" target="_blank" rel="noopener">
        <i class="fa fa-dribbble"></i><span>Dribbble</span>
      </a>
    </li>
  {% endif %}
  {% if site.bitbucket_username %}
    <li>
      <a href="https://bitbucket.org/{{ site.bitbucket_username }}/" target="_blank" rel="noopener">
        <i class="fa fa-bitbucket"></i><span>Bitbucket</span>
      </a>
    </li>
  {% endif %}

  {% if site.email %}
    <li>
      <a href="mailto:{{ site.email }}?subject={{ site.email-subject-line }}">
        <i class="fa fa-envelope"></i><span>Email Me</span>
      </a>
    </li>
  {% endif %}
  </ul>
</div>

</footer>