https://github.com/krraviongit/ravi-portfolio
My Portfolio
https://github.com/krraviongit/ravi-portfolio
Last synced: 4 months ago
JSON representation
My Portfolio
- Host: GitHub
- URL: https://github.com/krraviongit/ravi-portfolio
- Owner: krRaviongit
- Created: 2025-07-26T08:22:36.000Z (11 months ago)
- Default Branch: main
- Last Pushed: 2025-08-16T07:02:42.000Z (10 months ago)
- Last Synced: 2025-08-16T07:23:39.439Z (10 months ago)
- Language: HTML
- Homepage: https://krravi-portfolio.vercel.app/
- Size: 4.64 MB
- Stars: 0
- Watchers: 0
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# Kumar Ravi - Portfolio Website
A modern, responsive portfolio website showcasing my skills, projects, and experience as a Full Stack Developer.
## 🚀 Features
- **Responsive Design** - Works perfectly on desktop, tablet, and mobile devices
- **Dark/Light Mode** - Toggle between themes with smooth transitions
- **Smooth Animations** - AOS (Animate On Scroll) and custom CSS animations
- **Interactive Elements** - Hover effects, project cards with shine animations
- **Contact Form** - Functional contact form with Formspree integration
- **Modern UI/UX** - Glassmorphism effects, gradient backgrounds, and professional styling
- **SEO Optimized** - Meta tags, structured data, and semantic HTML
## 🛠️ Technologies Used
- **Frontend**: HTML5, CSS3, JavaScript (ES6+)
- **Styling**: Tailwind CSS
- **Animations**: AOS.js, Three.js, Custom CSS animations
- **Icons**: SVG icons for skills and UI elements
- **Form Handling**: Formspree
- **Deployment**: Ready for GitHub Pages, Vercel, or Netlify
## 📁 Project Structure
```
Ravi-Portfolio/
├── index.html # Main HTML file
├── assets/ # Images and SVG files
│ ├── profilePhoto.jpg
│ ├── *.svg # Technology icons
│ └── *.jpg/png/webp # Project images
├── RESUME4.pdf # Resume file
├── README.md # Project documentation
└── .gitignore # Git ignore rules
```
## 🎨 Design Features
- **Hero Section**: Animated typing effect with floating blobs
- **About Section**: Professional profile with animated shapes
- **Skills Section**: Interactive skill bubbles with Three.js background
- **Projects Section**: Project cards with hover shine effects
- **Contact Section**: Glassmorphic form with rotating decorative elements
- **Navigation**: Smooth scrolling with perfect section alignment
## 🚀 Getting Started
1. **Clone the repository**
```bash
git clone https://github.com/yourusername/ravi-portfolio.git
cd ravi-portfolio
```
2. **Open in browser**
- Simply open `index.html` in your web browser
- Or use a local server for development
3. **Customize**
- Update personal information in `index.html`
- Replace images in the `assets/` folder
- Modify colors and styling in the CSS section
- Update the Formspree endpoint in the contact form
## 📝 Customization Guide
### Personal Information
- Update name, title, and description in the hero section
- Modify about me text and skills
- Add/remove projects as needed
- Update social media links
### Styling
- Colors are defined using Tailwind CSS classes
- Primary color: `#0ea5e9` (sky blue)
- Dark mode colors are automatically handled
- Custom animations are in the `` section
### Images
- Profile photo: `assets/profilePhoto.jpg`
- Project images: `assets/fit.jpeg`, `assets/movie.jpg`, `assets/ball.webp`
- Technology icons: Various SVG files in `assets/`
## 🌐 Deployment
### GitHub Pages
1. Push your code to GitHub
2. Go to repository Settings > Pages
3. Select source branch (usually `main`)
4. Your site will be available at `https://username.github.io/repository-name`
### Vercel
1. Connect your GitHub repository to Vercel
2. Deploy automatically on every push
3. Get a custom domain and SSL certificate
### Netlify
1. Drag and drop the project folder to Netlify
2. Or connect your GitHub repository
3. Automatic deployments and form handling
## 📧 Contact Form Setup
The contact form uses Formspree:
1. Sign up at [formspree.io](https://formspree.io)
2. Create a new form
3. Replace the form action URL in the HTML:
```html
<form action="https://formspree.io/f/YOUR_FORM_ID" method="POST">
```
## 🔧 Browser Support
- Chrome (latest)
- Firefox (latest)
- Safari (latest)
- Edge (latest)
- Mobile browsers (iOS Safari, Chrome Mobile)
## 📄 License
This project is open source and available under the [MIT License](LICENSE).
## 🤝 Contributing
Feel free to fork this project and customize it for your own portfolio. If you find any bugs or have suggestions, please open an issue or submit a pull request.
---
**Built with ❤️ by Kumar Ravi**
Connect with me:
- [LinkedIn](https://www.linkedin.com/in/kumarravi69/)
- [GitHub](https://github.com/krRaviongit)