Dieses Portfolio
Next.js 16, React Three Fiber und ein Live-Zähler für echten Claude-Token-Verbrauch.
- Sprachen
- DE / EN
- Datenquelle
- Claude Code Logs
Über das Projekt
Eine Portfolio-Seite, die selbst als Arbeitsprobe funktioniert: eine GPU-gerenderte 3D-Szene reagiert auf den Scroll-Fortschritt, sämtliche Inhalte liegen in einer typisierten Content-Schicht, und die Seite ist von Grund auf zweisprachig.
Das auffälligste Detail ist der Token-Zähler: ein Sync-Skript aggregiert die lokalen Claude-Code-Session-Logs zu einem anonymisierten Snapshot, den die Seite über eine API-Route ausliefert und live hochzählt. Keine geschätzten Zahlen — echte Nutzungsdaten.
Die eigentliche Arbeit steckt darin, dass diese Zahl auch stimmt. Claude Code schreibt pro Streaming-Update eine eigene Logzeile, eine einzelne Antwort taucht also mehrfach auf. Wer alle Zeilen summiert, überschätzt den Output um etwa das Vierfache; wer nur die erste nimmt, unterschätzt ihn genauso deutlich. Das Skript gruppiert deshalb nach Request und behält den finalen Stand.
Technisch achtet die Seite darauf, dass der visuelle Aufwand nichts kostet: Die 3D-Szene wird erst nach dem ersten Paint nachgeladen, pausiert bei verstecktem Tab und schaltet sich bei "prefers-reduced-motion", auf kleinen Viewports oder schwacher Hardware komplett ab — dann bleibt ein CSS-Verlauf.