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