Personal Portfolio Website

A modern, responsive portfolio website built with HTML, CSS, and JavaScript. Features a clean design, smooth animations, and mobile-friendly layout.

🚀 Features

• Responsive Design: Works perfectly on desktop, tablet, and mobile devices
• Modern UI: Clean and professional design with smooth animations
• Interactive Elements: Hover effects, scroll animations, and smooth transitions
• Contact Form: Functional contact form with validation
• Mobile Navigation: Hamburger menu for mobile devices
• Smooth Scrolling: Seamless navigation between sections
• Back to Top Button: Easy navigation back to the top of the page
• Notification System: User-friendly feedback for form submissions

📁 File Structure

portfolio/
├── index.html          # Main HTML file
├── styles.css          # CSS styles and responsive design
├── script.js           # JavaScript functionality
└── README.md           # This file

🎨 Customization Guide

1. Personal Information

Update the following in index.html:

• Name: Replace "Your Name" with your actual name
• Title: Update the hero subtitle to match your profession
• Description: Modify the hero description to reflect your expertise
• About Section: Update the about text with your personal story
• Contact Information: Replace placeholder contact details with your actual information

2. Projects Section

Replace the sample projects with your own:

<div class="project-card">
    <div class="project-image">
        <!-- Add your project image here -->
        <div class="project-placeholder">
            <i class="fas fa-laptop-code"></i>
        </div>
    </div>
    <div class="project-content">
        <h3>Your Project Name</h3>
        <p>Description of your project</p>
        <div class="project-tech">
            <span class="tech-tag">Technology 1</span>
            <span class="tech-tag">Technology 2</span>
        </div>
        <div class="project-links">
            <a href="your-github-link" class="project-link"><i class="fab fa-github"></i> Code</a>
            <a href="your-live-link" class="project-link"><i class="fas fa-external-link-alt"></i> Live</a>
        </div>
    </div>
</div>

3. Skills Section

Update the skills to match your expertise:

<div class="skill-item">
    <i class="fab fa-react"></i>
    <span>React</span>
</div>

4. Contact Information

Update the contact section with your details:

<div class="contact-item">
    <i class="fas fa-envelope"></i>
    <span>your.email@example.com</span>
</div>
<div class="contact-item">
    <i class="fas fa-phone"></i>
    <span>+1 (555) 123-4567</span>
</div>
<div class="contact-item">
    <i class="fas fa-map-marker-alt"></i>
    <span>Your City, Country</span>
</div>

5. Social Media Links

Update the social media links in the contact section:

<div class="social-links">
    <a href="your-github" class="social-link"><i class="fab fa-github"></i></a>
    <a href="your-linkedin" class="social-link"><i class="fab fa-linkedin"></i></a>
    <a href="your-twitter" class="social-link"><i class="fab fa-twitter"></i></a>
    <a href="your-instagram" class="social-link"><i class="fab fa-instagram"></i></a>
</div>

6. Color Scheme

To change the color scheme, update the CSS variables in styles.css:

:root {
    --primary-color: #2563eb;
    --secondary-color: #fbbf24;
    --text-color: #333;
    --background-color: #ffffff;
}

🚀 Getting Started

1. Download the files to your local machine
2. Customize the content following the guide above
3. Open index.html in your web browser to preview
4. Deploy to your hosting service (GitHub Pages, Netlify, Vercel, etc.)

📱 Browser Support

• Chrome (latest)
• Firefox (latest)
• Safari (latest)
• Edge (latest)
• Mobile browsers

🛠️ Technologies Used

• HTML5: Semantic markup
• CSS3: Modern styling with Flexbox and Grid
• JavaScript (ES6+): Interactive functionality
• Font Awesome: Icons
• Google Fonts: Typography (Inter font family)

📧 Contact Form Setup

The contact form is currently set up for demonstration. To make it functional:

1. EmailJS: Use EmailJS service for easy email integration
2. Formspree: Use Formspree for form handling
3. Netlify Forms: If deploying on Netlify
4. Custom Backend: Build your own backend API

Example with EmailJS:

// Add EmailJS script to HTML
<script src="https://cdn.jsdelivr.net/npm/@emailjs/browser@3/dist/email.min.js"></script>

// Initialize EmailJS
emailjs.init("YOUR_USER_ID");

// Update form submission in script.js
contactForm.addEventListener('submit', function(e) {
    e.preventDefault();
    
    emailjs.sendForm('YOUR_SERVICE_ID', 'YOUR_TEMPLATE_ID', this)
        .then(function(response) {
            showNotification('Message sent successfully!', 'success');
        }, function(error) {
            showNotification('Failed to send message. Please try again.', 'error');
        });
});

🎯 SEO Optimization

To improve search engine optimization:

1. Update meta tags in the HTML head
2. Add Open Graph tags for social media sharing
3. Include structured data for better search results
4. Optimize images with alt tags and compression
5. Add a sitemap for better indexing

🔧 Performance Tips

• Optimize images: Use WebP format and appropriate sizes
• Minify CSS/JS: Compress files for faster loading
• Use CDN: Load external libraries from CDN
• Lazy loading: Implement lazy loading for images
• Caching: Set up proper caching headers

📄 License

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

🤝 Contributing

Feel free to contribute to this project by:

• Reporting bugs
• Suggesting new features
• Submitting pull requests
• Improving documentation

📞 Support

If you need help customizing or deploying your portfolio, feel free to reach out!

---

Happy coding! 🎉