🌐 Hari’s Interactive AI Portfolio

December 16, 2025 · View on GitHub

🚀 Live Website: https://thughari.github.io
📦 Repository: https://github.com/thughari/thughari.github.io

This is not a static portfolio.

It is an AI-powered, interactive personal website where visitors can:

  • Ask anything about me using an AI chatbot (Gemini)
  • Let the AI send messages on their behalf directly through chat
  • Contact me using a real backend-less system powered by Google Apps Script

This portfolio itself is a production-grade project, not a template.

✨ Key Features

🤖 AI Assistant (Powered by Google Gemini)

  • Integrated Gemini AI to answer questions about:
    • My skills
    • My experience
    • My projects
    • My background
  • Conversational and context-aware
  • Action-capable AI:
    • The bot can send a message on behalf of the user
    • Users don’t need to manually fill the contact form

This is not just a chatbot - it performs real actions.

📬 Smart Contact System (No Traditional Backend)

  • Contact form integrated using Google Apps Script
  • Stores submissions directly in Google Sheets
  • Sends instant email notifications
  • Handles optional fields gracefully

Captured data:

  • Name
  • Email
  • Phone number (optional)
  • Message
  • Timestamp

✅ No database
✅ No backend server
✅ Works perfectly on GitHub Pages

🧠 Why This Portfolio Is Different

  • Not a template
  • Not static content
  • Demonstrates:
    • Real AI integration
    • Backend-less architecture
    • Event-driven automation
    • Production-ready frontend design

This portfolio is both a showcase and a system.

🛠️ Tech Stack

Frontend

  • React
  • TypeScript
  • Vite
  • HTML5 / CSS3 / JavaScript

AI

  • Google Gemini API

Backend-less Automation

  • Google Apps Script
  • Google Sheets
  • Gmail (Email notifications)

Hosting

  • GitHub Pages

📂 Project Structure

├── src/
|   ├── public/            # Static assets
│   ├── components/        # Reusable UI components
│   ├── hooks/             # Custom React hooks
│   ├── utils/             # Helper functions & configs
│   ├── App.tsx            # Main application
│   └── main.tsx           # Entry point
├── vite.config.ts
├── tsconfig.json
├── package.json
└── README.md

🤖 AI Capabilities (Detailed)

The AI assistant acts as a smart interface, not just a Q&A bot.

It can:

  • Answer portfolio-specific questions
  • Explain projects and technical choices
  • Guide users through my experience
  • Trigger contact actions directly from chat

Example:

“Send Hari a message saying I’m interested in collaborating.”

The AI handles the submission without the user touching the form.

📬 Contact Form – Google Apps Script Integration

This portfolio uses Google Apps Script as a backend replacement.

📊 Google Sheet Structure

Create a Google Sheet with the following headers in this exact order:


Name | Email | Message | Phone | Timestamp

🧠 Apps Script – Production Code

This is the exact script used in this project:

function doPost(data) {
  var sheet = SpreadsheetApp.getActiveSpreadsheet().getActiveSheet();
  var timestamp = new Date();
  
  var name = data.parameter.name;
  var email = data.parameter.email;
  var message = data.parameter.message;
  var phone = data.parameter.phone || "Not provided";
  
  sheet.appendRow([name, email, message, phone, timestamp]);

  var subject = "New Contact Form Submission from " + name;

  var body =
    `📩 New Contact Form Submission\n\n` +
    `Name: ${name}\n` +
    `Email: ${email}\n` +
    `Phone: ${phone}\n\n` +
    `Message:\n${message}\n\n` +
    `Submitted on: ${timestamp}`;

  MailApp.sendEmail({
    to: "haribabutatikonda3@gmail.com",
    cc: "thughari3@gmail.com",
    subject: subject,
    body: body
  });
  
  return ContentService.createTextOutput("Form submission successful!");
}

🔍 What This Script Does

  • Accepts POST requests from the frontend
  • Extracts submitted form data
  • Handles optional phone numbers safely
  • Stores data in Google Sheets
  • Sends formatted email notifications
  • Returns a success response

No cron jobs. No polling. No backend server.

🚀 Deploying the Script

  1. Open the Google Sheet

  2. Go to Extensions → Apps Script

  3. Paste the script above

  4. Click Deploy → New Deployment

  5. Choose Web App

    • Execute as: Me
    • Who has access: Anyone

  6. Authorize permissions

  7. Copy the generated Web App URL

🌐 Frontend Connection

The frontend sends a POST request with form data to the deployed Apps Script URL.

This allows:

  • Static hosting on GitHub Pages
  • Secure serverless form handling
  • Easy maintenance and scalability

🧪 Optional Local Testing

// function testDoPost() {
//   var data = {
//     parameter: {
//       name: "Test Name",
//       email: "test@example.com",
//       message: "This is a test message."
//     }
//   };
//   Logger.log(doPost(data));
// }

🧪 Verification Checklist

  • Contact form submission works ✅
  • Google Sheet updates correctly ✅
  • Email notifications received ✅
  • AI chatbot responds correctly ✅
  • AI can send messages on behalf of the user ✅

📄 License

MIT License - feel free to explore the code and reuse ideas.

👉 Visit the live site and try the AI assistant yourself -> https://thughari.github.io/