How It's Built
Modern web development meets AI-assisted coding
This website showcases modern web development practices, built entirely using AI-assisted development (vibe coding) with GitHub Copilot and Claude AI. It demonstrates the power of combining cutting-edge technologies with intelligent automation.
Every feature—from the animated hero section to the intelligent chatbot—was developed with AI assistance, proving that AI-powered development tools can accelerate delivery while maintaining high code quality and best practices.
Core Technology Stack
Frontend Framework
Next.js 14+
Powers the entire website infrastructure including the App Router for page routing (Home, Experience, Expertise, Insights, About, Contact), Server Components for optimal performance, and API routes for the chatbot, contact form, calendar integration, and admin authentication.
Why Next.js 14+
Hybrid rendering (SSR + SSG) ensures optimal SEO for professional profile pages while maintaining fast performance. Built-in API routes eliminate the need for a separate backend server, simplifying deployment and reducing infrastructure costs. Automatic code splitting and image optimization handle performance concerns out of the box, allowing focus on building features rather than configuration.
React 18
Implements all UI components including the HeroSlideshow with Ken Burns effect, RotatingBackground system, AI chatbot interface, contact forms, admin dashboard, and the entire CMS for managing blog posts. Uses hooks for state management across the application.
Why React 18
Component-based architecture enables reusability across pages (e.g., RotatingBackground used in multiple sections), accelerating development. The massive ecosystem provides battle-tested solutions for complex features like the Ken Burns slideshow and chatbot interface. Declarative nature makes the codebase maintainable for future enhancements.
TypeScript
Provides type safety across all code including API routes, React components, chatbot logic, calendar integration functions, and admin authentication. Type definitions ensure correct data structures for meeting scheduling, contact forms, and chat sessions.
Why TypeScript
Catches errors at compile time rather than runtime, critical for features like calendar integration where incorrect data types could cause booking failures. IDE autocomplete and type checking accelerate development of complex features (chatbot, RAG integration). Self-documenting code makes the codebase maintainable despite its growing complexity.
Styling & UI
Tailwind CSS
Implements the entire bold monochromatic design system including ultra-bold typography (700-800 weight), tight letter-spacing (-0.03em), uppercase headings, 2px square borders, and the editorial magazine-style layouts. Styles all components from hero sections to card grids to admin interfaces.
Why Tailwind CSS
Utility-first approach ensures perfect visual consistency for the editorial aesthetic across all pages without CSS specificity battles. JIT compiler keeps bundle size minimal despite extensive styling. Rapid iteration on design changes without creating conflicting CSS rules. Ideal for achieving the precise, high-contrast monochromatic look required.
Pure CSS Animations
Powers the Ken Burns slideshow effect with 6 animation patterns, rotating backgrounds with smooth fade transitions, and page transition effects across the site.
Why Pure CSS Animations
GPU-accelerated CSS animations provide smooth 60fps performance for the hero slideshow without JavaScript overhead. Simpler and more performant than animation libraries like Framer Motion for these specific use cases. Reduces bundle size while maintaining visual polish essential for the editorial aesthetic.
Backend & APIs
Next.js API Routes
Implements all backend endpoints including chatbot API, contact form submission, calendar availability checking, meeting scheduling, admin authentication, and session management.
Why Next.js API Routes
Seamless integration with the frontend eliminates the complexity of managing separate backend servers. Single deployment simplifies the architecture while serverless functions provide automatic scaling. Perfect for this use case where API needs are moderate and co-location accelerates development.
Google Calendar API
Powers the chatbot's meeting scheduling feature with real-time availability checking, automatic time slot generation (30-min intervals during working hours), Google Meet link creation, and automatic email invitations.
Why Google Calendar API
Direct API integration eliminates third-party scheduling costs (vs. Calendly) while providing full control over the user experience. Service account authentication enables seamless server-side access. Reliable Google infrastructure ensures meeting invitations always reach attendees.
Google Gemini AI
Powers the AI chatbot with natural language understanding, context-aware conversations about experience and expertise, function calling for meeting scheduling and knowledge base search, and context caching for professional background information.
Why Google Gemini AI
Superior integration with Google Calendar for seamless meeting scheduling. Context caching reduces API costs by ~90% for the frequently-used professional background context. Function calling enables tool use (calendar, RAG search) while maintaining natural conversation flow. Strong performance on professional queries makes it ideal for this use case.
RAG Backend (Python/FastAPI)
Separate FastAPI server with advanced adaptive retrieval system that intelligently determines when more context is needed. Indexes website content, blog posts, and documents into a vector database with relevance scoring and confidence assessment. Provides semantic search API with multi-stage retrieval capabilities.
Why RAG Backend (Python/FastAPI)
Python's dominant AI/ML ecosystem (LangChain, ChromaDB) makes it the pragmatic choice despite being a different language from the frontend. FastAPI provides automatic API documentation and validation. Superior libraries for document processing and embeddings reduce development time significantly compared to Node.js alternatives. Adaptive retrieval ensures comprehensive answers without wasting API calls.
ChromaDB Vector Store
Stores vector embeddings of all website content and blog posts, enabling semantic search. The chatbot queries ChromaDB to find relevant information based on meaning rather than exact keyword matches.
Why ChromaDB Vector Store
Embedded database eliminates the need for separate cloud services (vs. Pinecone) and operating costs. Simple setup and maintenance with persistent local storage. Performance is excellent at this scale (~100 documents). Perfect for this project where massive scale isn't required but semantic search is essential.
Redis (Session Store)
Stores admin authentication sessions and chatbot OTP verification codes with automatic TTL-based expiration (24h for sessions, 15min for OTPs). Maintains state across server restarts.
Why Redis (Session Store)
Critical for production deployment - prevents session loss during server restarts (unacceptable UX). Automatic TTL expiry eliminates manual cleanup of expired sessions and OTP codes. Supports horizontal scaling if traffic grows. Persistence support (vs. Memcached) ensures reliability. Gracefully falls back to in-memory storage if unavailable.
File-based JSON Storage
Stores contact form submissions, meeting bookings, and chat session history in JSON files with atomic writes. No traditional database required.
Why File-based JSON Storage
Low data volume doesn't justify database complexity and hosting costs. Git-friendly backups and version control. Simpler deployment without database credentials or connection management. Performance is excellent for this scale (< 1000 records). Easy migration path to a database if scale demands it.
AI-Powered Features
Intelligent automation and AI assistance throughout
AI-Assisted Development (Vibe Coding)
This entire website was built using AI-assisted development techniques with GitHub Copilot and Claude AI.
Features
- •GitHub Copilot for code completion and suggestions
- •Claude AI (Anthropic) for architecture and complex problem-solving
- •Google Gemini for alternative AI perspectives and capabilities
- •AI-powered debugging and optimization
- •Rapid prototyping and iteration
- •Automated code documentation
Benefits
- →Faster development cycles
- →Higher code quality
- →Better error handling
- →Comprehensive test coverage
Intelligent AI Chatbot
An advanced AI-powered chatbot using Google Gemini with RAG (Retrieval-Augmented Generation) for accurate, document-based responses.
Features
- •Natural language understanding using Google Gemini
- •RAG system for semantic document search
- •Context-aware conversations about experience and expertise
- •Real-time availability checking via Google Calendar
- •Automated meeting scheduling with email verification
- •Chat session history and management
- •Slack notifications for new meetings
- •Access to blog posts and insights
Benefits
- →24/7 availability for inquiries
- →Accurate, source-backed answers
- →Instant meeting booking
- →Reduced scheduling friction
- →Better visitor engagement
RAG Knowledge Base
Advanced Retrieval-Augmented Generation system with adaptive multi-stage retrieval. Intelligently determines when more documents are needed and makes follow-up searches for comprehensive answers.
Features
- •Adaptive retrieval with confidence assessment (high/medium/low)
- •Multi-stage document retrieval for comprehensive answers
- •Relevance scoring and ranking for each source
- •Vector embeddings using Google Gemini
- •Semantic search with ChromaDB vector store
- •Auto-indexing of blog posts and website content
- •Smart k-value selection (3-10 documents based on question complexity)
- •Source attribution with relevance scores
Benefits
- →Comprehensive answers from multiple sources
- →Intelligent resource usage (no wasted API calls)
- →High-confidence retrieval validation
- →Reduced hallucination with source backing
Technical Highlights
Performance
- Server-side rendering for fast initial load
- Image optimization with Next.js Image component
- Code splitting and lazy loading
- Optimized animations and transitions
SEO Optimization
- Schema.org structured data (JSON-LD)
- Dynamic sitemap generation
- OpenGraph and Twitter Card metadata
- Semantic HTML with proper heading hierarchy
Security
- JWT-based authentication
- Email verification for meeting requests
- Secure API endpoints
- Environment variable protection
Analytics & Monitoring
- Google Analytics 4 integration
- Slack notifications for key events
- Chat session tracking
- Meeting analytics
Try the AI Chatbot
Experience the intelligent chatbot firsthand. Ask about my experience, expertise, or schedule a meeting—all through natural conversation.
Look for the chat widget in the bottom right corner of any page ↘️
Development Approach
Vibe Coding Philosophy
This website was built using "vibe coding"—a modern development approach that leverages AI assistants as pair programming partners. GitHub Copilot provided real-time code suggestions, while Claude AI helped with architecture decisions, problem-solving, and optimization.
Iterative Enhancement
Every feature was developed iteratively, with AI assistance enabling rapid prototyping and refinement. From the Ken Burns slideshow effect to the meeting scheduling integration, AI tools accelerated development while maintaining code quality and best practices.
Real-World Application
This website serves as a practical demonstration of AI-assisted development capabilities. It's not just a portfolio—it's a working example of what can be achieved when combining modern frameworks, AI tools, and thoughtful engineering practices.
Interested in AI-Assisted Development?
Let's discuss how AI-powered development can accelerate your projects while maintaining quality and best practices.
GET IN TOUCH