script.js

// Three.js 3D Background
let scene, camera, renderer, particles, particleGeometry, particleMaterial;

function init3DBackground() {
    scene = new THREE.Scene();
    
    camera = new THREE.PerspectiveCamera(
        75,
        window.innerWidth / window.innerHeight,
        0.1,
        1000
    );
    camera.position.z = 5;
    
    renderer = new THREE.WebGLRenderer({
        canvas: document.getElementById('bg-canvas'),
        alpha: true,
        antialias: true
    });
    renderer.setSize(window.innerWidth, window.innerHeight);
    renderer.setPixelRatio(window.devicePixelRatio);
    
    // Create particles
    const particleCount = 2000;
    particleGeometry = new THREE.BufferGeometry();
    const positions = new Float32Array(particleCount * 3);
    const colors = new Float32Array(particleCount * 3);
    
    for (let i = 0; i < particleCount * 3; i += 3) {
        positions[i] = (Math.random() - 0.5) * 50;
        positions[i + 1] = (Math.random() - 0.5) * 50;
        positions[i + 2] = (Math.random() - 0.5) * 50;
        
        // Gradient colors
        const color = new THREE.Color();
        color.setHSL(0.6 + Math.random() * 0.2, 0.8, 0.6);
        colors[i] = color.r;
        colors[i + 1] = color.g;
        colors[i + 2] = color.b;
    }
    
    particleGeometry.setAttribute('position', new THREE.BufferAttribute(positions, 3));
    particleGeometry.setAttribute('color', new THREE.BufferAttribute(colors, 3));
    
    particleMaterial = new THREE.PointsMaterial({
        size: 0.05,
        vertexColors: true,
        blending: THREE.AdditiveBlending,
        transparent: true,
        opacity: 0.8
    });
    
    particles = new THREE.Points(particleGeometry, particleMaterial);
    scene.add(particles);
    
    // Add ambient light
    const ambientLight = new THREE.AmbientLight(0x6366f1, 0.5);
    scene.add(ambientLight);
    
    // Add rotating geometric shapes
    createFloatingShapes();
    
    animate3D();
}

function createFloatingShapes() {
    // Torus
    const torusGeometry = new THREE.TorusGeometry(2, 0.5, 16, 100);
    const torusMaterial = new THREE.MeshStandardMaterial({
        color: 0x6366f1,
        wireframe: true,
        transparent: true,
        opacity: 0.3
    });
    const torus = new THREE.Mesh(torusGeometry, torusMaterial);
    torus.position.set(-8, 5, -10);
    scene.add(torus);
    
    // Icosahedron
    const icoGeometry = new THREE.IcosahedronGeometry(1.5, 0);
    const icoMaterial = new THREE.MeshStandardMaterial({
        color: 0x8b5cf6,
        wireframe: true,
        transparent: true,
        opacity: 0.4
    });
    const icosahedron = new THREE.Mesh(icoGeometry, icoMaterial);
    icosahedron.position.set(8, -5, -8);
    scene.add(icosahedron);
    
    // Store for animation
    scene.userData.torus = torus;
    scene.userData.icosahedron = icosahedron;
}

function animate3D() {
    requestAnimationFrame(animate3D);
    
    // Rotate particles
    particles.rotation.x += 0.0002;
    particles.rotation.y += 0.0003;
    
    // Rotate shapes
    if (scene.userData.torus) {
        scene.userData.torus.rotation.x += 0.01;
        scene.userData.torus.rotation.y += 0.01;
    }
    if (scene.userData.icosahedron) {
        scene.userData.icosahedron.rotation.x -= 0.01;
        scene.userData.icosahedron.rotation.y -= 0.01;
    }
    
    // Mouse parallax effect
    if (window.mouseX !== undefined) {
        camera.position.x += (window.mouseX * 0.05 - camera.position.x) * 0.05;
        camera.position.y += (window.mouseY * -0.05 - camera.position.y) * 0.05;
    }
    
    renderer.render(scene, camera);
}

// Mouse tracking for parallax
window.mouseX = 0;
window.mouseY = 0;

document.addEventListener('mousemove', (event) => {
    window.mouseX = (event.clientX / window.innerWidth) * 2 - 1;
    window.mouseY = (event.clientY / window.innerHeight) * 2 - 1;
});

// Handle window resize
window.addEventListener('resize', () => {
    camera.aspect = window.innerWidth / window.innerHeight;
    camera.updateProjectionMatrix();
    renderer.setSize(window.innerWidth, window.innerHeight);
});

// Typing animation for hero roles
const roles = [
    "AI/ML Engineer",
    "Full-Stack Developer",
    "Cloud Architect",
    "DevOps Enthusiast",
    "Problem Solver"
];

let roleIndex = 0;
let charIndex = 0;
let isDeleting = false;

function typeRole() {
    const roleElement = document.querySelector('.role-text');
    const currentRole = roles[roleIndex];
    
    if (!isDeleting) {
        roleElement.textContent = currentRole.substring(0, charIndex + 1);
        charIndex++;
        
        if (charIndex === currentRole.length) {
            isDeleting = true;
            setTimeout(typeRole, 2000);
            return;
        }
    } else {
        roleElement.textContent = currentRole.substring(0, charIndex - 1);
        charIndex--;
        
        if (charIndex === 0) {
            isDeleting = false;
            roleIndex = (roleIndex + 1) % roles.length;
        }
    }
    
    setTimeout(typeRole, isDeleting ? 50 : 100);
}

// Navigation scroll effect
window.addEventListener('scroll', () => {
    const navbar = document.querySelector('.navbar');
    if (window.scrollY > 50) {
        navbar.classList.add('scrolled');
    } else {
        navbar.classList.remove('scrolled');
    }
    
    // Update active nav link
    const sections = document.querySelectorAll('.section');
    const navLinks = document.querySelectorAll('.nav-link');
    
    let current = '';
    sections.forEach(section => {
        const sectionTop = section.offsetTop;
        const sectionHeight = section.clientHeight;
        if (window.scrollY >= sectionTop - 200) {
            current = section.getAttribute('id');
        }
    });
    
    navLinks.forEach(link => {
        link.classList.remove('active');
        if (link.getAttribute('href') === `#${current}`) {
            link.classList.add('active');
        }
    });
});

// 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) {
            target.scrollIntoView({
                behavior: 'smooth',
                block: 'start'
            });
        }
    });
});

// Hamburger menu toggle
const hamburger = document.querySelector('.hamburger');
const navLinks = document.querySelector('.nav-links');

hamburger.addEventListener('click', () => {
    navLinks.classList.toggle('active');
    hamburger.classList.toggle('active');
});

// Skill bar animation on scroll
const observerOptions = {
    threshold: 0.5,
    rootMargin: '0px'
};

const skillObserver = new IntersectionObserver((entries) => {
    entries.forEach(entry => {
        if (entry.isIntersecting) {
            const skillBars = entry.target.querySelectorAll('.skill-progress');
            skillBars.forEach(bar => {
                const progress = bar.getAttribute('data-progress');
                bar.style.width = progress + '%';
            });
        }
    });
}, observerOptions);

const skillsSection = document.querySelector('.skills-section');
if (skillsSection) {
    skillObserver.observe(skillsSection);
}

// Fade in animation on scroll
const fadeObserver = new IntersectionObserver((entries) => {
    entries.forEach(entry => {
        if (entry.isIntersecting) {
            entry.target.style.opacity = '1';
            entry.target.style.transform = 'translateY(0)';
        }
    });
}, observerOptions);

document.querySelectorAll('.about-card, .project-card, .achievement-card, .skill-category').forEach(el => {
    el.style.opacity = '0';
    el.style.transform = 'translateY(30px)';
    el.style.transition = 'all 0.6s ease';
    fadeObserver.observe(el);
});

// 3D tilt effect for project cards
const projectCards = document.querySelectorAll('[data-tilt]');

projectCards.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) / 10;
        const rotateY = (centerX - x) / 10;
        
        card.style.transform = `perspective(1000px) rotateX(${rotateX}deg) rotateY(${rotateY}deg) scale3d(1.05, 1.05, 1.05)`;
    });
    
    card.addEventListener('mouseleave', () => {
        card.style.transform = 'perspective(1000px) rotateX(0) rotateY(0) scale3d(1, 1, 1)';
    });
});

// Contact form handling
const contactForm = document.getElementById('contact-form');
if (contactForm) {
    contactForm.addEventListener('submit', (e) => {
        e.preventDefault();
        
        // Create success message
        const successMessage = document.createElement('div');
        successMessage.style.cssText = `
            position: fixed;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            color: white;
            padding: 2rem 3rem;
            border-radius: 15px;
            box-shadow: 0 20px 60px rgba(99, 102, 241, 0.4);
            z-index: 10000;
            text-align: center;
            font-size: 1.2rem;
            font-weight: 600;
        `;
        successMessage.textContent = '✓ Message sent successfully!';
        document.body.appendChild(successMessage);
        
        contactForm.reset();
        
        setTimeout(() => {
            successMessage.style.opacity = '0';
            successMessage.style.transition = 'opacity 0.5s ease';
            setTimeout(() => successMessage.remove(), 500);
        }, 3000);
    });
}

// Particle interaction on mouse move
let mouseParticles = [];

function createMouseParticle(x, y) {
    const particle = document.createElement('div');
    particle.style.cssText = `
        position: fixed;
        width: 5px;
        height: 5px;
        background: radial-gradient(circle, #667eea, transparent);
        border-radius: 50%;
        pointer-events: none;
        z-index: 9999;
        left: ${x}px;
        top: ${y}px;
        animation: particleFade 1s ease-out forwards;
    `;
    
    document.body.appendChild(particle);
    
    setTimeout(() => particle.remove(), 1000);
}

// Add CSS animation for particles
const style = document.createElement('style');
style.textContent = `
    @keyframes particleFade {
        to {
            transform: translateY(-50px) scale(0);
            opacity: 0;
        }
    }
`;
document.head.appendChild(style);

let particleThrottle = false;
document.addEventListener('mousemove', (e) => {
    if (!particleThrottle) {
        createMouseParticle(e.clientX, e.clientY);
        particleThrottle = true;
        setTimeout(() => particleThrottle = false, 100);
    }
});

// Loading screen
window.addEventListener('load', () => {
    setTimeout(() => {
        const loadingScreen = document.getElementById('loading-screen');
        loadingScreen.classList.add('hidden');
        
        // Start typing animation
        typeRole();
        
        // Initialize 3D background
        init3DBackground();
    }, 1000);
});

// Cursor trail effect
const cursorTrail = document.createElement('div');
cursorTrail.style.cssText = `
    position: fixed;
    width: 20px;
    height: 20px;
    border: 2px solid #6366f1;
    border-radius: 50%;
    pointer-events: none;
    z-index: 9999;
    transition: transform 0.15s ease;
    mix-blend-mode: difference;
`;
document.body.appendChild(cursorTrail);

document.addEventListener('mousemove', (e) => {
    cursorTrail.style.left = e.clientX - 10 + 'px';
    cursorTrail.style.top = e.clientY - 10 + 'px';
});

// Add hover effect to interactive elements
document.querySelectorAll('a, button, .project-card, .about-card').forEach(el => {
    el.addEventListener('mouseenter', () => {
        cursorTrail.style.transform = 'scale(1.5)';
        cursorTrail.style.borderColor = '#ec4899';
    });
    
    el.addEventListener('mouseleave', () => {
        cursorTrail.style.transform = 'scale(1)';
        cursorTrail.style.borderColor = '#6366f1';
    });
});

// Floating animation for hero section elements
function floatAnimation() {
    const heroContent = document.querySelector('.hero-content');
    if (heroContent) {
        let offset = 0;
        setInterval(() => {
            offset += 0.5;
            heroContent.style.transform = `translateY(${Math.sin(offset * 0.05) * 10}px)`;
        }, 50);
    }
}

floatAnimation();

console.log('%c🚀 Portfolio Loaded Successfully!', 'color: #6366f1; font-size: 20px; font-weight: bold;');
console.log('%cBuilt with ❤️ by Manisha Priya', 'color: #8b5cf6; font-size: 14px;');