<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8" />
  <meta name="viewport" content="width=device-width,initial-scale=1" />
  <title>Reyn Hartono</title>
  <link rel="preconnect" href="https://fonts.googleapis.com">
  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
  <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;600;700&display=swap">
  <style>
    :root{
      --bg: #f7f7fb;
      --card: #ffffff;
      --muted: #69707a;
      --accent: #e23d4a;
      --glass: rgba(255,255,255,0.6);
      --radius: 16px;
      --shadow: 0 8px 30px rgba(15,20,25,0.08);
    }
    *{box-sizing:border-box}
    html,body{height:100%}
    body{
      margin:0;
      font-family:Inter,system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial;
      background: radial-gradient(1200px 600px at 10% 10%, #fff 0%, rgba(226,240,255,0.6) 8%, transparent 20%),
                  linear-gradient(180deg,#fdfdfd 0%, var(--bg) 100%);
      color:#0f1720;
      -webkit-font-smoothing:antialiased;
      display:flex;
      align-items:center;
      justify-content:center;
      padding:32px;
    }

    .card{
      width:100%;
      max-width:420px;
      background:var(--card);
      border-radius:var(--radius);
      padding:28px 28px 20px;
      box-shadow:var(--shadow);
      text-align:center;
      border:1px solid rgba(15,20,25,0.04);
    }

    .avatar{
      width:96px;height:96px;border-radius:999px;overflow:hidden;margin:0 auto 16px;box-shadow:0 6px 18px rgba(15,20,25,0.06);
      display:flex;align-items:center;justify-content:center;background:linear-gradient(135deg,#fff,#f0f0f4);
    }
    .avatar img{width:100%;height:100%;object-fit:cover;display:block}

    h1{margin:6px 0 6px;font-size:20px;letter-spacing:-0.2px}
    p.tag{margin:0;color:var(--muted);font-size:13px}

    .links{display:flex;flex-direction:column;gap:12px;justify-content:center;margin:20px 0 12px;flex-wrap:wrap}
    .link-btn{
      display:inline-flex;align-items:center;gap:10px;padding:9px 14px;border-radius:12px;background:linear-gradient(180deg, rgba(250,250,252,1), rgba(245,245,250,1));
      text-decoration:none;color:inherit;border:1px solid rgba(15,20,25,0.06);font-weight:600;font-size:14px;justify-content:center
    }
    .icon-only{min-width:44px;padding:9px;border-radius:10px}

    .social-row{display:flex;gap:12px;justify-content:center;margin-top:12px}
    .social-row a{width:44px;height:44px;display:inline-flex;align-items:center;justify-content:center;border-radius:10px;border:1px solid rgba(15,20,25,0.06);background:var(--glass);text-decoration:none}

    .small{font-size:12px;color:var(--muted);margin-top:16px}

    .link-btn:hover{transform:translateY(-3px)}
    .link-btn,.social-row a{transition:all 160ms ease}
    .social-row a:hover{transform:translateY(-3px);box-shadow:0 6px 18px rgba(14,30,37,0.06)}

    @media (max-width:420px){
      .link-btn{min-width:130px}
    }

    .dark body{background:linear-gradient(180deg,#071018 0%, #021018 100%)}
    .dark .card{background:#071826;color:#e6eef6;border:1px solid rgba(255,255,255,0.04)}
    .dark .small{color:rgba(230,238,246,0.7)}
    .dark .link-btn{background:linear-gradient(180deg, rgba(8,22,30,0.6), rgba(5,18,24,0.6))}
    .dark .social-row a{background:rgba(255,255,255,0.02);border:1px solid rgba(255,255,255,0.03)}

    .card{opacity:0;transform:translateY(6px);animation:enter 360ms cubic-bezier(.2,.9,.3,1) 1 forwards}
    @keyframes enter{to{opacity:1;transform:none}}
  </style>
</head>
<body>
  <main class="card" role="main">
    <div class="avatar" aria-hidden="true">
      <img src="/assets/reyn.jpeg" alt="Reyn's photo">
    </div>

    <h1>Reynaldi Hartono</h1>
    <p class="tag">Engineer • Maker • Everything-in-progress</p>

    <div class="links" aria-label="primary links">
      <a class="link-btn" href="/blog">My Blog</a>
    </div>

    <div class="social-row" aria-label="social icons">
      <a class="icon-only" href="https://www.linkedin.com/in/reynhartono/" target="_blank" rel="noopener noreferrer" aria-label="LinkedIn">
        <svg width="18" height="18" viewBox="0 0 24 24" fill="none" aria-hidden="true"><path d="M4.98 3.5C4.98 4.604 4.09 5.5 2.99 5.5 1.89 5.5 1 4.604 1 3.5 1 2.396 1.89 1.5 2.99 1.5 4.09 1.5 4.98 2.396 4.98 3.5ZM.5 8.5H5.5V23H.5zM8.5 8.5H13V10.74C13.88 9.34 15.82 8.5 18.26 8.5 22.1 8.5 23.5 11.08 23.5 15.46V23H18.5V16.36C18.5 14.03 17.42 12.9 15.58 12.9 13.74 12.9 12.98 14.14 12.5 15.16V23H8.5z" fill="currentColor"/></svg>
      </a>
      <a class="icon-only" href="https://github.com/reynhartono" target="_blank" rel="noopener noreferrer" aria-label="GitHub">
          <svg width="18" height="18" viewBox="0 0 24 24" fill="none" aria-hidden="true"><path d="M12 .5C5.73.5.5 5.73.5 12c0 5.08 3.29 9.38 7.86 10.89.58.1.79-.25.79-.56 0-.28-.01-1.02-.02-2-3.2.7-3.88-1.54-3.88-1.54-.53-1.36-1.3-1.72-1.3-1.72-1.06-.72.08-.71.08-.71 1.17.08 1.79 1.2 1.79 1.2 1.04 1.78 2.73 1.27 3.4.97.11-.75.41-1.27.75-1.56-2.56-.29-5.25-1.28-5.25-5.7 0-1.26.45-2.29 1.19-3.09-.12-.29-.52-1.46.11-3.05 0 0 .97-.31 3.18 1.18a11.07 11.07 0 0 1 2.9-.39c.98 0 1.97.13 2.9.39 2.2-1.49 3.17-1.18 3.17-1.18.64 1.59.24 2.76.12 3.05.74.8 1.19 1.83 1.19 3.09 0 4.43-2.69 5.4-5.26 5.69.42.36.8 1.08.8 2.18 0 1.58-.01 2.86-.01 3.25 0 .31.21.66.8.55C20.71 21.38 24 17.08 24 12 24 5.73 18.27.5 12 .5z" fill="currentColor"/></svg>
      </a>
      <a class="icon-only" href="mailto:me@reyn.id" aria-label="Email">
          <svg width="18" height="18" viewBox="0 0 24 24" fill="none" aria-hidden="true"><path d="M20 4H4c-1.1 0-1.99.9-1.99 2L2 18c0 1.1.89 2 1.99 2H20c1.1 0 2-.9 2-2V6c0-1.1-.9-2-2-2zm0 4-8 5-8-5V6l8 5 8-5v2z" fill="currentColor"/></svg>
      </a>
    </div>

    <p class="small">Open for opportunities — let's connect.</p>
  </main>

  <script>
    document.addEventListener('keydown', (e)=>{
      if(e.key.toLowerCase()==='d' && (e.ctrlKey||e.metaKey)){
        document.documentElement.classList.toggle('dark');
      }
    });
  </script>
</body>
</html>
