projects.html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width,initial-scale=1">
  <title>Projects | tri</title>
  <meta name="description" content="Projects by tri — where-you-are, unfinished-lives, github-stats, and the rest of the bench.">
  <link rel="stylesheet" href="css/notebook.css">
  <link rel="icon" href="assets/favicon.svg" type="image/svg+xml">
</head>
<body>
  <a class="skip" href="#main">Skip to content</a>

  <div class="sheet">
    <main class="page" id="main" data-page="projects">
      <aside class="margin" aria-label="Notes"></aside>

      <div class="prose">
        <header class="page-head">
          <p class="kicker mono">Shipped</p>
          <h1>Projects</h1>
          <p class="lede">Things that run. Every card below links to a repo you can clone, and to the live one where there is a live one.</p>
        </header>

        <section class="cards" aria-label="Shipped projects">

          <article class="card">
            <h2 class="card-name">unfinished-lives</h2>
            <p class="card-line">A browser game about a bureaucratic afterlife — sort a stranger’s paper, mark what cannot both be true, then sign a verdict.</p>
            <p class="card-meta mono">browser ES modules<span class="sep">·</span>MIT<span class="sep">·</span><span class="status"><span class="dot" aria-hidden="true"></span>shipped</span></p>
            <ul class="card-proof mono">
              <li>32 cases</li>
              <li>100/100 per case</li>
              <li>0 lint errors</li>
            </ul>
            <p class="card-link"><a href="https://github.com/fevnem/unfinished-lives" rel="noreferrer">github.com/fevnem/unfinished-lives&nbsp;→</a></p>
          </article>

          <article class="card">
            <h2 class="card-name">where-you-are</h2>
            <p class="card-line">An explorable explanation of GPS, where the picture on screen and the number in the readout come from the same code.</p>
            <p class="card-meta mono">hand-written WebGL2<span class="sep">·</span>MIT<span class="sep">·</span><span class="status"><span class="dot" aria-hidden="true"></span>shipped</span></p>
            <ul class="card-proof mono">
              <li>9 chapters</li>
              <li>30 controls</li>
              <li>40/40 math checks</li>
            </ul>
            <p class="card-link"><a href="https://github.com/fevnem/where-you-are" rel="noreferrer">github.com/fevnem/where-you-are&nbsp;→</a></p>
          </article>

          <article class="card">
            <h2 class="card-name">github-stats</h2>
            <p class="card-line">GitHub contribution stats rendered as a live SVG — drop the URL in a README and it keeps itself current.</p>
            <p class="card-meta mono">Python<span class="sep">·</span>MIT<span class="sep">·</span><span class="status"><span class="dot" aria-hidden="true"></span>running</span></p>
            <ul class="card-proof mono">
              <li>one endpoint</li>
              <li>no config</li>
              <li>VPS or Vercel</li>
            </ul>
            <p class="card-link"><a href="https://github-stats-livid-three.vercel.app" rel="noreferrer">github-stats-livid-three.vercel.app&nbsp;→</a> <a href="https://github.com/fevnem/github-stats" rel="noreferrer">repo&nbsp;→</a></p>
          </article>

        </section>


        <section class="workshop" aria-labelledby="workshop-title">
          <h2 id="workshop-title">In the workshop</h2>
          <p>Not everything is finished, and the unfinished parts do not get a card here — a card means a repo you can run. The rest lives in the <a href="articles.html">notebook</a>: working chapters, half-solved numbers, things still being argued with. It starts with <a href="articles.html">Thirty-eight microseconds</a>, the chapter that later became <em>where-you-are</em>.</p>
        </section>
      </div>

      <nav class="tabs" aria-label="Sections">
        <a class="tab" href="index.html"      data-tab="index">Index</a>
        <a class="tab" href="biodata.html"    data-tab="biodata">Biodata</a>
        <a class="tab" href="projects.html"   data-tab="projects">Projects</a>
        <a class="tab" href="articles.html"   data-tab="articles">Articles</a>
        <a class="tab" href="uses.html"       data-tab="uses">Uses</a>
        <a class="tab" href="contact.html"    data-tab="contact">Contact</a>
        <button class="tab tab--theme" id="theme-toggle" aria-label="Switch theme">Lamp</button>
      </nav>
    </main>

    <footer class="colophon">
      <span>© 2026 tri</span>
      <a href="https://github.com/fevnem" rel="noreferrer">GitHub</a>
    </footer>
  </div>

  <script type="module" src="js/site.js"></script>
</body>
</html>