active
AI Learning Journey Site
This site — a personal portfolio and blog built with the same stack as the wedding site, showcasing my AI agent development journey.
nextjsprismaportfoliometa
AI Learning Journey Site
Meta-project: the site you're reading right now.
Stack (mirrors wedding site)
- Next.js 16 + React 19 + TypeScript
- Tailwind CSS v4 with
@theme inline - Framer Motion v12 for scroll animations
- Prisma 7 + Turso (cloud SQLite)
- Vercel deployment
Design System
- Palette: Slate/indigo/emerald replacing wedding's stone/gold
- Typography: Space Grotesk (headings) + Inter (body) + JetBrains Mono (code)
- Animations: Reused FadeIn, StaggerChildren, PageTransition, ScrollProgress
Features
- Blog with markdown rendering and syntax highlighting
- Project portfolio with filterable grid
- AI journey timeline with category-colored dots
- Tools & stack grid with proficiency indicators
- Full admin CMS (same pattern as wedding admin)
- SEO with sitemap, robots.txt, OpenGraph metadata
Build Log
- Setting Up an AI-Built Portfolio on a New Machine
- The Tech Stack Behind This Site
- Redesigning My Portfolio with Nitro-Inspired UI
- How I Added Custom AI Visuals to Every Blog Post
- Managing My Portfolio From the Couch — Claude Code on Mobile
- Two Claude Codes, One Codebase
- Visualizing Your AI Journey
- Building a Knowledge Management System with Obsidian
- The AI Tools Landscape: A TPM's Field Guide
- Before AI: AutoHotkey Scripts in the Clinic
- From Blog Posts to LinkedIn Thought Leadership with Late API