griffithee.github.io/about.html at master · griffithee/griffithee.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
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta name="referrer" content="strict-origin-when-cross-origin">
  <meta http-equiv="Content-Security-Policy" content="default-src 'self'; script-src 'self'; style-src 'self' 'unsafe-inline' https://fonts.googleapis.com; font-src https://fonts.gstatic.com; img-src 'self' data:; object-src 'none'; base-uri 'self'; frame-ancestors 'none'; form-action 'self'">
  <title>About — griffithee</title>
  <meta name="description" content="Who I am, what I'm building, and why.">
  <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=Inter:wght@400;500;600;700&family=JetBrains+Mono:wght@400;600&display=swap" rel="stylesheet">
  <link rel="stylesheet" href="css/style.css">
</head>
<body>

<nav>
  <div class="nav-inner">
    <a href="index.html" class="nav-logo">griffith<span>ee</span></a>
    <ul class="nav-links">
      <li><a href="index.html">Home</a></li>
      <li><a href="projects.html">Projects</a></li>
      <li><a href="experiments.html">Experiments</a></li>
      <li><a href="game.html">Game</a></li>
      <li><a href="about.html">About</a></li>
    </ul>
  </div>
</nav>

<main>
  <div class="container">

    <header class="page-header">
      <div class="page-header-eyebrow">About</div>
      <h1 class="page-header-title">Hi, I'm Gene.</h1>
      <p class="page-header-desc">
        I build things with AI — mostly for myself, mostly because I find the
        problems interesting and the tools surprisingly capable.
      </p>
    </header>

    <section class="section">
      <div class="highlight-row">

        <div>
          <h2 style="font-size:1.3rem;margin-bottom:var(--space-4);">What I'm doing</h2>
          <p>
            I'm exploring how far you can push AI agents as actual tools for
            personal projects — not the demo version, not the marketing version,
            but the version where you hand it a real task and see if it comes back
            with something useful.
          </p>
          <p>
            The projects here are things I use. SaveWisdom runs every morning.
            The Discipline of Enough is a book I'm actually writing.
            agent-brain runs the coordination layer this site was built with.
          </p>
          <p>
            I'm less interested in "what can AI do?" as an abstract question and
            more interested in "what changes when you actually integrate this into
            real work?" — which turns out to be different and weirder and harder
            to articulate.
          </p>

          <h2 style="font-size:1.3rem;margin-top:var(--space-8);margin-bottom:var(--space-4);">How the handoff system actually works</h2>
          <p>
            Each task starts as a structured markdown file in a shared git repo — a
            <em>handoff</em>. Grok writes one to Claude Code. Claude Code reads it,
            does the work, and writes a completion handoff back to Grok. A watcher
            script monitors the repo, dispatches agents when files appear, and
            detects completions automatically.
          </p>
          <p>
            When Claude Code needs help with a bounded sub-task, it delegates to
            Codex the same way — another handoff file. The watcher tracks the whole
            chain in a registry so it knows which parent to re-invoke when a
            sub-task comes back.
          </p>
          <p>
            This site was built end-to-end through that system. Grok wrote the
            Phase 1 brief. Claude Code designed the site, wrote all the code,
            delegated the visualizer component to Codex, committed everything, and
            pushed to GitHub Pages — without me touching a keyboard for the
            implementation. Phases 2 and 3 closed the same way.
          </p>
          <div class="callout" style="margin-top:var(--space-4);">
            <div class="callout-label">The chain registry</div>
            <p style="margin-bottom:0;font-size:0.875rem;">
              Every handoff chain is logged in <code>watcher/chain-registry.json</code>.
              The interactive visualizer on the
              <a href="experiments.html#chain-visualizer">Experiments page</a>
              shows real chains from the system — root dispatches, sub-delegations,
              and their current status.
            </p>
          </div>

          <div class="callout" style="margin-top:var(--space-6);">
            <div class="callout-label">Current focus</div>
            <p style="margin-bottom:var(--space-2);">
              Learning to work effectively with AI agents as a system — what makes
              them actually useful vs. impressive-looking. Mostly through building
              things and watching what breaks.
            </p>
            <p style="margin-bottom:0;">
              Growing and developing, personally and professionally.
              Using the available tech to increase quality of life in concrete, measurable ways.
            </p>
          </div>
        </div>

        <div>
          <div class="card" style="margin-bottom:var(--space-4);">
            <h4 style="margin-bottom:var(--space-4);color:var(--text-secondary);font-size:0.8rem;font-family:var(--font-mono);text-transform:uppercase;letter-spacing:0.08em;">The agent system</h4>
            <div style="display:flex;flex-direction:column;gap:var(--space-4);">
              <div>
                <div style="display:flex;align-items:center;gap:var(--space-2);margin-bottom:var(--space-1);">
                  <span class="agent-badge agent-grok">Grok</span>
                  <span style="font-size:0.75rem;color:var(--text-muted);font-family:var(--font-mono);">strategy &amp; architecture</span>
                </div>
                <p style="font-size:0.82rem;margin:0;">Deep work, structured plans, architectural decisions. The thinking agent.</p>
              </div>
              <div>
                <div style="display:flex;align-items:center;gap:var(--space-2);margin-bottom:var(--space-1);">
                  <span class="agent-badge agent-claude">Claude Code</span>
                  <span style="font-size:0.75rem;color:var(--text-muted);font-family:var(--font-mono);">implementation &amp; orchestration</span>
                </div>
                <p style="font-size:0.82rem;margin:0;">Writes code, runs git, closes loops. The implementation agent.</p>
              </div>
              <div>
                <div style="display:flex;align-items:center;gap:var(--space-2);margin-bottom:var(--space-1);">
                  <span class="agent-badge agent-codex">Codex</span>
                  <span style="font-size:0.75rem;color:var(--text-muted);font-family:var(--font-mono);">bounded code-gen</span>
                </div>
                <p style="font-size:0.82rem;margin:0;">Repo-aware sub-tasks delegated by Claude Code.</p>
              </div>
              <div>
                <div style="display:flex;align-items:center;gap:var(--space-2);margin-bottom:var(--space-1);">
                  <span class="agent-badge agent-hermes">Hermes</span>
                  <span style="font-size:0.75rem;color:var(--text-muted);font-family:var(--font-mono);">telegram gateway</span>
                </div>
                <p style="font-size:0.82rem;margin:0;">Captures ideas, delivers prompts, alerts on completions. The ambient agent.</p>
              </div>
            </div>
          </div>

          <div class="card">
            <h4 style="margin-bottom:var(--space-4);color:var(--text-secondary);font-size:0.8rem;font-family:var(--font-mono);text-transform:uppercase;letter-spacing:0.08em;">Find me</h4>
            <div style="display:flex;flex-direction:column;gap:var(--space-3);">
              <a href="https://github.com/griffithee" target="_blank" rel="noopener" style="display:flex;align-items:center;gap:var(--space-2);font-size:0.875rem;color:var(--text-secondary);">
                <span style="font-family:var(--font-mono);color:var(--accent-blue);">gh</span>
                github.com/griffithee
              </a>
              <span style="display:flex;align-items:center;gap:var(--space-2);font-size:0.875rem;color:var(--text-muted);">
                <span style="font-family:var(--font-mono);color:var(--accent-blue);">@</span>
                not listed publicly
              </span>
            </div>
          </div>
        </div>

      </div>
    </section>

  </div>
</main>

<footer>
  <div class="footer-inner">
    <span class="footer-text">griffithee · built with Claude Code</span>
    <div class="footer-links">
      <a href="https://github.com/griffithee" target="_blank" rel="noopener">GitHub</a>
      <a href="about.html">About</a>
    </div>
  </div>
</footer>

<script src="js/nav.js"></script>
</body>
</html>