
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>~tsun</title>
  <style>
    body {
      margin: 0;
      overflow: hidden;
      background-color: #111111;
      color: #8B0000;
      font-family: "Courier New", Courier, monospace;
    }
    canvas {
      position: absolute;
      top: 0;
      left: 0;
      z-index: -1;
    }
    .ascii {
      position: absolute;
      top: 35%;
      left: 50%;
      transform: translate(-50%, -50%);
      white-space: pre;
      text-align: center;
      font-size: 12px;
      color: #9BDBF5;
    }
    .text {
      position: absolute;
      top: 48%;
      left: 50%;
      transform: translate(-50%, 0);
      text-align: center;
      font-family: "Times New Roman", serif;
      font-size: 16px;
      color: #9BDBF5;
      margin-bottom: 10px;
    }
    .links {
      position: absolute;
      top: 52%;
      left: 50%;
      transform: translate(-50%, 0);
      text-align: center;
      font-family: "Times New Roman", serif;
      font-size: 16px;
      color: #9BDBF5;
    }
    .links a {
      margin: 0 10px;
      color: #9BDBF5;
      text-decoration: none;
    }
    .links a:hover {
      text-decoration: underline;
    }
    .easter-egg {
      position: fixed;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background-color: rgba(0, 0, 0, 0.8);
      display: none;
      justify-content: center;
      align-items: center;
      z-index: 1000;
    }
    .easter-egg img {
      width: 100%;
      height: auto;
      opacity: 0;
      transition: opacity 10s ease-in-out;
    }
  </style>
</head>
<body>
  <canvas id="rainCanvas"></canvas>
  <div class="ascii">
    <pre>
                                                                          
         tttt                                                             
      ttt:::t                                                             
      t:::::t                                                             
      t:::::t                                                             
ttttttt:::::ttttttt        ssssssssss   uuuuuu    uuuuuunnnn  nnnnnnnn    
t:::::::::::::::::t      ss::::::::::s  u::::u    u::::un:::nn::::::::nn  
t:::::::::::::::::t    ss:::::::::::::s u::::u    u::::un::::::::::::::nn 
tttttt:::::::tttttt    s::::::ssss:::::su::::u    u::::unn:::::::::::::::n
      t:::::t           s:::::s  ssssss u::::u    u::::u  n:::::nnnn:::::n
      t:::::t             s::::::s      u::::u    u::::u  n::::n    n::::n
      t:::::t                s::::::s   u::::u    u::::u  n::::n    n::::n
      t:::::t    ttttttssssss   s:::::s u:::::uuuu:::::u  n::::n    n::::n
      t::::::tttt:::::ts:::::ssss::::::su:::::::::::::::uun::::n    n::::n
      tt::::::::::::::ts::::::::::::::s  u:::::::::::::::un::::n    n::::n
        tt:::::::::::tt s:::::::::::ss    uu::::::::uu:::un::::n    n::::n
          ttttttttttt    sssssssssss        uuuuuuuu  uuuunnnnnn    nnnnnn
                                                                          
    </pre>
  </div>
  <div class="text">
    <span>cyber security and piracy enthusiast</span>
  </div>
  <div class="links">
    <a href="https://nyaa.si/user/Tsundere-Raws" target="_blank">nyaa</a>-
    <span>soon</span> -
    <a href="mailto:tsun@tilde.horse">mail</a>
  </div>
  <div class="easter-egg" id="easterEgg">
    <img id="easterEggGif" src="doki.gif" alt="Easter Egg">
  </div>
  <audio id="easterEggAudio" src="wow.mp3"></audio>
  <script>
    const canvas = document.getElementById('rainCanvas');
    const ctx = canvas.getContext('2d');
    canvas.width = window.innerWidth;
    canvas.height = window.innerHeight;

    const kanji = '雨雷風火水山川田木花空星月';
    const fontSize = 20;
    const columns = Math.floor(canvas.width / fontSize);
    const drops = [];

    for (let i = 0; i < columns; i++) {
      drops[i] = {
        x: i,
        y: Math.random() * canvas.height / fontSize,
        speed: Math.random() * 1.5 + 0.5
      };
    }

    function draw() {
      ctx.clearRect(0, 0, canvas.width, canvas.height);
      ctx.fillStyle = 'rgba(17, 17, 17, 0.1)';
      ctx.fillRect(0, 0, canvas.width, canvas.height);

      ctx.fillStyle = '#9BDBF5';
      ctx.font = `${fontSize}px sans-serif`;

      for (let i = 0; i < drops.length; i++) {
        const text = kanji[Math.floor(Math.random() * kanji.length)];
        ctx.fillText(text, drops[i].x * fontSize, drops[i].y * fontSize);
        drops[i].y += drops[i].speed;

        if (drops[i].y * fontSize > canvas.height) {
          drops[i].y = 0;
          drops[i].x = Math.floor(Math.random() * columns);
          drops[i].speed = Math.random() * 1.5 + 0.5;
        }
      }
    }

    setInterval(draw, 50);

    window.addEventListener('resize', () => {
      canvas.width = window.innerWidth;
      canvas.height = window.innerHeight;
      const newColumns = Math.floor(canvas.width / fontSize);
      drops.length = newColumns;
      for (let i = 0; i < newColumns; i++) {
        if (!drops[i]) {
          drops[i] = {
            x: i,
            y: Math.random() * canvas.height / fontSize,
            speed: Math.random() * 1.5 + 0.5
          };
        }
      }
    });

    const easterEggSequence = ['t', 's', 'u', 'n'];
    let currentIndex = 0;
    const audio = document.getElementById('easterEggAudio');
    const easterEggDiv = document.getElementById('easterEgg');
    const easterEggGif = document.getElementById('easterEggGif');

    document.addEventListener('keydown', (event) => {
      if (event.key === easterEggSequence[currentIndex]) {
        currentIndex++;
        if (currentIndex === easterEggSequence.length) {
          // Trigger the Easter egg
          audio.play();
          easterEggDiv.style.display = 'flex';
          setTimeout(() => {
            easterEggGif.style.opacity = '1';
          }, 100);

          // Close the webpage after 20 seconds
          setTimeout(() => {
            window.close();
          }, 20000);

          currentIndex = 0;
        }
      } else {
        currentIndex = 0;
      }
    });
  </script>
</body>
</html>
