Shreyas Kalyani - Cybersecurity Portfolio

A next-generation cybersecurity portfolio website with terminal interface and AI chatbot.

Quick Start

# Install dependencies
npm install

# Run development server
npm run dev

Open http://localhost:3000

Environment Variables

Create .env.local in root:

GROQ_API_KEY=your_Groq_api_key_here

Get free API key: https://console.groq.com/home

Features

• Matrix rain background animation
• Typing animations for hero section
• Interactive terminal with commands:
  • help - Show all commands
  • whoami - About Shreyas
  • skills - Security expertise
  • projects - Past work
  • tools - Security tools
  • contact - Contact info
  • handler - Terminal commands list
  • clear - Clear terminal
• AI chatbot with Gemini API (fallback responses if no key)
• Dark cyberpunk theme with green/blue accents
• Fully responsive design
• Contact form with validation
• Download resume/CV

Tech Stack

• Next.js 14 (App Router)
• React 18
• Tailwind CSS
• Framer Motion
• Google Gemini API

Project Structure

├── src/
│   ├── app/
│   │   ├── api/
│   │   │   ├── chat/route.ts    # AI Chatbot API
│   │   │   └── contact/route.ts # Contact Form API
│   │   ├── globals.css
│   │   ├── layout.tsx
│   │   └── page.tsx
│   ├── components/
│   │   ├── About.tsx
│   │   ├── Certifications.tsx
│   │   ├── Chatbot.tsx         # AI Chatbot
│   │   ├── Contact.tsx         # Contact Form
│   │   ├── Footer.tsx
│   │   ├── Hero.tsx
│   │   ├── MatrixBackground.tsx
│   │   ├── Navigation.tsx
│   │   ├── Projects.tsx
│   │   ├── Skills.tsx
│   │   ├── TerminalSection.tsx
│   │   └── Tools.tsx
│   └── components/
├── public/
│   └── resume.pdf              # Resume file
├── tailwind.config.ts
├── next.config.js
└── package.json

Deployment

Vercel (Recommended)

1. Install Vercel CLI:

npm i -g vercel

2. Deploy:

vercel

Or push to GitHub and connect to Vercel:

• Push code to GitHub
• Go to https://vercel.com
• Import repository
• Add environment variables in Vercel dashboard
• Deploy

Manual Build

# Build for production
npm run build

# Start production server
npm start

Resume/CV Download

The resume is available for download from the navigation menu. Click "Resume" to download.

Contact Form

The contact form sends data to /api/contact. Configure email handling in production:

• Use Next.js API routes with email service (SendGrid, Mailgun, etc.)
• Or connect to form service (Formspree, Netlify Forms, etc.)

Customization

Update Resume

Replace public/resume.pdf with your resume file.

Update Colors

Edit tailwind.config.ts to change colors:

colors: {
  cyber: {
    green: "#00ff41",    // Change green color
    blue: "#00d4ff",    // Change blue color
  }
}

Update Content

Edit the component files in src/components/:

• Hero.tsx - Name and role
• About.tsx - About section
• Skills.tsx - Skills categories
• Projects.tsx - Projects
• Tools.tsx - Platforms
• Certifications.tsx - Certifications
• Contact.tsx - Contact info

License

MIT License