Jaideep Vantipalli - Portfolio Website

A modern, responsive personal portfolio website showcasing skills, projects, achievements, and coding profiles.

🌟 Features

• Modern Design: Glassmorphism effects with gradient accents
• Dark/Light Mode: Toggle between themes with localStorage persistence
• Fully Responsive: Optimized for mobile, tablet, and desktop
• Smooth Animations: Intersection Observer API for scroll animations
• SEO Optimized: Meta tags for search engines and social media
• Interactive Elements: Hover effects, smooth scrolling, and form validation

🚀 Quick Start

Option 1: Open Directly

Simply open index.html in your web browser.

Option 2: Local Development Server

For the best experience, use a local development server:

# Using Python 3
python -m http.server 8000

# Using Node.js (http-server)
npx http-server -p 8000

# Using PHP
php -S localhost:8000

Then visit http://localhost:8000 in your browser.

📁 Project Structure

portfolio/
├── index.html          # Main HTML file
├── styles.css          # CSS design system
├── script.js           # JavaScript functionality
├── assets/
│   └── profile.png     # Profile image
└── README.md           # This file

🎨 Customization

Update Profile Image

Replace assets/profile.png with your own photo. Recommended size: 500x500px.

Update Personal Information

Edit index.html to update:

• Name and role in the hero section
• About me text
• Skills, projects, certifications
• Education details
• Contact information

Update Social Media Links

In index.html, find the footer section and update the href attributes:

<!-- Instagram -->
<a href="https://www.instagram.com/YOUR-USERNAME">

<!-- LinkedIn -->
<a href="https://www.linkedin.com/in/YOUR-USERNAME">

<!-- Email -->
<a href="mailto:YOUR-EMAIL@example.com">

<!-- GitHub -->
<a href="https://github.com/YOUR-USERNAME">

<!-- LeetCode -->
<a href="https://leetcode.com/YOUR-USERNAME">

<!-- GeeksForGeeks -->
<a href="https://www.geeksforgeeks.org/user/YOUR-USERNAME">

Customize Colors

Edit the CSS variables in styles.css (lines 15-30) to change the color scheme:

:root {
  --accent-primary: #6366f1;  /* Change primary accent color */
  --accent-secondary: #3b82f6; /* Change secondary accent color */
  /* ... other variables */
}

🌐 Deployment

GitHub Pages

1. Create a new repository on GitHub
2. Push your code to the repository
3. Go to Settings → Pages
4. Select the main branch as source
5. Your site will be live at https://YOUR-USERNAME.github.io/REPO-NAME

Vercel

1. Install Vercel CLI: npm i -g vercel
2. Run vercel in the project directory
3. Follow the prompts
4. Your site will be deployed automatically

Netlify

1. Drag and drop the project folder to Netlify Drop
2. Or connect your GitHub repository for automatic deployments

📱 Sections

1. Hero: Introduction with profile image and CTA buttons
2. About: Brief description of background and goals
3. Skills: Technical skills organized by category
4. Projects: Showcase of projects (3 slots available)
5. Certifications: Professional certifications and courses
6. Achievements: Awards and accomplishments
7. Education: Academic background
8. Contact: Contact form for inquiries
9. Footer: Social media and coding profile links

🛠️ Technologies Used

• HTML5
• CSS3 (with CSS Variables)
• Vanilla JavaScript
• Google Fonts (Inter)
• Intersection Observer API

📄 License

This project is open source and available for personal use.

👤 Author

Jaideep Vantipalli

• Location: Eluru, Andhra Pradesh, India
• Education: B.Tech CSE, Sri Vasavi Engineering College

---

Made with ❤️ by Jaideep Vantipalli