Shivansh Pawar - Portfolio Website

A modern, responsive portfolio website showcasing web development skills and projects. Built with clean HTML, CSS, and JavaScript featuring a beautiful sky blue theme and smooth animations.

🚀 Live Demo

View Portfolio

📁 Project Structure

portfolio/
├── index.html          # Main HTML file
├── style.css           # All styling and animations
├── script.js           # JavaScript functionality
├── generated-icon.png  # Favicon/icon
└── README.md          # This file

📄 File Descriptions

index.html

• Purpose: The main structure of the portfolio website
• Contains: All sections (Home, About, Projects, Skills, Contact)
• Features: Semantic HTML5 structure, accessibility attributes, SEO meta tags
• Key Sections:
  • Navigation bar with smooth scroll links
  • Hero section with typing animation
  • About section with profile card and description
  • Projects showcase (3 key projects)
  • Skills section with organized technology icons
  • Contact form with validation
  • Footer with social links

style.css

• Purpose: Complete styling and visual design
• Features:
  • CSS custom properties (variables) for easy theming
  • Responsive design for all screen sizes
  • Modern glass-morphism effects
  • Smooth animations and transitions
  • Sky blue gradient theme
  • Mobile-first approach
• Key Components:
  • Light theme with sky blue accents
  • Card-based layouts with subtle shadows
  • Hover effects and micro-interactions
  • Responsive grid systems
  • Custom animations

script.js

• Purpose: Interactive functionality and animations
• Features:
  • Custom animation system (lightweight)
  • Smooth scrolling navigation
  • Mobile menu functionality
  • Contact form validation
  • Typing animation effect
  • Skill progress animations
  • Accessibility enhancements
• Key Classes:
  • SimpleAnimations: Handles scroll-based animations
  • Navigation: Manages menu and scrolling
  • TypingAnimation: Creates typewriter effect
  • ContactForm: Form validation and submission
  • AccessibilityEnhancer: Keyboard navigation support

generated-icon.png

• Purpose: Website favicon and icon
• Usage: Displays in browser tabs and bookmarks

🛠️ How to Run Locally

Option 1: Simple HTTP Server (Recommended)

1. Download the files:

   git clone [your-repo-url]
   cd portfolio

2. Using Python (if installed):

   # Python 3
   python -m http.server 3000
   
   # Python 2
   python -SimpleHTTPServer 3000

3. Using Node.js (if installed):

   npx serve .

4. Using PHP (if installed):

   php -S localhost:3000

5. Open in browser: http://localhost:3000

Option 2: Direct File Opening

1. Simply double-click index.html
2. It will open in your default browser
3. ⚠️ Note: Some features might not work due to CORS restrictions

Option 3: VS Code Live Server

1. Install "Live Server" extension in VS Code
2. Right-click on index.html
3. Select "Open with Live Server"

🌐 How to Deploy on GitHub Pages

Method 1: GitHub Pages (Free Hosting)

1. Create a GitHub repository:

   git init
   git add .
   git commit -m "Initial commit"
   git branch -M main
   git remote add origin https://github.com/yourusername/portfolio.git
   git push -u origin main

2. Enable GitHub Pages:

   • Go to your repository settings
   • Scroll to "Pages" section
   • Select "Deploy from branch"
   • Choose "main" branch
   • Click "Save"

3. Your site will be available at: https://yourusername.github.io/portfolio

Method 2: Netlify (Alternative)

1. Connect your GitHub repo to Netlify
2. Deploy settings:
   • Build command: (leave empty)
   • Publish directory: (leave empty or use ".")
3. Auto-deploys on every push to main branch

Method 3: Vercel

1. Import your GitHub repository
2. Configure:
   • Framework: Other
   • Build command: (leave empty)
   • Output directory: (leave empty)
3. Deploy with one click

✏️ How to Customize/Edit

🎨 Changing Colors

Edit the CSS variables in style.css (lines 4-9):

:root {
    --primary-color: #0EA5E9;    /* Sky Blue */
    --primary-light: #38BDF8;    /* Light Sky Blue */
    --secondary-color: #06B6D4;  /* Cyan */
    --accent-color: #0284C7;     /* Deep Sky Blue */
    /* Add your preferred colors here */
}

📝 Updating Personal Information

In index.html, find and replace:

1. Name: Search for "Shivansh Pawar" and replace
2. Title: Change "Web Developer" text
3. Description: Update the hero tagline and about section
4. Email: Replace "shivansh.pawar@example.com"
5. Social Links: Update href attributes in the footer

🚀 Adding/Editing Projects

In index.html, find the projects section (around line 220):

<div class="project-card">
    <div class="project-image">
        <div class="project-preview">
            <i class="fas fa-your-icon"></i> <!-- Change icon -->
        </div>
    </div>
    <div class="project-content">
        <h3>Your Project Name</h3> <!-- Edit title -->
        <p>Your project description</p> <!-- Edit description -->
        <div class="project-tags">
            <span class="tag">Tech1</span> <!-- Edit technologies -->
            <span class="tag">Tech2</span>
        </div>
        <div class="project-links">
            <a href="your-demo-url" class="project-link primary">Live Demo</a>
            <a href="your-github-url" class="project-link secondary">GitHub</a>
        </div>
    </div>
</div>

🔧 Modifying Skills

In index.html, find the skills section:

<div class="skill-icon-item">
    <i class="fab fa-html5"></i> <!-- Change icon -->
    <span>HTML5</span> <!-- Change name -->
</div>

Available icon classes: Visit Font Awesome for more icons.

📱 Responsive Breakpoints

In style.css, modify media queries:

@media (max-width: 768px) {
    /* Tablet styles */
}

@media (max-width: 480px) {
    /* Mobile styles */
}

🔧 Contact Form Setup

The contact form includes client-side validation and can be connected to various services:

Option 1: Formspree (Recommended - Free)

1. Go to Formspree.io
2. Create an account
3. Get your form endpoint
4. Update the form action in index.html

Option 2: Netlify Forms

1. Add data-netlify="true" to the form tag
2. Deploy on Netlify
3. Forms will appear in your Netlify dashboard

Option 3: EmailJS

1. Set up EmailJS account
2. Add EmailJS SDK to your project
3. Configure the service in script.js

🎯 Performance Tips

1. Optimize images: Use WebP format for better compression
2. Minify CSS/JS: Use tools like Terser for production
3. Enable compression: Use Gzip on your server
4. Cache headers: Set appropriate cache policies
5. CDN: Use a CDN for faster global loading

🧪 Testing

Cross-Browser Testing

• Chrome (Latest)
• Firefox (Latest)
• Safari (Latest)
• Edge (Latest)

Mobile Testing

• iPhone (iOS Safari)
• Android (Chrome)
• Tablet devices

Accessibility Testing

• Screen readers compatibility
• Keyboard navigation
• Color contrast ratios
• Alt text for images

🐛 Troubleshooting

Common Issues

1. Animations not working:

   • Check if JavaScript is enabled
   • Ensure all files are in the same directory

2. Smooth scrolling not working:

   • Verify section IDs match navigation links
   • Check for JavaScript errors in console

3. Contact form not submitting:

   • Set up a form service (Formspree, Netlify, etc.)
   • Check network requests in browser dev tools

4. Mobile menu not working:

   • Ensure JavaScript files are loaded properly
   • Check for console errors

📈 SEO Optimization

The portfolio includes:

• Semantic HTML structure
• Meta descriptions and keywords
• Open Graph tags for social sharing
• Proper heading hierarchy
• Alt text for images
• Fast loading performance

🤝 Contributing

Feel free to customize this portfolio for your own use! If you make improvements:

1. Fork the repository
2. Create a feature branch
3. Make your changes
4. Test thoroughly
5. Submit a pull request

📞 Support

If you need help customizing this portfolio:

1. Check this README first
2. Search for similar issues online
3. Create an issue in the repository
4. Provide details about your problem

📄 License

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

---

Built with ❤️ by Shivansh Pawar

Last updated: 2025