index.html

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Benjamin Graham Goodhart</title>
<meta name="description" content="Benjamin Graham Goodhart — building cool things in humanoid robots, kindness, agents, and foundational models." />
<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=Caveat:wght@400;500;600;700&family=Dancing+Script:wght@500;600;700&display=swap" rel="stylesheet" />
<link rel="stylesheet" href="style.css" />
</head>
<body>
  <a class="skip" href="#hero">Skip to content</a>

  <header class="site-header">
    <a href="#hero" class="brand">Benjamin Graham Goodhart</a>
    <nav class="nav" aria-label="Primary">
      <a href="#hero" class="active">ABOUT</a>
      <a href="mailto:benjamingoodhart@gmail.com">CONTACT</a>
    </nav>
  </header>

  <main class="layout">

    <!-- LEFT COLUMN -->
    <section class="col col-left" id="talks">
      <a class="card card-talk" href="https://www.youtube.com/watch?v=qSJBfzbOQH0" target="_blank" rel="noopener" aria-label="Watch the TEDx talk: How to Scale Kindness">
        <img src="assets/tedx_talk.png" alt="TEDx talk: How to Scale Kindness" />
        <span class="arrow" aria-hidden="true">&#8594;</span>
      </a>

      <a class="card card-news" id="writing" href="https://www.atlantajewishtimes.com/young-tech-wiz-instills-kindness-in-robots/" target="_blank" rel="noopener" aria-label="Read the article: Young Tech Wiz Instills Kindness in Robots">
        <p class="eyebrow">NEWS / EDUCATION</p>
        <h2 class="news-title">Young Tech Wiz<br>Instills Kindness<br>in Robots</h2>
        <img class="news-thumb" src="assets/news_thumb.png" alt="Graham presenting on how kindness is contagious" />
        <div class="scribble-lines" aria-hidden="true">
          <span></span><span></span><span></span><span></span>
        </div>
        <span class="arrow" aria-hidden="true">&#8594;</span>
      </a>
    </section>

    <!-- CENTER COLUMN -->
    <section class="col col-center" id="hero">
      <img class="hero-img" src="assets/hero.png" alt="Illustration of Graham holding a laptop" />
      <p class="intro">hi i'm graham, i love to build cool things, i'm interested in humanoid robots, kindness, agents, and foundational models</p>
    </section>

    <!-- RIGHT COLUMN -->
    <section class="col col-right">
      <div class="right-top">
        <a class="card card-x" href="https://x.com/grahamgoodhart" target="_blank" rel="noopener" aria-label="Graham on X (Twitter)">
          <svg class="x-logo" viewBox="0 0 24 24" aria-hidden="true"><path d="M18.244 2.25h3.308l-7.227 8.26 8.502 11.24h-6.66l-5.214-6.817L4.99 21.75H1.68l7.73-8.835L1.254 2.25H8.08l4.713 6.231zM17.083 19.77h1.833L7.084 4.126H5.117z"/></svg>
          <span class="handle">@grahamgoodhart</span>
        </a>

        <a class="card card-tedx2" href="https://www.youtube.com/watch_videos?video_ids=sI6LBouiIZo,qqdwWRDUX-0,EFmtBwegIxM,WAm0XQIRBMw,ko57YSM8mRc,4jfUq4XCNIU,08pv6WGsoWA" target="_blank" rel="noopener" aria-label="TEDx: The Best of Humanity — watch all talks from the event">
          <span class="tedx-logo">TED<sup>x</sup></span>
          <span class="tedx-sub">The Best of<br>Humanity</span>
          <span class="arrow" aria-hidden="true">&#8594;</span>
        </a>
      </div>

      <a class="card card-research" id="research" href="https://www.researchgate.net/publication/396588314_Human_Enough_to_Be_Kind" target="_blank" rel="noopener" aria-label="Research: Human Enough to Be Kind">
        <div class="research-text">
          <p class="eyebrow underlined">RESEARCH</p>
          <h2 class="research-title">Human Enough<br>to Be Kind</h2>
        </div>
        <img class="robot" src="assets/robot.png" alt="Illustration of a friendly humanoid robot" />
        <span class="arrow" aria-hidden="true">&#8594;</span>
      </a>

      <div class="card card-cornell" aria-label="Cornell University, Computer Science">
        <img class="cornell-seal" src="assets/cornell.png" alt="Cornell University seal" />
        <div class="cornell-text">
          <span class="cornell-name">Cornell University</span>
          <span class="cornell-major">Computer Science</span>
        </div>
      </div>

    </section>

  </main>

  <p class="visits" id="visits" aria-live="polite"></p>

  <script>
    // visitor counter: counts each browser once, returning visitors just read the total
    (function () {
      var base = "https://abacus.jasoncameron.dev/";
      var key = "benjamingoodhart.com/visits";
      var seen = false;
      try { seen = localStorage.getItem("counted") === "1"; } catch (e) {}
      fetch(base + (seen ? "get/" : "hit/") + key)
        .then(function (r) { return r.json(); })
        .then(function (d) {
          if (typeof d.value !== "number") return;
          try { localStorage.setItem("counted", "1"); } catch (e) {}
          if (d.value <= 100) return; // stay hidden until it passes 100
          var el = document.getElementById("visits");
          el.textContent = d.value.toLocaleString() + " visitors";
          el.classList.add("shown");
        })
        .catch(function () {});
    })();
  </script>
</body>
</html>