<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <script src="/js/jquery.js"></script>
    <link rel="stylesheet" href="/css/style.css">
    <link rel="icon" type="image/svg" href="/img/colormatic_logo.svg">
    <title>Colormatic - Zakarya</title>

    <script>
$(document).ready(function(){
  $("#navbar").load("/component/navbar.html")
})
$(document).ready(function(){
  $("#footer").load("/component/footer.html")
})
    </script>
  </head>
  <body>

    <div id="particle-container"></div>
    <script src="/js/bg.js"></script>
    <header class="container" id="navbar"></header>

    <main>
      <img class="banner" src="/img/zakarya-banner.png">

      <div class="hero container">
        <h1>Links:</h1>
        <ul class="linktree">
          <li><a href="https://mstdn.party/@zakarya" target="_blank" rel="noopener noreferrer">Mastodon</a></li>
          <li><a href="https://ko-fi.com/zakarya" target="_blank" rel="noopener noreferrer">Ko-fi</a></li>
          <li><a href="https://www.youtube.com/@czakarya" target="_blank" rel="noopener noreferrer">Youtube</a></li>
          <li><a href="https://github.com/CZakarya" target="_blank" rel="noopener noreferrer">GitHub</a></li>
          <!--<li><a href="https://www.reddit.com/user/CZakarya/" target="_blank" rel="noopener noreferrer">Reddit</a></li>-->
        </ul>
      </div>

      <div class="hero container">
        <h1>Featured Videos:</h1>
        <ul class="videolist">
          <li><a href="/video?c=zakarya&v=the-way-forward">
            <img src="/zakarya/videos/thumbnail/wayforward.png">
            <span class="title">The Way Forward</span>
          </a></li>
          <li><a href="/video?c=zakarya&v=hello-world">
            <img src="/zakarya/videos/thumbnail/helloworld.png">
            <span class="title">Hello World</span>
          </a></li>
        </ul>
      </div>
    </main>

    <div style="margin-top: 10%;"></div><!-- Separator -->
    <footer id="footer"></footer>
  </body>
</html>