Personal Website

active

Minimalist portfolio with cinematic entrance animation and interactive resume timeline

Tech Stack

Next.jsTypeScriptTailwind CSSFramer Motion

TL;DR

Track work, log sessions, document everything

claude-code

$ /session-start

Session Context Loaded

Project: personal-site

Git: clean

Recent commits:

82f3914 Redesign FlooorGang...

$ /start-work

Pending work items:

1. Add shimmer loading

2. Implement search

3. Add RSS feed

Which item? (1-3)

> _

$ /log-work

Work logged!

Duration: 1h 23m

Status: completed

Available commands:10

Slash commands for everything

Supabaseworks
idsummarystatus
137Redesign Personal Site pagein progress
136Migrate bookshelf to Supabasecompleted
135Add gameplay video to Cosmic Driftcompleted
134Fix skeleton loading statespending

Work item lifecycle:

pendingin progresscompleted
Completed:63
Pending:9

Work tracked in Supabase

session-39.md

## Session 39

February 15, 2026

### Overview

Redesigned FlooorGang page with three-panel TL;DR visual...

### What We Built

#### 1. Three-Panel TL;DR

Created flow showing the full data pipeline...

### Files Changed

+ FlooorgangDBPreview.tsx

+ FlooorgangPickCard.tsx

+ FlooorgangTLDR.tsx

~ MarkdownSection.tsx

### Commits

82f3914 Redesign FlooorGang...

### Session Stats

Duration: ~38 minutes

Components created: 5

Satisfaction: High

Total sessions:39

Every session documented

What We Built — a site that documents itself

Phase 1

The Foundation

Next.js 15 with App Router, TypeScript, and Tailwind. Supabase PostgreSQL for projects, work items, and books. The site loads with a cinematic 5.8-second entrance animation — morphing shapes, choreographed reveals, the whole production.

View transitions between pages. Framer Motion for micro-interactions. An interactive Gantt chart for the resume timeline. Everything built from scratch, no templates.

The vibe: Dark mode, minimal, slightly dramatic. Like a portfolio that takes itself just seriously enough.

Phase 2

The Automation

10 slash commands power the development workflow. /session-start loads context from the dev diary. /start-work picks up pending items. /log-work completes them with duration tracking.

/dev-diary generates a session summary. /quick-commit writes commit messages. /add-book enriches new books with Google Books API data.

The loop: Every feature I build gets tracked as a work item, documented in a dev diary, and becomes part of this page. Meta.

By the Numbers

39

dev diary sessions

63

work items completed

108

commits

10

slash commands

Tech Stack

Next.js 15TypeScriptTailwind CSSSupabaseFramer MotionMDXVercelClaude Code

Built entirely with Claude Code as pair programmer. Every session logged. Every work item tracked. The dev diary has more entries than most projects have commits. You're looking at it right now.