', ' ', ' ', 'const x', 'let data',
'function()', '=> {}', 'return', 'import', 'export', 'async', 'await',
'useState()', 'useEffect()', '.map()', '.filter()', 'className=""',
'npm install', 'git commit', 'console.log()', 'fetch()', 'Promise'
];
const techLogos = [
``,
``,
``,
``
];
const colors = ['#4f46e5', '#2563eb', '#0891b2', '#7c3aed', '#059669', '#d946ef'];
function createParticle(x, y) {
if (!effectEnabled) return;
const isLogo = Math.random() > 0.7;
if (isLogo) {
const particle = document.createElement('div');
particle.className = 'logo-particle';
particle.innerHTML = techLogos[Math.floor(Math.random() * techLogos.length)];
particle.style.left = (x - 20) + 'px';
particle.style.top = y + 'px';
interactiveBg.appendChild(particle);
setTimeout(() => particle.remove(), 3500);
} else {
const particle = document.createElement('div');
particle.className = 'code-particle';
particle.textContent = codeSnippets[Math.floor(Math.random() * codeSnippets.length)];
particle.style.left = x + 'px';
particle.style.top = y + 'px';
particle.style.color = colors[Math.floor(Math.random() * colors.length)];
interactiveBg.appendChild(particle);
setTimeout(() => particle.remove(), 4000);
}
}
function createRipple(x, y) {
if (!effectEnabled) return;
const ripple = document.createElement('div');
ripple.className = 'click-ripple';
ripple.style.left = x + 'px';
ripple.style.top = y + 'px';
ripple.style.border = `2px solid ${colors[Math.floor(Math.random() * colors.length)]}`;
interactiveBg.appendChild(ripple);
setTimeout(() => ripple.remove(), 600);
}
function handleInteraction(x, y) {
if (!effectEnabled) return;
createRipple(x, y);
for (let i = 0; i {
createParticle(x + (Math.random() - 0.5) * 60, y + (Math.random() - 0.5) * 30);
}, i * 50);
}
}
clickArea.addEventListener('click', (e) => handleInteraction(e.clientX, e.clientY));
function createAmbientParticle() {
if (!effectEnabled) return;
createParticle(Math.random() * window.innerWidth, window.innerHeight + 50);
}
function startEffect() {
effectEnabled = true;
effectToggle.classList.add('active');
clickArea.classList.add('enabled');
ambientInterval = setInterval(createAmbientParticle, 2000);
}
function stopEffect() {
effectEnabled = false;
effectToggle.classList.remove('active');
clickArea.classList.remove('enabled');
if (ambientInterval) clearInterval(ambientInterval);
interactiveBg.innerHTML = '';
}
effectToggle.addEventListener('click', () => {
if (effectEnabled) {
stopEffect();
} else {
startEffect();
}
});
// Effect starts OFF - no startEffect() call here
