🚀 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.
- 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.
- Contact form integrated using Google Apps Script
- Stores submissions directly in Google Sheets
- Sends instant email notifications
- Handles optional fields gracefully
Captured data:
- Name
- Phone number (optional)
- Message
- Timestamp
✅ No database
✅ No backend server
✅ Works perfectly on GitHub Pages
- 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.
- React
- TypeScript
- Vite
- HTML5 / CSS3 / JavaScript
- Google Gemini API
- Google Apps Script
- Google Sheets
- Gmail (Email notifications)
- GitHub Pages
├── 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
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.
This portfolio uses Google Apps Script as a backend replacement.
Create a Google Sheet with the following headers in this exact order:
Name | Email | Message | Phone | Timestamp
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<
83C7
span class="pl-kos">.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!");
}- Accepts
POSTrequests 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.
-
Open the Google Sheet
-
Go to Extensions → Apps Script
-
Paste the script above
-
Click Deploy → New Deployment
-
Choose Web App
- Execute as: Me
- Who has access: Anyone
-
Authorize permissions
-
Copy the generated Web App URL
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
// function testDoPost() {
// var data = {
// parameter: {
// name: "Test Name",
// email: "test@example.com",
// message: "This is a test message."
// }
// };
// Logger.log(doPost(data));
// }- Contact form submission works ✅
- Google Sheet updates correctly ✅
- Email notifications received ✅
- AI chatbot responds correctly ✅
- AI can send messages on behalf of the user ✅
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/