// Theme Toggle Functionality
const themeToggle = document.querySelector('.theme-toggle');
const icon = themeToggle.querySelector('i');
// Check for saved theme preference
const savedTheme = localStorage.getItem('theme');
if (savedTheme) {
document.documentElement.setAttribute('data-theme', savedTheme);
updateIcon(savedTheme);
}
// Theme toggle click handler
themeToggle.addEventListener('click', () => {
const currentTheme = document.documentElement.getAttribute('data-theme');
const newTheme = currentTheme === 'dark' ? 'light' : 'dark';
document.documentElement.setAttribute('data-theme', newTheme);
localStorage.setItem('theme', newTheme);
updateIcon(newTheme);
});
// Update icon based on theme
function updateIcon(theme) {
icon.className = theme === 'dark' ? 'fas fa-sun' : 'fas fa-moon';
}
// Mobile Navigation Toggle
const burger = document.querySelector('.burger');
const nav = document.querySelector('.nav-links');
const navLinks = document.querySelectorAll('.nav-links li');
burger.addEventListener('click', () => {
// Toggle Navigation
nav.classList.toggle('active');
// Animate Links
navLinks.forEach((link, index) => {
if (link.style.animation) {
link.style.animation = '';
} else {
link.style.animation = `navLinkFade 0.5s ease forwards ${index / 7 + 0.3}s`;
}
});
// Burger Animation
burger.classList.toggle('toggle');
});
// Smooth Scrolling for Navigation Links
document.querySelectorAll('a[href^="#"]').forEach(anchor => {
anchor.addEventListener('click', function (e) {
e.preventDefault();
document.querySelector(this.getAttribute('href')).scrollIntoView({
behavior: 'smooth'
});
});
});
// Typing Animation
const typingText = document.querySelector('.typing-text');
const words = ['Software Developer', 'Cloud Developer', 'Problem Solver'];
let wordIndex = 0;
let charIndex = 0;
let isDeleting = false;
function type() {
const currentWord = words[wordIndex];
if (isDeleting) {
typingText.textContent = currentWord.substring(0, charIndex - 1);
charIndex--;
} else {
typingText.textContent = currentWord.substring(0, charIndex + 1);
charIndex++;
}
if (!isDeleting && charIndex === currentWord.length) {
isDeleting = true;
setTimeout(type, 2000);
} else if (isDeleting && charIndex === 0) {
isDeleting = false;
wordIndex = (wordIndex + 1) % words.length;
setTimeout(type, 500);
} else {
setTimeout(type, isDeleting ? 100 : 200);
}
}
// Start typing animation
type();
// Scroll Animation
const observerOptions = {
threshold: 0.1
};
const observer = new IntersectionObserver((entries) => {
entries.forEach(entry => {
if (entry.isIntersecting) {
entry.target.classList.add('fade-in');
}
});
}, observerOptions);
// Observe all sections
document.querySelectorAll('section').forEach(section => {
observer.observe(section);
});
// Form Submission
const contactForm = document.querySelector('.contact-form');
contactForm.addEventListener('submit', (e) => {
e.preventDefault();
// Get form data
const formData = new FormData(contactForm);
const data = Object.fromEntries(formData);
// Here you would typically send the data to a server
console.log('Form submitted:', data);
// Show success message
alert('Thank you for your message! I will get back to you soon.');
contactForm.reset();
});
// Add active class to navigation links on scroll
const sections = document.querySelectorAll('section');
const navItems = document.querySelectorAll('.nav-links a');
window.addEventListener('scroll', () => {
let current = '';
sections.forEach(section => {
const sectionTop = section.offsetTop;
const sectionHeight = section.clientHeight;
if (pageYOffset >= sectionTop - sectionHeight / 3) {
current = section.getAttribute('id');
}
});
navItems.forEach(item => {
item.classList.remove('active');
if (item.getAttribute('href').slice(1) === current) {
item.classList.add('active');
}
});
});
// Add CSS for active navigation link
const style = document.createElement('style');
style.textContent = `
.nav-links a.active {
color: #3498db;
font-weight: bold;
}
`;
document.head.appendChild(style);
// Initialize Tilt.js for hero image and skill cards
VanillaTilt.init(document.querySelectorAll(".image-container, .skill-category"), {
max: 5,
speed: 400,
glare: true,
"max-glare": 0.2
});
// Stats Counter Animation
function animateValue(element, start, end, duration) {
let startTimestamp = null;
const step = (timestamp) => {
if (!startTimestamp) startTimestamp = timestamp;
const progress = Math.min((timestamp - startTimestamp) / duration, 1);
const currentValue = Math.floor(progress * (end - start) + start);
element.textContent = currentValue + (element.dataset.suffix || '');
if (progress < 1) {
window.requestAnimationFrame(step);
}
};
window.requestAnimationFrame(step);
}
// Stats Observer
const statsObserver = new IntersectionObserver((entries) => {
entries.forEach(entry => {
if (entry.isIntersecting) {
const stats = entry.target.querySelectorAll('.stat-item h3');
stats.forEach(stat => {
const finalValue = parseInt(stat.dataset.value);
stat.textContent = '0';
animateValue(stat, 0, finalValue, 2000);
});
statsObserver.unobserve(entry.target);
}
});
}, {
threshold: 0.5
});
// Observe the stats section
const statsSection = document.querySelector('.stats');
if (statsSection) {
statsObserver.observe(statsSection);
}
// Scroll to Top Functionality
const scrollToTopButton = document.getElementById('scrollToTop');
// Show button when scrolling down
window.addEventListener('scroll', () => {
if (window.pageYOffset > 300) {
scrollToTopButton.classList.add('visible');
} else {
scrollToTopButton.classList.remove('visible');
}
});
// Smooth scroll to top when clicked
scrollToTopButton.addEventListener('click', () => {
window.scrollTo({
top: 0,
behavior: 'smooth'
});
});