Portfolio - Garima Jain

A modern, interactive portfolio website showcasing my data science expertise, projects, and professional experience. This is a personal portfolio built entirely with frontend technologies - no backend required!

✨ Features

• 🎨 Modern Design: Clean, professional interface with glassmorphism effects and glowing elements
• 🕸️ Interactive Skills Web: Unique spider web (cobweb) visualization of technical skills with neon blue connections
• 💫 Smooth Animations: Framer Motion powered animations, typing effects, and transitions
• 📱 Fully Responsive: Optimized for all devices and screen sizes
• 🌓 Theme Support: Beautiful design with dark/light theme capability
• ⚡ Fast Performance: Built with Vite for blazing fast loading speed
• 📄 Resume Download: One-click resume download functionality

🛠️ Tech Stack

• React 18 - UI library
• TypeScript - Type safety and better development experience
• Vite - Lightning-fast build tool
• TailwindCSS - Utility-first CSS framework
• Framer Motion - Smooth animations and interactions
• Shadcn/ui - Beautiful, accessible UI components
• Lucide React - Modern icon library
• React Type Animation - Typing animation effect

🚀 Getting Started

Prerequisites

• Node.js 18+
• npm or yarn

Installation

Clone the repository:

git clone https://github.com/garima-jain11/portfolio.git
cd portfolio

Install dependencies:

npm install

Run development server:

npm run dev

Open http://localhost:5000 in your browser.

📦 Build for Production

npm run build
npm start

🚀 Deploy to GitHub Pages

npm run deploy

This will build your portfolio and deploy it to GitHub Pages automatically!

📂 Project Structure

portfolio/
├── client/              # Frontend React app
│   ├── src/
│   │   ├── components/  # React components
│   │   │   ├── HeroSection.tsx
│   │   │   ├── AboutSection.tsx
│   │   │   ├── ExperienceTimeline.tsx
│   │   │   ├── SkillsSection.tsx (Spider Web!)
│   │   │   ├── ProjectsSection.tsx
│   │   │   ├── EducationSection.tsx
│   │   │   └── ContactSection.tsx
│   │   ├── hooks/       # Custom hooks
│   │   ├── lib/         # Utilities
│   │   └── pages/       # Page components
│   └── index.html
├── attached_assets/     # Images, resume, and assets
│   ├── Garima_Jain.pdf  # Resume
│   └── stock_images/    # Project images
└── public/              # Static files

🎯 Key Sections

1. Hero Section - Introduction with animated typing effect
2. About - Professional background and expertise
3. Experience - Work timeline with company logos
4. Skills - Interactive spider web visualization
5. Projects - Showcase of data science projects
6. Education - Academic background and achievements
7. Contact - Connect via email, GitHub, LinkedIn

🎨 Customization

This is my personal portfolio, but feel free to fork it and customize for yourself!

Update Personal Information

Edit the following files:

• client/src/components/HeroSection.tsx - Name, title, social links
• client/src/components/AboutSection.tsx - Bio and background
• client/src/components/ExperienceTimeline.tsx - Work experience
• client/src/components/ProjectsSection.tsx - Projects
• client/src/components/EducationSection.tsx - Education
• client/src/components/ContactSection.tsx - Contact info

Update Skills

Edit client/src/components/SkillsSection.tsx to add/remove skills in the spider web visualization.

Change Theme Colors

Edit tailwind.config.ts to customize the color scheme and design tokens.

📝 License

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

📧 Contact

Garima Jain

• Email: jain.garima2003@gmail.com
• GitHub: @garima-jain11
• LinkedIn: linkedin.com/in/garimajain

---

⭐ If you like this project, please give it a star on GitHub!