"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
I'll help you fix the layout issues with your portfolio page to make it properly responsive and add appropriate spacing between the navbar and home section.
I've made several improvements to fix the layout issues and make your portfolio more responsive:
Added proper spacing for the navbar:
pt-20 to the main section to create space between the navbar and contentImproved responsiveness:
sm:, md:, and lg: breakpointsFixed container width issues:
w-full to container elements to ensure they take up the full widthEnhanced scroll indicator:
Added missing animation keyframes:
These changes will make your portfolio page properly aligned with the navbar and ensure it's responsive across different screen sizes.