Update links and refactor components
This commit is contained in:
jessy-david-dev
+85
-85
@@ -5,94 +5,94 @@ import { motion, useInView } from "framer-motion";
|
||||
import { useRef } from "react";
|
||||
|
||||
export default function Hero() {
|
||||
const ref = useRef<HTMLElement>(null);
|
||||
const isInView = useInView(ref, { amount: 0.3 });
|
||||
const ref = useRef<HTMLElement>(null);
|
||||
const isInView = useInView(ref, { amount: 0.3 });
|
||||
|
||||
return (
|
||||
<section
|
||||
id="home"
|
||||
ref={ref}
|
||||
className="min-h-screen flex items-center justify-center relative bg-slate-900"
|
||||
return (
|
||||
<section
|
||||
id="home"
|
||||
ref={ref}
|
||||
className="min-h-screen flex items-center justify-center relative bg-slate-900"
|
||||
>
|
||||
{/* Grid Background animée */}
|
||||
<motion.div
|
||||
className="absolute inset-0"
|
||||
initial={{ opacity: 0 }}
|
||||
animate={{ opacity: isInView ? 1 : 0 }}
|
||||
transition={{ duration: 1 }}
|
||||
style={{
|
||||
backgroundImage:
|
||||
"linear-gradient(to right, #1e293b 1px, transparent 1px), linear-gradient(to bottom, #1e293b 1px, transparent 1px)",
|
||||
backgroundSize: "100px 100px",
|
||||
}}
|
||||
></motion.div>
|
||||
|
||||
{/* Content */}
|
||||
<motion.div
|
||||
className="container mx-auto px-4 text-center relative z-10"
|
||||
initial={{ opacity: 0, y: 30 }}
|
||||
animate={{
|
||||
opacity: isInView ? 1 : 0,
|
||||
y: isInView ? 0 : 30,
|
||||
}}
|
||||
transition={{ duration: 0.8, delay: 0.2 }}
|
||||
>
|
||||
<motion.h1
|
||||
className="text-5xl md:text-7xl font-bold text-white mb-6"
|
||||
initial={{ opacity: 0, y: 20 }}
|
||||
animate={{
|
||||
opacity: isInView ? 1 : 0,
|
||||
y: isInView ? 0 : 20,
|
||||
}}
|
||||
transition={{ duration: 0.8, delay: 0.4 }}
|
||||
>
|
||||
{/* Grid Background animée */}
|
||||
<motion.div
|
||||
className="absolute inset-0"
|
||||
initial={{ opacity: 0 }}
|
||||
animate={{ opacity: isInView ? 1 : 0 }}
|
||||
transition={{ duration: 1 }}
|
||||
style={{
|
||||
backgroundImage:
|
||||
"linear-gradient(to right, #1e293b 1px, transparent 1px), linear-gradient(to bottom, #1e293b 1px, transparent 1px)",
|
||||
backgroundSize: "100px 100px",
|
||||
}}
|
||||
></motion.div>
|
||||
Bonjour👋, je suis{" "}
|
||||
<span className="text-transparent bg-clip-text bg-linear-to-r from-blue-400 to-purple-600">
|
||||
Jessy
|
||||
</span>
|
||||
</motion.h1>
|
||||
|
||||
{/* Content */}
|
||||
<motion.div
|
||||
className="container mx-auto px-4 text-center relative z-10"
|
||||
initial={{ opacity: 0, y: 30 }}
|
||||
animate={{
|
||||
opacity: isInView ? 1 : 0,
|
||||
y: isInView ? 0 : 30,
|
||||
}}
|
||||
transition={{ duration: 0.8, delay: 0.2 }}
|
||||
>
|
||||
<motion.h1
|
||||
className="text-5xl md:text-7xl font-bold text-white mb-6"
|
||||
initial={{ opacity: 0, y: 20 }}
|
||||
animate={{
|
||||
opacity: isInView ? 1 : 0,
|
||||
y: isInView ? 0 : 20,
|
||||
}}
|
||||
transition={{ duration: 0.8, delay: 0.4 }}
|
||||
>
|
||||
Bonjour👋, je suis{" "}
|
||||
<span className="text-transparent bg-clip-text bg-linear-to-r from-blue-400 to-purple-600">
|
||||
Jessy
|
||||
</span>
|
||||
</motion.h1>
|
||||
<motion.p
|
||||
className="text-xl md:text-2xl text-slate-300 mb-8"
|
||||
initial={{ opacity: 0, y: 20 }}
|
||||
animate={{
|
||||
opacity: isInView ? 1 : 0,
|
||||
y: isInView ? 0 : 20,
|
||||
}}
|
||||
transition={{ duration: 0.8, delay: 0.6 }}
|
||||
>
|
||||
Développeur Full Stack | Créateur d'expériences web
|
||||
</motion.p>
|
||||
|
||||
<motion.p
|
||||
className="text-xl md:text-2xl text-slate-300 mb-8"
|
||||
initial={{ opacity: 0, y: 20 }}
|
||||
animate={{
|
||||
opacity: isInView ? 1 : 0,
|
||||
y: isInView ? 0 : 20,
|
||||
}}
|
||||
transition={{ duration: 0.8, delay: 0.6 }}
|
||||
>
|
||||
Développeur Full Stack | Créateur d'expériences web
|
||||
</motion.p>
|
||||
<motion.div
|
||||
className="flex gap-4 justify-center flex-wrap"
|
||||
initial={{ opacity: 0, y: 20 }}
|
||||
animate={{
|
||||
opacity: isInView ? 1 : 0,
|
||||
y: isInView ? 0 : 20,
|
||||
}}
|
||||
transition={{ duration: 0.8, delay: 0.8 }}
|
||||
>
|
||||
<GlowButton href="#projects" variant="secondary">
|
||||
Voir mes projets
|
||||
</GlowButton>
|
||||
|
||||
<motion.div
|
||||
className="flex gap-4 justify-center flex-wrap"
|
||||
initial={{ opacity: 0, y: 20 }}
|
||||
animate={{
|
||||
opacity: isInView ? 1 : 0,
|
||||
y: isInView ? 0 : 20,
|
||||
}}
|
||||
transition={{ duration: 0.8, delay: 0.8 }}
|
||||
>
|
||||
<GlowButton href="#projects" variant="secondary">
|
||||
Voir mes projets
|
||||
</GlowButton>
|
||||
|
||||
<GlowButton href="#contact" variant="primary">
|
||||
Me contacter
|
||||
</GlowButton>
|
||||
</motion.div>
|
||||
<motion.cite
|
||||
className="block text-slate-400 italic mt-8 text-sm md:text-base"
|
||||
initial={{ opacity: 0, y: 20 }}
|
||||
animate={{
|
||||
opacity: isInView ? 1 : 0,
|
||||
y: isInView ? 0 : 20,
|
||||
}}
|
||||
transition={{ duration: 0.8, delay: 1 }}
|
||||
>
|
||||
C'est une bonne situation ça, développeur Full Stack ?
|
||||
</motion.cite>
|
||||
</motion.div>
|
||||
</section>
|
||||
);
|
||||
<GlowButton href="#contact" variant="primary">
|
||||
Me contacter
|
||||
</GlowButton>
|
||||
</motion.div>
|
||||
<motion.cite
|
||||
className="block text-slate-400 italic mt-8 text-sm md:text-base"
|
||||
initial={{ opacity: 0, y: 20 }}
|
||||
animate={{
|
||||
opacity: isInView ? 1 : 0,
|
||||
y: isInView ? 0 : 20,
|
||||
}}
|
||||
transition={{ duration: 0.8, delay: 1 }}
|
||||
>
|
||||
C'est une bonne situation ça, développeur Full Stack ?
|
||||
</motion.cite>
|
||||
</motion.div>
|
||||
</section>
|
||||
);
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user