first commit

src/components/About.tsx

@@ -0,0 +1,140 @@
+import { motion } from 'framer-motion';
+import { User, Heart, Target, Coffee } from 'lucide-react';
+
+const About = () => {
+  const stats = [
+    { icon: <User size={24} />, value: "3ème", label: "Année d'études" },
+    { icon: <Heart size={24} />, value: "100%", label: "Passion" },
+    { icon: <Target size={24} />, value: "∞", label: "Objectifs" },
+    { icon: <Coffee size={24} />, value: "☕", label: "Fuel quotidien" }
+  ];
+
+  const containerVariants = {
+    hidden: { opacity: 0 },
+    visible: {
+      opacity: 1,
+      transition: {
+        staggerChildren: 0.2,
+        delayChildren: 0.3
+      }
+    }
+  };
+
+  const itemVariants = {
+    hidden: { opacity: 0, y: 50 },
+    visible: {
+      opacity: 1,
+      y: 0,
+      transition: {
+        duration: 0.6,
+        ease: [0.25, 0.1, 0.25, 1] as const
+      }
+    }
+  };
+
+  return (
+    <section id="about" className="about">
+      <div className="container">
+        <motion.div
+          className="section-header"
+          initial={{ opacity: 0, y: 50 }}
+          whileInView={{ opacity: 1, y: 0 }}
+          transition={{ duration: 0.8 }}
+          viewport={{ once: true }}
+        >
+          <h2 className="section-title">À propos de moi</h2>
+          <p className="section-subtitle">
+            Découvrez qui je suis et ce qui me passionne
+          </p>
+        </motion.div>
+
+        <div className="about-content">
+          <motion.div
+            className="about-text"
+            variants={containerVariants}
+            initial="hidden"
+            whileInView="visible"
+            viewport={{ once: true }}
+          >
+            <motion.div className="about-card" variants={itemVariants}>
+              <h3>Mon parcours</h3>
+              <p>
+                Actuellement en 3ème année de <strong>Technologies de l'Informatique</strong> à la 
+                HELHa de Tournai, je me passionne pour le développement d'applications et les 
+                nouvelles technologies. Mon parcours m'a permis d'acquérir une solide base 
+                technique et une approche méthodique du développement.
+              </p>
+            </motion.div>
+
+            <motion.div className="about-card" variants={itemVariants}>
+              <h3>Ma passion</h3>
+              <p>
+                Ce qui m'anime le plus, c'est la création d'solutions innovantes qui résolvent 
+                des problèmes réels. J'aime particulièrement le développement mobile avec 
+                <strong> Flutter</strong> et le développement web moderne avec 
+                <strong> React</strong> et <strong> TypeScript</strong>.
+              </p>
+            </motion.div>
+
+            <motion.div className="about-card" variants={itemVariants}>
+              <h3>Mes objectifs</h3>
+              <p>
+                Je cherche constamment à améliorer mes compétences et à rester à jour avec 
+                les dernières tendances technologiques. Mon objectif est de devenir un 
+                développeur full-stack polyvalent et de contribuer à des projets qui ont 
+                un impact positif.
+              </p>
+            </motion.div>
+          </motion.div>
+
+          <motion.div
+            className="about-stats"
+            variants={containerVariants}
+            initial="hidden"
+            whileInView="visible"
+            viewport={{ once: true }}
+          >
+            {stats.map((stat, index) => (
+              <motion.div
+                key={index}
+                className="stat-card"
+                variants={itemVariants}
+                whileHover={{
+                  scale: 1.05,
+                  y: -5,
+                  transition: { duration: 0.3 }
+                }}
+              >
+                <div className="stat-icon">
+                  {stat.icon}
+                </div>
+                <div className="stat-value">{stat.value}</div>
+                <div className="stat-label">{stat.label}</div>
+              </motion.div>
+            ))}
+          </motion.div>
+        </div>
+
+        <motion.div
+          className="about-highlight"
+          initial={{ opacity: 0, scale: 0.9 }}
+          whileInView={{ opacity: 1, scale: 1 }}
+          transition={{ duration: 0.8, delay: 0.5 }}
+          viewport={{ once: true }}
+        >
+          <div className="highlight-content">
+            <h3>En quelques mots</h3>
+            <p>
+              "La technologie n'est rien. Ce qui est important, c'est d'avoir la foi en les gens, 
+              qu'ils soient fondamentalement bons et intelligents, et si vous leur donnez des outils, 
+              ils feront des choses merveilleuses avec."
+            </p>
+            <cite>- Steve Jobs</cite>
+          </div>
+        </motion.div>
+      </div>
+    </section>
+  );
+};
+
+export default About;