<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Stevan's Links</title>
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/7.0.1/css/all.min.css"
    integrity="sha512-2SwdPD6INVrV/lHTZbO2nodKhrnDdJK9/kg2XD1r9uGqPo1cUbujc+IYdlYdEErWNu69gVcYgdxlmVmzTWnetw=="
    crossorigin="anonymous" referrerpolicy="no-referrer" />
  <link href="css/style.css" rel="stylesheet">
  <link rel="icon" type="image/x-icon" href="images/favicon.ico">
</head>

<body>
  <div class="image-container">
    <!-- TODO: Generate alt text dynamically??? -->
    <img class="profile-picture" src="https://github.com/StevanFreeborn.png"
      alt="A man with short brown hair, a grey hoodie, and a white t-shirt smiles at the camera. He has a white earbud in his left ear. The background is a blurred office setting with warm lighting visible through glass partitions." />
    <div class="bio">
      <h1>Stevan Freeborn</h1>
      <p>I'm a {{ .Age }}-year old dad of 2 who enjoys drinking coffee, lifting weights, and solving problems with code.
      </p>
    </div>
  </div>
  <nav class="links-container">
    <ul>
      {{ range .Links }}
      <li>
        <a class="link" href="{{ .Href }}">
          <i class="{{ .Icon }}"></i>
          <span>{{ .Text }}</span>
        </a>
      </li>
      {{ end }}
    </ul>
  </nav>

</body>

</html>
