feat: add language context and translation support

- Introduced LanguageProvider to manage language state and translations.
- Updated components (Header, Hero, About, Skills, Projects, Education, Contact) to utilize translations.
- Added language toggle button in the header for switching between French and English.
- Enhanced styling for language toggle button in the header.

src/components/Skills.tsx

@@ -1,11 +1,13 @@
 import { motion } from 'framer-motion';
 import { Code, Database, Smartphone, Globe, Server, Wrench } from 'lucide-react';
+import { useLanguage } from '../contexts/LanguageContext';
 
 const Skills = () => {
+  const { t } = useLanguage();
   const skillCategories = [
     {
       icon: <Smartphone size={32} />,
-      title: "Mobile",
+      title: t('skills.category.mobile'),
       color: "#4FC3F7",
       skills: [
         { name: "Dart", level: 85, color: "#0175C2" },
@@ -14,7 +16,7 @@ const Skills = () => {
     },
     {
       icon: <Globe size={32} />,
-      title: "Frontend",
+      title: t('skills.category.frontend'),
       color: "#42A5F5",
       skills: [
         { name: "React", level: 75, color: "#61DAFB" },
@@ -24,7 +26,7 @@ const Skills = () => {
     },
     {
       icon: <Server size={32} />,
-      title: "Backend",
+      title: t('skills.category.backend'),
       color: "#66BB6A",
       skills: [
         { name: "Java", level: 75, color: "#ED8B00" },
@@ -33,7 +35,7 @@ const Skills = () => {
     },
     {
       icon: <Database size={32} />,
-      title: "Outils & Autres",
+      title: t('skills.category.tools'),
       color: "#AB47BC",
       skills: [
         { name: "Git", level: 70, color: "#F05032" },
@@ -76,9 +78,9 @@ const Skills = () => {
           transition={{ duration: 0.8 }}
           viewport={{ once: true }}
         >
-          <h2 className="section-title">Compétences & Technologies</h2>
+          <h2 className="section-title">{t('skills.title')}</h2>
           <p className="section-subtitle">
-            Les technologies que je maîtrise et avec lesquelles j'aime travailler
+            {t('skills.subtitle')}
           </p>
         </motion.div>
 
@@ -157,13 +159,13 @@ const Skills = () => {
           transition={{ duration: 0.8, delay: 0.3 }}
           viewport={{ once: true }}
         >
-          <h3 className="soft-skills-title">Autres compétences</h3>
+          <h3 className="soft-skills-title">{t('skills.otherSkills')}</h3>
           <div className="soft-skills-grid">
             {[
-              { name: "Résolution de problèmes", icon: <Wrench size={20} /> },
-              { name: "Travail en équipe", icon: <Code size={20} /> },
-              { name: "Apprentissage continu", icon: <Database size={20} /> },
-              { name: "Communication", icon: <Globe size={20} /> }
+              { name: t('skills.problemSolving'), icon: <Wrench size={20} /> },
+              { name: t('skills.teamwork'), icon: <Code size={20} /> },
+              { name: t('skills.continuousLearning'), icon: <Database size={20} /> },
+              { name: t('skills.communication'), icon: <Globe size={20} /> }
             ].map((softSkill, index) => (
               <motion.div
                 key={softSkill.name}