tylermulroony.com — Personal Portfolio Website
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