<!DOCTYPE html>

<html lang="en">
  <head>
    <title>{{ title }}</title>

    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=JetBrains+Mono:ital,wght@0,100;1,100&display=swap" rel="stylesheet">

    <link rel="stylesheet" href="/styles/index.css">

    <script src="/static/floater.js" defer></script>
  </head>

  <body>
    <div class="background">
      <div class="fixtures">
        <img class="fixture-photo floater" src="/static/fixture.png" alt="Ayrton Diablo S">
      </div>
      <div class="beams">
        <img class="fixture-beam floater" src="/static/beam.png" alt="Beam of Ayrton Diablo S">
      </div>
    </div>
    <div class="front-page">
      <div class="title-card">
        <h1>Koen de Ruiter</h1>
        <h2>Hobby Developer</h2>
        <h2>Lighting Designer</h2>

        <div class="title-card__links">
          <a class="title-card__link" href="https://github.com/KoenDR06" target="_blank"><img class="title-card__image" src="/static/github.svg" alt="GitHub"></a>
          <a class="title-card__link" href="https://www.linkedin.com/in/koen-de-ruiter-20a9a2343/" target="_blank"><img class="title-card__image" src="/static/linkedin.svg" alt="LinkedIn"></a>
        </div>
      </div>
    </div>

    <main>
      {{ content }}
    </main>
  </body>
</html>
