// Matrix rain effect document.addEventListener('DOMContentLoaded', function() { // Create matrix rain canvas const canvas = document.createElement('canvas'); canvas.className = 'matrix-rain'; document.body.appendChild(canvas); const ctx = canvas.getContext('2d'); canvas.width = window.innerWidth; canvas.height = window.innerHeight; const characters = "0123456789ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz"; const fontSize = 14; const columns = canvas.width / fontSize; const drops = []; for (let i = 0; i < columns; i++) { drops[i] = 1; } function draw() { ctx.fillStyle = 'rgba(0, 0, 0, 0.05)'; ctx.fillRect(0, 0, canvas.width, canvas.height); ctx.fillStyle = '#0ea5e9'; ctx.font = fontSize + 'px monospace'; for (let i = 0; i < drops.length; i++) { const text = characters.charAt(Math.floor(Math.random() * characters.length)); ctx.fillText(text, i * fontSize, drops[i] * fontSize); if (drops[i] * fontSize > canvas.height && Math.random() > 0.975) { drops[i] = 0; } drops[i]++; } } setInterval(draw, 33); // Randomly blink some text setInterval(() => { const randomLine = Math.floor(Math.random() * 13) + 1; const line = document.querySelector(`.typing-animation p:nth-child(${randomLine})`); if (line) { line.classList.add('text-matrix-200'); setTimeout(() => { line.classList.remove('text-matrix-200'); }, 200); } }, 1000); // Resize handler window.addEventListener('resize', () => { canvas.width = window.innerWidth; canvas.height = window.innerHeight; }); // Add some random terminal commands after initial animation setTimeout(() => { const terminal = document.querySelector('.typing-animation'); const commands = [ "$ git add .", "$ git commit -m 'Add model training script'", "$ python test.py", "Running unit tests...", "12 tests passed", "$ tensorboard --logdir=logs", "TensorBoard running at http://localhost:6006", "$ docker build -t ai-tool .", "Building Docker image...", "Successfully built 1a2b3c4d5e6f", "$ docker run -p 5000:5000 ai-tool", "AI service started successfully" ]; let delay = 25000; // Start after initial animation commands.forEach(cmd => { setTimeout(() => { const p = document.createElement('p'); p.className = 'text-matrix-300 mb-4'; p.textContent = cmd; terminal.appendChild(p); // Scroll to bottom terminal.parentElement.scrollTop = terminal.parentElement.scrollHeight; }, delay); delay += 2000; }); }, 25000); });