feat: add unique keys to motion components for improved rendering

src/components/About.tsx

@@ -39,6 +39,7 @@ const About = () => {
     <section id="about" className="about">
       <div className="container">
         <motion.div
+          key="about-header"
           className="section-header"
           initial={{ opacity: 0, y: 50 }}
           whileInView={{ opacity: 1, y: 0 }}
@@ -53,6 +54,7 @@ const About = () => {
 
         <div className="about-content">
           <motion.div
+            key="about-text"
             className="about-text"
             variants={containerVariants}
             initial="hidden"
@@ -82,6 +84,7 @@ const About = () => {
           </motion.div>
 
           <motion.div
+            key="about-stats"
             className="about-stats"
             variants={containerVariants}
             initial="hidden"
@@ -90,7 +93,7 @@ const About = () => {
           >
             {stats.map((stat, index) => (
               <motion.div
-                key={index}
+                key={`stat-${index}`}
                 className="stat-card"
                 variants={itemVariants}
                 whileHover={{
@@ -110,6 +113,7 @@ const About = () => {
         </div>
 
         <motion.div
+          key="about-highlight"
           className="about-highlight"
           initial={{ opacity: 0, scale: 0.9 }}
           whileInView={{ opacity: 1, scale: 1 }}

src/components/Contact.tsx

@@ -127,6 +127,7 @@ const Contact = () => {
     <section id="contact" className="contact">
       <div className="container">
         <motion.div
+          key="contact-header"
           className="section-header"
           initial={{ opacity: 0, y: 50 }}
           whileInView={{ opacity: 1, y: 0 }}
@@ -140,6 +141,7 @@ const Contact = () => {
         </motion.div>
 
         <motion.div
+          key="contact-content"
           className="contact-content"
           variants={containerVariants}
           initial="hidden"

src/components/Education.tsx

@@ -71,6 +71,7 @@ const Education = () => {
     <section id="education" className="education">
       <div className="container">
         <motion.div
+          key="education-header"
           className="section-header"
           initial={{ opacity: 0, y: 50 }}
           whileInView={{ opacity: 1, y: 0 }}
@@ -86,6 +87,7 @@ const Education = () => {
         <div className="education-content">
           {/* Formation principale */}
           <motion.div
+            key="education-main"
             className="education-main"
             variants={containerVariants}
             initial="hidden"

src/components/Header.tsx

@@ -13,12 +13,12 @@ const Header = ({ darkMode, toggleDarkMode }: HeaderProps) => {
   const { language, setLanguage, t } = useLanguage();
 
   const menuItems = [
-    { name: t('nav.home'), href: '#hero' },
+    { id: 'home', name: t('nav.home'), href: '#hero' },
-    { name: t('nav.about'), href: '#about' },
+    { id: 'about', name: t('nav.about'), href: '#about' },
-    { name: t('nav.skills'), href: '#skills' },
+    { id: 'skills', name: t('nav.skills'), href: '#skills' },
-    { name: t('nav.projects'), href: '#projects' },
+    { id: 'projects', name: t('nav.projects'), href: '#projects' },
-    { name: t('nav.education'), href: '#education' },
+    { id: 'education', name: t('nav.education'), href: '#education' },
-    { name: t('nav.contact'), href: '#contact' }
+    { id: 'contact', name: t('nav.contact'), href: '#contact' }
   ];
 
   const scrollToSection = (href: string) => {
@@ -55,7 +55,7 @@ const Header = ({ darkMode, toggleDarkMode }: HeaderProps) => {
         <ul className="nav-menu desktop-menu">
           {menuItems.map((item, index) => (
             <motion.li
-              key={item.name}
+              key={item.id}
               initial={{ opacity: 0, y: -20 }}
               animate={{ opacity: 1, y: 0 }}
               transition={{ duration: 0.5, delay: index * 0.1 }}
@@ -118,7 +118,7 @@ const Header = ({ darkMode, toggleDarkMode }: HeaderProps) => {
           transition={{ duration: 0.3 }}
         >
           {menuItems.map((item) => (
-            <li key={item.name}>
+            <li key={item.id}>
               <a
                 href={item.href}
                 onClick={(e) => {

src/components/Hero.tsx

@@ -17,6 +17,7 @@ const Hero = () => {
     <section id="hero" className="hero">
       <div className="hero-content">
         <motion.div
+          key="hero-text"
           className="hero-text"
           initial={{ opacity: 0, y: 50 }}
           animate={{ opacity: 1, y: 0 }}
@@ -111,6 +112,7 @@ const Hero = () => {
         </motion.div>
 
         <motion.div
+          key="hero-image"
           className="hero-image"
           initial={{ opacity: 0, scale: 0.8 }}
           animate={{ opacity: 1, scale: 1 }}

src/components/Projects.tsx

@@ -73,6 +73,7 @@ const Projects = () => {
     <section id="projects" className="projects">
       <div className="container">
         <motion.div
+          key="projects-header"
           className="section-header"
           initial={{ opacity: 0, y: 50 }}
           whileInView={{ opacity: 1, y: 0 }}
@@ -86,6 +87,7 @@ const Projects = () => {
         </motion.div>
 
         <motion.div
+          key="projects-grid"
           className="projects-grid"
           variants={containerVariants}
           initial="hidden"

src/components/Skills.tsx

@@ -6,6 +6,7 @@ const Skills = () => {
   const { t } = useLanguage();
   const skillCategories = [
     {
+      id: 'mobile',
       icon: <Smartphone size={32} />,
       title: t('skills.category.mobile'),
       color: "#4FC3F7",
@@ -15,6 +16,7 @@ const Skills = () => {
       ]
     },
     {
+      id: 'frontend',
       icon: <Globe size={32} />,
       title: t('skills.category.frontend'),
       color: "#42A5F5",
@@ -25,6 +27,7 @@ const Skills = () => {
       ]
     },
     {
+      id: 'backend',
       icon: <Server size={32} />,
       title: t('skills.category.backend'),
       color: "#66BB6A",
@@ -34,7 +37,8 @@ const Skills = () => {
       ]
     },
     {
-      icon: <Database size={32} />,
+      id: 'tools',
+      icon: <Wrench size={32} />,
       title: t('skills.category.tools'),
       color: "#AB47BC",
       skills: [
@@ -72,6 +76,7 @@ const Skills = () => {
     <section id="skills" className="skills">
       <div className="container">
         <motion.div
+          key="skills-header"
           className="section-header"
           initial={{ opacity: 0, y: 50 }}
           whileInView={{ opacity: 1, y: 0 }}
@@ -85,6 +90,7 @@ const Skills = () => {
         </motion.div>
 
         <motion.div
+          key="skills-grid"
           className="skills-grid"
           variants={containerVariants}
           initial="hidden"
@@ -93,7 +99,7 @@ const Skills = () => {
         >
           {skillCategories.map((category, categoryIndex) => (
             <motion.div
-              key={category.title}
+              key={category.id}
               className="skill-category"
               variants={categoryVariants}
               whileHover={{