feat: add unique keys to motion components for improved rendering

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={{