fevnem.github.io/biodata.html at main · fevnem/fevnem.github.io · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width,initial-scale=1">
  <title>Biodata | tri</title>
  <meta name="description" content="tri — python, go, js &amp; backend developer. Small, self-contained software, built to be read and run.">
  <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="biodata">
      <aside class="margin" aria-label="Notes">
        <p class="note"><span class="note-date">2026</span> where-you-are · unfinished-lives</p>
        <!-- One dated note per row, as the work happens. -->
        <blockquote class="pull">Small enough to read in an afternoon, whole enough to run.</blockquote>
      </aside>

      <div class="prose">
        <h1>Biodata</h1>

        <p>I am tri — <code>fevnem</code> on GitHub. I write software in small pieces and try to keep each piece whole: something you can open, understand and run to the end. Most of it starts as a question I cannot leave alone — how a satellite can tell you where you stand, how thirty-two cases can be ordered so a reader wants the next one, why a page that will not keep still is a page nobody finishes.</p>

        <p>The tools change with the problem; the shape of the work does not. Go when a thing has to stay up and stay small. The browser when the idea is the interface. Plain text, plain arithmetic, and as few moving parts as I can get away with. I am more interested in the seam where a system meets a person than in the system on its own.</p>

        <p>What follows is the chronology, then the work grouped by what it is.</p>

        <section class="chronology" aria-label="Chronology">
          <h2>Chronology</h2>
          <ol class="rows">
            <li class="row">
              <span class="year">2026</span>
              <span class="what">Shipped <strong>where-you-are</strong>, a hand-written WebGL2 explorable explanation of GPS.</span>
              <span class="where">github.com/fevnem/where-you-are</span>
            </li>
            <li class="row">
              <span class="year">2026</span>
              <span class="what">Shipped <strong>unfinished-lives</strong>, a browser narrative game told across 32 cases.</span>
              <span class="where">github.com/fevnem/unfinished-lives</span>
            </li>
            <li class="row">
              <span class="year">2026</span>
              <span class="what">Shipped <strong>github-stats</strong>, contribution stats as a live SVG.</span>
              <span class="where">github-stats-livid-three.vercel.app</span>
            </li>
            <!-- Earlier rows go above these, newest first, same shape:
                 <li class="row"><span class="year">YYYY</span><span class="what">what</span><span class="where">where</span></li> -->
          </ol>
        </section>

        <section class="builds" aria-label="What I build">
          <h2>What I build</h2>

          <div class="build-group">
            <h3>Instruments</h3>
            <ul>
              <li><strong>where-you-are</strong> — an explorable explanation of GPS: hand-written WebGL2, real orbital arithmetic, no framework.</li>
              <li><strong>unfinished-lives</strong> — a narrative game in the browser; 32 cases, read in the order curiosity takes you.</li>
            </ul>
          </div>

          <div class="build-group">
            <h3>Small tools</h3>
            <ul>
              <li><strong>github-stats</strong> — contribution stats as an SVG, served live from a VPS or Vercel.</li>
            </ul>
          </div>
        </section>

        <section class="now" aria-label="Now">
          <h2>Now</h2>
          <p class="now-date"><time datetime="2026-10">October 2026</time></p>
          <p>I am rebuilding this site as a plain notebook, and taking the GPS explainer one case further.</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>