Overview

This website — the one you're looking at right now — was built entirely from scratch as a full-stack web application. The goal was to create a professional, dynamic portfolio with a terminal-inspired aesthetic, complete with a content management system, blog, contact form, and three switchable visual themes.

What makes this project unique is that it was built collaboratively with AI. Using Claude Code (Anthropic's CLI development tool), the entire site was architected, coded, debugged, and deployed through an iterative human-AI workflow.

Key Features

Three Switchable Themes: Stealth Mode (dark/green terminal), Neon Override (cyberpunk cyan/pink), and Cleartext (clean light mode) — all driven by CSS custom properties with smooth transitions
Admin Dashboard: Full CRUD management for projects, blog posts, contact messages, site settings, skills, and hero content — all editable without touching code
Blog with MDX: Write blog posts with full Markdown + JSX support, syntax-highlighted code blocks, auto-generated table of contents, and reading time estimates
Contact Form: Honeypot anti-spam protection, input validation, rate limiting, and messages viewable in the admin dashboard
Particle Network Animation: Interactive canvas-based particle system with mouse attraction, theme-aware colors, and mobile performance optimization
Typing Effect Hero: Cycling title animation with configurable text pulled from the database
Responsive Design: Fully responsive across mobile, tablet, and desktop breakpoints
SEO Optimized: Dynamic metadata, auto-generated sitemap, Open Graph tags, and robots.txt

Tech Stack

Framework: Next.js 14 with App Router and TypeScript
Styling: Tailwind CSS with CSS custom properties for theming
Database: PostgreSQL (Supabase) with Prisma ORM
Authentication: NextAuth.js with credentials provider and bcrypt password hashing
Animations: Framer Motion for page transitions, scroll animations, and staggered reveals
Blog Rendering: next-mdx-remote with rehype-pretty-code and Shiki for syntax highlighting
Hosting: Vercel with automatic deployments from GitHub
AI Development: Claude Code (Anthropic CLI) for collaborative coding

Development Process

The entire project was built through a collaborative workflow with Claude Code. Starting from a detailed specification, the AI assistant scaffolded the project, implemented each component, resolved build errors, and iteratively refined the design — all while I directed the vision, made design decisions, and tested the results.

Challenges Solved

Database Migration: Initially built with SQLite for local development, then migrated to Supabase PostgreSQL for production hosting on Vercel's serverless platform
Connection Pooling: Resolved serverless connection exhaustion by configuring pgbouncer pooling and implementing graceful fallbacks on all database-querying pages
Build Optimization: Added dynamic rendering flags to prevent Next.js from attempting database queries at build time, and configured Prisma generation in the build pipeline
Theme System: Engineered a zero-JavaScript theme switch using CSS custom properties on the root element, with localStorage persistence handled client-side

Architecture

The application follows Next.js 14 App Router conventions with a clear separation between server components (pages that fetch data) and client components (interactive UI). API routes handle all mutations with session-based authentication checks. The admin dashboard is protected by middleware that validates JWT tokens before allowing access.

What I Learned

How to effectively collaborate with AI tools for real-world software development
Production deployment considerations for serverless platforms (connection pooling, ephemeral filesystems, build-time vs runtime rendering)
Building a complete theme system with CSS custom properties
Full-stack application architecture with Next.js App Router, Prisma, and NextAuth

> Projects

tylermulroony.com — Personal Portfolio Website