feat: ajout sitemap, api et components

2025-11-25 05:43:26 +01:00
parent da613c822a
commit 5a7cf45d98
29 changed files with 3339 additions and 34 deletions
@@ -0,0 +1,87 @@
+"use client";
+
+import GlowButton from "@/component/ui/GlowButton";
+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 });
+
+    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 }}
+                >
+                    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&apos;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>
+
+                    <GlowButton href="#contact" variant="primary">
+                        Me contacter
+                    </GlowButton>
+                </motion.div>
+            </motion.div>
+        </section>
+    );
+}