Skip to content

WadekarKunal/.github

 
 

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

4 Commits
 
 
 
 

Repository files navigation

<title>Kunal Wadekar - E&TC Engineering Student</title> <style> * { margin: 0; padding: 0; box-sizing: border-box; }
    :root {
        --primary-color: #2563eb;
        --secondary-color: #1e40af;
        --accent-color: #f59e0b;
        --dark-color: #1f2937;
        --light-color: #f8fafc;
        --text-color: #374151;
        --border-color: #e5e7eb;
        --shadow: 0 10px 30px rgba(0,0,0,0.1);
        --gradient: linear-gradient(135deg, var(--primary-color), var(--secondary-color));
    }

    html {
        scroll-behavior: smooth;
    }

    body {
        font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
        line-height: 1.6;
        color: var(--text-color);
        overflow-x: hidden;
    }

    /* Navigation */
    .navbar {
        position: fixed;
        top: 0;
        width: 100%;
        background: rgba(255, 255, 255, 0.95);
        backdrop-filter: blur(20px);
        z-index: 1000;
        padding: 1rem 0;
        transition: all 0.3s ease;
        box-shadow: 0 2px 20px rgba(0,0,0,0.1);
    }

    .nav-container {
        max-width: 1200px;
        margin: 0 auto;
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 0 2rem;
    }

    .logo {
        font-size: 1.5rem;
        font-weight: 700;
        color: var(--primary-color);
        text-decoration: none;
    }

    .nav-menu {
        display: flex;
        list-style: none;
        gap: 2rem;
    }

    .nav-menu a {
        text-decoration: none;
        color: var(--text-color);
        font-weight: 500;
        transition: color 0.3s ease;
        position: relative;
    }

    .nav-menu a:hover {
        color: var(--primary-color);
    }

    .nav-menu a::after {
        content: '';
        position: absolute;
        width: 0;
        height: 2px;
        bottom: -5px;
        left: 0;
        background: var(--primary-color);
        transition: width 0.3s ease;
    }

    .nav-menu a:hover::after {
        width: 100%;
    }

    .hamburger {
        display: none;
        flex-direction: column;
        cursor: pointer;
    }

    .hamburger span {
        width: 25px;
        height: 3px;
        background: var(--primary-color);
        margin: 3px 0;
        transition: 0.3s;
    }

    /* Hero Section */
    .hero {
        height: 100vh;
        background: var(--gradient);
        display: flex;
        align-items: center;
        justify-content: center;
        text-align: center;
        color: white;
        position: relative;
        overflow: hidden;
    }

    .hero::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><defs><pattern id="grain" width="100" height="100" patternUnits="userSpaceOnUse"><circle cx="50" cy="50" r="1" fill="white" opacity="0.1"/></pattern></defs><rect width="100%" height="100%" fill="url(%23grain)"/></svg>');
        animation: float 20s ease-in-out infinite;
    }

    .hero-content {
        max-width: 800px;
        z-index: 2;
        position: relative;
    }

    .profile-image {
        width: 200px;
        height: 200px;
        border-radius: 50%;
        border: 5px solid rgba(255, 255, 255, 0.3);
        margin: 0 auto 2rem;
        background: rgba(255, 255, 255, 0.1);
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 4rem;
        color: white;
        animation: fadeInUp 1s ease;
    }

    .hero h1 {
        font-size: 3.5rem;
        margin-bottom: 1rem;
        animation: fadeInUp 1s ease 0.2s both;
    }

    .hero p {
        font-size: 1.3rem;
        margin-bottom: 2rem;
        opacity: 0.9;
        animation: fadeInUp 1s ease 0.4s both;
    }

    .social-links {
        display: flex;
        justify-content: center;
        gap: 1rem;
        animation: fadeInUp 1s ease 0.6s both;
    }

    .social-links a {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 50px;
        height: 50px;
        background: rgba(255, 255, 255, 0.1);
        border: 2px solid rgba(255, 255, 255, 0.3);
        border-radius: 50%;
        color: white;
        text-decoration: none;
        font-size: 1.2rem;
        transition: all 0.3s ease;
        backdrop-filter: blur(10px);
    }

    .social-links a:hover {
        background: white;
        color: var(--primary-color);
        transform: translateY(-3px);
        box-shadow: 0 10px 20px rgba(0,0,0,0.2);
    }

    /* Sections */
    .section {
        padding: 5rem 0;
    }

    .container {
        max-width: 1200px;
        margin: 0 auto;
        padding: 0 2rem;
    }

    .section-title {
        text-align: center;
        font-size: 2.5rem;
        margin-bottom: 3rem;
        color: var(--dark-color);
        position: relative;
    }

    .section-title::after {
        content: '';
        position: absolute;
        bottom: -10px;
        left: 50%;
        transform: translateX(-50%);
        width: 60px;
        height: 4px;
        background: var(--gradient);
        border-radius: 2px;
    }

    /* About Section */
    .about-content {
        max-width: 800px;
        margin: 0 auto;
        text-align: center;
        font-size: 1.1rem;
        line-height: 1.8;
        color: var(--text-color);
    }

    /* Skills Section */
    .skills {
        background: var(--light-color);
    }

    .skills-grid {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
        gap: 2rem;
        margin-top: 2rem;
    }

    .skill-category {
        background: white;
        padding: 2rem;
        border-radius: 15px;
        box-shadow: var(--shadow);
        transition: transform 0.3s ease;
    }

    .skill-category:hover {
        transform: translateY(-5px);
    }

    .skill-category h3 {
        color: var(--primary-color);
        margin-bottom: 1rem;
        display: flex;
        align-items: center;
        gap: 0.5rem;
    }

    .skill-tags {
        display: flex;
        flex-wrap: wrap;
        gap: 0.5rem;
    }

    .skill-tag {
        background: var(--gradient);
        color: white;
        padding: 0.3rem 0.8rem;
        border-radius: 20px;
        font-size: 0.9rem;
        font-weight: 500;
    }

    /* Education Section */
    .education-item {
        background: white;
        padding: 2rem;
        border-radius: 15px;
        box-shadow: var(--shadow);
        margin-bottom: 2rem;
        border-left: 5px solid var(--primary-color);
        transition: transform 0.3s ease;
    }

    .education-item:hover {
        transform: translateX(10px);
    }

    .education-item h3 {
        color: var(--primary-color);
        margin-bottom: 0.5rem;
    }

    .education-meta {
        color: var(--accent-color);
        font-weight: 600;
        margin-bottom: 0.5rem;
    }

    /* Projects Section */
    .projects {
        background: var(--light-color);
    }

    .projects-grid {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
        gap: 2rem;
        margin-top: 2rem;
    }

    .project-card {
        background: white;
        border-radius: 15px;
        overflow: hidden;
        box-shadow: var(--shadow);
        transition: all 0.3s ease;
    }

    .project-card:hover {
        transform: translateY(-10px);
        box-shadow: 0 20px 40px rgba(0,0,0,0.15);
    }

    .project-header {
        background: var(--gradient);
        color: white;
        padding: 1.5rem;
    }

    .project-content {
        padding: 1.5rem;
    }

    .project-tech {
        display: flex;
        flex-wrap: wrap;
        gap: 0.5rem;
        margin-top: 1rem;
    }

    .tech-tag {
        background: var(--light-color);
        color: var(--primary-color);
        padding: 0.2rem 0.6rem;
        border-radius: 12px;
        font-size: 0.8rem;
        font-weight: 500;
    }

    /* Contact Section */
    .contact {
        background: var(--dark-color);
        color: white;
    }

    .contact-content {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 3rem;
        align-items: start;
    }

    .contact-info h3 {
        margin-bottom: 1.5rem;
        color: var(--accent-color);
    }

    .contact-item {
        display: flex;
        align-items: center;
        gap: 1rem;
        margin-bottom: 1rem;
    }

    .contact-item i {
        width: 20px;
        color: var(--accent-color);
    }

    .contact-form {
        background: rgba(255, 255, 255, 0.1);
        padding: 2rem;
        border-radius: 15px;
        backdrop-filter: blur(10px);
    }

    .form-group {
        margin-bottom: 1.5rem;
    }

    .form-group label {
        display: block;
        margin-bottom: 0.5rem;
        color: var(--accent-color);
    }

    .form-group input,
    .form-group textarea {
        width: 100%;
        padding: 0.8rem;
        border: 2px solid transparent;
        border-radius: 8px;
        background: rgba(255, 255, 255, 0.1);
        color: white;
        transition: border-color 0.3s ease;
    }

    .form-group input:focus,
    .form-group textarea:focus {
        outline: none;
        border-color: var(--accent-color);
    }

    .btn {
        background: var(--gradient);
        color: white;
        padding: 0.8rem 2rem;
        border: none;
        border-radius: 25px;
        cursor: pointer;
        font-weight: 600;
        transition: all 0.3s ease;
    }

    .btn:hover {
        transform: translateY(-2px);
        box-shadow: 0 5px 15px rgba(0,0,0,0.2);
    }

    /* Footer */
    .footer {
        background: #111;
        color: white;
        text-align: center;
        padding: 2rem 0;
    }

    /* Animations */
    @keyframes fadeInUp {
        from {
            opacity: 0;
            transform: translateY(30px);
        }
        to {
            opacity: 1;
            transform: translateY(0);
        }
    }

    @keyframes float {
        0%, 100% { transform: translateY(0px); }
        50% { transform: translateY(-20px); }
    }

    /* Responsive Design */
    @media (max-width: 768px) {
        .hamburger {
            display: flex;
        }

        .nav-menu {
            position: fixed;
            left: -100%;
            top: 70px;
            flex-direction: column;
            background-color: white;
            width: 100%;
            text-align: center;
            transition: 0.3s;
            box-shadow: 0 10px 27px rgba(0,0,0,0.05);
            padding: 2rem 0;
        }

        .nav-menu.active {
            left: 0;
        }

        .hero h1 {
            font-size: 2.5rem;
        }

        .hero p {
            font-size: 1.1rem;
        }

        .profile-image {
            width: 150px;
            height: 150px;
            font-size: 3rem;
        }

        .section-title {
            font-size: 2rem;
        }

        .contact-content {
            grid-template-columns: 1fr;
        }

        .skills-grid,
        .projects-grid {
            grid-template-columns: 1fr;
        }
    }

    /* Scroll animations */
    .animate-on-scroll {
        opacity: 0;
        transform: translateY(30px);
        transition: all 0.6s ease;
    }

    .animate-on-scroll.animated {
        opacity: 1;
        transform: translateY(0);
    }
</style>
<!-- Hero Section -->
<section id="home" class="hero">
    <div class="hero-content">
        <div class="profile-image">
            <i class="fas fa-user"></i>
        </div>
        <h1>Kunal Wadekar</h1>
        <p>Electronics & Telecommunication Engineering Student</p>
        <div class="social-links">
            <a href="tel:+917666545422" title="Phone"><i class="fas fa-phone"></i></a>
            <a href="mailto:wadekarkunal4@gmail.com" title="Email"><i class="fas fa-envelope"></i></a>
            <a href="#" title="LinkedIn"><i class="fab fa-linkedin"></i></a>
            <a href="#" title="CodeChef"><i class="fas fa-code"></i></a>
        </div>
    </div>
</section>

<!-- About Section -->
<section id="about" class="section">
    <div class="container">
        <h2 class="section-title animate-on-scroll">About Me</h2>
        <div class="about-content animate-on-scroll">
            <p>I am a dedicated Electronics & Telecommunication Engineering student at R.C. Patel Institute of Technology, Shirpur, with a passion for technology and innovation. Currently pursuing my B.Tech degree, I have developed expertise in various domains including IoT, automation, and web development.</p>
            <br>
            <p>My experience spans across embedded systems, industrial automation, and modern web technologies. I am particularly interested in Industry 4.0, smart manufacturing, and the integration of IoT solutions in real-world applications. Through my internship at Bajaj CSR and various projects, I have gained hands-on experience in mechatronics, PLC programming, and full-stack development.</p>
        </div>
    </div>
</section>

<!-- Skills Section -->
<section id="skills" class="section skills">
    <div class="container">
        <h2 class="section-title animate-on-scroll">Skills</h2>
        <div class="skills-grid">
            <div class="skill-category animate-on-scroll">
                <h3><i class="fas fa-code"></i> Programming</h3>
                <div class="skill-tags">
                    <span class="skill-tag">C/C++</span>
                    <span class="skill-tag">Python</span>
                    <span class="skill-tag">HTML</span>
                    <span class="skill-tag">CSS</span>
                    <span class="skill-tag">JavaScript</span>
                    <span class="skill-tag">Node.js</span>
                    <span class="skill-tag">Express.js</span>
                </div>
            </div>
            <div class="skill-category animate-on-scroll">
                <h3><i class="fas fa-microchip"></i> Core Technologies</h3>
                <div class="skill-tags">
                    <span class="skill-tag">IoT</span>
                    <span class="skill-tag">Sensors</span>
                    <span class="skill-tag">Computer Networks</span>
                    <span class="skill-tag">Mobile Communication</span>
                </div>
            </div>
            <div class="skill-category animate-on-scroll">
                <h3><i class="fas fa-cogs"></i> Automation & Control</h3>
                <div class="skill-tags">
                    <span class="skill-tag">PLC</span>
                    <span class="skill-tag">HMI</span>
                    <span class="skill-tag">Servo Motors</span>
                </div>
            </div>
            <div class="skill-category animate-on-scroll">
                <h3><i class="fas fa-industry"></i> Industrial Skills</h3>
                <div class="skill-tags">
                    <span class="skill-tag">5S</span>
                    <span class="skill-tag">TPM</span>
                    <span class="skill-tag">MS Office</span>
                </div>
            </div>
        </div>
    </div>
</section>

<!-- Education Section -->
<section id="education" class="section">
    <div class="container">
        <h2 class="section-title animate-on-scroll">Education</h2>
        <div class="education-item animate-on-scroll">
            <h3>Bachelor of Technology - E&TC Engineering</h3>
            <div class="education-meta">R.C. Patel Institute of Technology, Shirpur, Maharashtra | Dec 2021 - June 2025</div>
            <p><strong>CGPA:</strong> 6.10/10</p>
        </div>
        <div class="education-item animate-on-scroll">
            <h3>Higher Secondary Certificate (HSC)</h3>
            <div class="education-meta">R.C. Patel Arts, Commerce & Science College, Shirpur, Maharashtra | Jul 2020 - Jun 2021</div>
            <p><strong>Percentage:</strong> 80%</p>
        </div>
    </div>
</section>

<!-- Training & Experience Section -->
<section id="experience" class="section skills">
    <div class="container">
        <h2 class="section-title animate-on-scroll">Training & Experience</h2>
        <div class="education-item animate-on-scroll">
            <h3>Intern - Bajaj CSR | Symbiosis International University</h3>
            <div class="education-meta">Pune | June - July 2025</div>
            <p>Currently engaged with BEST Training Program focused on building expertise in Mechatronics, Motion Control and Sensor Technology, Robotics and Automation in the context of Industry 4.0 and Smart Manufacturing.</p>
            <br>
            <p><strong>Module-1:</strong> Electrical And Electronics, Hydraulics And Pneumatics, Sensor Technology, Digital Communication</p>
            <p><strong>Module-2:</strong> PLC, HMI, Servo Motor Drive, Industrial Sensors, AMR</p>
        </div>
    </div>
</section>

<!-- Projects Section -->
<section id="projects" class="section projects">
    <div class="container">
        <h2 class="section-title animate-on-scroll">Projects</h2>
        <div class="projects-grid">
            <div class="project-card animate-on-scroll">
                <div class="project-header">
                    <h3>Dashboard Design Using CAN Bus</h3>
                </div>
                <div class="project-content">
                    <p>Proficient in Embedded C programming for microcontroller-based applications with strong understanding of LPC2129 microcontroller architecture, including GPIO, ADC, CAN interface, and interrupt handling mechanisms.</p>
                    <div class="project-tech">
                        <span class="tech-tag">Embedded C</span>
                        <span class="tech-tag">LPC2129</span>
                        <span class="tech-tag">CAN Protocol</span>
                        <span class="tech-tag">Real-time Systems</span>
                    </div>
                </div>
            </div>
            
            <div class="project-card animate-on-scroll">
                <div class="project-header">
                    <h3>Smart Wireless Notice Board</h3>
                </div>
                <div class="project-content">
                    <p>Designed and implemented a wireless real-time digital communication system that refreshes data every 10 seconds from a central control unit. Energy-efficient alternative consuming less than 5W.</p>
                    <div class="project-tech">
                        <span class="tech-tag">Wireless Communication</span>
                        <span class="tech-tag">Real-time Systems</span>
                        <span class="tech-tag">Low Power Design</span>
                        <span class="tech-tag">IoT</span>
                    </div>
                </div>
            </div>
            
            <div class="project-card animate-on-scroll">
                <div class="project-header">
                    <h3>Airbnb Clone Web Application</h3>
                </div>
                <div class="project-content">
                    <p>Built a full-stack Airbnb web app for property rentals with 85% parity with platform features. Engineered secure JWT authentication handling 1,000+ user logins with zero violations.</p>
                    <div class="project-tech">
                        <span class="tech-tag">HTML</span>
                        <span class="tech-tag">CSS</span>
                        <span class="tech-tag">JavaScript</span>
                        <span class="tech-tag">Node.js</span>
                        <span class="tech-tag">Express.js</span>
                        <span class="tech-tag">JWT</span>
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>

<!-- Achievements Section -->
<section id="achievements" class="section">
    <div class="container">
        <h2 class="section-title animate-on-scroll">Achievements & Certifications</h2>
        <div class="skills-grid">
            <div class="skill-category animate-on-scroll">
                <h3><i class="fas fa-trophy"></i> Achievements</h3>
                <ul style="list-style: none; padding: 0;">
                    <li style="margin: 0.5rem 0;"><i class="fas fa-medal" style="color: var(--accent-color); margin-right: 0.5rem;"></i> Smart India Hackathon (Intra-College Winner)</li>
                    <li style="margin: 0.5rem 0;"><i class="fas fa-running" style="color: var(--accent-color); margin-right: 0.5rem;"></i> University Kabaddi Player</li>
                </ul>
            </div>
            <div class="skill-category animate-on-scroll">
                <h3><i class="fas fa-certificate"></i> Certifications</h3>
                <ul style="list-style: none; padding: 0;">
                    <li style="margin: 0.5rem 0;"><i class="fas fa-check" style="color: var(--primary-color); margin-right: 0.5rem;"></i> NPTEL: Internet of Things (IIT Kanpur)</li>
                    <li style="margin: 0.5rem 0;"><i class="fas fa-check" style="color: var(--primary-color); margin-right: 0.5rem;"></i> Great Learning: Introduction to PLC</li>
                    <li style="margin: 0.5rem 0;"><i class="fas fa-check" style="color: var(--primary-color); margin-right: 0.5rem;"></i> Bajaj BMS: Bajaj Manufacturing Systems</li>
                    <li style="margin: 0.5rem 0;"><i class="fas fa-check" style="color: var(--primary-color); margin-right: 0.5rem;"></i> Fuel Training: Python Certificate</li>
                </ul>
            </div>
        </div>
    </div>
</section>

<!-- Contact Section -->
<section id="contact" class="section contact">
    <div class="container">
        <h2 class="section-title animate-on-scroll" style="color: white;">Get In Touch</h2>
        <div class="contact-content">
            <div class="contact-info animate-on-scroll">
                <h3>Contact Information</h3>
                <div class="contact-item">
                    <i class="fas fa-phone"></i>
                    <span>+91 7666545422</span>
                </div>
                <div class="contact-item">
                    <i class="fas fa-envelope"></i>
                    <span>wadekarkunal4@gmail.com</span>
                </div>
                <div class="contact-item">
                    <i class="fas fa-map-marker-alt"></i>
                    <span>Nashik, Maharashtra, India</span>
                </div>
                <div class="contact-item">
                    <i class="fab fa-linkedin"></i>
                    <span>LinkedIn Profile</span>
                </div>
            </div>
            <form class="contact-form animate-on-scroll" onsubmit="handleSubmit(event)">
                <div class="form-group">
                    <label for="name">Name</label>
                    <input type="text" id="name" name="name" required>
                </div>
                <div class="form-group">
                    <label for="email">Email</label>
                    <input type="email" id="email" name="email" required>
                </div>
                <div class="form-group">
                    <label for="message">Message</label>
                    <textarea id="message" name="message" rows="5" required></textarea>
                </div>
                <button type="submit" class="btn">Send Message</button>
            </form>
        </div>
    </div>
</section>

<!-- Footer -->
<footer class="footer">
    <div class="container">
        <p>&copy; 2025 Kunal Wadekar. All rights reserved.</p>
    </div>
</footer>

<script>
    // Mobile menu toggle
    function toggleMenu() {
        const navMenu = document.querySelector('.nav-menu');
        navMenu.classList.toggle('active');
        
        const hamburger = document.querySelector('.hamburger');
        hamburger.classList.toggle('active');
    }

    // Smooth scrolling for navigation links
    document.querySelectorAll('a[href^="#"]').forEach(anchor => {
        anchor.addEventListener('click', function (e) {
            e.preventDefault();
            const target = document.querySelector(this.getAttribute('href'));
            if (target) {
                target.scrollIntoView({
                    behavior: 'smooth',
                    block: 'start'
                });
            }
            
            // Close mobile menu after clicking
            const navMenu = document.querySelector('.nav-menu');
            navMenu.classList.remove('active');
        });
    });

    // Navbar background change on scroll
    window.addEventListener('scroll', function() {
        const navbar = document.querySelector('.navbar');
        if (window.scrollY > 50) {
            navbar.style.background = 'rgba(255, 255, 255, 0.98)';
        } else {
            navbar.style.background = 'rgba(255, 255, 255, 0.95)';
        }
    });

    // Scroll animations
    const observerOptions = {
        threshold: 0.1,
        rootMargin: '0px 0px -50px 0px'
    };

    const observer = new IntersectionObserver(function(entries) {
        entries.forEach(entry => {
            if (entry.isIntersecting) {
                entry.target.classList.add('animated');
            }
        });
    }, observerOptions);

    // Observe all elements with animate-on-scroll class
    document.querySelectorAll('.animate-on-scroll').forEach(el => {
        observer.observe(el);
    });

    // Contact form submission
    function handleSubmit(event) {
        event.preventDefault();
        
        const formData = new FormData(event.target);
        const name = formData.get('name');
        const email = formData.get('email');
        const message = formData.get('message');
        
        // Simulate form submission (in real implementation, you'd send to a server)
        alert(`Thank you, ${name}! Your message has been sent. I'll get back to you soon.`);
        
        // Reset form
        event.target.reset();
    }

    // Typing effect for hero section (optional enhancement)
    function typeWriter(element, text, speed = 50) {
        let i = 0;
        element.innerHTML = '';
        
        function type() {
            if (i < text.length) {
                element.innerHTML += text.charAt(i);
                i++;
                setTimeout(type, speed);
            }
        }
        
        type();
    }

    // Initialize typing effect after page load
    window.addEventListener('load', function() {
        const heroTitle = document.querySelector('.hero h1');
        const heroSubtitle = document.querySelector('.hero p');
        
        setTimeout(() => {
            typeWriter(heroTitle, 'Kunal Wadekar', 100);
        }, 1000);
        
        setTimeout(() => {
            typeWriter(heroSubtitle, 'Electronics & Telecommunication Engineering Student', 50);
        }, 2500);
    });

    // Project filtering functionality
    function filterProjects(category) {
        const projects = document.querySelectorAll('.project-card');
        
        projects.forEach(project => {
            if (category === 'all' || project.dataset.category === category) {
                project.style.display = 'block';
                project.style.animation = 'fadeInUp 0.6s ease forwards';
            } else {
                project.style.display = 'none';
            }
        });
    }

    // Add scroll to top button
    const scrollTopBtn = document.createElement('button');
    scrollTopBtn.innerHTML = '<i class="fas fa-arrow-up"></i>';
    scrollTopBtn.className = 'scroll-top-btn';
    scrollTopBtn.style.cssText = `
        position: fixed;
        bottom: 20px;
        right: 20px;
        background: var(--gradient);
        color: white;
        border: none;
        border-radius: 50%;
        width: 50px;
        height: 50px;
        cursor: pointer;
        box-shadow: var(--shadow);
        opacity: 0;
        visibility: hidden;
        transition: all 0.3s ease;
        z-index: 1000;
    `;

    document.body.appendChild(scrollTopBtn);

    scrollTopBtn.addEventListener('click', () => {
        window.scrollTo({ top: 0, behavior: 'smooth' });
    });

    window.addEventListener('scroll', () => {
        if (window.scrollY > 300) {
            scrollTopBtn.style.opacity = '1';
            scrollTopBtn.style.visibility = 'visible';
        } else {
            scrollTopBtn.style.opacity = '0';
            scrollTopBtn.style.visibility = 'hidden';
        }
    });

    // Add hover effects to skill tags
    document.querySelectorAll('.skill-tag').forEach(tag => {
        tag.addEventListener('mouseenter', function() {
            this.style.transform = 'scale(1.1)';
            this.style.transition = 'transform 0.2s ease';
        });
        
        tag.addEventListener('mouseleave', function() {
            this.style.transform = 'scale(1)';
        });
    });

    // Add parallax effect to hero section
    window.addEventListener('scroll', () => {
        const scrolled = window.pageYOffset;
        const hero = document.querySelector('.hero');
        const rate = scrolled * -0.5;
        
        hero.style.transform = `translateY(${rate}px)`;
    });

    // Add loading animation
    window.addEventListener('load', function() {
        document.body.style.opacity = '0';
        document.body.style.transition = 'opacity 0.5s ease-in-out';
        
        setTimeout(() => {
            document.body.style.opacity = '1';
        }, 100);
    });

    // Skills progress animation
    function animateSkillBars() {
        const skillBars = document.querySelectorAll('.skill-progress');
        
        skillBars.forEach(bar => {
            const progress = bar.dataset.progress;
            bar.style.width = '0%';
            
            setTimeout(() => {
                bar.style.width = progress + '%';
                bar.style.transition = 'width 2s ease-in-out';
            }, 500);
        });
    }

    // Call skill bar animation when skills section is visible
    const skillsSection = document.querySelector('#skills');
    const skillsObserver = new IntersectionObserver((entries) => {
        entries.forEach(entry => {
            if (entry.isIntersecting) {
                animateSkillBars();
            }
        });
    }, { threshold: 0.5 });

    if (skillsSection) {
        skillsObserver.observe(skillsSection);
    }

    // Add dynamic year to footer
    const currentYear = new Date().getFullYear();
    const footerText = document.querySelector('.footer p');
    if (footerText) {
        footerText.innerHTML = `&copy; ${currentYear} Kunal Wadekar. All rights reserved.`;
    }

    // Initialize everything when DOM is loaded
    document.addEventListener('DOMContentLoaded', function() {
        // Add stagger animation to project cards
        const projectCards = document.querySelectorAll('.project-card');
        projectCards.forEach((card, index) => {
            card.style.animationDelay = `${index * 0.2}s`;
        });

        // Add stagger animation to skill categories
        const skillCategories = document.querySelectorAll('.skill-category');
        skillCategories.forEach((category, index) => {
            category.style.animationDelay = `${index * 0.1}s`;
        });

        console.log('Portfolio website loaded successfully!');
    });
</script>

About

No description, website, or topics provided.

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published

Languages

  • HTML 100.0%