[V0_FILE]typescriptreact:file="app/components/MovingBackground.tsx" isEdit="true" isMerged="true" "use client" import { useEffect, useRef } from "react" import { useTheme } from "../contexts/ThemeContext" export default function MovingBackground() { const canvasRef = useRef(null) const { theme } = useTheme() useEffect(() => { const canvas = canvasRef.current if (!canvas) return const ctx = canvas.getContext("2d") if (!ctx) return const resizeCanvas = () => { const dpr = window.devicePixelRatio || 1 // Get device pixel ratio canvas.width = window.innerWidth * dpr // Scale canvas width canvas.height = window.innerHeight * dpr // Scale canvas height canvas.style.width = `${window.innerWidth}px` // Set display width canvas.style.height = `${window.innerHeight}px` // Set display height ctx.scale(dpr, dpr) // Scale the context for higher resolution on high-DPI devices } resizeCanvas() window.addEventListener("resize", resizeCanvas) const particles: { x: number; y: number; size: number; speedX: number; speedY: number }[] = [] for (let i = 0; i < 100; i++) { particles.push({ x: Math.random() * canvas.width, y: Math.random() * canvas.height, size: Math.random() * 3 + 1, speedX: Math.random() * 0.5 - 0.25, speedY: Math.random() * 0.5 - 0.25, }) } function drawLine(x1: number, y1: number, x2: number, y2: number) { ctx.beginPath() ctx.moveTo(x1, y1) ctx.lineTo(x2, y2) ctx.stroke() } function animate() { ctx.clearRect(0, 0, canvas.width, canvas.height) ctx.fillStyle = theme === "light" ? "rgba(255, 255, 255, 0.1)" : "rgba(10, 25, 47, 0.1)" ctx.fillRect(0, 0, canvas.width, canvas.height) ctx.strokeStyle = theme === "light" ? "rgba(0, 0, 0, 0.2)" : "rgba(100, 255, 218, 0.2)" ctx.lineWidth = 0.5 particles.forEach((particle, index) => { ctx.fillStyle = theme === "light" ? "rgba(169, 169, 169, 0.7)" : "rgba(100, 255, 218, 0.7)" ctx.beginPath() ctx.arc(particle.x, particle.y, particle.size, 0, Math.PI * 2) ctx.fill() for (let j = index + 1; j < particles.length; j++) { const dx = particles[j].x - particle.x const dy = particles[j].y - particle.y const distance = Math.sqrt(dx * dx + dy * dy) if (distance < 150) { ctx.globalAlpha = 1 - distance / 150 drawLine(particle.x, particle.y, particles[j].x, particles[j].y) ctx.globalAlpha = 1 } } particle.x += particle.speedX particle.y += particle.speedY if (particle.x < 0 || particle.x > canvas.width) particle.speedX *= -1 if (particle.y < 0 || particle.y > canvas.height) particle.speedY *= -1 }) requestAnimationFrame(animate) } animate() return () => { window.removeEventListener("resize", resizeCanvas) } }, [theme]) return

{project.title}

Contact Information

{item.label}

Connect With Me

{title}

Education

{edu.degree}

Certifications

{cert.title}

{category.title}

Hi, I am

{formatDisplayText(displayText)}