<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Bharat Sharma - Aspiring Data Analyst</title>

    <!-- Font Awesome CDN for icons -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css">

    <!-- GSAP CDN for animations -->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.11.1/gsap.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.11.1/ScrollTrigger.min.js"></script>

    <style>
        /* Resetting default styles */
        body, h1, h2, h3, p, a {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        /* Body and Basic Styling */
        body {
            font-family: 'Arial', sans-serif;
            line-height: 1.6;
            background: linear-gradient(45deg, #f4a261, #2a9d8f);
            color: #333;
            scroll-behavior: smooth;
            margin: 0;
            padding: 0;
        }

        header {
            background: linear-gradient(45deg, #ff6f61, #2a9d8f); /* Vibrant gradient background */
            color: #fff;
            padding: 2rem 0;
            text-align: center;
            box-shadow: 0px 10px 15px rgba(0, 0, 0, 0.1);
        }

        header h1 {
            font-size: 2.5rem;
            font-weight: 700;
        }

        nav {
            background: #333;
            color: #fff;
            position: sticky;
            top: 0;
            padding: 1rem;
            text-align: center;
            z-index: 1000;
        }

        nav a {
            margin: 0 15px;
            color: #fff;
            text-decoration: none;
            font-size: 1.2rem;
            transition: color 0.3s ease;
        }

        nav a:hover {
            color: #ff6600; /* Hover color */
        }

        /* Section Styling */
        section {
            padding: 4rem 2rem;
            text-align: center;
        }

        .skills, .projects {
            display: grid;
            grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
            gap: 2rem;
            margin-top: 2rem;
        }

        .skill, .project {
            background: #fff;
            padding: 2rem;
            border-radius: 10px;
            box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
            transition: transform 0.3s ease, box-shadow 0.3s ease;
        }

        .skill:hover, .project:hover {
            transform: translateY(-10px);
            box-shadow: 0 20px 40px rgba(0, 0, 0, 0.15);
        }

        .project h3 .icon {
            margin-right: 10px;
            color: #ff6600; /* Icon color */
        }

        .project h3 .icon:hover {
            color: #2575fc; /* Hover effect for icons */
        }

        footer {
            background: #333;
            color: #fff;
            text-align: center;
            padding: 1rem;
        }

        footer a {
            color: #fff;
            text-decoration: none;
            font-weight: bold;
            margin: 0 10px;
        }

        footer a:hover {
            color: #ff6600;
        }

        /* Headline Styles */
        h2 {
            font-size: 2rem;
            font-weight: 600;
            color: #2575fc;
            letter-spacing: 1px;
            text-transform: uppercase;
            margin-bottom: 1rem;
        }

        .skills h2, .projects h2, .contact h2 {
            color: #ff6600;
        }

        /* Icons for skills */
        .skill i {
            font-size: 2rem;
            color: #ff6600;
            margin-bottom: 10px;
            transition: transform 0.3s ease;
        }

        .skill:hover i {
            transform: scale(1.2);
            color: #2575fc;
        }

        /* Increased size for social media icons */
        .contact-icons a {
            font-size: 2.5rem; /* Increase the size of the icons */
            color: #ff6600;
            margin: 0 15px;
            transition: color 0.3s ease;
        }

        .contact-icons a:hover {
            color: #2575fc; /* Hover effect */
        }
    </style>
</head>

<body>

<header>
    <h1>Bharat Sharma - Aspiring Data Analyst</h1>
</header>

<nav>
    <a href="#home">Home</a>
    <a href="#skills">Skills</a>
    <a href="#projects">Projects</a>
    <a href="#contact-info">Contact</a>
</nav>

<section id="home">
    <h2>Welcome to My Portfolio</h2>
    <p>Hi! I’m Bharat Sharma, a passionate and results-driven data analyst focused on turning data into actionable insights. I leverage tools like Python, SQL, Power BI, and Excel to solve complex problems and create meaningful reports. This portfolio showcases my projects, skills, and aspirations.</p>
    <p>Feel free to explore my work and connect with me through the contact section. I am always open to new opportunities and collaborations!</p>
</section>

<section id="skills">
    <h2>My Core Skills</h2>
    <div class="skills">
        <div class="skill">
            <i class="fab fa-python"></i>
            <h3>Python</h3>
            <p>I use Python for data analysis, with libraries like pandas, numpy, and matplotlib for data manipulation and visualization.</p>
        </div>
        <div class="skill">
            <i class="fas fa-database"></i>
            <h3>SQL</h3>
            <p>Proficient in SQL, helping me manage databases, write complex queries, and extract insights from datasets.</p>
        </div>
        <div class="skill">
            <i class="fab fa-microsoft"></i>
            <h3>Power BI</h3>
            <p>Creating interactive dashboards to simplify data interpretation for stakeholders is one of my key strengths.</p>
        </div>
        <div class="skill">
            <i class="fas fa-file-excel"></i>
            <h3>Excel</h3>
            <p>Excel is essential for calculations, pivot tables, and VLOOKUP, making it invaluable in my data analysis toolkit.</p>
        </div>
        <!-- Additional Skills -->
        <div class="skill">
            <i class="fas fa-users"></i>
            <h3>Interpersonal & Communication Skills</h3>
            <p>Strong communication and interpersonal skills to work effectively in teams and with clients.</p>
        </div>
        <div class="skill">
            <i class="fas fa-lightbulb"></i>
            <h3>Solutions-Oriented</h3>
            <p>A solutions-oriented approach to solving complex problems with practical, data-driven insights.</p>
        </div>
        <div class="skill">
            <i class="fas fa-trophy"></i>
            <h3>Fast Learner</h3>
            <p>Quick to adapt to new tools and technologies to stay up-to-date in the fast-evolving data analysis field.</p>
        </div>
    </div>
</section>

<section id="projects">
    <h2>My Projects</h2>
    <div class="projects">
        <div class="project">
            <h3><i class="fas fa-chart-line icon"></i> IPL Management Project</h3>
            <p>Using Python and libraries like pandas and matplotlib, this project analyzes IPL data to uncover insights from matches.</p>
            <a href="https://github.com/bharatsharma07/IPL-Management" target="_blank">View on GitHub</a>
        </div>
        <div class="project">
            <h3><i class="fas fa-table icon"></i> Excel Dashboard Project</h3>
            <p>Designed an Excel dashboard using slicers and pivot tables to visualize data for informed decision-making.</p>
            <a href="https://github.com/bharatsharma07/Excel-Dashboard" target="_blank">View on GitHub</a>
        </div>
        <div class="project">
            <h3><i class="fas fa-coffee icon"></i> Cafe Management System</h3>
            <p>This Python project uses dictionaries to manage orders, inventory, and sales for a simplified cafe management experience.</p>
            <a href="https://github.com/bharatsharma07/Cafe-Management-System" target="_blank">View on GitHub</a>
        </div>
    </div>
</section>

<section id="hobbies">
    <h2>My Hobbies</h2>
    <div class="skills">
        <div class="skill">
            <i class="fas fa-video"></i>
            <h3>Watching Movies</h3>
            <p>I enjoy watching movies across genres for both relaxation and inspiration.</p>
        </div>
        <div class="skill">
            <i class="fas fa-headphones"></i>
            <h3>Listening to Music</h3>
            <p>Music is my go-to for relaxation and motivation, enhancing focus during work.</p>
        </div>
        <div class="skill">
            <i class="fas fa-cricket"></i>
            <h3>Playing Cricket</h3>
            <p>Cricket is a sport I love, helping me stay active and work as part of a team.</p>
        </div>
    </div>
</section>

<section id="contact-info">
    <h2>Contact Information</h2>
    <p>If you would like to get in touch, feel free to email me:</p>
    <p><a href="mailto:bharatsharma48145@gmail.com">bharatsharma48145@gmail.com</a></p>
    <p>Connect with me on:</p>
    <div class="contact-icons">
        <a href="https://www.linkedin.com/in/bharat-sharma-8339794217" target="_blank"><i class="fab fa-linkedin"></i></a>
        <a href="https://github.com/bharatsharma07" target="_blank"><i class="fab fa-github"></i></a>
    </div>
</section>

<footer>
    <p>&copy; 2024 Bharat Sharma | <a href="#home">Back to Top</a></p>
</footer>

<script>
    // GSAP Animations
    gsap.from("header h1", {
        opacity: 0,
        y: -50,
        duration: 1,
        ease: "power3.out"
    });

    gsap.from("nav a", {
        opacity: 0,
        x: -50,
        duration: 1,
        stagger: 0.2,
        ease: "power3.out"
    });

    gsap.from("section h2", {
        opacity: 0,
        y: 50,
        duration: 1,
        stagger: 0.2,
        ease: "power3.out"
    });

    gsap.from(".skill, .project", {
        opacity: 0,
        y: 50,
        duration: 1,
        stagger: 0.2,
        ease: "power3.out",
        scrollTrigger: {
            trigger: ".skills, .projects",
            start: "top 80%",
            end: "top 30%",
            toggleActions: "play none none reverse"
        }
    });

    gsap.from(".contact-icons a", {
        opacity: 0,
        x: -50,
        duration: 1,
        stagger: 0.2,
        ease: "power3.out",
        scrollTrigger: {
            trigger: "#contact-info",
            start: "top 80%",
            end: "top 30%",
            toggleActions: "play none none reverse"
        }
    });
</script>

</body>
</html>