import React, { useEffect, useRef, useState } from “react”;
import { FaLinkedin, FaGithub, FaEnvelope, FaFilePdf, FaBlog } from “react-icons/fa”;
import { motion } from “framer-motion”;
export default function Home() {
const canvasRef = useRef(null);
const [activeSection, setActiveSection] = useState(null);
useEffect(() => {
const canvas = canvasRef.current;
const ctx = canvas.getContext(“2d”);
canvas.width = window.innerWidth;
canvas.height = window.innerHeight;
const letters = “01ABCDEFGHIJKLMNOPQRSTUVWXYZ”;
const fontSize = 14;
const columns = canvas.width / fontSize;
const drops = Array(Math.floor(columns)).fill(1);
function drawMatrixEffect() {
ctx.fillStyle = “rgba(0, 0, 0, 0.05)”;
ctx.fillRect(0, 0, canvas.width, canvas.height);
ctx.fillStyle = “#0f0”;
ctx.font = `${fontSize}px monospace`;
drops.forEach((y, i) => {
const text = letters[Math.floor(Math.random() * letters.length)];
const x = i * fontSize;
ctx.fillText(text, x, y * fontSize);
if (y * fontSize > canvas.height && Math.random() > 0.975) {
drops[i] = 0;
}
drops[i]++;
});
}
const interval = setInterval(drawMatrixEffect, 50);
return () => clearInterval(interval);
}, []);
return (
{/* Hacker Background Animation */}
{/* Overlay to Improve Readability */}
{/* Responsive Navbar */}
{/* Cyber Security Themed Image */}
{/* Dynamic Content Section */}
{activeSection === ‘about’ && (
About Me
I am a Cybersecurity professional specializing in Web Application Penetration Testing…
)}
{activeSection === ‘skills’ && (
Skills
- Web Application Penetration Testing
- OWASP Top 10
- SSRF, SQLi, XSS, RCE, CSRF
- Linux Security & Ethical Hacking
)}
{/* Footer */}
);
}