<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>ivuorinen.net</title>
  <link href="https://fonts.bunny.net/css?family=bungee-inline:400|bungee-outline:400" rel="stylesheet">
  <style>
    html,
    body {
      margin: 0;
      padding: 0;
      overflow-y: hidden;
    }

    canvas {
      z-index: 1;
    }

    #icons {
      z-index: 999;
      position: fixed;
      margin: 65vh auto 5%;
      left: 0;
      right: 0;
      text-align: center;
    }

    #icons svg {
      width: 50px;
      height: 50px;
      padding: 1rem;
      fill: #fff !important;
    }
  </style>
  <script>
    document.addEventListener("DOMContentLoaded", () => {
      /** Source: https://codepen.io/knyttneve/pen/eXNbKo */
      const canvas = document.querySelector("canvas");
      const ctx = canvas.getContext("2d");
      const colors = [
        "#b4b2b5",
        "#dfd73f",
        "#6ed2dc",
        "#66cf5d",
        "#c542cb",
        "#d0535e",
        "#3733c9"
      ];
      let rAF;

      const bgtext = 'ivuorinen';
      const fronttext = 'developer / designer';

      canvas.width = innerWidth;
      canvas.height = innerHeight;

      function texts(color) {
        ctx.font = "8vh Bungee Outline";
        ctx.shadowBlur = 30;
        ctx.shadowColor = color;
        ctx.fillStyle = color;
        ctx.setTransform(1, -0.15, 0, 1, 0, -10);
        ctx.fillText(bgtext, innerWidth / 2, innerHeight / 2 - 5);

        ctx.fillStyle = "white";
        ctx.shadowBlur = 30;
        ctx.shadowColor = color;
        ctx.fillText(bgtext, innerWidth / 2, innerHeight / 2);

        ctx.font = "6vh Bungee Inline";
        ctx.shadowBlur = 30;
        ctx.shadowColor = color;
        ctx.fillStyle = "#fff";
        ctx.setTransform(1, -0.15, 0, 1, 0, -10);
        ctx.fillText(
          fronttext,
          innerWidth / 2,
          innerHeight / 2 + innerHeight / 10
        );

        ctx.textAlign = "center";
        ctx.textBaseline = "middle";
      }

      function glitch() {
        rAF = window.requestAnimationFrame(glitch);

        ctx.fillStyle = "#1a191c";
        ctx.fillRect(0, 0, innerWidth, innerHeight);

        texts(colors[Math.floor(Math.random() * 7)]);
        ctx.shadowBlur = 0;
        ctx.shadowColor = "none";
        ctx.setTransform(1, 0, 0, 1, 0, 0);

        for (let i = 0; i < 3000; i++) {
          ctx.fillStyle = `rgba(255, 255, 255, ${Math.random() * 0.01})`;
          ctx.fillRect(
            Math.floor(Math.random() * innerWidth),
            Math.floor(Math.random() * innerHeight),
            Math.floor(Math.random() * 30) + 1,
            Math.floor(Math.random() * 30) + 1
          );

          ctx.fillStyle = `rgba(0,0,0,${Math.random() * 0.1})`;
          ctx.fillRect(
            Math.floor(Math.random() * innerWidth),
            Math.floor(Math.random() * innerHeight),
            Math.floor(Math.random() * 25) + 1,
            Math.floor(Math.random() * 25) + 1
          );
        }

        ctx.fillStyle = colors[Math.floor(Math.random() * 40)];
        ctx.fillRect(
          Math.random() * innerWidth,
          Math.random() * innerHeight,
          Math.random() * innerWidth,
          Math.random() * innerHeight
        );
        ctx.setTransform(1, 0, 0, .8, .2, 0);
      }

      glitch();

      window.addEventListener('resize', () => {
        canvas.width = innerWidth;
        canvas.height = innerHeight;
      });

    });
  </script>
</head>

<body>
  <div id="icons">
    <a href="https://github.com/ivuorinen" title="GitHub profile of ivuorinen" target="_blank">
      <svg xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="xMidYMid" viewBox="0 0 256 250">
        <path
          d="M128.00106 0C57.3172926 0 0 57.3066942 0 128.00106c0 56.554221 36.6761997 104.534482 87.534937 121.459839 6.3970853 1.18488 8.745651-2.776734 8.745651-6.157566 0-3.052288-.1187002-13.135434-.173811-23.831157-35.6100185 7.743059-43.1241563-15.102464-43.1241563-15.102464-5.8226623-14.795114-14.2122127-18.729174-14.2122127-18.729174-11.6135295-7.944425.8754126-7.781213.8754126-7.781213 12.8535213.902968 19.6215444 13.190545 19.6215444 13.190545 11.4164025 19.568553 29.9442103 13.911223 37.2485035 10.640612 1.148847-8.27297 4.4660905-13.919702 8.1267145-17.116125-28.430784-3.236697-58.317764-14.212213-58.317764-63.258655 0-13.974813 5.0002398-25.3933338 13.1884247-34.3573083-1.3290169-3.2239785-5.7103208-16.2428317 1.2399917-33.8740301 0 0 10.7487147-3.4401823 35.2094058 13.1205959 10.2103258-2.8360835 21.1604058-4.2583646 32.0384188-4.3071163 10.878013.0487517 21.836572 1.4710328 32.065973 4.3071163 24.431017-16.5607782 35.164893-13.1205959 35.164893-13.1205959 6.967271 17.6311984 2.583847 30.6500516 1.25483 33.8740301 8.207262 8.9639745 13.173587 20.3824953 13.173587 34.3573083 0 49.163023-29.94421 59.988045-58.447062 63.156912 4.591149 3.972214 8.682061 11.761904 8.682061 23.703979 0 17.126724-.148374 30.910768-.148374 35.12674 0 3.406268 2.304052 7.397557 8.792282 6.140608C219.370432 232.499507 256 184.536204 256 128.00106 256 57.3066942 198.691187 0 128.00106 0ZM47.9405593 182.340212c-.2819128.635893-1.2823848.826661-2.1938316.390015-.9284042-.417571-1.4498363-1.284505-1.1488469-1.922517.2755536-.654971 1.2781452-.83726 2.2044295-.398494.9305239.41757 1.4604348 1.292983 1.138249 1.930996Zm6.2962299 5.618042c-.6104574.565945-1.8038169.303109-2.613521-.59138-.8372594-.89237-.9941129-2.08573-.375177-2.660154.6295342-.565945 1.78686-.300989 2.626239.591381.837259.902968 1.0004717 2.087849.362459 2.660153Zm4.3194521 7.188093c-.7842681.544749-2.0666527.033914-2.8593996-1.104334-.7842684-1.138249-.7842684-2.5033.0169573-3.050168.7948661-.546868 2.0581742-.05511 2.8615191 1.07466.7821488 1.157325.7821488 2.522375-.0190768 3.079842Zm7.3051179 8.324827c-.7016021.773672-2.1959509.565946-3.2896875-.489636-1.1191718-1.032268-1.4307595-2.496942-.7270376-3.270612.7100805-.775789 2.2129081-.557466 3.315123.489638 1.1106935 1.030148 1.4498365 2.50542.7016021 3.27061Zm9.4411559 2.810368c-.3094677 1.002592-1.7487061 1.458315-3.1985427 1.032267-1.4477168-.438766-2.3951976-1.613048-2.1026867-2.626238.3009893-1.00895 1.7465864-1.483751 3.2070212-1.028028 1.4455972.436647 2.3951979 1.602451 2.0942082 2.621999Zm10.7444319 1.192085c.0360336 1.055582-1.1933599 1.930995-2.7152641 1.950073-1.5303829.033914-2.7682549-.820302-2.7852121-1.858928 0-1.066181 1.201838-1.933115 2.7322209-1.958551 1.5219045-.029675 2.7682553.818182 2.7682553 1.867406Zm10.5552001-.404604c.1822895 1.030148-.875413 2.087849-2.3867191 2.369762-1.4858703.271314-2.8615194-.364579-3.0501677-1.386247-.1844088-1.055583.8923703-2.113285 2.376121-2.386718 1.5134257-.262836 2.8678783.356099 3.0607658 1.403203Z" />
      </svg>
    </a>
    <a href="https://linkedin.com/in/ivuorinen/" title="LinkedIn profile of ivuorinen" target="_blank">
      <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 33 32">
        <path
          d="M-.16 3.872q0-1.6 1.12-2.64T3.872.192q1.76 0 2.848 1.024 1.12 1.056 1.12 2.752 0 1.536-1.088 2.56-1.12 1.056-2.944 1.056h-.032q-1.76 0-2.848-1.056T-.16 3.872zm.416 28V10.496H7.36v21.376H.256zm11.04 0H18.4V19.936q0-1.12.256-1.728.448-1.088 1.36-1.84t2.288-.752q3.584 0 3.584 4.832v11.424h7.104V19.616q0-4.736-2.24-7.184t-5.92-2.448q-4.128 0-6.432 3.552v.064h-.032l.032-.064v-3.04h-7.104q.064 1.024.064 6.368t-.064 15.008z" />
      </svg>

    </a>

  </div>
  <canvas></canvas>

</body>

</html>
