index-vanta.html

<!doctype html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>Takuya Matsuyama - Links</title>
    <link rel="stylesheet" href="./index.css" />
    <script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r121/three.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/vanta@latest/dist/vanta.halo.min.js"></script>
    <script>
    window.addEventListener('DOMContentLoaded', () => {
      VANTA.HALO({
        el: "#vanta",
        mouseControls: true,
        touchControls: true,
        gyroControls: false,
        minHeight: 200.00,
        minWidth: 200.00,
        scale: 1.00,
        scaleMobile: 1.00
      })
    })
    </script>
  </head>
  <body>
    <div id="vanta"></div>
    <main>
      <header>
        <img src="./images/takuya.jpg" />
        <h1>@craftzdog</h1>
      </header>
      <ul>
        <li>
          <a href="https://www.craftz.dog/">
            <img src="./images/homepage.svg" alt="Homepage" width="20" />
            Official Website
          </a>
        </li>
        <li>
          <a href="https://www.youtube.com/playlist?list=UU7yZ6keOGsvERMp2HaEbbXQ&index=1&playnext=1">
            <img src="./images/youtube.svg" alt="YouTube" width="20" />
            YouTube
          </a>
        </li>
        <li>
          <a href="https://twitter.com/inkdrop_app">
            <img src="./images/twitter.svg" alt="Twitter" width="20" />
            Twitter
          </a>
        </li>
        <li>
          <a href="https://github.com/craftzdog">
            <img src="./images/github.svg" alt="GitHub" width="20" />
            GitHub
          </a>
        </li>
      </ul>
    </main>
  </body>
</html>