Opened Claude Code today with both spec documents and started the actual build. Used the frontend-design skill to plan out the implementation, then used claude-mem to capture the decisions before starting to code.
The build went phase by phase:
- Bootstrap Next.js project, install dependencies
- globals.css with all CSS variables for both light and dark mode
- TypeScript types and root layout with JetBrains Mono and Inter loaded via next/font
- Atomic components: TagPill, StatusBadge, Loom
- Header and Footer
- Content components: PostCard, ProjectCard, SpendingTracker, LogEntry
- ReadingProgress, SubscribeBar, SectionPreview
- Data layer: posts.ts, projects.ts, search.ts
- All pages: blog, agency, challenge, homepage, and all slug pages
- SearchOverlay with Fuse.js, slash key shortcut, keyboard navigation
A few things I noticed during the build:
Next.js 16 (which is what installed) uses Tailwind v4, which is CSS-first rather than config-file-first. That means the tailwind.config.ts approach from the spec does not apply. All token extension happens in globals.css via the @theme directive instead. Simpler actually.
The next-mdx-remote library was archived as read-only a few days ago, but still installs and works fine — it is just no longer maintained. Fine for now.
The SpendingTracker was the most satisfying component to build. Four columns, a progress bar, a spending table with row hover states, and a remaining row. Looks like proper financial data.
The LogEntry component with the "date // title" separator is exactly the aesthetic I was after. Code comment as a section divider.
Total cost so far: $0. Vercel free tier covers the hosting. Beehiiv free tier covers email. No paid tools needed yet.
Next: wire up Beehiiv embed properly, deploy to Vercel, connect domain.