Personal Portfolio Website

A modern, responsive portfolio website built with HTML, CSS, and JavaScript. Features a clean design with smooth animations, mobile-friendly navigation, and an elegant dark theme.

🌟 Features

• Responsive Design: Fully responsive layout that works on all devices
• Modern UI/UX: Clean, professional design with smooth animations
• Dark Theme: Eye-friendly dark color scheme
• Interactive Elements: Hover effects, scroll animations, and smooth transitions
• Mobile Navigation: Hamburger menu for mobile devices
• Smooth Scrolling: Seamless navigation between sections
• Project Showcase: Grid layout for displaying projects
• Skills Section: Organized display of technical skills
• Experience Timeline: Visual timeline for work experience
• Social Links: Easy access to social media profiles
• SEO Friendly: Proper meta tags and semantic HTML

📁 Project Structure

portfolio/
│
├── index.html          # Main HTML file
├── styles.css          # CSS styles
├── script.js           # JavaScript functionality
└── README.md           # Documentation

🚀 Getting Started

Prerequisites

• A modern web browser (Chrome, Firefox, Safari, Edge)
• A text editor (VS Code, Sublime Text, etc.) for customization
• Basic knowledge of HTML, CSS, and JavaScript (for customization)

Installation

1. Clone or Download this repository to your local machine

2. Open the project in your preferred text editor

3. Customize the content in index.html:

   • Replace "Prashanth Bhat" with your name
   • Update the hero section with your information
   • Add your professional title and description
   • Update the About section with your bio
   • Add your work experience in the Experience section
   • Showcase your projects in the Projects section
   • List your skills in the Skills section
   • Update social media links with your profiles
   • Replace email addresses with your contact email

4. Replace placeholder images:

   • Add your profile picture (replace the placeholder in About section)
   • Add project screenshots (replace placeholders in Projects section)
   • Recommended image sizes:
     • Profile picture: 300x300px
     • Project images: 600x400px

5. Update colors (optional):

   • Open styles.css
   • Modify CSS variables in the :root section to match your brand colors

6. Open index.html in your web browser to view the website

🎨 Customization Guide

Changing Colors

Edit the CSS variables in styles.css:

:root {
    --primary-color: #4a90e2;      /* Primary accent color */
    --secondary-color: #50c878;     /* Secondary accent color */
    --dark-bg: #0a192f;            /* Dark background */
    --light-bg: #112240;           /* Light background */
    --text-primary: #ccd6f6;       /* Primary text color */
    --text-secondary: #8892b0;     /* Secondary text color */
    --text-highlight: #64ffda;     /* Highlight color */
}

Adding New Projects

Add a new project card in the Projects section of index.html:

<div class="project-card">
    <div class="project-image">
        <img src="your-image.jpg" alt="Project Name">
        <div class="project-overlay">
            <a href="https://your-live-site.com" class="project-link" target="_blank">
                <i class="fas fa-external-link-alt"></i>
            </a>
            <a href="https://github.com/your-repo" class="project-link" target="_blank">
                <i class="fab fa-github"></i>
            </a>
        </div>
    </div>
    <div class="project-info">
        <h3>Your Project Name</h3>
        <p>Project description goes here...</p>
        <div class="project-tags">
            <span>Technology 1</span>
            <span>Technology 2</span>
            <span>Technology 3</span>
        </div>
    </div>
</div>

Adding New Skills

Add skills in the Skills section:

<div class="skill-category">
    <div class="skill-icon">
        <i class="fas fa-icon-name"></i>
    </div>
    <h3>Category Name</h3>
    <div class="skill-items">
        <span>Skill 1</span>
        <span>Skill 2</span>
        <span>Skill 3</span>
    </div>
</div>

Updating Social Links

Replace the URLs in the social links sections:

<a href="https://github.com/your-username" target="_blank">
    <i class="fab fa-github"></i>
</a>
<a href="https://linkedin.com/in/your-profile" target="_blank">
    <i class="fab fa-linkedin"></i>
</a>

🌐 Deployment

GitHub Pages

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

Netlify

1. Sign up for a free account at Netlify
2. Drag and drop your project folder to Netlify
3. Your site will be live in seconds with a custom URL

Vercel

1. Sign up at Vercel
2. Import your GitHub repository
3. Deploy with one click

📱 Browser Support

• Chrome (latest)
• Firefox (latest)
• Safari (latest)
• Edge (latest)
• Opera (latest)

🛠️ Technologies Used

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

📝 Sections Overview

1. Navigation: Fixed navbar with smooth scrolling
2. Hero: Introduction with call-to-action buttons
3. About: Personal bio and technologies
4. Experience: Work history timeline
5. Projects: Portfolio showcase
6. Skills: Technical skills organized by category
7. Contact: Get in touch section
8. Footer: Copyright and social links

⚡ Performance Tips

• Optimize images before uploading (use tools like TinyPNG)
• Use WebP format for better compression
• Minimize CSS and JavaScript for production
• Enable browser caching
• Use a CDN for Font Awesome

🎯 SEO Tips

• Update the <title> tag with your name
• Add a meta description in the <head> section
• Use descriptive alt text for all images
• Create a sitemap.xml file
• Add Open Graph tags for social media sharing

📄 License

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

🤝 Contributing

Feel free to fork this project and customize it for your own use. If you have suggestions for improvements, please open an issue or submit a pull request.

📧 Contact

For questions or feedback, reach out via:

• Email: your.email@example.com
• LinkedIn: Your Profile
• GitHub: @your-username

🙏 Acknowledgments

• Design inspiration from modern portfolio websites
• Icons from Font Awesome
• Color palette inspired by popular developer themes

---

Made with ❤️ by Prashanth Bhat

Last updated: February 2024