🚀 Gowshalya P - AI & ML Engineer Portfolio

A premium, professional MERN stack portfolio website showcasing AI/ML expertise, projects, achievements, and coding profiles.

✨ Features

• Modern Design: Premium dark theme with glassmorphism effects
• Responsive Layout: Works perfectly on mobile, tablet, and desktop
• Dark/Light Mode: Toggle between dark and light themes
• Contact Form: Fully functional contact form with MongoDB storage
• Resume Download: Download resume with a single click
• Project Showcase: Display featured AI/ML projects with details
• Achievements: Highlight hackathons, patents, and milestones
• Skills Section: Comprehensive skills organized by category
• Coding Profiles: LeetCode, CodeChef, SkillRack, GeeksforGeeks stats
• Certificate Display: Show professional certifications
• Timeline Journey: Visual representation of career growth
• Smooth Animations: Subtle micro-interactions throughout

🛠️ Tech Stack

Frontend

• React 18 - UI library
• Vite - Build tool & dev server
• React Router DOM - Client-side routing
• Axios - HTTP client
• CSS3 - Styling with custom design system
• JavaScript ES6+ - Modern JavaScript

Backend

• Node.js - Runtime
• Express.js - Web framework
• MongoDB - NoSQL database
• Mongoose - ODM for MongoDB
• JWT - Authentication (ready to use)
• bcryptjs - Password hashing
• Nodemailer - Email support

Design System

• Space Grotesk - Display font
• Inter - Body font
• JetBrains Mono - Code font

📁 Project Structure

portfolio-project/
├── frontend/
│   ├── src/
│   │   ├── components/
│   │   │   └── Navbar.jsx
│   │   ├── pages/
│   │   │   ├── Hero.jsx
│   │   │   ├── About.jsx
│   │   │   ├── Skills.jsx
│   │   │   ├── Projects.jsx
│   │   │   ├── Journey.jsx
│   │   │   ├── Achievements.jsx
│   │   │   ├── Certificates.jsx
│   │   │   ├── Patent.jsx
│   │   │   ├── CodingProfiles.jsx
│   │   │   └── Contact.jsx
│   │   ├── App.jsx
│   │   ├── index.css
│   │   └── main.jsx
│   ├── public/
│   │   ├── profile.jpg (← ADD YOUR IMAGE HERE)
│   │   └── projects/
│   │       ├── project1.png (← ADD SCREENSHOT HERE)
│   │       └── project2.png (← ADD SCREENSHOT HERE)
│   ├── index.html
│   ├── vite.config.js
│   └── package.json
│
├── backend/
│   ├── models/
│   │   └── Contact.js
│   ├── routes/
│   │   ├── contact.js
│   │   ├── projects.js
│   │   └── resume.js
│   ├── public/
│   │   └── Gowshalya_P_Resume.pdf (← ADD YOUR RESUME HERE)
│   ├── server.js
│   ├── .env.example
│   └── package.json
│
├── SETUP_INSTRUCTIONS.md (← READ THIS FIRST!)
├── README.md
├── .gitignore
└── LICENSE

🚀 Quick Start

1. Install Dependencies

# Install backend dependencies
cd backend
npm install

# Install frontend dependencies
cd frontend
npm install

2. Setup Environment Variables

Create .env file in backend/:

MONGODB_URI=mongodb+srv://username:password@cluster.mongodb.net/portfolio
PORT=5000
CLIENT_URL=http://localhost:5173

Get MongoDB URI from MongoDB Atlas

3. Add Your Assets

Profile Image:

• Place at: frontend/public/profile.jpg
• Update: frontend/src/pages/Hero.jsx

Resume:

• Place at: backend/public/Gowshalya_P_Resume.pdf

Project Screenshots:

• Place at: frontend/public/projects/project1.png
• Place at: frontend/public/projects/project2.png

4. Run Development Servers

Terminal 1 - Backend:

cd backend
npm run dev
# Runs on http://localhost:5000

Terminal 2 - Frontend:

cd frontend
npm run dev
# Runs on http://localhost:5173

Visit http://localhost:5173 in your browser!

📖 Page Sections

1. Hero (/)

• Eye-catching introduction
• Call-to-action buttons
• Quick statistics
• Profile image

2. About (/about)

• Professional bio
• Expertise areas
• Career objective
• Contact links

3. Skills (/skills)

• Organized by category
• 6 skill categories
• Interactive hover effects

4. Projects (/projects)

• Featured project cards
• Project descriptions
• Technologies used
• Links to GitHub & live demos

5. Journey (/journey)

• Timeline of career growth
• Key milestones
• Learning path
• Insights cards

6. Achievements (/achievements)

• Hackathon wins
• Patent status
• AI projects
• Research work
• Summary statistics

7. Certificates (/certificates)

• Professional certifications
• Issuing organizations
• Completion dates
• Certificate count stats

8. Patent (/patent)

• Patent details
• Innovation overview
• Technical implementation
• Application timeline

9. Coding Profiles (/coding-profiles)

• LeetCode stats
• CodeChef stats
• SkillRack stats
• GeeksforGeeks stats
• Core competencies

10. Contact (/contact)

• Contact form
• Direct contact methods
• Resume download button
• Social media links

🎨 Customization

Colors

Edit frontend/src/index.css:

:root {
  --bg: #080808;
  --primary: #B7FF00;
  --secondary: #8B3DFF;
  /* More colors... */
}

Fonts

Already using Google Fonts:

• Space Grotesk (Display)
• Inter (Body)
• JetBrains Mono (Code)

Content

All content is hardcoded and can be easily edited in respective page components.

📤 Deployment

Frontend Deployment

Vercel (Recommended):

npm install -g vercel
cd frontend
vercel

Netlify:

npm run build
# Drag and drop 'dist' folder to Netlify

Backend Deployment

Render.com:

1. Push to GitHub
2. Create new Web Service on Render
3. Connect your repo
4. Set Environment Variables
5. Deploy!

Railway.app: Similar process to Render.com

🔐 Security Notes

• Never commit .env file
• Use environment variables for sensitive data
• Keep MongoDB credentials private
• Validate all form inputs on backend
• Use HTTPS in production

📧 Contact Form Setup

The contact form:

1. Sends data to /api/contact/send
2. Stores in MongoDB
3. Returns success/error message
4. Frontend shows user feedback

Make sure MongoDB is properly configured!

🐛 Common Issues & Solutions

Port Already in Use:

# Change PORT in .env or kill process
lsof -ti:5000 | xargs kill -9

Module Not Found:

npm install
# or
npm install --save <package-name>

MongoDB Connection Error:

• Verify MongoDB URI
• Check IP whitelist in MongoDB Atlas
• Ensure credentials are correct

Images Not Loading:

• Check file paths (case-sensitive)
• Clear browser cache
• Verify files exist in frontend/public/

📝 TODO/Future Enhancements

• Add blog section
• Implement admin panel
• Add testimonials section
• Email notifications for contacts
• Analytics tracking
• Multi-language support
• Search functionality

📄 License

This project is open source and available under the MIT License.

👨‍💻 Author

Gowshalya P

• 📧 Email: gowshalyaperumalsamy@gmail.com
• 📱 Phone: +91 8072538697
• 💼 LinkedIn: Gowshalya P - ML Engineer
• 🐙 GitHub: Gowshalyap-hub

---

🙏 Support

If you need help:

1. Read SETUP_INSTRUCTIONS.md first
2. Check troubleshooting section
3. Review environment variables
4. Contact support

---

Happy Coding! 🚀

Built with ❤️ for showcasing AI & ML expertise