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.
This commit is contained in:
Dayron
296
src/contexts/LanguageContext.tsx
Normal file
296
src/contexts/LanguageContext.tsx
Normal file
@@ -0,0 +1,296 @@
|
||||
// ========================
|
||||
// CONTEXTE DE LANGUE
|
||||
// ========================
|
||||
|
||||
import React, { createContext, useContext, useState } from 'react';
|
||||
import type { ReactNode } from 'react';
|
||||
|
||||
// Types pour les langues supportées
|
||||
export type Language = 'fr' | 'en';
|
||||
|
||||
// Interface pour le contexte
|
||||
interface LanguageContextType {
|
||||
language: Language;
|
||||
setLanguage: (lang: Language) => void;
|
||||
t: (key: string) => string;
|
||||
}
|
||||
|
||||
// Textes traduits
|
||||
const translations = {
|
||||
fr: {
|
||||
// Navigation
|
||||
'nav.home': 'Accueil',
|
||||
'nav.about': 'À propos',
|
||||
'nav.skills': 'Compétences',
|
||||
'nav.projects': 'Projets',
|
||||
'nav.education': 'Formation',
|
||||
'nav.contact': 'Contact',
|
||||
|
||||
// Boutons
|
||||
'btn.changeTheme': 'Changer de thème',
|
||||
'btn.menu': 'Menu',
|
||||
'btn.changeLang': 'English',
|
||||
'btn.downloadCV': 'Télécharger CV',
|
||||
'btn.viewProjects': 'Voir mes projets',
|
||||
'btn.contactMe': 'Me contacter',
|
||||
|
||||
// Hero
|
||||
'hero.greeting': 'Salut, je suis',
|
||||
'hero.title': 'Dayron Van Leemput',
|
||||
'hero.subtitle': 'Étudiant en Technologies de l\'Informatique',
|
||||
'hero.description': 'Bac 3 à la HELHa de Tournai | Jeune développeur passionné par les nouvelles technologies et le développement d\'applications innovantes',
|
||||
|
||||
// About
|
||||
'about.title': 'À propos de moi',
|
||||
'about.subtitle': 'Découvrez mon parcours et mes passions',
|
||||
'about.stats.year': '3ème',
|
||||
'about.stats.yearLabel': 'Année d\'études',
|
||||
'about.stats.passion': '100%',
|
||||
'about.stats.passionLabel': 'Passion',
|
||||
'about.stats.goals': '∞',
|
||||
'about.stats.goalsLabel': 'Objectifs',
|
||||
'about.stats.fuel': '☕',
|
||||
'about.stats.fuelLabel': 'Fuel quotidien',
|
||||
'about.journey.title': 'Mon parcours',
|
||||
'about.journey.content': 'Actuellement en 3ème année de Technologies de l\'Informatique à 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.',
|
||||
'about.passion.title': 'Ma passion',
|
||||
'about.passion.content': 'Ce qui m\'anime le plus, c\'est la création de solutions innovantes qui résolvent des problèmes réels. J\'aime particulièrement le développement mobile avec Flutter et le développement web moderne avec React et TypeScript.',
|
||||
'about.goals.title': 'Mes objectifs',
|
||||
'about.goals.content': '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.',
|
||||
'about.quote.title': 'En quelques mots',
|
||||
'about.quote.content': '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.',
|
||||
'about.quote.author': 'Steve Jobs',
|
||||
|
||||
// Skills
|
||||
'skills.title': 'Mes Compétences',
|
||||
'skills.subtitle': 'Technologies et outils que je maîtrise',
|
||||
'skills.category.mobile': 'Mobile',
|
||||
'skills.category.frontend': 'Frontend',
|
||||
'skills.category.backend': 'Backend',
|
||||
'skills.category.tools': 'Outils & Autres',
|
||||
'skills.otherSkills': 'Autres compétences',
|
||||
'skills.problemSolving': 'Résolution de problèmes',
|
||||
'skills.teamwork': 'Travail en équipe',
|
||||
'skills.continuousLearning': 'Apprentissage continu',
|
||||
'skills.communication': 'Communication',
|
||||
|
||||
// Projects
|
||||
'projects.title': 'Mes Projets',
|
||||
'projects.subtitle': 'Découvrez mes réalisations et mes expériences',
|
||||
'projects.status.available': 'Bientôt disponible sur App Store et Play Store',
|
||||
'projects.status.current': 'Projet actuel',
|
||||
'projects.features': 'Fonctionnalités principales :',
|
||||
'projects.btn.code': 'Code',
|
||||
'projects.btn.viewProject': 'Voir le projet',
|
||||
'projects.travelMate.title': 'Travel Mate',
|
||||
'projects.travelMate.description': 'Application mobile conçue pour simplifier l\'organisation de voyages de groupe. Elle permet de centraliser toutes les informations importantes d\'un voyage : planification, gestion des dépenses, découverte d\'activités et coordination entre les participants.',
|
||||
'projects.travelMate.feature1': 'Planification de voyage collaborative',
|
||||
'projects.travelMate.feature2': 'Gestion des dépenses partagées',
|
||||
'projects.travelMate.feature3': 'Découverte d\'activités locales',
|
||||
'projects.travelMate.feature4': 'Coordination en temps réel',
|
||||
'projects.portfolio.title': 'Portfolio Web',
|
||||
'projects.portfolio.description': 'Site web personnel moderne et responsive développé avec React et TypeScript. Inclut des animations fluides, un mode sombre/clair et une architecture modulaire.',
|
||||
'projects.portfolio.feature1': 'Design responsive',
|
||||
'projects.portfolio.feature2': 'Animations fluides',
|
||||
'projects.portfolio.feature3': 'Mode sombre/clair',
|
||||
'projects.portfolio.feature4': 'Performance optimisée',
|
||||
|
||||
// Education
|
||||
'education.title': 'Formation',
|
||||
'education.subtitle': 'Mon parcours académique et professionnel',
|
||||
'education.learningGoals2025': 'Objectifs d\'apprentissage 2025',
|
||||
'education.goal1': 'Maîtriser Firebase et les services cloud',
|
||||
'education.goal2': 'Approfondir Spring Boot pour le backend',
|
||||
'education.goal3': 'Apprendre Docker et les conteneurs',
|
||||
'education.goal4': 'Développer mes compétences en UI/UX',
|
||||
'education.degree': 'Bachelier en Technologies de l\'Informatique',
|
||||
'education.school': 'HELHa - Haute École Louvain en Hainaut',
|
||||
'education.location': 'Tournai, Belgique',
|
||||
'education.period': '2023 - 2026',
|
||||
'education.currentYear': '3ème année',
|
||||
'education.status': 'En cours',
|
||||
'education.description': 'Formation complète en développement logiciel, programmation, bases de données, réseaux et gestion de projets informatiques.',
|
||||
'education.highlights.0': 'Programmation orientée objet (Java, C#)',
|
||||
'education.highlights.1': 'Développement web (HTML, CSS, JavaScript, React)',
|
||||
'education.highlights.2': 'Développement mobile (Flutter, Dart)',
|
||||
'education.highlights.3': 'Bases de données et SQL',
|
||||
'education.highlights.4': 'Gestion de projets',
|
||||
'education.highlights.5': 'Réseaux et systèmes',
|
||||
'education.certifications.title': 'Certifications & Formations',
|
||||
'education.cert1.title': 'Développement Mobile Flutter',
|
||||
'education.cert1.provider': 'Formation autodidacte',
|
||||
'education.cert1.date': '2024',
|
||||
'education.cert2.title': 'React & TypeScript',
|
||||
'education.cert2.provider': 'Projets personnels',
|
||||
'education.cert2.date': '2024',
|
||||
|
||||
// Contact
|
||||
'contact.title': 'Contactez-moi',
|
||||
'contact.subtitle': 'Une question, un projet ou simplement envie d\'échanger ? N\'hésitez pas à me contacter !',
|
||||
'contact.form.name': 'Nom complet',
|
||||
'contact.form.email': 'Email',
|
||||
'contact.form.subject': 'Sujet',
|
||||
'contact.form.message': 'Message',
|
||||
'contact.form.send': 'Envoyer le message',
|
||||
'contact.form.sending': 'Envoi en cours...',
|
||||
'contact.success': 'Message envoyé avec succès ! Je vous répondrai bientôt.',
|
||||
'contact.stayInTouch': 'Restons en contact',
|
||||
'contact.intro': 'Je suis toujours intéressé par de nouveaux projets, des collaborations ou simplement des discussions autour de la technologie. N\'hésitez pas à me contacter !',
|
||||
'contact.findMeOn': 'Retrouvez-moi aussi sur :',
|
||||
'contact.sendMessage': 'Envoyez-moi un message',
|
||||
},
|
||||
en: {
|
||||
// Navigation
|
||||
'nav.home': 'Home',
|
||||
'nav.about': 'About',
|
||||
'nav.skills': 'Skills',
|
||||
'nav.projects': 'Projects',
|
||||
'nav.education': 'Education',
|
||||
'nav.contact': 'Contact',
|
||||
|
||||
// Boutons
|
||||
'btn.changeTheme': 'Change theme',
|
||||
'btn.menu': 'Menu',
|
||||
'btn.changeLang': 'Français',
|
||||
'btn.downloadCV': 'Download CV',
|
||||
'btn.viewProjects': 'View my projects',
|
||||
'btn.contactMe': 'Contact me',
|
||||
|
||||
// Hero
|
||||
'hero.greeting': 'Hi, I am',
|
||||
'hero.title': 'Dayron Van Leemput',
|
||||
'hero.subtitle': 'Computer Technology Student',
|
||||
'hero.description': 'Bachelor 3 at HELHa Tournai | Young developer passionate about new technologies and innovative application development',
|
||||
|
||||
// About
|
||||
'about.title': 'About me',
|
||||
'about.subtitle': 'Discover my journey and passions',
|
||||
'about.stats.year': '3rd',
|
||||
'about.stats.yearLabel': 'Year of studies',
|
||||
'about.stats.passion': '100%',
|
||||
'about.stats.passionLabel': 'Passion',
|
||||
'about.stats.goals': '∞',
|
||||
'about.stats.goalsLabel': 'Goals',
|
||||
'about.stats.fuel': '☕',
|
||||
'about.stats.fuelLabel': 'Daily fuel',
|
||||
'about.journey.title': 'My journey',
|
||||
'about.journey.content': 'Currently in my 3rd year of Computer Technology at HELHa Tournai, I am passionate about application development and new technologies. My journey has allowed me to acquire a solid technical foundation and a methodical approach to development.',
|
||||
'about.passion.title': 'My passion',
|
||||
'about.passion.content': 'What drives me most is creating innovative solutions that solve real problems. I particularly enjoy mobile development with Flutter and modern web development with React and TypeScript.',
|
||||
'about.goals.title': 'My goals',
|
||||
'about.goals.content': 'I constantly seek to improve my skills and stay up to date with the latest technological trends. My goal is to become a versatile full-stack developer and contribute to projects that have a positive impact.',
|
||||
'about.quote.title': 'In a few words',
|
||||
'about.quote.content': 'Technology is nothing. What\'s important is that you have a faith in people, that they\'re basically good and smart, and if you give them tools, they\'ll do wonderful things with them.',
|
||||
'about.quote.author': 'Steve Jobs',
|
||||
|
||||
// Skills
|
||||
'skills.title': 'My Skills',
|
||||
'skills.subtitle': 'Technologies and tools I master',
|
||||
'skills.category.mobile': 'Mobile',
|
||||
'skills.category.frontend': 'Frontend',
|
||||
'skills.category.backend': 'Backend',
|
||||
'skills.category.tools': 'Tools & Others',
|
||||
'skills.otherSkills': 'Other skills',
|
||||
'skills.problemSolving': 'Problem solving',
|
||||
'skills.teamwork': 'Teamwork',
|
||||
'skills.continuousLearning': 'Continuous learning',
|
||||
'skills.communication': 'Communication',
|
||||
|
||||
// Projects
|
||||
'projects.title': 'My Projects',
|
||||
'projects.subtitle': 'Discover my achievements and experiences',
|
||||
'projects.status.available': 'Coming soon on App Store and Play Store',
|
||||
'projects.status.current': 'Current project',
|
||||
'projects.features': 'Main features:',
|
||||
'projects.btn.code': 'Code',
|
||||
'projects.btn.viewProject': 'View project',
|
||||
'projects.travelMate.title': 'Travel Mate',
|
||||
'projects.travelMate.description': 'Mobile application designed to simplify group travel organization. It allows centralizing all important travel information: planning, expense management, activity discovery and coordination between participants.',
|
||||
'projects.travelMate.feature1': 'Collaborative travel planning',
|
||||
'projects.travelMate.feature2': 'Shared expense management',
|
||||
'projects.travelMate.feature3': 'Local activity discovery',
|
||||
'projects.travelMate.feature4': 'Real-time coordination',
|
||||
'projects.portfolio.title': 'Web Portfolio',
|
||||
'projects.portfolio.description': 'Modern and responsive personal website developed with React and TypeScript. Includes fluid animations, dark/light mode and modular architecture.',
|
||||
'projects.portfolio.feature1': 'Responsive design',
|
||||
'projects.portfolio.feature2': 'Fluid animations',
|
||||
'projects.portfolio.feature3': 'Dark/light mode',
|
||||
'projects.portfolio.feature4': 'Optimized performance',
|
||||
|
||||
// Education
|
||||
'education.title': 'Education',
|
||||
'education.subtitle': 'My academic and professional journey',
|
||||
'education.learningGoals2025': '2025 Learning Goals',
|
||||
'education.goal1': 'Master Firebase and cloud services',
|
||||
'education.goal2': 'Deepen Spring Boot for backend',
|
||||
'education.goal3': 'Learn Docker and containers',
|
||||
'education.goal4': 'Develop my UI/UX skills',
|
||||
'education.degree': 'Bachelor in Computer Technology',
|
||||
'education.school': 'HELHa - Haute École Louvain en Hainaut',
|
||||
'education.location': 'Tournai, Belgium',
|
||||
'education.period': '2023 - 2026',
|
||||
'education.currentYear': '3rd year',
|
||||
'education.status': 'In progress',
|
||||
'education.description': 'Complete training in software development, programming, databases, networks and IT project management.',
|
||||
'education.highlights.0': 'Object-oriented programming (Java, C#)',
|
||||
'education.highlights.1': 'Web development (HTML, CSS, JavaScript, React)',
|
||||
'education.highlights.2': 'Mobile development (Flutter, Dart)',
|
||||
'education.highlights.3': 'Databases and SQL',
|
||||
'education.highlights.4': 'Project management',
|
||||
'education.highlights.5': 'Networks and systems',
|
||||
'education.certifications.title': 'Certifications & Training',
|
||||
'education.cert1.title': 'Flutter Mobile Development',
|
||||
'education.cert1.provider': 'Self-taught training',
|
||||
'education.cert1.date': '2024',
|
||||
'education.cert2.title': 'React & TypeScript',
|
||||
'education.cert2.provider': 'Personal projects',
|
||||
'education.cert2.date': '2024',
|
||||
|
||||
// Contact
|
||||
'contact.title': 'Contact me',
|
||||
'contact.subtitle': 'A question, a project or just want to chat? Feel free to contact me!',
|
||||
'contact.form.name': 'Full name',
|
||||
'contact.form.email': 'Email',
|
||||
'contact.form.subject': 'Subject',
|
||||
'contact.form.message': 'Message',
|
||||
'contact.form.send': 'Send message',
|
||||
'contact.form.sending': 'Sending...',
|
||||
'contact.success': 'Message sent successfully! I will reply soon.',
|
||||
'contact.stayInTouch': 'Let\'s stay in touch',
|
||||
'contact.intro': 'I am always interested in new projects, collaborations or simply discussions about technology. Feel free to contact me!',
|
||||
'contact.findMeOn': 'Find me also on:',
|
||||
'contact.sendMessage': 'Send me a message',
|
||||
}
|
||||
};
|
||||
|
||||
// Création du contexte
|
||||
const LanguageContext = createContext<LanguageContextType | undefined>(undefined);
|
||||
|
||||
// Provider
|
||||
interface LanguageProviderProps {
|
||||
children: ReactNode;
|
||||
}
|
||||
|
||||
export const LanguageProvider: React.FC<LanguageProviderProps> = ({ children }) => {
|
||||
const [language, setLanguage] = useState<Language>('fr');
|
||||
|
||||
// Fonction de traduction
|
||||
const t = (key: string): string => {
|
||||
return translations[language][key as keyof typeof translations['fr']] || key;
|
||||
};
|
||||
|
||||
return (
|
||||
<LanguageContext.Provider value={{ language, setLanguage, t }}>
|
||||
{children}
|
||||
</LanguageContext.Provider>
|
||||
);
|
||||
};
|
||||
|
||||
// Hook personnalisé
|
||||
export const useLanguage = (): LanguageContextType => {
|
||||
const context = useContext(LanguageContext);
|
||||
if (!context) {
|
||||
throw new Error('useLanguage must be used within a LanguageProvider');
|
||||
}
|
||||
return context;
|
||||
};
|
||||
Reference in New Issue
Block a user