<!DOCTYPE html>
<html lang="{{ lang }}">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>{{ title }}</title>

  <meta charset="UTF-8">
  <meta name="last-modified" content="{{ last_modified_at }}">
  <meta name="theme-color" media="(prefers-color-scheme: light)" content="#f7f7f7">
  <meta name="theme-color" media="(prefers-color-scheme: dark)" content="#1b1b1e">
  <meta name="apple-mobile-web-app-capable" content="yes">
  <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">
  <meta
    name="viewport"
    content="width=device-width, user-scalable=no initial-scale=1, shrink-to-fit=no, viewport-fit=cover"
  >

  <meta property="og:title" content="{{ title }}" />
  <meta name="author" content="{{ name }}" />
  <meta property="og:locale" content="en" />
  <meta name="description" content="{{ tagline }}" />
  <meta property="og:description" content="{{ tagline }}" />
  <meta property="og:site_name" content="{{ title }}" />
  <meta property="og:image" content="{{ avatar }}" />
  <meta property="og:type" content="article" />
  <meta name="twitter:card" content="summary_large_image" />
  <meta property="twitter:image" content="{{ avatar }}" />
  <meta property="twitter:title" content="{{ title }}" />

  <link rel="apple-touch-icon" sizes="180x180" href="./images/favicons/apple-touch-icon.png">
  <link rel="icon" type="image/png" sizes="32x32" href="./images/favicons/favicon-32x32.png">
  <link rel="icon" type="image/png" sizes="16x16" href="./images/favicons/favicon-16x16.png">
  <link rel="manifest" href="./images/favicons/site.webmanifest">
  <link rel="shortcut icon" href="./images/favicons/favicon.ico">
  <meta name="apple-mobile-web-app-title" content="{{ title }}">
  <meta name="application-name" content="{{ title }}">
  <meta name="msapplication-TileColor" content="#da532c">
  <meta name="msapplication-config" content="./images/favicons/browserconfig.xml">
  <meta name="theme-color" content="#ffffff">


  <link rel="stylesheet" href="./styles.css" />
</head>
<body>
  <div class="container">
    <div class="profile">
      <img src="{{ avatar }}" alt="Profile Picture" class="profile-pic" />
      <h1 class="name">{{ name }}</h1>
      <p class="description">{{ tagline }}</p>
    </div>

    <div class="links">
      {% for item in links %}
        {% assign link = item.link %}
        <a href="{{ link.url }}" target="{{ link.target }}" class="link-button" alt="{{ link.alt }}" title="{{ link.title }}">
          <i class="{{ link.icon }}"></i> {{ link.text }}
        </a>
      {% endfor %}
    </div>

    <div class="button-container">
      <div class="button-group">
        {% for item in socials %}
          {% assign social = item.social %}
          <a href="{{ social.url }}" title="{{ social.title }}" target="{{ social.target }}" class="icon-button" alt="{{ social.alt }}">
            <i class="{{ social.icon }}"></i>
          </a>
        {% endfor %}
      </div>
    </div>

    <footer class="footer">
      {{ footer }}
      <div class="copyright">{{ copyright }}</div>
    </footer>
  </div>
  <script src="fontawesome/js/all.js" data-auto-replace-svg="nest"></script>
  {% if google_analytics_id %}
    <!-- Google tag (gtag.js) -->
    <script async src="https://www.googletagmanager.com/gtag/js?id=G-S7G4LWWHH8"></script>
    <script>
      window.dataLayer = window.dataLayer || [];
      function gtag(){dataLayer.push(arguments);}
      gtag('js', new Date());

      gtag('config', 'G-S7G4LWWHH8');
    </script>
  {% endif %}
  <script src="./scripts.js"></script>
</body>
</html>
