script.js

// Mobile menu toggle
document.addEventListener('DOMContentLoaded', function() {
 const mobileMenuButton = document.getElementById('mobile-menu-button');
 const mobileMenu = document.getElementById('mobile-menu');
 
 if (mobileMenuButton) {
 mobileMenuButton.addEventListener('click', function() {
 mobileMenu.classList.toggle('open');
 });
 }
 
 // Close mobile menu when clicking on a link
 const mobileLinks = document.querySelectorAll('#mobile-menu a');
 mobileLinks.forEach(link => {
 link.addEventListener('click', function() {
 mobileMenu.classList.remove('open');
 });
 });
 
 // Smooth scroll for anchor links
 document.querySelectorAll('a[href^="#"]').forEach(anchor => {
 anchor.addEventListener('click', function (e) {
 e.preventDefault();
 const target = document.querySelector(this.getAttribute('href'));
 if (target) {
 const navHeight = document.querySelector('nav').offsetHeight;
 const targetPosition = target.getBoundingClientRect().top + window.pageYOffset - navHeight;
 window.scrollTo({
 top: targetPosition,
 behavior: 'smooth'
 });
 }
 });
 });
 
 // Intersection Observer for reveal 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('active');
 }
 });
 }, observerOptions);
 
 // Observe all reveal elements
 document.querySelectorAll('.reveal').forEach(el => {
 observer.observe(el);
 });
 
 // Add scroll event for navbar shadow
 let lastScroll = 0;
 const nav = document.querySelector('nav');
 
 window.addEventListener('scroll', function() {
 const currentScroll = window.pageYOffset;
 
 if (currentScroll > 10) {
 nav.classList.add('nav-shadow');
 } else {
 nav.classList.remove('nav-shadow');
 }
 
 lastScroll = currentScroll;
 });
 
 // Counter animation
 function animateCounter(element, target, duration = 2000) {
 let current = 0;
 const increment = target / (duration / 16);
 const timer = setInterval(() => {
 current += increment;
 if (current >= target) {
 element.textContent = target;
 clearInterval(timer);
 } else {
 element.textContent = Math.floor(current);
 }
 }, 16);
 }
 
 // Animate counters when they come into view
 const counterObserver = new IntersectionObserver((entries) => {
 entries.forEach(entry => {
 if (entry.isIntersecting && !entry.target.classList.contains('counted')) {
 const target = parseInt(entry.target.getAttribute('data-target'));
 animateCounter(entry.target, target);
 entry.target.classList.add('counted');
 }
 });
 }, { threshold: 0.5 });
 
 document.querySelectorAll('.counter').forEach(counter => {
 counterObserver.observe(counter);
 });
 
 // Parallax effect for hero section (subtle, no overlapping)
 const heroSection = document.querySelector('.hero-parallax');
 if (heroSection) {
 window.addEventListener('scroll', function() {
 const scrolled = window.pageYOffset;
 const heroContent = heroSection.querySelector('.hero-content');
 if (heroContent && scrolled < window.innerHeight) {
 heroContent.style.transform = `translateY(${scrolled * 0.3}px)`;
 heroContent.style.opacity = 1 - (scrolled / window.innerHeight);
 }
 });
 }
 
 // Add ripple effect to buttons
 document.querySelectorAll('.ripple').forEach(button => {
 button.addEventListener('click', function(e) {
 const ripple = document.createElement('span');
 const rect = this.getBoundingClientRect();
 const size = Math.max(rect.width, rect.height);
 const x = e.clientX - rect.left - size / 2;
 const y = e.clientY - rect.top - size / 2;
 
 ripple.style.width = ripple.style.height = size + 'px';
 ripple.style.left = x + 'px';
 ripple.style.top = y + 'px';
 ripple.classList.add('ripple-effect');
 
 this.appendChild(ripple);
 
 setTimeout(() => ripple.remove(), 600);
 });
 });
 
 // Progress bar animation
 const skillBars = document.querySelectorAll('.skill-bar-fill');
 const skillObserver = new IntersectionObserver((entries) => {
 entries.forEach(entry => {
 if (entry.isIntersecting) {
 const width = entry.target.getAttribute('data-width');
 entry.target.style.width = width;
 }
 });
 }, { threshold: 0.5 });
 
 skillBars.forEach(bar => {
 skillObserver.observe(bar);
 });
 
 // Typing effect for hero subtitle
 const typingElement = document.querySelector('.typing-text');
 if (typingElement) {
 const text = typingElement.textContent;
 typingElement.textContent = '';
 let i = 0;
 
 function typeWriter() {
 if (i < text.length) {
 typingElement.textContent += text.charAt(i);
 i++;
 setTimeout(typeWriter, 100);
 }
 }
 
 setTimeout(typeWriter, 500);
 }
 
 // Stagger animation for feature cards
 const featureCards = document.querySelectorAll('.feature-card');
 const cardObserver = new IntersectionObserver((entries) => {
 entries.forEach((entry, index) => {
 if (entry.isIntersecting) {
 setTimeout(() => {
 entry.target.style.opacity = '1';
 entry.target.style.transform = 'translateY(0)';
 }, index * 100);
 }
 });
 }, { threshold: 0.1 });
 
 featureCards.forEach(card => {
 card.style.opacity = '0';
 card.style.transform = 'translateY(30px)';
 card.style.transition = 'all 0.5s ease';
 cardObserver.observe(card);
 });
 
 // Particle effect in hero section (simple version)
 function createParticles() {
 const particleContainer = document.getElementById('particles');
 if (!particleContainer) return;
 
 for (let i = 0; i < 50; i++) {
 const particle = document.createElement('div');
 particle.className = 'particle';
 particle.style.cssText = `
 position: absolute;
 width: ${Math.random() * 5 + 2}px;
 height: ${Math.random() * 5 + 2}px;
 background: rgba(255, 255, 255, ${Math.random() * 0.5 + 0.2});
 border-radius: 50%;
 left: ${Math.random() * 100}%;
 top: ${Math.random() * 100}%;
 animation: float ${Math.random() * 10 + 5}s infinite ease-in-out;
 animation-delay: ${Math.random() * 5}s;
 `;
 particleContainer.appendChild(particle);
 }
 }
 
 createParticles();
 
 // Add active class to current section in navigation
 const sections = document.querySelectorAll('section[id]');
 const navLinks = document.querySelectorAll('nav a[href^="#"]');
 
 window.addEventListener('scroll', () => {
 let current = '';
 sections.forEach(section => {
 const sectionTop = section.offsetTop;
 const sectionHeight = section.clientHeight;
 if (pageYOffset >= sectionTop - 200) {
 current = section.getAttribute('id');
 }
 });
 
 navLinks.forEach(link => {
 link.classList.remove('text-indigo-600', 'font-bold');
 if (link.getAttribute('href') === `#${current}`) {
 link.classList.add('text-indigo-600', 'font-bold');
 }
 });
 });
 
 // Add loading animation
 window.addEventListener('load', function() {
 document.body.classList.add('loaded');
 });
 
 // Easter egg: Konami code
 let konamiCode = [];
 const konamiPattern = ['ArrowUp', 'ArrowUp', 'ArrowDown', 'ArrowDown', 'ArrowLeft', 'ArrowRight', 'ArrowLeft', 'ArrowRight', 'b', 'a'];
 
 document.addEventListener('keydown', (e) => {
 konamiCode.push(e.key);
 konamiCode = konamiCode.slice(-10);
 
 if (konamiCode.join('') === konamiPattern.join('')) {
 document.body.style.animation = 'rainbow 2s linear infinite';
 }
 });
});

// Add rainbow animation for easter egg
const style = document.createElement('style');
style.textContent = `
 @keyframes rainbow {
 0% { filter: hue-rotate(0deg); }
 100% { filter: hue-rotate(360deg); }
 }
 
 .ripple-effect {
 position: absolute;
 border-radius: 50%;
 background: rgba(255, 255, 255, 0.6);
 transform: scale(0);
 animation: ripple-animation 0.6s ease-out;
 pointer-events: none;
 }
 
 @keyframes ripple-animation {
 to {
 transform: scale(4);
 opacity: 0;
 }
 }
 
 .particle {
 pointer-events: none;
 }
`;
document.head.appendChild(style);