Welcome to my personal website!

• About
• Screenshots
• AI Chatbot
• Getting Started
• Environment Variables
• Customization
• Features
• Technologies Used
• Deployment
• Contributing
• Contact

ronit.io is my personal website where I share my projects, blog posts, and more. It's built using Next.js and styled with Tailwind CSS. The site is designed to be fast, accessible, and easy to maintain.

The website will feature an AI-powered chatbot (coming soon) that can answer questions about my professional background and experience, making it easy for visitors to learn more about my work and projects interactively.

The website will feature an AI-powered FAQ chatbot that can answer questions about Ronit's professional background, projects, and experience.

Note: The chatbot is currently disabled and shows "Coming Soon" on hover. It will be enabled once the site is deployed to a platform that supports server-side API routes (like Vercel or Netlify) instead of GitHub Pages.

• 🤖 AI-Powered: Will use Google Gemini API for intelligent responses
• 🛡️ Anti-Abuse Protection: reCAPTCHA verification to prevent spam and misuse
• 📱 Responsive Design: Will work seamlessly on desktop, tablet, and mobile
• 🎨 Neobrutalism Theme: Clean, minimal design matching the site aesthetic
• ⚡ Quick Actions: Pre-built suggestions for common questions
• 🔒 Session-Based: Verify once per session for smooth user experience

1. Click the "Ask Ronit AI" button (currently shows "Coming Soon")
2. Complete reCAPTCHA verification (first-time only)
3. Chat with the AI about Ronit's experience, projects, and professional background
4. Get instant, contextual responses with suggested follow-up questions

The chatbot will operate in two modes:

• With Gemini API: Full AI capabilities with natural language understanding
• Without API: Falls back to curated FAQ responses for basic questions

• reCAPTCHA verification prevents automated abuse and spam
• No conversation data will be stored or logged
• API calls will be rate-limited and monitored
• All interactions will be session-based (no persistent data)

To run the website locally, follow these steps:

1. Clone the repository:

git clone https://github.com/ronitjadhav/ronit.io.git
cd ronit.io

2. Install dependencies:

npm install
# or
yarn install
# or
pnpm install

3. Set up environment variables:

Copy the example environment file and add your API keys:

cp .env.example .env

Then edit .env with your actual values. See Environment Variables section below for details.

4. Run the development server:

npm run dev
# or
yarn dev
# or
pnpm dev

5. Open http://localhost:3000 in your browser to see the website.

This project requires several environment variables to function properly. Copy .env.example to .env and fill in your values:

cp .env.example .env

• Get your keys at: Google reCAPTCHA Admin
• Choose reCAPTCHA v2 → "I'm not a robot" Checkbox
• Add localhost to your allowed domains for local development

• Sign up at: EmailJS
• Service ID: Create an email service (Gmail, Outlook, etc.) → copy the Service ID
• Template ID: Create an email template with variables {{from_name}}, {{email}}, {{message}} → copy the Template ID
• Public Key: Go to Account → General → copy your Public Key

• Get your access token at: Mapbox Access Tokens
• Create custom map styles at: Mapbox Studio or use Mapbox defaults

• Get your API key at: Google AI Studio
• Note: This is a server-side variable — it will NOT be exposed to the browser
• Chatbot is currently disabled; will be enabled after deployment to Vercel/Netlify

1. Copy the example file: cp .env.example .env
2. Fill in your API keys and tokens
3. Restart the development server (npm run dev)

• Chatbot not working: Currently disabled (Coming Soon) - will be enabled after deployment to Vercel/Netlify
• Contact form failing: Verify NEXT_PUBLIC_GOOGLE_RECAPTCHA_SITE_KEY and EmailJS credentials
• Maps not loading: Ensure NEXT_PUBLIC_MAPBOX_ACCESS_TOKEN is valid
• reCAPTCHA issues: Confirm domain is registered in Google reCAPTCHA admin

This project is designed to be easily forked and customized as your own portfolio. All personal data (name, bio, projects, skills, timeline, SEO, etc.) is centralized in a single configuration file:

src/data/site-config.ts

To make this portfolio your own:

1. Fork this repository
2. Edit src/data/site-config.ts with your personal data
3. Replace images in src/media/ with your own
4. Update .env with your API keys
5. Deploy!

For a detailed step-by-step guide, see CUSTOMIZATION.md.

• 🤖 AI Chatbot (Coming Soon): Interactive FAQ assistant powered by Google Gemini API with anti-abuse protection
• 📧 Contact Form: Secure contact form with reCAPTCHA verification and EmailJS integration
• 🗺️ Interactive Maps: Custom Mapbox integration with light/dark theme support
• 📱 Responsive Design: Optimized for desktop, tablet, and mobile devices
• 🎨 Neobrutalism Theme: Clean, minimal design with bold shadows and borders
• 🌙 Dark Mode: Full dark/light theme support with system preference detection
• ⚡ Performance: Built with Next.js 15 and optimized for speed
• ♿ Accessibility: WCAG compliant with proper ARIA labels and keyboard navigation
• 🔍 SEO Optimized: Built-in SEO best practices with meta tags and sitemaps
• 📊 Projects Showcase: Detailed project portfolio with descriptions and live links

• Next.js 15: React framework with App Router and Turbopack for fast development
• TypeScript: Strongly typed JavaScript for better development experience
• Tailwind CSS: Utility-first CSS framework for rapid UI development
• Google Gemini API: Advanced AI for intelligent chatbot responses
• Mapbox: Interactive maps with custom styling
• EmailJS: Client-side email sending for contact forms
• Google reCAPTCHA: Bot protection and spam prevention
• Lucide React: Beautiful, customizable icon library
• Next Themes: Dark/light theme management
• React Google reCAPTCHA: reCAPTCHA integration for React

This site can be easily deployed to platforms like Vercel or Netlify.

When deploying, make sure to add all environment variables from .env.example to your deployment platform:

• Vercel: Project Settings → Environment Variables
• Netlify: Site Settings → Environment Variables

npm run build
npm start

• All NEXT_PUBLIC_* variables are exposed to the client-side
• Keep server-side variables (like GEMINI_API_KEY) secure and never expose them
• Test all features (chatbot, contact form, maps) after deployment
• Ensure your domain is registered with Google reCAPTCHA for production

Contributions are welcome! If you have suggestions, bug reports, or want to add features, please open an issue or submit a pull request.

1. Fork the repository
2. Create your feature branch (git checkout -b feature/YourFeature)
3. Commit your changes (git commit -m 'Add some feature')
4. Push to the branch (git push origin feature/YourFeature)
5. Open a pull request

You can reach me through the Get in Touch button by visiting ronit.io.

Thank you for visiting my website!