personal-site/static/about.js

  const toggle = document.getElementById('toggle');
  const track  = document.getElementById('track');
  const knob   = document.getElementById('knob');
  const rays   = document.getElementById('rays');
  const stateLabel = document.getElementById('state-label');
  const themeRoot  = document.getElementById('themeRoot');

  let isDay = true;

  const RAY_COUNT = 8;
  for (let i = 0; i < RAY_COUNT; i++) {
    const r = document.createElement('div');
    r.className = 'ray';
    r.style.transform = `rotate(${i * (360/RAY_COUNT)}deg)`;
    rays.appendChild(r);
  }

  function applyState() {
    if (isDay) {
      track.className      = 'track day';
      knob.className       = 'knob day';
      toggle.setAttribute('aria-checked', 'true');
      themeRoot.classList.remove('night');
    } else {
      track.className = 'track night';
      knob.className  = 'knob night';
      toggle.setAttribute('aria-checked', 'false');
      themeRoot.classList.add('night');
    }
  }

  toggle.addEventListener('click', () => { isDay = !isDay; applyState(); });
  toggle.addEventListener('keydown', e => {
    if (e.key === ' ' || e.key === 'Enter') { e.preventDefault(); isDay = !isDay; applyState(); }
  });

  function copyClass() {
    navigator.clipboard.writeText(classOut.textContent).catch(() => {});
  }
// just some fun.
  console.log("%c👀 hi there!", "font-size:20px")


  function draculaClick() {
    const el = document.getElementById('interest');
    if (!el) return; // el is a DOM node, never a string
    el.textContent = '🦇 interest 🦇';

    setTimeout(() => {
      el.textContent = "interest";
    }, 5000);
  }

  
  function matrixClick() {
    const sub = document.getElementById('interest-sub');
    const col = sub.color
    sub.textContent = `Do not try and bend the spoon. That's impossible. Instead... only try to realize the truth.`
    
    sub.style.color = "green"
    setTimeout(() => {
      sub.textContent = "Fav lists"
      sub.style.color = "#6b6560" 
    }, 15000);
  }


  function bladerunnerClick() {
    if (document.getElementById('rain-canvas')) return; // already running, do nothing

    const el = document.getElementById('interest');
    el.textContent = 'tears in rain';

    startRain();

    setTimeout(() => {
      el.textContent = "interest";
      stopRain();
    }, 10000);
  }

  let rainCanvas, rainCtx, rainInterval;

  function startRain() {
    rainCanvas = document.createElement('canvas');
    rainCanvas.id = 'rain-canvas';
    rainCanvas.width = window.innerWidth;
    rainCanvas.height = window.innerHeight;
    document.body.appendChild(rainCanvas);
    rainCtx = rainCanvas.getContext('2d');

    requestAnimationFrame(() => { rainCanvas.style.opacity = '1'; });

    const drops = Array.from({ length: 120 }, () => ({
      x: Math.random() * rainCanvas.width,
      y: Math.random() * rainCanvas.height,
      speed: 8 + Math.random() * 7,
      length: 12 + Math.random() * 20,
      opacity: 0.2 + Math.random() * 0.4
    }));

    rainInterval = setInterval(() => {
      rainCtx.clearRect(0, 0, rainCanvas.width, rainCanvas.height);
      drops.forEach(drop => {
        rainCtx.beginPath();
        rainCtx.moveTo(drop.x, drop.y);
        rainCtx.lineTo(drop.x - 2, drop.y + drop.length);
        rainCtx.strokeStyle = `rgba(174, 214, 241, ${drop.opacity})`;
        rainCtx.lineWidth = 3;
        rainCtx.stroke();

        drop.y += drop.speed;
        if (drop.y > rainCanvas.height) {
          drop.y = -drop.length;
          drop.x = Math.random() * rainCanvas.width;
        }
      });
    }, 30);
  }

  function stopRain() {
    if (!rainCanvas) return;
    rainCanvas.style.opacity = '0';
    setTimeout(() => {
      clearInterval(rainInterval);
      rainCanvas.remove();
      rainCanvas = null;
    }, 800);
  }

  function unhideGame() {
    const alicegameSection = document.getElementById('alice');
    const gameSection = document.getElementById('tetris');
    if (alicegameSection.style.display == 'none') {
      alicegameSection.style.display = 'block';  
    } else {
      alicegameSection.style.display = 'none';
    }
    gameSection.style.display = 'none';  
   
  }

  function unhideTetris() {
    const alicegameSection = document.getElementById('alice');
    const gameSection = document.getElementById('tetris');
    if (gameSection.style.display == 'none') {
      gameSection.style.display = 'block';  
    } else {
      gameSection.style.display = 'none';  
    }
    alicegameSection.style.display = 'none';  
  }
function dragonClick() {
  const existing = document.getElementById('dragon-grid');
  if (existing) { existing.remove(); return; }

  const grid = document.createElement('canvas');
  grid.id = 'dragon-grid';
  grid.width = window.innerWidth;
  grid.height = window.innerHeight;
  grid.style.transition = 'opacity 1s ease';
  document.body.appendChild(grid);

  const ctx = grid.getContext('2d');
  const img = new Image();
  img.src = '/static/images/dragon.png';

  img.onload = () => {
    const size = 250;
    const cols = Math.ceil(grid.width / size);
    const rows = Math.ceil(grid.height / size);

    for (let r = 0; r < rows; r++) {
      for (let c = 0; c < cols; c++) {
        ctx.drawImage(img, c * size, r * size, size, size);
      }
    }

    setTimeout(() => {
      grid.style.opacity = '0';
      setTimeout(() => grid.remove(), 1000);
    }, 300);
  };
}