"use client" import { useRef, useState, useEffect } from "react" import { FaGithub, FaLinkedin, FaInstagram, FaArrowRight, FaDownload, FaCode, FaLaptopCode, FaServer, } from "react-icons/fa" import { TypeAnimation } from "react-type-animation" import { motion, useScroll, useTransform, AnimatePresence } from "framer-motion" const Home = () => { const ref = useRef(null) const [mousePosition, setMousePosition] = useState({ x: 0, y: 0 }) const [cursorVariant, setCursorVariant] = useState("default") const [isLoaded, setIsLoaded] = useState(false) const { scrollYProgress } = useScroll({ target: ref, offset: ["start start", "end start"], }) const backgroundY = useTransform(scrollYProgress, [0, 1], ["0%", "100%"]) const textY = useTransform(scrollYProgress, [0, 1], ["0%", "200%"]) const imageScale = useTransform(scrollYProgress, [0, 0.5], [1, 1.1]) useEffect(() => { const handleMouseMove = (e) => { setMousePosition({ x: e.clientX, y: e.clientY }) } window.addEventListener("mousemove", handleMouseMove) // Simulate loading const timer = setTimeout(() => { setIsLoaded(true) }, 500) return () => { window.removeEventListener("mousemove", handleMouseMove) clearTimeout(timer) } }, []) const fadeIn = (direction, delay) => { return { hidden: { y: direction === "up" ? 80 : direction === "down" ? -80 : 0, opacity: 0, x: direction === "left" ? 80 : direction === "right" ? -80 : 0, }, show: { y: 0, x: 0, opacity: 1, transition: { type: "tween", duration: 1.2, delay: delay, ease: [0.25, 0.25, 0.25, 0.75], }, }, } } const services = [ { icon: <FaCode />, title: "Web Development", color: "from-blue-500 to-blue-600" }, { icon: <FaLaptopCode />, title: "Frontend Design", color: "from-purple-500 to-purple-600" }, { icon: <FaServer />, title: "Backend Solutions", color: "from-teal-500 to-teal-600" }, ] return ( <> {/* Custom cursor */} <motion.div className="fixed top-0 left-0 w-8 h-8 rounded-full bg-blue-500 mix-blend-difference pointer-events-none z-50 hidden md:flex items-center justify-center" animate={{ x: mousePosition.x - 16, y: mousePosition.y - 16, scale: cursorVariant === "hover" ? 1.5 : 1, }} transition={{ type: "spring", stiffness: 500, damping: 28, mass: 0.5 }} /> {/* Loading overlay */} <AnimatePresence> {!isLoaded && ( <motion.div initial={{ opacity: 1 }} exit={{ opacity: 0 }} transition={{ duration: 0.5 }} className="fixed inset-0 bg-gray-900 z-50 flex items-center justify-center" > <motion.div initial={{ scale: 0.8, opacity: 0 }} animate={{ scale: 1, opacity: 1 }} exit={{ scale: 1.2, opacity: 0 }} transition={{ duration: 0.5 }} className="text-center" > <div className="w-24 h-24 border-t-4 border-blue-500 border-solid rounded-full animate-spin mb-6 mx-auto"></div> <h2 className="text-2xl font-bold bg-gradient-to-r from-blue-400 to-purple-500 bg-clip-text text-transparent"> Loading Portfolio </h2> </motion.div> </motion.div> )} </AnimatePresence> <section className="relative min-h-screen flex items-center py-10 overflow-hidden bg-gradient-to-b from-gray-900 via-gray-900 to-gray-800" id="home" ref={ref} > {/* Particle background */} <div className="absolute inset-0 w-full h-full"> <div className="absolute inset-0 opacity-20"> <div className="absolute top-0 left-0 w-full h-full"> {[...Array(20)].map((_, i) => ( <div key={i} className="absolute rounded-full bg-blue-500" style={{ top: `${Math.random() * 100}%`, left: `${Math.random() * 100}%`, width: `${Math.random() * 6 + 2}px`, height: `${Math.random() * 6 + 2}px`, opacity: Math.random() * 0.5 + 0.2, animation: `floatParticle ${Math.random() * 10 + 10}s linear infinite`, animationDelay: `${Math.random() * 10}s`, }} /> ))} </div> </div> <motion.div style={{ y: backgroundY }} className="absolute top-0 left-0 w-full h-full bg-gradient-to-b from-black/10 to-black/30 z-0" /> <div className="absolute top-20 left-10 w-72 h-72 bg-blue-500/10 rounded-full filter blur-3xl" /> <div className="absolute bottom-20 right-10 w-72 h-72 bg-purple-500/10 rounded-full filter blur-3xl" /> </div> {/* Grid Pattern */} <div className="absolute inset-0 w-full h-full opacity-[0.02] z-0" style={{ backgroundSize: "50px 50px", backgroundImage: "linear-gradient(to right, rgba(255, 255, 255, 0.05) 1px, transparent 1px), linear-gradient(to bottom, rgba(255, 255, 255, 0.05) 1px, transparent 1px)", }} /> <div className="container mx-auto px-4 z-10"> <div className="flex flex-col-reverse lg:flex-row items-center justify-center gap-12 lg:gap-20"> {/* Text Content */} <motion.div variants={fadeIn("right", 0.3)} initial="hidden" whileInView="show" viewport={{ once: false, amount: 0.3 }} className="lg:w-1/2 max-w-lg" > <div className="relative"> <motion.div initial={{ opacity: 0, x: -20 }} animate={{ opacity: 1, x: 0 }} transition={{ duration: 0.8, delay: 0.2 }} className="inline-block px-4 py-1 bg-blue-500/10 border border-blue-500/20 rounded-full text-blue-400 text-sm font-medium mb-6" > Welcome to my portfolio </motion.div> <motion.h1 style={{ y: textY }} className="text-5xl md:text-6xl lg:text-7xl font-bold leading-tight mb-6" > IKEN{" "} <span className="relative inline-block"> <span className="absolute inset-0 bg-gradient-to-r from-blue-500 to-purple-600 blur-xl opacity-30" style={{ transform: "translateY(10px) scale(1.05)" }} ></span> <span className="relative" style={{ background: "linear-gradient(to right, #0071ff, #7c3aed)", WebkitBackgroundClip: "text", WebkitTextFillColor: "transparent", }} > BILAL </span> </span> </motion.h1> <motion.div variants={fadeIn("up", 0.4)} className="mb-6 text-2xl md:text-3xl lg:text-4xl font-medium leading-tight" > <span className="text-gray-200 mr-2">I am a</span> <span className="relative"> <span className="absolute -inset-1 bg-gradient-to-r from-blue-500/20 to-purple-500/20 blur rounded-lg"></span> <TypeAnimation sequence={["Developer", 2000, "Designer", 2000, "Programmer", 2000, "Problem Solver", 2000]} speed={50} className="text-blue-400 font-semibold relative" wrapper="span" repeat={Number.POSITIVE_INFINITY} /> </span> </motion.div> <motion.p variants={fadeIn("up", 0.5)} className="mb-8 text-lg text-gray-300 leading-relaxed"> I am passionate about creating beautiful and functional solutions that solve real-world problems through clean code and intuitive design. With expertise in both frontend and backend technologies, I deliver complete web solutions. </motion.p> {/* Services */} <motion.div variants={fadeIn("up", 0.55)} className="grid grid-cols-3 gap-4 mb-10"> {services.map((service, index) => ( <div key={index} className="bg-gray-800/50 backdrop-blur-sm border border-gray-700 rounded-xl p-3 text-center hover:border-blue-500/50 transition-all duration-300 hover:transform hover:scale-105" onMouseEnter={() => setCursorVariant("hover")} onMouseLeave={() => setCursorVariant("default")} > <div className={`w-10 h-10 mx-auto mb-2 rounded-lg bg-gradient-to-r ${service.color} flex items-center justify-center text-white`} > {service.icon} </div> <h3 className="text-sm font-medium text-gray-200">{service.title}</h3> </div> ))} </motion.div> {/* CTA Buttons */} <motion.div variants={fadeIn("up", 0.6)} className="flex flex-wrap gap-4 mb-10"> <a href="#contact" className="group relative px-8 py-3 text-white rounded-full font-medium flex items-center gap-2 overflow-hidden" onMouseEnter={() => setCursorVariant("hover")} onMouseLeave={() => setCursorVariant("default")} > <span className="absolute inset-0 bg-gradient-to-r from-blue-600 to-blue-500 transition-all duration-300 group-hover:scale-105"></span> <span className="absolute inset-0 bg-gradient-to-r from-blue-600 to-purple-600 opacity-0 transition-opacity duration-300 group-hover:opacity-100"></span> <span className="relative flex items-center"> Contact Me <FaArrowRight className="ml-2 group-hover:translate-x-1 transition-transform" /> </span> </a> <a href="#projects" className="group relative px-8 py-3 text-white rounded-full font-medium flex items-center gap-2 overflow-hidden border border-gray-700 hover:border-blue-500 transition-all duration-300" onMouseEnter={() => setCursorVariant("hover")} onMouseLeave={() => setCursorVariant("default")} > <span className="absolute inset-0 bg-blue-500/10 opacity-0 transition-opacity duration-300 group-hover:opacity-100"></span> <span className="relative flex items-center"> View Projects <FaArrowRight className="ml-2 group-hover:translate-x-1 transition-transform" /> </span> </a> <a href="/resume.pdf" download className="group relative px-8 py-3 text-white rounded-full font-medium flex items-center gap-2 overflow-hidden border border-gray-700 hover:border-purple-500 transition-all duration-300" onMouseEnter={() => setCursorVariant("hover")} onMouseLeave={() => setCursorVariant("default")} > <span className="absolute inset-0 bg-purple-500/10 opacity-0 transition-opacity duration-300 group-hover:opacity-100"></span> <span className="relative flex items-center"> Download CV <FaDownload className="ml-2 group-hover:translate-y-1 transition-transform" /> </span> </a> </motion.div> <motion.div variants={fadeIn("up", 0.7)} className="flex gap-5"> <a href="https://linkedin.com" target="_blank" rel="noopener noreferrer" className="group relative w-12 h-12 rounded-full flex items-center justify-center text-xl text-gray-300 overflow-hidden" onMouseEnter={() => setCursorVariant("hover")} onMouseLeave={() => setCursorVariant("default")} aria-label="LinkedIn" > <span className="absolute inset-0 bg-gray-800/80 transition-transform duration-300 group-hover:scale-0"></span> <span className="absolute inset-0 bg-[#0A66C2] transform scale-0 transition-transform duration-300 group-hover:scale-100"></span> <FaLinkedin className="relative z-10 transition-transform duration-300 group-hover:scale-110" /> </a> <a href="https://github.com" target="_blank" rel="noopener noreferrer" className="group relative w-12 h-12 rounded-full flex items-center justify-center text-xl text-gray-300 overflow-hidden" onMouseEnter={() => setCursorVariant("hover")} onMouseLeave={() => setCursorVariant("default")} aria-label="GitHub" > <span className="absolute inset-0 bg-gray-800/80 transition-transform duration-300 group-hover:scale-0"></span> <span className="absolute inset-0 bg-[#171515] transform scale-0 transition-transform duration-300 group-hover:scale-100"></span> <FaGithub className="relative z-10 transition-transform duration-300 group-hover:scale-110" /> </a> <a href="https://instagram.com" target="_blank" rel="noopener noreferrer" className="group relative w-12 h-12 rounded-full flex items-center justify-center text-xl text-gray-300 overflow-hidden" onMouseEnter={() => setCursorVariant("hover")} onMouseLeave={() => setCursorVariant("default")} aria-label="Instagram" > <span className="absolute inset-0 bg-gray-800/80 transition-transform duration-300 group-hover:scale-0"></span> <span className="absolute inset-0 bg-gradient-to-br from-[#833AB4] via-[#FD1D1D] to-[#FCB045] transform scale-0 transition-transform duration-300 group-hover:scale-100"></span> <FaInstagram className="relative z-10 transition-transform duration-300 group-hover:scale-110" /> </a> </motion.div> </div> </motion.div> {/* Profile Image */} <motion.div variants={fadeIn("left", 0.5)} initial="hidden" whileInView="show" viewport={{ once: false, amount: 0.3 }} className="lg:w-1/2 flex justify-center relative" style={{ scale: imageScale }} > <div className="relative"> {/* Decorative elements */} <div className="absolute -top-10 -left-10 w-20 h-20 border-t-2 border-l-2 border-blue-500/30"></div> <div className="absolute -bottom-10 -right-10 w-20 h-20 border-b-2 border-r-2 border-purple-500/30"></div> {/* Decorative rings */} <div className="absolute inset-0 rounded-full border-2 border-blue-500/20 -m-6" style={{ animation: "pulse-slow 4s infinite", }} /> <div className="absolute inset-0 rounded-full border-2 border-purple-500/20 -m-12" style={{ animation: "pulse-slower 6s infinite", }} /> {/* Image with gradient border */} <div className="relative w-[280px] h-[280px] md:w-[350px] md:h-[350px] rounded-full p-1 shadow-xl" style={{ background: "linear-gradient(to bottom right, #0071ff, #7c3aed)", boxShadow: "0 0 30px rgba(0, 113, 255, 0.3)", }} onMouseEnter={() => setCursorVariant("hover")} onMouseLeave={() => setCursorVariant("default")} > <div className="w-full h-full rounded-full overflow-hidden bg-gray-900 p-2"> <img src="https://via.placeholder.com/350" alt="Profile" className="w-full h-full object-cover rounded-full transition-transform duration-500 hover:scale-110" /> </div> </div> {/* Floating badges */} <motion.div initial={{ opacity: 0, y: 20 }} animate={{ opacity: 1, y: 0 }} transition={{ delay: 1, duration: 0.8 }} className="absolute -bottom-5 -left-10 bg-gray-900/90 backdrop-blur-sm px-4 py-2 rounded-lg border border-gray-800 shadow-lg" > <div className="flex items-center gap-2"> <div className="w-3 h-3 bg-green-500 rounded-full" style={{ animation: "pulse 2s infinite" }} /> <span className="text-sm font-medium">Available for work</span> </div> </motion.div> <motion.div initial={{ opacity: 0, y: 20 }} animate={{ opacity: 1, y: 0 }} transition={{ delay: 1.3, duration: 0.8 }} className="absolute -top-5 -right-5 bg-gray-900/90 backdrop-blur-sm px-4 py-2 rounded-lg border border-gray-800 shadow-lg" > <div className="flex items-center gap-2"> <span className="text-sm font-medium">Full Stack Developer</span> </div> </motion.div> {/* Experience badge */} <motion.div initial={{ opacity: 0, scale: 0.8 }} animate={{ opacity: 1, scale: 1 }} transition={{ delay: 1.6, duration: 0.8 }} className="absolute top-1/2 -right-16 bg-gray-900/90 backdrop-blur-sm p-3 rounded-xl border border-gray-800 shadow-lg" > <div className="text-center"> <div className="text-2xl font-bold bg-gradient-to-r from-blue-400 to-purple-500 bg-clip-text text-transparent"> 1+ </div> <p className="text-xs text-gray-400">Years Experience</p> </div> </motion.div> </div> </motion.div> </div> {/* Scroll indicator */} <motion.div initial={{ opacity: 0, y: -20 }} animate={{ opacity: 1, y: 0 }} transition={{ delay: 2, duration: 1 }} className="absolute bottom-10 left-1/2 transform -translate-x-1/2 flex flex-col items-center" > <span className="text-sm text-gray-400 mb-2">Scroll Down</span> لديا مشكل فيهاد الكود بحيت غير متناسق اريد ان يكون نتناسق مع شاشتة الحسوب وان تكون مسافة بين page home وnavbar