script.js

// ==================== 
// Mobile Navigation Toggle
// ==================== 
const hamburger = document.querySelector('.hamburger');
const navMenu = document.querySelector('.nav-menu');
const navLinks = document.querySelectorAll('.nav-link');

// Toggle mobile menu
hamburger.addEventListener('click', () => {
    hamburger.classList.toggle('active');
    navMenu.classList.toggle('active');
});

// Close mobile menu when clicking a link
navLinks.forEach(link => {
    link.addEventListener('click', () => {
        hamburger.classList.remove('active');
        navMenu.classList.remove('active');
    });
});

// ==================== 
// Navbar Scroll Effect
// ==================== 
const navbar = document.querySelector('.navbar');

window.addEventListener('scroll', () => {
    const currentScroll = window.pageYOffset;
    
    if (currentScroll > 100) {
        navbar.classList.add('scrolled');
    } else {
        navbar.classList.remove('scrolled');
    }
});

// ==================== 
// Smooth Scroll 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) {
            const offsetTop = target.offsetTop - 80;
            window.scrollTo({
                top: offsetTop,
                behavior: 'smooth'
            });
        }
    });
});

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

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

// Observe all elements with scroll-animate class
document.addEventListener('DOMContentLoaded', () => {
    const animateElements = document.querySelectorAll('.scroll-animate');
    animateElements.forEach(el => observer.observe(el));
    
    // Add scroll-animate class to project cards, skill cards, and contact cards
    const projectCardElements = document.querySelectorAll('.project-card');
    const skillCardElements = document.querySelectorAll('.skill-card');
    const contactCardElements = document.querySelectorAll('.contact-card');
    
    projectCardElements.forEach((card, index) => {
        card.classList.add('scroll-animate');
        card.style.transitionDelay = `${index * 0.05}s`;
        observer.observe(card);
    });
    
    skillCardElements.forEach((card, index) => {
        card.classList.add('scroll-animate');
        card.style.transitionDelay = `${index * 0.05}s`;
        observer.observe(card);
    });
    
    contactCardElements.forEach((card, index) => {
        card.classList.add('scroll-animate');
        card.style.transitionDelay = `${index * 0.05}s`;
        observer.observe(card);
    });
});

// ==================== 
// Active Navigation Link Highlight
// ==================== 
const sections = document.querySelectorAll('section[id]');

function highlightNavigation() {
    const scrollY = window.pageYOffset;
    
    sections.forEach(section => {
        const sectionHeight = section.offsetHeight;
        const sectionTop = section.offsetTop - 100;
        const sectionId = section.getAttribute('id');
        const navLink = document.querySelector(`.nav-link[href="#${sectionId}"]`);
        
        if (scrollY > sectionTop && scrollY <= sectionTop + sectionHeight) {
            navLinks.forEach(link => link.classList.remove('active'));
            if (navLink) {
                navLink.classList.add('active');
            }
        }
    });
}

window.addEventListener('scroll', highlightNavigation);

// ==================== 
// Typing Effect for Hero Title (Optional Enhancement)
// ==================== 
function createTypingEffect(element, text, speed = 100) {
    let i = 0;
    element.textContent = '';
    
    function type() {
        if (i < text.length) {
            element.textContent += text.charAt(i);
            i++;
            setTimeout(type, speed);
        }
    }
    
    type();
}

// ==================== 
// Mouse Trail Effect (Subtle)
// ==================== 
let mouseTrail = [];
const maxTrailLength = 20;

document.addEventListener('mousemove', (e) => {
    mouseTrail.push({ x: e.clientX, y: e.clientY, time: Date.now() });
    
    if (mouseTrail.length > maxTrailLength) {
        mouseTrail.shift();
    }
});

// ==================== 
// Project Card Tilt Effect
// ==================== 
document.addEventListener('DOMContentLoaded', () => {
    const projectCardElements = document.querySelectorAll('.project-card');

    projectCardElements.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;
            
            // Increased tilt effect from /20 to /10 for more movement
            const rotateX = (y - centerY) / 10;
            const rotateY = (centerX - x) / 10;
            
            card.style.transition = 'transform 0.1s ease-out';
            card.style.transform = `perspective(1000px) rotateX(${rotateX}deg) rotateY(${rotateY}deg) translateY(-15px) scale(1.03)`;
        });
        
        card.addEventListener('mouseleave', () => {
            card.style.transition = 'transform 0.3s ease-out';
            card.style.transform = 'perspective(1000px) rotateX(0) rotateY(0) translateY(0) scale(1)';
        });
    });
});

// ==================== 
// Skill Card Hover Animation
// ==================== 
document.addEventListener('DOMContentLoaded', () => {
    const skillCardElements = document.querySelectorAll('.skill-card');

    skillCardElements.forEach(card => {
        card.addEventListener('mouseenter', () => {
            const icon = card.querySelector('.skill-icon');
            icon.style.transform = 'scale(1.2) rotate(5deg)';
            icon.style.transition = 'transform 0.3s ease';
        });
        
        card.addEventListener('mouseleave', () => {
            const icon = card.querySelector('.skill-icon');
            icon.style.transform = 'scale(1) rotate(0deg)';
        });
    });
});

// ==================== 
// Contact Card Hover Animation
// ==================== 
document.addEventListener('DOMContentLoaded', () => {
    const contactCardElements = document.querySelectorAll('.contact-card');

    contactCardElements.forEach(card => {
        card.addEventListener('mouseenter', () => {
            const icon = card.querySelector('.contact-icon');
            if (icon) {
                icon.style.transform = 'scale(1.2) rotate(5deg)';
                icon.style.transition = 'transform 0.3s ease';
            }
        });
        
        card.addEventListener('mouseleave', () => {
            const icon = card.querySelector('.contact-icon');
            if (icon) {
                icon.style.transform = 'scale(1) rotate(0deg)';
            }
        });
    });
});

// ==================== 
// Copy Email on Click
// ==================== 
const emailCard = document.querySelector('.contact-card[href^="mailto"]');

if (emailCard) {
    emailCard.addEventListener('click', (e) => {
        const email = emailCard.querySelector('p').textContent;
        
        // Use modern Clipboard API if available
        if (navigator.clipboard && navigator.clipboard.writeText) {
            navigator.clipboard.writeText(email).then(() => {
                // Show a brief notification
                const originalText = emailCard.querySelector('h4').textContent;
                emailCard.querySelector('h4').textContent = 'Email Copied!';
                
                setTimeout(() => {
                    emailCard.querySelector('h4').textContent = originalText;
                }, 2000);
            }).catch(err => {
                console.log('Failed to copy email:', err);
            });
        } else {
            // Fallback for older browsers
            const tempInput = document.createElement('input');
            tempInput.value = email;
            document.body.appendChild(tempInput);
            tempInput.select();
            
            try {
                document.execCommand('copy');
                
                // Show a brief notification
                const originalText = emailCard.querySelector('h4').textContent;
                emailCard.querySelector('h4').textContent = 'Email Copied!';
                
                setTimeout(() => {
                    emailCard.querySelector('h4').textContent = originalText;
                }, 2000);
            } catch (err) {
                console.log('Failed to copy email:', err);
            }
            
            document.body.removeChild(tempInput);
        }
    });
}

// ==================== 
// Parallax Effect for Hero Background
// ==================== 
window.addEventListener('scroll', () => {
    const hero = document.querySelector('.hero');
    const scrolled = window.pageYOffset;
    
    if (hero && scrolled < window.innerHeight) {
        hero.style.transform = `translateY(${scrolled * 0.5}px)`;
    }
});

// ==================== 
// Loading Animation
// ==================== 
window.addEventListener('load', () => {
    document.body.classList.add('loaded');
    
    // Fade in hero content
    const heroContent = document.querySelector('.hero-content');
    const heroImage = document.querySelector('.hero-image');
    
    if (heroContent) {
        heroContent.classList.add('fade-in-up');
    }
    
    if (heroImage) {
        setTimeout(() => {
            heroImage.classList.add('fade-in-up');
        }, 200);
    }
});

// ==================== 
// Dynamic Year in Footer
// ==================== 
const footerText = document.querySelector('.footer p');
if (footerText) {
    const currentYear = new Date().getFullYear();
    footerText.textContent = `© ${currentYear} rOnInRaJ. Built with passion and creativity.`;
}

// ==================== 
// Prevent Default for Demo Links
// ==================== 
document.querySelectorAll('.project-link[href="#"]').forEach(link => {
    link.addEventListener('click', (e) => {
        e.preventDefault();
        alert('This is a demo project link. Replace with actual project URLs!');
    });
});

// ==================== 
// Console Message
// ==================== 
console.log('%c🚀 Welcome to rOnInRaJ\'s Portfolio!', 'color: #6366f1; font-size: 20px; font-weight: bold;');
console.log('%cInterested in the code? Check out the repository!', 'color: #8b5cf6; font-size: 14px;');