<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Ragesh Krishna</title>
  <meta name="description" content="Ragesh Krishna — something new is in the works.">
  <meta name="robots" content="noindex">
  <link rel="icon" href="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Crect width='100' height='100' rx='22' fill='%23150b2e'/%3E%3Ctext x='50' y='70' font-family='Georgia,serif' font-size='62' font-weight='700' fill='%23c4b5fd' text-anchor='middle'%3ER%3C/text%3E%3C/svg%3E">
  <link rel="preconnect" href="https://fonts.googleapis.com">
  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
  <link href="https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@500;600;700&family=Inter:wght@400;500&display=swap" rel="stylesheet">
  <style>
    :root {
      --fg: #f1edff;
      --muted: #a79fce;
      --accent: #a855f7;
      --line: rgba(196,181,253,.14);
    }
    * { box-sizing: border-box; }
    html, body { height: 100%; margin: 0; }
    body {
      background: radial-gradient(120% 120% at 50% 0%, #1a0b32 0%, #100726 45%, #07060f 100%);
      color: var(--fg);
      font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
      min-height: 100svh;
      display: flex;
      align-items: center;
      justify-content: center;
      padding: 2rem;
      text-align: center;
      overflow: hidden;
      -webkit-font-smoothing: antialiased;
    }
    #bg {
      position: fixed;
      inset: 0;
      width: 100%;
      height: 100%;
      z-index: 0;
      display: block;
      pointer-events: none; /* decorative only — let clicks/context-menu pass through */
    }
    /* soft vignette so edges fall off and centre text stays legible */
    .vignette {
      position: fixed; inset: 0; z-index: 1; pointer-events: none;
      background: radial-gradient(70% 60% at 50% 50%, transparent 40%, rgba(7,6,15,.55) 100%);
    }
    main {
      position: relative;
      z-index: 2;
      max-width: 36rem;
    }
    .mark {
      width: 60px; height: 60px;
      border-radius: 16px;
      background: linear-gradient(140deg, #6d28d9, #3b82f6);
      display: grid; place-items: center;
      font-family: "Space Grotesk", serif;
      font-size: 2.05rem; font-weight: 700;
      color: #fff;
      margin: 0 auto 2.2rem;
      box-shadow: 0 10px 40px rgba(124,58,237,.45), inset 0 1px 0 rgba(255,255,255,.25);
    }
    h1 {
      font-family: "Space Grotesk", sans-serif;
      font-size: clamp(2.2rem, 7vw, 3.4rem);
      font-weight: 600;
      letter-spacing: -0.025em;
      line-height: 1.05;
      margin: 0 0 .7rem;
      background: linear-gradient(100deg, #e9e3ff 0%, #c4b5fd 40%, #93c5fd 100%);
      -webkit-background-clip: text;
      background-clip: text;
      color: transparent;
    }
    p.tagline {
      font-size: clamp(1.05rem, 3vw, 1.3rem);
      font-weight: 400;
      color: var(--muted);
      margin: 0 0 2.8rem;
    }
    .archive {
      display: inline-flex;
      align-items: center;
      gap: .55rem;
      font-size: .95rem;
      font-weight: 500;
      color: #d6cffb;
      text-decoration: none;
      padding: .62rem 1.1rem;
      border: 1px solid var(--line);
      border-radius: 999px;
      background: rgba(168,85,247,.06);
      backdrop-filter: blur(6px);
      transition: border-color .25s ease, color .25s ease, background .25s ease;
    }
    .archive:hover {
      color: #fff;
      border-color: rgba(168,85,247,.6);
      background: rgba(168,85,247,.14);
    }
    .archive .arrow { color: var(--accent); transition: transform .25s ease; }
    .archive:hover .arrow { transform: translateX(4px); }
    footer {
      position: fixed; bottom: 1.5rem; left: 0; right: 0;
      z-index: 2;
      font-size: .8rem; color: rgba(167,159,206,.6);
    }
  </style>
</head>
<body>
  <canvas id="bg" aria-hidden="true"></canvas>
  <div class="vignette" aria-hidden="true"></div>

  <main>
    <div class="mark">R</div>
    <h1>Ragesh Krishna</h1>
    <p class="tagline">Something new is in the works.</p>
    <a class="archive" href="https://old.rageshkrishna.com/">
      Looking for the old blog? It&rsquo;s archived here <span class="arrow" aria-hidden="true">&rarr;</span>
    </a>
  </main>

  <footer>&copy; Ragesh Krishna</footer>

  <script>
    (function () {
      var canvas = document.getElementById('bg');
      var ctx = canvas.getContext('2d');
      var w, h, dpr;

      function resize() {
        dpr = Math.min(window.devicePixelRatio || 1, 2);
        w = window.innerWidth;
        h = window.innerHeight;
        canvas.width = w * dpr;
        canvas.height = h * dpr;
        ctx.setTransform(dpr, 0, 0, dpr, 0, 0);
      }
      window.addEventListener('resize', resize);
      resize();

      // dark blues -> indigo -> violet -> purple
      var colors = ['#1d4ed8', '#3b82f6', '#4f46e5', '#6d28d9', '#7c3aed', '#8b5cf6', '#a855f7'];
      var LINES = 26;
      var reduce = window.matchMedia('(prefers-reduced-motion: reduce)').matches;

      function draw(t) {
        ctx.clearRect(0, 0, w, h);
        ctx.globalCompositeOperation = 'lighter';
        ctx.lineWidth = 1.25;
        var time = t * 0.00018;

        for (var i = 0; i < LINES; i++) {
          var p = i / (LINES - 1);
          // spread the band of strings across the viewport, denser/taller in the middle
          var baseY = h * 0.5 + (p - 0.5) * h * 0.62;
          var amp = 26 + 64 * Math.sin(p * Math.PI);
          var freq = 0.0032 + 0.0014 * Math.sin(i * 0.7);
          var phase = time * (1 + i * 0.045) + i * 0.55;

          ctx.beginPath();
          for (var x = 0; x <= w; x += 6) {
            var y = baseY
              + Math.sin(x * freq + phase) * amp
              + Math.sin(x * freq * 0.5 - phase * 0.7) * amp * 0.42
              + Math.sin(x * freq * 2.1 + phase * 0.4) * amp * 0.12;
            if (x === 0) ctx.moveTo(x, y); else ctx.lineTo(x, y);
          }
          ctx.strokeStyle = colors[i % colors.length];
          ctx.globalAlpha = 0.10 + 0.06 * Math.sin(p * Math.PI);
          ctx.stroke();
        }
      }

      if (reduce) {
        draw(9000); // single static frame
      } else {
        (function loop(t) { draw(t); requestAnimationFrame(loop); })(0);
      }
    })();
  </script>
</body>
</html>
