first commit

src/components/Hero.tsx

@@ -0,0 +1,159 @@
+import { motion } from 'framer-motion';
+import { Download, Github, Linkedin, Mail } from 'lucide-react';
+
+const Hero = () => {
+  const handleDownloadCV = () => {
+    // Ici, vous pouvez ajouter le lien vers votre CV
+    const link = document.createElement('a');
+    link.href = '/cv-dayron-van-leemput.pdf'; // Ajoutez votre CV dans le dossier public
+    link.download = 'CV-Dayron-Van-Leemput.pdf';
+    link.click();
+  };
+
+  return (
+    <section id="hero" className="hero">
+      <div className="hero-content">
+        <motion.div
+          className="hero-text"
+          initial={{ opacity: 0, y: 50 }}
+          animate={{ opacity: 1, y: 0 }}
+          transition={{ duration: 0.8, delay: 0.2 }}
+        >
+          <motion.h1
+            className="hero-title"
+            initial={{ opacity: 0, x: -50 }}
+            animate={{ opacity: 1, x: 0 }}
+            transition={{ duration: 0.8, delay: 0.4 }}
+          >
+            Dayron Van Leemput
+          </motion.h1>
+          
+          <motion.h2
+            className="hero-subtitle"
+            initial={{ opacity: 0, x: 50 }}
+            animate={{ opacity: 1, x: 0 }}
+            transition={{ duration: 0.8, delay: 0.6 }}
+          >
+            Étudiant en Technologies de l'Informatique
+          </motion.h2>
+          
+          <motion.p
+            className="hero-description"
+            initial={{ opacity: 0, y: 30 }}
+            animate={{ opacity: 1, y: 0 }}
+            transition={{ duration: 0.8, delay: 0.8 }}
+          >
+            Bac 3 à la HELHa de Tournai | Jeune développeur passionné par les nouvelles technologies
+            et le développement d'applications innovantes
+          </motion.p>
+
+          <motion.div
+            className="hero-buttons"
+            initial={{ opacity: 0, y: 30 }}
+            animate={{ opacity: 1, y: 0 }}
+            transition={{ duration: 0.8, delay: 1 }}
+          >
+            <motion.button
+              onClick={handleDownloadCV}
+              className="btn btn-primary"
+              whileHover={{ scale: 1.05 }}
+              whileTap={{ scale: 0.95 }}
+            >
+              <Download size={20} />
+              Télécharger mon CV
+            </motion.button>
+            
+            <motion.a
+              href="#contact"
+              onClick={(e) => {
+                e.preventDefault();
+                document.querySelector('#contact')?.scrollIntoView({ behavior: 'smooth' });
+              }}
+              className="btn btn-secondary"
+              whileHover={{ scale: 1.05 }}
+              whileTap={{ scale: 0.95 }}
+            >
+              <Mail size={20} />
+              Me contacter
+            </motion.a>
+          </motion.div>
+
+          <motion.div
+            className="hero-social"
+            initial={{ opacity: 0, y: 30 }}
+            animate={{ opacity: 1, y: 0 }}
+            transition={{ duration: 0.8, delay: 1.2 }}
+          >
+            <motion.a
+              href="https://github.com/dayronvanleemput" // Remplacez par votre profil GitHub
+              target="_blank"
+              rel="noopener noreferrer"
+              className="social-link"
+              whileHover={{ scale: 1.2, rotate: 5 }}
+              whileTap={{ scale: 0.9 }}
+            >
+              <Github size={24} />
+            </motion.a>
+            
+            <motion.a
+              href="https://linkedin.com/in/dayronvanleemput" // Remplacez par votre profil LinkedIn
+              target="_blank"
+              rel="noopener noreferrer"
+              className="social-link"
+              whileHover={{ scale: 1.2, rotate: -5 }}
+              whileTap={{ scale: 0.9 }}
+            >
+              <Linkedin size={24} />
+            </motion.a>
+          </motion.div>
+        </motion.div>
+
+        <motion.div
+          className="hero-image"
+          initial={{ opacity: 0, scale: 0.8 }}
+          animate={{ opacity: 1, scale: 1 }}
+          transition={{ duration: 1, delay: 0.5 }}
+        >
+          <motion.div
+            className="hero-avatar"
+            whileHover={{ scale: 1.05, rotate: 5 }}
+            transition={{ type: "spring", stiffness: 300, damping: 10 }}
+          >
+            {/* Vous pouvez remplacer ceci par votre photo */}
+            <div className="avatar-placeholder">
+              <span>DV</span>
+            </div>
+          </motion.div>
+        </motion.div>
+      </div>
+
+      {/* Particules d'animation en arrière-plan */}
+      <div className="hero-particles">
+        {[...Array(20)].map((_, i) => (
+          <motion.div
+            key={i}
+            className="particle"
+            initial={{
+              opacity: 0,
+              scale: 0,
+              x: Math.random() * window.innerWidth,
+              y: Math.random() * window.innerHeight,
+            }}
+            animate={{
+              opacity: [0, 1, 0],
+              scale: [0, 1, 0],
+              y: [null, -100],
+            }}
+            transition={{
+              duration: Math.random() * 3 + 2,
+              repeat: Infinity,
+              delay: Math.random() * 2,
+            }}
+          />
+        ))}
+      </div>
+    </section>
+  );
+};
+
+export default Hero;