Skip to content

Navigation Menu

Sign in
Appearance settings

Search code, repositories, users, issues, pull requests...

Provide feedback

We read every piece of feedback, and take your input very seriously.

Saved searches

Use saved searches to filter your results more quickly

Appearance settings

WadekarKunal/.github

Open more actions menu
 
 

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

4 Commits
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

 
 
 

Contributors

Languages

  • HTML 100.0%
Morty Proxy This is a proxified and sanitized view of the page, visit original site.