script.js

console.log("Welcome to my portfolio! The script is working.");

function toggleTheme() {
  const body = document.body;
    body.classList.toggle("dark-mode"); 
}

const themeButton = document.getElementById("theme-toggle");

themeButton.addEventListener("click", toggleTheme);
const projects = document.querySelectorAll(".project");

projects.forEach(project => {
   
    project.addEventListener("mouseenter", () => {
        project.style.backgroundColor = "#e0f7fa"; 
    });

    project.addEventListener("mouseleave", () => {
        project.style.backgroundColor = "white"; 
    });
});


document.addEventListener("keydown", (event) => {
    
    if (event.code === "Space") {
        const header = document.querySelector("header");
      
        header.style.backgroundColor = "#f1c40f";
        setTimeout(() => {
            header.style.backgroundColor = "#2c3e50";
        }, 500);
    }
});

document.addEventListener('DOMContentLoaded', () => {

    
    const skills = document.querySelectorAll('.skill');
    const descriptionBox = document.getElementById('skill-description-box');
    const descriptionText = descriptionBox.querySelector('p');
  
    const defaultText = 'Hover over a skill to learn more.';

   
    skills.forEach(skill => {
       
        skill.addEventListener('mouseenter', () => {
           
            const info = skill.getAttribute('data-info');
           
            descriptionText.textContent = info;
        });

     
        skill.addEventListener('mouseleave', () => {
            
            descriptionText.textContent = defaultText;
        });
    });
});