script.js

// ========================================
// PROFESSIONAL PORTFOLIO - ENHANCED JAVASCRIPT
// ========================================

// Smooth Scrolling
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'
            });
        }
    });
});

// Mobile Navigation Toggle
const navToggle = document.getElementById('navToggle');
const navMenu = document.querySelector('.nav-menu');

if (navToggle) {
    navToggle.addEventListener('click', () => {
        navMenu.classList.toggle('active');
        navToggle.classList.toggle('active');
    });

    // Close menu when clicking on a link
    document.querySelectorAll('.nav-link').forEach(link => {
        link.addEventListener('click', () => {
            navMenu.classList.remove('active');
            navToggle.classList.remove('active');
        });
    });
}

// Enhanced Particle Background Effect
function createParticles() {
    const particlesContainer = document.getElementById('particles');
    if (!particlesContainer) return;

    const particleCount = 60;

    for (let i = 0; i < particleCount; i++) {
        const particle = document.createElement('div');
        particle.className = 'particle';

        const size = Math.random() * 4 + 1;
        const posX = Math.random() * 100;
        const posY = Math.random() * 100;
        const duration = Math.random() * 30 + 15;
        const delay = Math.random() * 5;

        const colors = ['#ff0040', '#00d9ff', '#b026ff', '#ff006e'];
        const color = colors[Math.floor(Math.random() * colors.length)];

        particle.style.cssText = `
            position: absolute;
            width: ${size}px;
            height: ${size}px;
            background: ${color};
            border-radius: 50%;
            left: ${posX}%;
            top: ${posY}%;
            opacity: ${Math.random() * 0.4 + 0.2};
            box-shadow: 0 0 ${size * 5}px ${color};
            animation: float ${duration}s ease-in-out infinite ${delay}s,
                       fadeInOut ${duration * 0.5}s ease-in-out infinite ${delay}s;
        `;

        particlesContainer.appendChild(particle);
    }
}

// Add fade in/out animation for particles
const particleStyle = document.createElement('style');
particleStyle.textContent = `
    @keyframes fadeInOut {
        0%, 100% { opacity: 0.3; }
        50% { opacity: 0.7; }
    }
`;
document.head.appendChild(particleStyle);

// Enhanced Intersection Observer for Scroll Animations
const observerOptions = {
    threshold: 0.1,
    rootMargin: '0px 0px -80px 0px'
};

const observer = new IntersectionObserver((entries) => {
    entries.forEach(entry => {
        if (entry.isIntersecting) {
            entry.target.style.opacity = '1';
            entry.target.style.transform = 'translateY(0)';
            entry.target.classList.add('visible');
        }
    });
}, observerOptions);

// Setup scroll animations for multiple element types
function setupScrollAnimations() {
    const animatedElements = document.querySelectorAll(
        '.skill-category, .project-card, .about-text, .social-btn, .timeline-item, .hero-stat'
    );

    animatedElements.forEach((el, index) => {
        el.style.opacity = '0';
        el.style.transform = 'translateY(40px)';
        el.style.transition = `opacity 0.8s ease ${index * 0.1}s, transform 0.8s ease ${index * 0.1}s`;
        observer.observe(el);
    });
}

// Typing Effect with improved animation
function typeWriter(element, text, speed = 80) {
    let i = 0;
    element.textContent = '';

    function type() {
        if (i < text.length) {
            element.textContent += text.charAt(i);
            i++;
            setTimeout(type, speed);
        }
    }

    type();
}

// Initialize typing effect
function initTypingEffect() {
    const typingElement = document.querySelector('.typing-text');
    if (typingElement) {
        const originalText = typingElement.textContent;
        setTimeout(() => {
            typeWriter(typingElement, originalText, 60);
        }, 1000);
    }
}

// Parallax effect for hero section
function initParallax() {
    const heroShapes = document.querySelectorAll('.hero-shape');

    window.addEventListener('mousemove', (e) => {
        const mouseX = e.clientX / window.innerWidth;
        const mouseY = e.clientY / window.innerHeight;

        heroShapes.forEach((shape, index) => {
            const speed = (index + 1) * 20;
            const x = (mouseX - 0.5) * speed;
            const y = (mouseY - 0.5) * speed;

            shape.style.transform = `translate(${x}px, ${y}px)`;
        });
    });
}

// Smooth cursor tracking effect for project cards
function addCardTiltEffect() {
    const cards = document.querySelectorAll('.project-card, .skill-category');

    cards.forEach(card => {
        card.addEventListener('mousemove', (e) => {
            const rect = card.getBoundingClientRect();
            const x = e.clientX - rect.left;
            const y = e.clientY - rect.top;

            const centerX = rect.width / 2;
            const centerY = rect.height / 2;

            const rotateX = (y - centerY) / 20;
            const rotateY = (centerX - x) / 20;

            card.style.transform = `perspective(1000px) rotateX(${rotateX}deg) rotateY(${rotateY}deg) translateY(-10px)`;
        });

        card.addEventListener('mouseleave', () => {
            card.style.transform = '';
        });
    });
}

// Animated counter for stats
function animateCounters() {
    const counters = document.querySelectorAll('.stat-value, .hero-stat .stat-value');

    counters.forEach(counter => {
        const target = counter.textContent;
        const isPercentage = target.includes('%');
        const number = parseInt(target);

        if (isNaN(number)) return;

        let current = 0;
        const increment = number / 50;
        const duration = 2000;
        const stepTime = duration / 50;

        const timer = setInterval(() => {
            current += increment;
            if (current >= number) {
                counter.textContent = target;
                clearInterval(timer);
            } else {
                counter.textContent = Math.floor(current) + (isPercentage ? '%' : '+');
            }
        }, stepTime);
    });
}

// Trigger counter animation when stats become visible
function setupCounterAnimation() {
    const statsSection = document.querySelector('.hero-stats');
    if (!statsSection) return;

    const statsObserver = new IntersectionObserver((entries) => {
        entries.forEach(entry => {
            if (entry.isIntersecting) {
                animateCounters();
                statsObserver.unobserve(entry.target);
            }
        });
    }, { threshold: 0.5 });

    statsObserver.observe(statsSection);
}

// Add dynamic skill tag interactions
function initSkillTagAnimations() {
    const skillTags = document.querySelectorAll('.skill-tag');

    skillTags.forEach(tag => {
        tag.addEventListener('mouseenter', function () {
            // Create ripple effect
            const ripple = document.createElement('span');
            ripple.className = 'tag-ripple';
            ripple.style.cssText = `
                position: absolute;
                background: radial-gradient(circle, rgba(255, 0, 64, 0.4), transparent);
                border-radius: 50%;
                width: 10px;
                height: 10px;
                left: 50%;
                top: 50%;
                transform: translate(-50%, -50%);
                animation: tagRipple 0.8s ease-out;
                pointer-events: none;
            `;

            this.style.position = 'relative';
            this.appendChild(ripple);

            setTimeout(() => ripple.remove(), 800);
        });
    });
}

// Add ripple animation
const tagStyle = document.createElement('style');
tagStyle.textContent = `
    @keyframes tagRipple {
        0% {
            width: 10px;
            height: 10px;
            opacity: 1;
        }
        100% {
            width: 100px;
            height: 100px;
            opacity: 0;
        }
    }
`;
document.head.appendChild(tagStyle);

// Enhanced scroll progress indicator
function createScrollProgress() {
    const progressBar = document.createElement('div');
    progressBar.className = 'scroll-progress';
    document.body.appendChild(progressBar);

    window.addEventListener('scroll', () => {
        const windowHeight = document.documentElement.scrollHeight - window.innerHeight;
        const scrolled = (window.scrollY / windowHeight) * 100;
        progressBar.style.width = `${scrolled}%`;
    });
}

// Navigation bar scroll effect
function initNavScrollEffect() {
    const nav = document.querySelector('.nav');
    let lastScrollY = window.scrollY;

    window.addEventListener('scroll', () => {
        const currentScrollY = window.scrollY;

        // Add scrolled class for styling
        if (currentScrollY > 100) {
            nav.classList.add('scrolled');
        } else {
            nav.classList.remove('scrolled');
        }

        // Auto-hide on scroll down, show on scroll up
        if (currentScrollY > lastScrollY && currentScrollY > 200) {
            nav.style.transform = 'translateY(-100%)';
        } else {
            nav.style.transform = 'translateY(0)';
        }

        lastScrollY = currentScrollY;
    });
}

// Animate timeline items on scroll
function animateTimeline() {
    const timelineItems = document.querySelectorAll('.timeline-item');

    const timelineObserver = new IntersectionObserver((entries) => {
        entries.forEach(entry => {
            if (entry.isIntersecting) {
                entry.target.style.opacity = '1';
                entry.target.style.transform = 'translateX(0)';
            }
        });
    }, { threshold: 0.2 });

    timelineItems.forEach(item => {
        item.style.opacity = '0';
        item.style.transform = 'translateX(-50px)';
        item.style.transition = 'opacity 0.6s ease, transform 0.6s ease';
        timelineObserver.observe(item);
    });
}

// Add floating effect to social buttons
function animateSocialButtons() {
    const buttons = document.querySelectorAll('.social-btn');

    buttons.forEach((button, index) => {
        setInterval(() => {
            button.style.transform = `translateY(${Math.sin(Date.now() / 1000 + index) * 3}px)`;
        }, 50);

        button.addEventListener('mouseenter', () => {
            button.style.transform = 'translateY(-5px) scale(1.05)';
        });

        button.addEventListener('mouseleave', () => {
            button.style.transform = '';
        });
    });
}

// Create gradient animation for backgrounds
function initGradientAnimation() {
    const sections = document.querySelectorAll('.section');

    sections.forEach((section, index) => {
        const gradientOverlay = document.createElement('div');
        gradientOverlay.style.cssText = `
            position: absolute;
            inset: 0;
            background: radial-gradient(circle at ${50 + index * 10}% 50%, 
                                      rgba(255, 0, 64, 0.03), 
                                      transparent 60%);
            pointer-events: none;
            animation: gradientMove 20s ease-in-out infinite;
            animation-delay: ${index * 2}s;
        `;
        section.style.position = 'relative';
        section.insertBefore(gradientOverlay, section.firstChild);
    });
}

const gradientStyle = document.createElement('style');
gradientStyle.textContent = `
    @keyframes gradientMove {
        0%, 100% { opacity: 0.5; transform: scale(1); }
        50% { opacity: 1; transform: scale(1.1); }
    }
`;
document.head.appendChild(gradientStyle);

// Magnetic effect for buttons
function addMagneticEffect() {
    const buttons = document.querySelectorAll('.btn');

    buttons.forEach(button => {
        button.addEventListener('mousemove', (e) => {
            const rect = button.getBoundingClientRect();
            const x = e.clientX - rect.left - rect.width / 2;
            const y = e.clientY - rect.top - rect.height / 2;

            button.style.transform = `translate(${x * 0.2}px, ${y * 0.2}px)`;
        });

        button.addEventListener('mouseleave', () => {
            button.style.transform = '';
        });
    });
}

// Initialize all functions when DOM is loaded
document.addEventListener('DOMContentLoaded', () => {
    createParticles();
    setupScrollAnimations();
    initTypingEffect();
    initParallax();
    addCardTiltEffect();
    setupCounterAnimation();
    initSkillTagAnimations();
    createScrollProgress();
    initNavScrollEffect();
    animateTimeline();
    animateSocialButtons();
    initGradientAnimation();
    addMagneticEffect();
    initProjectModals();

    // Add entrance animations
    document.body.style.opacity = '0';
    setTimeout(() => {
        document.body.style.transition = 'opacity 0.5s ease';
        document.body.style.opacity = '1';
    }, 100);
});

// Add performance optimization
let ticking = false;
window.addEventListener('scroll', () => {
    if (!ticking) {
        window.requestAnimationFrame(() => {
            ticking = false;
        });
        ticking = true;
    }
});

// ========================================
// PROJECT DETAILS MODAL
// ========================================

const projectData = {
    interviewiq: {
        badge: 'Featured',
        title: 'InterviewIQ',
        description: 'AI-based interview performance analysis platform to improve communication and confidence through intelligent evaluation. Provides real-time feedback and actionable insights to help candidates ace their interviews.',
        tech: ['AI/ML', 'NLP', 'Performance Analysis', 'Full Stack'],
        github: 'https://github.com/khushikakade/InterviewIQ',
        live: 'https://interviewiq-2-hip6.onrender.com'
    },
    ageadaptive: {
        badge: 'Featured',
        title: 'AgeAdaptiveLearner',
        description: 'Adaptive learning platform that personalizes content and quizzes based on age groups. Powered by Gemini LLM with a dynamic UI that transforms to match the learner\'s age group for an engaging educational experience.',
        tech: ['Gemini AI', 'LLM Integration', 'Adaptive UI', 'React'],
        github: 'https://github.com/khushikakade/AgeAdaptive-Learner',
        live: 'https://age-adaptive-learner-ywid.vercel.app/'
    },
    dishdash: {
        badge: 'Project',
        title: 'DishDash',
        description: 'Full-stack food delivery platform with REST APIs, authentication, and DBMS integration. Streamlines the ordering experience with a clean interface and robust backend for seamless food delivery management.',
        tech: ['Full Stack', 'REST API', 'DBMS', 'Authentication'],
        github: 'https://github.com/khushikakade/DishDashAppDBMS',
        live: 'https://dish-dash-app-dbms-pgcu.vercel.app/'
    },
    visionguard: {
        badge: 'Project',
        title: 'VisionGuard',
        description: 'AI-based smart surveillance system for abnormal event detection using computer vision. Leverages deep learning models to identify and flag unusual activities in real-time for enhanced security monitoring.',
        tech: ['Computer Vision', 'Deep Learning', 'AI/ML', 'Python'],
        github: 'https://github.com/khushikakade/VisionGuard',
        live: null
    }
};

function openProjectModal(projectKey) {
    const data = projectData[projectKey];
    if (!data) return;

    document.getElementById('modalBadge').textContent = data.badge;
    document.getElementById('modalTitle').textContent = data.title;
    document.getElementById('modalDescription').textContent = data.description;

    const techContainer = document.getElementById('modalTech');
    techContainer.innerHTML = data.tech
        .map(t => `<span class="tech-tag">${t}</span>`)
        .join('');

    const actionsContainer = document.getElementById('modalActions');
    actionsContainer.innerHTML = '';

    // GitHub button
    const ghBtn = document.createElement('a');
    ghBtn.href = data.github;
    ghBtn.target = '_blank';
    ghBtn.rel = 'noopener noreferrer';
    ghBtn.className = 'modal-btn modal-btn-github';
    ghBtn.innerHTML = `<svg width="18" height="18" viewBox="0 0 24 24" fill="currentColor"><path d="M12 0c-6.626 0-12 5.373-12 12 0 5.302 3.438 9.8 8.207 11.387.599.111.793-.261.793-.577v-2.234c-3.338.726-4.033-1.416-4.033-1.416-.546-1.387-1.333-1.756-1.333-1.756-1.089-.745.083-.729.083-.729 1.205.084 1.839 1.237 1.839 1.237 1.07 1.834 2.807 1.304 3.492.997.107-.775.418-1.305.762-1.604-2.665-.305-5.467-1.334-5.467-5.931 0-1.311.469-2.381 1.236-3.221-.124-.303-.535-1.524.117-3.176 0 0 1.008-.322 3.301 1.23.957-.266 1.983-.399 3.003-.404 1.02.005 2.047.138 3.006.404 2.291-1.552 3.297-1.23 3.297-1.23.653 1.653.242 2.874.118 3.176.77.84 1.235 1.911 1.235 3.221 0 4.609-2.807 5.624-5.479 5.921.43.372.823 1.102.823 2.222v3.293c0 .319.192.694.801.576 4.765-1.589 8.199-6.086 8.199-11.386 0-6.627-5.373-12-12-12z"/></svg> GitHub`;
    actionsContainer.appendChild(ghBtn);

    // Live Demo button (only if available)
    if (data.live) {
        const liveBtn = document.createElement('a');
        liveBtn.href = data.live;
        liveBtn.target = '_blank';
        liveBtn.rel = 'noopener noreferrer';
        liveBtn.className = 'modal-btn modal-btn-live';
        liveBtn.innerHTML = `<svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6"/><polyline points="15 3 21 3 21 9"/><line x1="10" y1="14" x2="21" y2="3"/></svg> Live Demo`;
        actionsContainer.appendChild(liveBtn);
    }

    document.getElementById('projectModal').classList.add('active');
    document.body.style.overflow = 'hidden';
}

function closeProjectModal() {
    document.getElementById('projectModal').classList.remove('active');
    document.body.style.overflow = '';
}

function initProjectModals() {
    document.querySelectorAll('.btn-view-details').forEach(btn => {
        btn.addEventListener('click', () => openProjectModal(btn.dataset.project));
    });

    document.getElementById('modalClose').addEventListener('click', closeProjectModal);

    document.getElementById('projectModal').addEventListener('click', (e) => {
        if (e.target === e.currentTarget) closeProjectModal();
    });

    document.addEventListener('keydown', (e) => {
        if (e.key === 'Escape') closeProjectModal();
    });
}

// Console message
console.log('%c🎯 Portfolio by Khushi Kakade', 'color: #ff0040; font-size: 20px; font-weight: bold;');
console.log('%c💼 Professional & Dynamic Design', 'color: #00d9ff; font-size: 14px;');
console.log('%c🚀 Built with modern web technologies', 'color: #b026ff; font-size: 14px;');