Building an AI-Powered Portfolio

Built with modern web technologies for performance and developer experience.

• Next.js 14 (App Router) - Server-side rendering and API routes
• React 18 with TypeScript - Type-safe component architecture
• Tailwind CSS - Utility-first styling with custom design system
• Framer Motion - Fluid animations and micro-interactions
• Prisma ORM - Type-safe database access
• PostgreSQL - Relational data storage

An intelligent chatbot that advocates for Patrick by understanding visitor context and tailoring responses.

• Company Detection - Automatically identifies visitor companies and tailors messaging
• Context-Aware Responses - Uses MCP-like architecture for page-specific data
• Portfolio Integration - References specific projects, metrics, and achievements
• Session Logging - Tracks conversations for analytics and improvement
• LLM-Powered - Uses GPT-4 for natural, contextual responses

LLM-powered analysis that maps portfolio items to job descriptions, highlighting relevant experience.

• Job Description Analysis - Extracts requirements, skills, and company info
• Relevance Scoring - Maps each portfolio item to job requirements (0-100)
• Visual Indicators - Sparkles icons appear next to relevant achievements
• Real-time Updates - UI dynamically updates when job is analyzed
• Context Provider - React Context shares analysis across all components

Admin system for editing all website content without code changes.

• Section Editing - Edit Hero, About, Resume, AI sections from admin UI
• Portal Projects - Full CRUD for case studies with drag-and-drop ordering
• AI Context - Manage context entries that inform the Career Advocate
• Real-time Preview - Changes reflect immediately via React Context
• Database Persistence - Content stored in PostgreSQL via Prisma

Model Context Protocol pattern for secure, scoped AI access to portfolio data.

• Data Isolation - LLM only sees data relevant to current context
• No Data Leaks - API connections pull only page-specific information
• Context Injection - Portfolio items and project details passed as context
• Database Integration - Context entries stored and retrieved per-project
• Secure by Design - LLM cannot access data outside its context window

PostgreSQL database with Prisma ORM for type-safe data access.

• PortalProject - Project visibility, ordering, content overrides
• SiteSettings - Global settings, job tailoring state
• SectionContent - Editable section content JSON
• ContextEntry - AI context entries by project
• ChatLog - Conversation history with metadata

Framer Motion powers fluid animations and micro-interactions throughout.

• Scroll-triggered Animations - Elements animate into view
• Staggered Children - List items animate sequentially
• Drag & Drop - Project reordering in admin panel
• Expandable Cards - Smooth project detail expansion
• Hover States - Subtle feedback on interactive elements

Simple authentication for admin actions with public read access.

• Public Viewing - Anyone can browse admin UI to see how it works
• Password Protection - Mutations require password verification
• Session Storage - Auth state persisted in browser session
• API Validation - Server-side password check on write operations
• Environment Variables - Secrets stored securely