Enhances UI with i18n, theme persistence and navigation

Adds internationalization (i18n) support using i18next, enabling multi-language support.

Persists theme selection in local storage, providing a consistent user experience across sessions.

Implements smooth scrolling navigation to different sections of the page.

Introduces a "Projects" section using a routing system, with tabs for professional and personal endeavors and detailed views using framer-motion for smooth transitions.

Includes updated resume PDFs.

src/components/About.tsx

@@ -17,8 +17,8 @@ const About = () => {
                             <p className="text-secondary/70">{t('about.experience_desc')}</p>
                         </div>
                         <div className="bg-secondary/5 p-6 rounded-lg border border-secondary/10">
-                            <h3 className="text-xl font-semibold mb-3 text-accent">{t('about.passion_title')}</h3>
-                            <p className="text-secondary/70">{t('about.passion_desc')}</p>
+                            <h3 className="text-xl font-semibold mb-3 text-accent">{t('about.approach_title')}</h3>
+                            <p className="text-secondary/70">{t('about.approach_desc')}</p>
                         </div>
                     </div>
                 </div>

src/components/App.tsx

@@ -10,8 +10,22 @@ import { ThemeMenu, ThemeType, ThemeSelected } from './ThemeMenu';
 
 function App() {
     const { t, i18n } = useTranslation();
-    const [theme, setTheme] = useState<ThemeType>('dark');
-    const [themeSelected, setThemeSelected] = useState<ThemeSelected>('system');
+    const [theme, setTheme] = useState<ThemeType>(() => {
+        const savedTheme = localStorage.getItem('theme');
+        return (savedTheme as ThemeType) || 'dark';
+    });
+    const [themeSelected, setThemeSelected] = useState<ThemeSelected>(() => {
+        const savedThemeSelected = localStorage.getItem('themeSelected');
+        return (savedThemeSelected as ThemeSelected) || 'system';
+    });
+
+    // Charger la langue sauvegardée au démarrage
+    useEffect(() => {
+        const savedLanguage = localStorage.getItem('language');
+        if (savedLanguage && (savedLanguage === 'fr' || savedLanguage === 'en')) {
+            i18n.changeLanguage(savedLanguage);
+        }
+    }, [i18n]);
 
     useEffect(() => {
         if (themeSelected === 'system') {
@@ -30,32 +44,51 @@ function App() {
             setTheme(themeSelected);
             document.documentElement.className = `theme-${themeSelected}`;
         }
-    }, [themeSelected]);
+        
+        // Sauvegarder le thème sélectionné
+        localStorage.setItem('themeSelected', themeSelected);
+        localStorage.setItem('theme', theme);
+    }, [themeSelected, theme]);
 
     const toggleLanguage = () => {
         const newLang = i18n.language === 'fr' ? 'en' : 'fr';
         i18n.changeLanguage(newLang);
+        localStorage.setItem('language', newLang);
     };
 
     const handleThemeChange = (newTheme: ThemeSelected) => {
         setThemeSelected(newTheme);
     };
 
+    const scrollToSection = (id: string) => {
+        const section = document.getElementById(id);
+        if (section) {
+            section.scrollIntoView({ behavior: 'smooth' });
+        }
+    }
+
 
     return (
-        <div className="min-h-screen text-secondary bg-primary transition-colors duration-300">
+        <div className="min-h-screen text-secondary bg-primary/80 transition-colors duration-100">
+            {/* Background Blobs */}
+            <div className="background-blobs">
+                <div className="blob blob-1"></div>
+                <div className="blob blob-2"></div>
+                <div className="blob blob-3"></div>
+            </div>
+
             {/* Header */}
             <header className='fixed top-0 left-0 right-0 z-50 flex justify-between items-center gap-4 text-sm w-full px-8 py-6 bg-primary/80 backdrop-blur-md border-b border-secondary/10'>
                 <h1 className='text-2xl font-bold'>
-                    <span className='text-accent'>L</span>ouis <span className='text-accent'>E</span>MARD
+                    Louis EMARD
                 </h1>
                 <nav className='flex gap-6 h-full justify-center items-center'>
-                    <a href='#about' className='hover:text-accent transition-colors'>{t('nav.about')}</a>
-                    <a href='#experience' className='hover:text-accent transition-colors'>{t('nav.experience')}</a>
-                    <a href='#skills' className='hover:text-accent transition-colors'>{t('nav.skills')}</a>
-                    <a href='#education' className='hover:text-accent transition-colors'>{t('nav.education')}</a>
-                    <a href='#contact' className='hover:text-accent transition-colors'>{t('nav.contact')}</a>
-                    
+                    <a onClick={() => scrollToSection('about')} className='hover:text-accent transition-colors cursor-pointer'>{t('nav.about')}</a>
+                    <a onClick={() => scrollToSection('experience')} className='hover:text-accent transition-colors cursor-pointer'>{t('nav.projects')}</a>
+                    <a onClick={() => scrollToSection('skills')} className='hover:text-accent transition-colors cursor-pointer'>{t('nav.skills')}</a>
+                    <a onClick={() => scrollToSection('education')} className='hover:text-accent transition-colors cursor-pointer'>{t('nav.education')}</a>
+                    <a onClick={() => scrollToSection('contact')} className='hover:text-accent transition-colors cursor-pointer'>{t('nav.contact')}</a>
+
                     {/* Language Toggle */}
                     <button 
                         onClick={toggleLanguage}
@@ -74,7 +107,7 @@ function App() {
             </header>
 
             {/* Main Content */}
-            <main>
+            <main className='bg-'>
                 <Hero />
                 <About />
                 <Experience />

src/components/Experience/Experience.tsx

@@ -1,25 +1,32 @@
-import { useEffect } from 'react';
+import { useEffect, useState } from 'react';
 import { useTranslation } from 'react-i18next';
 import { Routes, Route, useRoutes, Link, useParams, useNavigate } from 'react-router';
 import { AnimatePresence, motion } from 'framer-motion';
 
+type ProjectType = 'professional' | 'personal';
+
 const Experience = () => {
     const { t } = useTranslation();
-    const experiences = [
+    const [activeTab, setActiveTab] = useState<ProjectType>('professional');
+    
+    const professionalExperiences = [
         {
-            period: '2023 - 2024',
+            period: '2024',
             title: 'experience.job1.title',
             company: 'experience.job1.company',
             description: 'experience.job1.description',
             tasks: ['experience.job1.task1', 'experience.job1.task2', 'experience.job1.task3']
         },
         {
-            period: '2022',
+            period: '2024',
             title: 'experience.job2.title',
             company: 'experience.job2.company',
             description: 'experience.job2.description',
             tasks: ['experience.job2.task1', 'experience.job2.task2']
-        },
+        }
+    ];
+
+    const personalExperiences = [
         {
             period: '2018 - 2025',
             title: 'experience.job3.title',
@@ -29,17 +36,41 @@ const Experience = () => {
         }
     ];
 
+    const currentExperiences = activeTab === 'professional' ? professionalExperiences : personalExperiences;
+
     const routes = useRoutes(['/', '/experiences/:xpId'].map((path, id) => ({
         path,
         element: (
             <>
-                <Link to={"/"}>
-                    <p>Exit</p>
-                </Link>
                 <div className="max-w-4xl mx-auto">
-                    <h2 className="text-4xl font-bold mb-12 text-accent">{t('experience.title')}</h2>
+                    <h2 className="text-4xl font-bold mb-8 text-accent" id="experience">{t('experience.title')}</h2>
+                    
+                    {/* Tabs */}
+                    <div className="flex gap-4 mb-8 border-b border-secondary/20">
+                        <button
+                            onClick={() => setActiveTab('professional')}
+                            className={`px-6 py-3 font-medium transition-all ${
+                                activeTab === 'professional'
+                                    ? 'text-accent border-b-2 border-accent'
+                                    : 'text-secondary/60 hover:text-secondary'
+                            }`}
+                        >
+                            {t('experience.tabs.professional')}
+                        </button>
+                        <button
+                            onClick={() => setActiveTab('personal')}
+                            className={`px-6 py-3 font-medium transition-all ${
+                                activeTab === 'personal'
+                                    ? 'text-accent border-b-2 border-accent'
+                                    : 'text-secondary/60 hover:text-secondary'
+                            }`}
+                        >
+                            {t('experience.tabs.personal')}
+                        </button>
+                    </div>
+
                     <div className="space-y-8">
-                        <ExperiencesList experiences={experiences} t={t} />
+                        <ExperiencesList experiences={currentExperiences} t={t} />
                     </div>
                 </div>
             </>
@@ -70,7 +101,7 @@ const ExperiencesList = ({ experiences, t }: ExperiencesListProps) => {
     const { xpId } = useParams();
     return <div className=' flex  flex-col space-y-8'>
         {experiences.map((exp, index) => <ExperienceSummary key={index} index={index} exp={exp} t={t} />)}
-        <AnimatePresence>
+        <AnimatePresence mode="wait">
             {xpId !== undefined && <DetailedExperience t={t} />}
         </AnimatePresence>
     </div>
@@ -91,20 +122,55 @@ interface ExperienceSummaryProps {
 const ExperienceSummary = ({ index, exp, t }: ExperienceSummaryProps) => {
 
     return <Link to={`/experiences/${index}`}>
-        <motion.div layoutId={`experience-${index}`} key={index} className="bg-primary p-6 rounded-lg border border-secondary/10 hover:border-accent/50 transition-all">
+        <motion.div 
+            layoutId={`experience-${index}`} 
+            key={index} 
+            className="bg-primary p-6 rounded-lg border border-secondary/10 hover:border-accent/50 transition-colors cursor-pointer relative group"
+            transition={{ type: "spring", stiffness: 350, damping: 35 }}
+        >
             <div className="flex flex-col md:flex-row md:justify-between md:items-start mb-4">
-                <motion.div layoutId={`experience-header-${index}`}>
+                <motion.div 
+                    layoutId={`experience-header-${index}`}
+                    transition={{ type: "spring", stiffness: 350, damping: 35 }}
+                    className="flex-1"
+                >
                     <h3 className="text-2xl font-semibold text-secondary mb-1">{t(exp.title)}</h3>
                     <p className="text-accent font-medium">{t(exp.company)}</p>
                 </motion.div>
-                <span className="text-secondary/60 text-sm md:text-base mt-2 md:mt-0">{exp.period}</span>
+                <div className="flex items-center gap-3 mt-2 md:mt-0">
+                    <motion.span 
+                        layoutId={`experience-period-${index}`}
+                        className="text-secondary/60 text-sm md:text-base"
+                        transition={{ type: "spring", stiffness: 350, damping: 35 }}
+                    >
+                        {exp.period}
+                    </motion.span>
+                    <motion.svg 
+                        xmlns="http://www.w3.org/2000/svg" 
+                        className="h-5 w-5 text-accent opacity-60 group-hover:opacity-100 transition-opacity" 
+                        fill="none" 
+                        viewBox="0 0 24 24" 
+                        stroke="currentColor"
+                        whileHover={{ scale: 1.2 }}
+                    >
+                        <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M4 8V4m0 0h4M4 4l5 5m11-1V4m0 0h-4m4 0l-5 5M4 16v4m0 0h4m-4 0l5-5m11 5l-5-5m5 5v-4m0 4h-4" />
+                    </motion.svg>
+                </div>
             </div>
-            <p className="text-secondary/70 mb-4">{t(exp.description)}</p>
-            <ul className="list-disc list-inside space-y-2 text-secondary/60">
+            <motion.p 
+                initial={{ opacity: 1 }}
+                className="text-secondary/70 mb-4"
+            >
+                {t(exp.description)}
+            </motion.p>
+            <motion.ul 
+                initial={{ opacity: 1 }}
+                className="list-disc list-inside space-y-2 text-secondary/60"
+            >
                 {exp.tasks.map((task, taskIndex) => (
                     <li key={taskIndex}>{t(task)}</li>
                 ))}
-            </ul>
+            </motion.ul>
         </motion.div>
     </Link>
 };
@@ -143,14 +209,65 @@ const DetailedExperience = ({ t }: DetailedExperienceProps) => {
         initial={{ opacity: 0 }}
         animate={{ opacity: 1 }}
         exit={{ opacity: 0 }}
+        transition={{ duration: 0.3, ease: "easeInOut" }}
         className='fixed top-0 left-0 w-full h-full bg-black bg-opacity-80 flex flex-col items-center justify-center z-0 backdrop-blur-sm'
         onClick={handleBackgroundClick}
         
     >
-        <motion.div layoutId={`experience-${xpId}`} className="bg-primary p-8 rounded-lg border border-accent max-w-3xl w-full h-1/2" onClick={(e) => e.stopPropagation()}>
-            <motion.div layoutId={`experience-header-${xpId}`}>
-                <h3 className="text-2xl font-semibold text-secondary mb-1">Dev full stack</h3>
+        <motion.div 
+            layoutId={`experience-${xpId}`} 
+            className="bg-primary p-8 rounded-lg border border-accent/50 max-w-3xl w-full h-1/2 overflow-y-auto relative" 
+            transition={{ type: "spring", stiffness: 350, damping: 35 }}
+        >
+            <motion.button
+                onClick={() => navigate('/')}
+                className="absolute top-4 right-4 p-2 rounded-full hover:bg-accent/10 transition-colors group"
+                whileHover={{ scale: 1.1 }}
+                whileTap={{ scale: 0.9 }}
+                initial={{ opacity: 0 }}
+                animate={{ opacity: 1 }}
+                exit={{ opacity: 0 }}
+                transition={{ duration: 0.15 }}
+            >
+                <svg 
+                    xmlns="http://www.w3.org/2000/svg" 
+                    className="h-6 w-6 text-accent group-hover:text-accent/80" 
+                    fill="none" 
+                    viewBox="0 0 24 24" 
+                    stroke="currentColor"
+                >
+                    <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M6 18L18 6M6 6l12 12" />
+                </svg>
+            </motion.button>
+
+            <div className="flex flex-col md:flex-row md:justify-between md:items-start mb-6">
+                <motion.div 
+                    layoutId={`experience-header-${xpId}`}
+                    transition={{ type: "spring", stiffness: 350, damping: 35 }}
+                    className="flex-1"
+                >
+                    <h3 className="text-2xl font-semibold text-secondary mb-1">Dev full stack</h3>
                     <p className="text-accent font-medium">Meta Video</p>
+                </motion.div>
+                <div className="flex items-center gap-3 mt-2 md:mt-0">
+                    <motion.span 
+                        layoutId={`experience-period-${xpId}`}
+                        className="text-secondary/60 text-sm md:text-base"
+                        transition={{ type: "spring", stiffness: 350, damping: 35 }}
+                    >
+                        2023 - 2024
+                    </motion.span>
+                </div>
+            </div>
+            
+            <motion.div
+                initial={{ opacity: 0 }}
+                animate={{ opacity: 1 }}
+                exit={{ opacity: 0 }}
+                transition={{ duration: 0.15 }}
+            >
+                <h4 className="text-xl font-semibold text-secondary mb-4">Détails supplémentaires</h4>
+                <p className="text-secondary/70 mb-4">Contenu détaillé de l'expérience...</p>
             </motion.div>
         </motion.div>
     </motion.div>;

src/components/ThemeMenu.tsx

@@ -5,9 +5,8 @@ import Moon from '../icons/Moon';
 import Sun from '../icons/Sun';
 import SystemIcon from '../icons/System';
 
-export type CustomThemeColor = 'purple' | 'teal' | 'sunset' | 'forest' | 'ocean' | 'rose' | 'amber';
-export type ThemeType = 'light' | 'dark' | `custom-${CustomThemeColor}`;
-export type ThemeSelected = 'light' | 'dark' | `custom-${CustomThemeColor}` | 'system';
+export type ThemeType = 'light' | 'dark';
+export type ThemeSelected = 'light' | 'dark' | 'system';
 
 interface ThemeMenuProps {
     theme: ThemeType;
@@ -15,25 +14,9 @@ interface ThemeMenuProps {
     onThemeChange: (theme: ThemeSelected) => void;
 }
 
-const customThemes: CustomThemeColor[] = ['purple', 'teal', 'sunset', 'forest', 'ocean', 'rose', 'amber'];
-
-const getThemeEmoji = (color: CustomThemeColor): string => {
-    const emojis: Record<CustomThemeColor, string> = {
-        purple: '💜',
-        teal: '🩵',
-        sunset: '🌅',
-        forest: '🌲',
-        ocean: '🌊',
-        rose: '🌹',
-        amber: '⚡'
-    };
-    return emojis[color];
-};
-
 export const ThemeMenu = ({ theme, themeSelected, onThemeChange }: ThemeMenuProps) => {
     const { t } = useTranslation();
     const [showThemeMenu, setShowThemeMenu] = useState(false);
-    const [showCustomSubmenu, setShowCustomSubmenu] = useState(true);
 
     const getThemeIcon = () => {
         if (themeSelected === 'system') {
@@ -42,17 +25,12 @@ export const ThemeMenu = ({ theme, themeSelected, onThemeChange }: ThemeMenuProp
         if (theme === 'light') {
             return <Sun className='text-secondary'/>;
         }
-        if (theme.startsWith('custom-')) {
-            const color = theme.split('-')[1] as CustomThemeColor;
-            return <span className='text-accent text-xl'>{getThemeEmoji(color)}</span>;
-        }
         return <Moon className='text-secondary'/>;
     };
 
     const handleThemeSelect = (selectedTheme: ThemeSelected) => {
         onThemeChange(selectedTheme);
         setShowThemeMenu(false);
-        setShowCustomSubmenu(false);
     };
 
     return (
@@ -88,44 +66,6 @@ export const ThemeMenu = ({ theme, themeSelected, onThemeChange }: ThemeMenuProp
                         <Moon height={16} width={16} /> {t('theme.dark')}
                     </button>
                     
-                    {/* Custom Themes - with submenu */}
-                    <div 
-                        className="relative"
-                    >
-                        <button 
-                            className={clsx(
-                                "w-full px-4 py-3 text-left hover:bg-accent/10 hover:text-accent transition-colors flex items-center justify-between gap-3",
-                                themeSelected.startsWith('custom-') && "bg-accent/20 text-accent"
-                            )}
-                            onClick={() => setShowCustomSubmenu(true)}
-                        onBlur={() => setShowCustomSubmenu(false)}  
-                        >
-                            <span className="flex items-center gap-3">
-                                <span className='text-lg'>✨</span> {t('theme.custom')}
-                            </span>
-                            <span className="text-xs">▶</span>
-                        </button>
-                        
-                        {/* Custom Submenu */}
-                        {/* {showCustomSubmenu && ( */}
-                            <div className=" top-0 ml-1 bg-primary border border-secondary/20 rounded-lg shadow-xl min-w-[160px] overflow-hidden">
-                                {customThemes.map((color) => (
-                                    <button
-                                        key={color}
-                                        onClick={() => handleThemeSelect(`custom-${color}`)}
-                                        className={clsx(
-                                            "w-full px-4 py-3 text-left hover:bg-accent/10 hover:text-accent transition-colors flex items-center gap-3",
-                                            themeSelected === `custom-${color}` && "bg-accent/20 text-accent"
-                                        )}
-                                    >
-                                        <span className='text-lg'>{getThemeEmoji(color)}</span>
-                                        {t(`theme.custom_${color}`)}
-                                    </button>
-                                ))}
-                            </div>
-                        {/* )} */}
-                    </div>
-                    
                     {/* System Theme */}
                     <button 
                         onClick={() => handleThemeSelect('system')}