A sophisticated personal website that showcases my work while introducing visitors to an AI-powered advocate—a conversational agent ready to answer questions about my experience and services.
Architecture Highlights
Frontend: VitePress + Vue 3
Built with VitePress for blazing-fast static site generation and Vue 3 for interactive components. The site serves as both a portfolio hub and an entry point to an AI-powered conversation experience.
The Advocate Agent
The homepage is staffed by a GPT-powered advocate agent, deployed on Langbase, that greets visitors and answers questions conversationally. This replaces a traditional landing page copy with a dynamic, engaging interaction.
Backend Integration
A dedicated Next.js backend proxies requests to Langbase, securely handling API tokens without exposing them to the frontend. This ensures seamless integration while maintaining security.
Key Features
- ⚡️ Performance: VitePress generates a static site optimized for speed with minimal JavaScript overhead
- 🎨 Design System: Tailwind CSS v4 for consistent, responsive design across all pages
- 🌙 Dark Mode: Seamless light/dark theme toggle integrated throughout
- 📱 Responsive: Mobile-first design that works beautifully on all devices
- 🧠 AI Integration: Conversational agent for visitor engagement
- 📦 Dynamic Content: Fetches public repositories from GitHub via Vercel backend
- 🚀 Deployment: Hosted on Vercel with Cloudflare CDN for global performance
Technical Stack
- Frontend: VitePress, Vue 3, TypeScript, Tailwind CSS v4
- Backend: Next.js for API proxying
- AI: Langbase for conversational agent
- Hosting: Vercel + Cloudflare CDN
- Version Control: 450+ commits documenting evolution
Live Site
This project demonstrates my ability to architect complex full-stack applications, integrate third-party AI services, and deliver production-ready solutions with excellent UX and performance.