🚀 AI Chatbot Portfolio - Deepak Paswan

An interactive AI-powered portfolio website where visitors can chat with an AI assistant to learn about skills, projects, experience, and more. Built with vanilla JavaScript and powered by Supabase backend.

🔗 Live Demo: https://dpkpaswan.github.io

✨ Key Features

🤖 AI Chatbot Interface

• Interactive conversation with AI assistant
• Smart question understanding and contextual responses
• Quick suggestion buttons for common queries
• Real-time typing indicators with smooth animations
• Contact message collection through chat
• Mobile-optimized chat interface

⌨️ Cool Terminal Animation

• Automatic terminal typing effect on page load
• Realistic command execution simulation
• Shows skills, projects, and git commits
• Professional developer aesthetic

🎨 Modern Command Palette UI

• Beautiful glassmorphism design with particle animations
• Command palette navigation (Ctrl+K)
• Dark/Light theme toggle
• Fully responsive design (mobile, tablet, desktop)
• Status bar with live clock
• Smooth scroll navigation

📊 Supabase Backend Integration (Optional)

• Visitor session tracking
• Chat message storage and analytics
• Contact form submissions
• User interaction analytics
• Page view tracking

🚀 Deployment to GitHub Pages

Method 1: Quick Deploy (No Backend)

1. Fork this repository to your GitHub account
2. Enable GitHub Pages:
   • Go to repository Settings → Pages
   • Source: Deploy from branch
   • Branch: main / (root)
3. Customize content:
   • Update personal info in index.html
   • Modify skills, projects, and links
   • Portfolio will work without Supabase (chat works offline)

Method 2: Full Setup with Supabase Backend

Step 1: Fork & Clone

# Fork the repository first, then clone your fork
git clone https://github.com/YOUR-USERNAME/dpkpaswan.github.io.git
cd dpkpaswan.github.io

Step 2: Set Up Supabase (15 minutes)

1. Create Supabase account: supabase.com
2. Create new project (choose region closest to you)
3. Run database setup:
   • Go to SQL Editor in Supabase dashboard
   • Copy & paste contents of supabase-setup.sql
   • Click "Run" to create tables and security policies

Step 3: Configure Credentials

# Copy template and add your credentials
cp config.template.js config.js

# Edit config.js with your Supabase credentials:
# - Get URL and anon key from Supabase Project Settings → API

Step 4: Deploy to GitHub Pages

# Add your changes (but config.js is ignored)
git add .
git commit -m "🚀 Deploy portfolio"
git push origin main

# Enable GitHub Pages in repository settings
# Your site will be live at: https://YOUR-USERNAME.github.io

Method 3: Custom Domain Setup

1. Add custom domain file:

echo "yourdomain.com" > CNAME
git add CNAME
git commit -m "Add custom domain"
git push

2. Configure DNS:
   • Add CNAME record: www.yourdomain.com → YOUR-USERNAME.github.io
   • Add A records for apex domain to GitHub Pages IPs
   • Enable "Enforce HTTPS" in GitHub Pages settings

🔒 Security for Public Repositories

Since GitHub repositories are public, the config.js file is in .gitignore to protect credentials:

• ✅ Template file (config.template.js) is committed
• ❌ Actual credentials (config.js) stay local
• 🛡️ Supabase anon key is safe to expose (has Row Level Security)
• 📊 Analytics work without exposing sensitive data

📁 Project Structure

dpkpaswan.github.io/
├── index.html              # Main portfolio page
├── styles.css              # Complete styling system
├── script.js               # Interactive functionality
├── config.template.js      # Supabase config template
├── config.js              # Your credentials (gitignored)
├── .gitignore             # Protects sensitive files
├── CNAME                  # Custom domain (if used)
│
├── 📚 Documentation/
│   ├── supabase-setup.sql     # Database schema
│   ├── SUPABASE_SETUP.md      # Setup instructions
│   ├── API_DOCUMENTATION.md   # API suggestions
│   └── QUICK_START.md         # Quick reference
│
└── 🗂️ Backup Files/
    ├── index-old.html         # Previous version
    ├── styles-old.css         # Previous styles
    └── script-old.js          # Previous scripts

🎨 Customization Guide

Update Personal Information

1. Edit index.html:

   • Change name, role, and description
   • Update social media links
   • Modify skills and experience

2. Edit script.js:

   • Update knowledgeBase object with your info
   • Change GitHub username for project loading
   • Customize AI responses

Styling Changes

1. Edit CSS custom properties in styles.css:

   :root {
     --primary: #6366f1;     /* Main brand color */
     --secondary: #8b5cf6;   /* Accent color */
     /* Add your colors */
   }

Add New Features

• Command palette commands (commandPalette.executeCommand)
• AI chatbot responses (AIAssistant.generateResponse)
• Terminal commands (initTerminalTyping)

🛠️ Tech Stack

• Frontend: HTML5, CSS3, JavaScript (ES6+)
• Fonts: Inter, JetBrains Mono
• Icons: Font Awesome 6
• Backend: Supabase (PostgreSQL)
• Hosting: GitHub Pages
• Analytics: Custom Supabase analytics

📱 Mobile Support

Fully responsive design with:

• Touch-optimized buttons and inputs
• Mobile-friendly navigation
• Responsive grid layouts
• Optimized font sizes and spacing
• Touch action optimizations
• Mobile viewport configuration

🎯 Performance Features

• Lazy loading of heavy content
• Optimized particle animations
• Efficient scroll handlers
• Debounced API calls
• Minimal dependencies
• Fast static hosting on GitHub Pages

🤝 Contributing

1. Fork the repository
2. Create your feature branch: git checkout -b feature/amazing-feature
3. Commit changes: git commit -m 'Add amazing feature'
4. Push to branch: git push origin feature/amazing-feature
5. Open a Pull Request

📄 License

This project is licensed under the MIT License - see the LICENSE file for details.

🙏 Acknowledgments

• Supabase for backend infrastructure
• Font Awesome for icons
• Google Fonts for typography
• GitHub Pages for hosting

---

⭐ If you found this helpful, please star the repository!

🔗 Connect with me:

• GitHub: @dpkpaswan
• LinkedIn: Deepak Paswan
• Portfolio: dpkpaswan.github.io