# Samarth Jain - 3D Portfolio (React) A modern, unique 3D portfolio built with React, Framer Motion, and custom animations. ## 🎨 Features - **Unique Design**: Deep purple & electric blue color scheme with glassmorphism effects - **3D Animations**: Interactive 3D cube, rotating elements, and smooth transitions - **Particle Background**: Animated particle network with connecting lines - **Responsive**: Fully responsive design that works on all devices - **Smooth Scrolling**: Scroll-triggered animations using Framer Motion - **Modern UI**: Gradient text, hover effects, and glassmorphism cards ## 🚀 Installation & Setup ### Prerequisites - Node.js (v14 or higher) - npm or yarn ### Step-by-Step Installation 1. **Navigate to the project directory:** ```bash cd samarth-portfolio-react ``` 2. **Install dependencies:** ```bash npm install ``` 3. **Start the development server:** ```bash npm start ``` 4. **Open your browser:** - The app will automatically open at `http://localhost:3000` - If it doesn't, manually open this URL in your browser 5. **Build for production:** ```bash npm run build ``` - This creates an optimized production build in the `build` folder ## 📦 Dependencies ```json { "react": "^18.2.0", "react-dom": "^18.2.0", "react-scripts": "5.0.1", "framer-motion": "^10.16.4", "react-intersection-observer": "^9.5.3" } ``` ## 📁 Project Structure ``` samarth-portfolio-react/ ├── public/ │ ├── index.html │ └── favicon.ico ├── src/ │ ├── components/ │ │ ├── Navigation.js │ │ ├── Navigation.css │ │ ├── Hero.js │ │ ├── Hero.css │ │ ├── About.js │ │ ├── About.css │ │ ├── Education.js │ │ ├── Education.css │ │ ├── Skills.js │ │ ├── Skills.css │ │ ├── Projects.js │ │ ├── Projects.css │ │ ├── Certifications.js │ │ ├── Certifications.css │ │ ├── Achievements.js │ │ ├── Achievements.css │ │ ├── Contact.js │ │ ├── Contact.css │ │ ├── ParticleBackground.js │ │ └── ParticleBackground.css │ ├── App.js │ ├── App.css │ ├── index.js │ └── index.css ├── package.json └── README.md ``` ## 🎨 Color Palette - **Primary**: #6C63FF (Purple) - **Secondary**: #4ECDC4 (Teal) - **Accent**: #FF6B6B (Red) - **Dark**: #0F0E17 - **Dark Secondary**: #1A1825 - **Light**: #FFFFFE - **Text Primary**: #E8E8E8 - **Text Secondary**: #A7A9BE ## 🔧 Customization ### Changing Colors Edit the CSS variables in `src/App.css`: ```css :root { --primary: #6C63FF; --secondary: #4ECDC4; --accent: #FF6B6B; /* ... other colors */ } ``` ### Adding Sections 1. Create new component in `src/components/` 2. Import it in `src/App.js` 3. Add it to the component tree ### Modifying Content All content is editable in the respective component files: - Personal info: `Hero.js` - About text: `About.js` - Projects: `Projects.js` - Skills: `Skills.js` - etc. ## 🌐 Deployment ### Deploy to Vercel ```bash npm install -g vercel vercel ``` ### Deploy to Netlify ```bash npm run build # Drag and drop the 'build' folder to Netlify ``` ### Deploy to GitHub Pages 1. Install gh-pages: ```bash npm install --save-dev gh-pages ``` 2. Add to package.json: ```json "homepage": "https://yourusername.github.io/portfolio", "scripts": { "predeploy": "npm run build", "deploy": "gh-pages -d build" } ``` 3. Deploy: ```bash npm run deploy ``` ## 📱 Responsive Breakpoints - Desktop: > 1024px - Tablet: 768px - 1024px - Mobile: < 768px ## 🎯 Performance Tips 1. **Optimize Images**: Use WebP format and lazy loading 2. **Code Splitting**: Already implemented with React 3. **Lazy Loading**: Use React.lazy() for components 4. **Minimize Dependencies**: Only import what you need ## 🐛 Troubleshooting ### Port Already in Use ```bash # Kill process on port 3000 lsof -ti:3000 | xargs kill -9 # Or use different port PORT=3001 npm start ``` ### Module Not Found ```bash # Clear cache and reinstall rm -rf node_modules package-lock.json npm install ``` ### Build Errors ```bash # Clean build rm -rf build npm run build ``` ## 📄 License MIT License - feel free to use this project for your own portfolio! ## 👤 Author **Samarth Jain** - Email: samarthjain.cse@gmail.com - Phone: +91-7878908050 - LinkedIn: [linkedin.com/in/samarjai8685](https://linkedin.com/in/samarjai8685) - Unstop: [unstop.com/u/samarjai8685](https://unstop.com/u/samarjai8685) ## 🙏 Acknowledgments - React.js - Framer Motion - React Intersection Observer --- **Built with ❤️ using React & Framer Motion** # samarthjportfolio # samarthjportfolio