Ajout des traduction en anglais et en espagnol + modification barre de navigation et ajout bouton des choix des langues

master
Sasha LORENC 3 months ago
parent 2ababcb100
commit 436825210a

@ -66,7 +66,7 @@ header.scroll-down {
nav {
display: flex;
justify-content: flex-end;
justify-content: space-between;
align-items: center;
width: 95%;
max-width: 1200px;
@ -76,7 +76,6 @@ nav {
nav h1 {
font-size: 24px;
color: #e9ecef;
margin-right: auto;
transition: transform 0.3s ease;
}
@ -87,10 +86,12 @@ nav h1:hover {
nav ul {
display: flex;
list-style: none;
margin: 0 auto;
gap: 2rem;
}
nav ul li {
margin-left: 15px;
margin-left: 0;
position: relative;
}
@ -123,7 +124,7 @@ nav ul li a:hover::after {
}
#settings-icon {
margin-left: 15px;
margin-left: 0;
transition: transform 0.3s ease;
}
@ -388,4 +389,49 @@ h3 {
.project-card, .skill-item {
border-color: #2d2d2d;
transition: all 0.3s ease;
}
.nav-controls {
display: flex;
align-items: center;
gap: 0.5rem;
}
.language-selector-container {
position: relative;
}
#language-selector {
background-color: #2d2d2d;
color: #e9ecef;
border: none;
padding: 8px 25px 8px 12px;
border-radius: 5px;
font-size: 14px;
cursor: pointer;
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
appearance: none;
-webkit-appearance: none;
-moz-appearance: none;
}
#language-selector:hover {
background-color: #3d3d3d;
transform: scale(1.05);
}
.language-selector-container::after {
content: '▼';
font-size: 10px;
color: #e9ecef;
position: absolute;
right: 8px;
top: 50%;
transform: translateY(-50%);
pointer-events: none;
transition: transform 0.3s ease;
}
.language-selector-container:hover::after {
transform: translateY(-50%) rotate(180deg);
}

@ -20,16 +20,25 @@
<li><a href="skills.html" data-translate="nav-skills">Compétences</a></li>
<li><a href="contacts.html" data-translate="nav-contact">Contact</a></li>
</ul>
<button id="settings-icon" aria-label="Paramètres" aria-expanded="false" aria-controls="color-picker">⚙️</button>
<div class="nav-controls">
<div class="language-selector-container">
<select id="language-selector" aria-label="Changer de langue">
<option value="fr">FR</option>
<option value="en">EN</option>
<option value="esp">ESP</option>
</select>
</div>
<button id="settings-icon" aria-label="Paramètres" aria-expanded="false" aria-controls="color-picker">⚙️</button>
</div>
</nav>
<div id="color-picker" class="color-picker" style="display: none;" role="dialog" aria-labelledby="color-picker-title">
<span id="color-picker-title">Couleur d'accentuation :</span>
<label><input type="radio" name="accent-color" value="#1abc9c" checked> Default</label>
<label><input type="radio" name="accent-color" value="#e74c3c"> Rouge</label>
<label><input type="radio" name="accent-color" value="#f39c12"> Orange</label>
<label><input type="radio" name="accent-color" value="#2ecc71"> Vert</label>
<label><input type="radio" name="accent-color" value="#e84393"> Rose</label>
<span id="color-picker-title" data-translate="accent-color">Couleur d'accentuation :</span>
<label><input type="radio" name="accent-color" value="#1abc9c" checked> <span data-translate="default">Default</span></label>
<label><input type="radio" name="accent-color" value="#e74c3c"> <span data-translate="red">Rouge</span></label>
<label><input type="radio" name="accent-color" value="#f39c12"> <span data-translate="orange">Orange</span></label>
<label><input type="radio" name="accent-color" value="#2ecc71"> <span data-translate="green">Vert</span></label>
<label><input type="radio" name="accent-color" value="#e84393"> <span data-translate="pink">Rose</span></label>
</div>
</header>
@ -39,9 +48,9 @@
<div class="profile-image">
<img src="../images/sasha.png" alt="Photo" width="200" height="200">
</div>
<h2>À propos de moi</h2>
<h2 data-translate="about-title">À propos de moi</h2>
</div>
<p>
<p data-translate="about-description">
Je m'appelle <strong class="strong_word">Sasha Lorenc</strong>, développeur passionné par l'informatique et le design.
Je cherche constamment à apprendre et à m'améliorer.
En tant qu'étudiant en Première année de
@ -63,8 +72,8 @@
du développement web ou autre.
</p>
<div class="about-details">
<h3>Mon parcours</h3>
<p>Je suis actuellement étudiant en <strong class="strong_word">BUT Informatique</strong> à l'IUT de <strong class="strong_word">Clermont-Ferrand</strong>.
<h3 data-translate="education-title">Mon parcours</h3>
<p data-translate="education-description">Je suis actuellement étudiant en <strong class="strong_word">BUT Informatique</strong> à l'IUT de <strong class="strong_word">Clermont-Ferrand</strong>.
Avant cela, j'ai obtenu mon baccalauréat avec les spécialités NSI (Numérique et Sciences Informatiques) et Mathématiques au lycée Albert Londres à Cusset.
Durant mon parcours lycéen, j'ai eu l'opportunité exceptionnelle de participer à un projet innovant en partenariat avec Samsung dans le cadre du programme "Solve for Tomorrow".
Notre équipe a fait partie des 5 groupes sélectionnés parmi plus d'un millier de groupes en France pour présenter notre projet devant un jury à Paris, une expérience enrichissante qui a renforcé mes compétences en gestion de projet ainsi qu'en expression orale.
@ -72,29 +81,27 @@
</div>
<div class="motivation">
<h3>Ce qui me motive</h3>
<p>
<h3 data-translate="motivation-title">Ce qui me motive</h3>
<p data-translate="motivation-description">
J'aime créer des interfaces intuitives et esthétiques, et je cherche à rendre chaque projet innovant et unique
pour permettre aux sites que je crée d'être facilement identifiables par leurs utilisateurs.
</p>
</div>
<a href="contacts.html" class="btn" aria-label="Me contacter">Me contacter</a>
<a href="contacts.html" class="btn" aria-label="Me contacter" data-translate="contact-btn">Me contacter</a>
</section>
</main>
<!-- Pied de page -->
<footer>
<p>&copy; 2024 Sasha Lorenc. Tous droits réservés.</p>
<p><span>&copy; 2024 Sasha Lorenc.</span> <span data-translate="rights-reserved">Tous droits réservés.</span></p>
<div class="social-links">
<a href="https://www.linkedin.com/in/sasha-lorenc-9a073b278/" target="_blank" rel="noopener" aria-label="LinkedIn">LinkedIn</a>
<a href="https://codefirst.iut.uca.fr/git/sasha.lorenc" target="_blank" rel="noopener" aria-label="GitHub">GitHub</a>
</div>
</footer>
<button id="scroll-to-top" title="Remonter en haut" aria-label="Retourner en haut de la page"></button>
<button id="scroll-to-top" title="Remonter en haut" aria-label="Retourner en haut de la page" data-translate="scroll-top"></button>
<script>
// Gestion du défilement avec animation fluide
const scrollToTop = document.getElementById("scroll-to-top");
const scrollFunction = () => {
@ -118,12 +125,10 @@
scrollToTop();
});
// Gestion des couleurs d'accentuation
const changeAccentColor = (color) => {
document.documentElement.style.setProperty('--accent-color', color);
localStorage.setItem('accentColor', color);
// Feedback visuel
const notification = document.createElement('div');
notification.className = 'color-change-notification';
document.body.appendChild(notification);
@ -133,7 +138,6 @@
}, 2000);
};
// Application de la couleur sauvegardée
const applyStoredColor = () => {
const storedColor = localStorage.getItem('accentColor');
if (storedColor) {
@ -143,11 +147,83 @@
}
};
// Déplacer les traductions en dehors du DOMContentLoaded
const translations = {
fr: {
"nav-home": "Accueil",
"nav-about": "À propos",
"nav-projects": "Projets",
"nav-skills": "Compétences",
"nav-contact": "Contact",
"about-title": "À propos de moi",
"about-description": "Je m'appelle Sasha Lorenc, développeur passionné par l'informatique et le design. Je cherche constamment à apprendre et à m'améliorer. En tant qu'étudiant en Première année de BUT Informatique passionné par le développement web, je maîtrise les langages HTML, CSS, me permettant la création d'applications web. J'apprécie également le développement d'applications bureau avec des langages tels que le C,C++. Mon adaptabilité me permet de relever les défis techniques en combinant mes compétences techniques, incluant des connaissances en frameworks, je suis capable de transformer des concepts en applications web de manière professionnelle. Pour la rentrée 2025, je suis à la recherche d'une alternance dans le domaine du développement web ou autre.",
"education-title": "Mon parcours",
"education-description": "Je suis actuellement étudiant en BUT Informatique à l'IUT de Clermont-Ferrand. Avant cela, j'ai obtenu mon baccalauréat avec les spécialités NSI (Numérique et Sciences Informatiques) et Mathématiques au lycée Albert Londres à Cusset. Durant mon parcours lycéen, j'ai eu l'opportunité exceptionnelle de participer à un projet innovant en partenariat avec Samsung dans le cadre du programme \"Solve for Tomorrow\". Notre équipe a fait partie des 5 groupes sélectionnés parmi plus d'un millier de groupes en France pour présenter notre projet devant un jury à Paris, une expérience enrichissante qui a renforcé mes compétences en gestion de projet ainsi qu'en expression orale.",
"motivation-title": "Ce qui me motive",
"motivation-description": "J'aime créer des interfaces intuitives et esthétiques, et je cherche à rendre chaque projet innovant et unique pour permettre aux sites que je crée d'être facilement identifiables par leurs utilisateurs.",
"contact-btn": "Me contacter",
"rights-reserved": "Tous droits réservés.",
"scroll-top": "↑",
"accent-color": "Couleur d'accentuation :",
"default": "Default",
"red": "Rouge",
"orange": "Orange",
"green": "Vert",
"pink": "Rose"
},
en: {
"nav-home": "Home",
"nav-about": "About",
"nav-projects": "Projects",
"nav-skills": "Skills",
"nav-contact": "Contact",
"about-title": "About Me",
"about-description": "My name is Sasha Lorenc, a developer passionate about computer science and design. I constantly seek to learn and improve. As a first-year student in Computer Science passionate about web development, I master HTML and CSS languages, allowing me to create web applications. I also enjoy developing desktop applications using languages such as C,C++. My adaptability allows me to meet technical challenges by combining my technical skills, including knowledge of frameworks, I am able to transform concepts into web applications in a professional manner. For the 2025 academic year, I am looking for an apprenticeship in web development or related fields.",
"education-title": "My Journey",
"education-description": "I am currently a student in Computer Science at the IUT of Clermont-Ferrand. Before that, I obtained my baccalaureate with specializations in NSI (Digital and Computer Sciences) and Mathematics at Albert Londres High School in Cusset. During my high school years, I had the exceptional opportunity to participate in an innovative project in partnership with Samsung as part of the \"Solve for Tomorrow\" program. Our team was among the 5 groups selected from over a thousand groups in France to present our project to a jury in Paris, an enriching experience that strengthened my project management and public speaking skills.",
"motivation-title": "What Drives Me",
"motivation-description": "I love creating intuitive and aesthetic interfaces, and I seek to make each project innovative and unique to allow the sites I create to be easily identifiable by their users.",
"contact-btn": "Contact Me",
"rights-reserved": "All rights reserved.",
"scroll-top": "↑",
"accent-color": "Accent color:",
"default": "Default",
"red": "Red",
"orange": "Orange",
"green": "Green",
"pink": "Pink"
},
esp: {
"nav-home": "Inicio",
"nav-about": "Acerca de mí",
"nav-projects": "Proyectos",
"nav-skills": "Habilidades",
"nav-contact": "Contacto",
"about-title": "Acerca de mí",
"about-description": "Mi nombre es Sasha Lorenc, desarrollador apasionado por la informática y el diseño. Siempre busco aprender y mejorar. Como estudiante de primer año en Informática, estoy apasionado por el desarrollo web y domino los lenguajes HTML y CSS, lo que me permite crear aplicaciones web. También disfruto desarrollando aplicaciones de escritorio utilizando lenguajes como C,C++. Mi adaptabilidad me permite enfrentar desafíos técnicos combinando mis habilidades técnicas, incluyendo conocimientos en frameworks, lo que me permite transformar conceptos en aplicaciones web de manera profesional. Para el año académico 2025, estoy buscando una pasantía en desarrollo web o campos relacionados.",
"education-title": "Mi viaje",
"education-description": "Actualmente soy estudiante de Informática en el IUT de Clermont-Ferrand. Antes de eso, obtuve mi baccalauréat con las especialidades NSI (Ciencias y Tecnologías de la Información) y Matemáticas en el instituto Albert Londres de Cusset. Durante mi tiempo en el instituto, tuve la oportunidad excepcional de participar en un proyecto innovador en colaboración con Samsung como parte del programa \"Solve for Tomorrow\". Nuestro equipo fue uno de los 5 seleccionados entre más de mil equipos en Francia para presentar nuestro proyecto ante un jurado en París, una experiencia enriquecedora que fortaleció mis habilidades en gestión de proyectos y oratoria.",
"motivation-title": "Qué me motiva",
"motivation-description": "Me encanta crear interfaces intuitivas y estéticas, y busco hacer cada proyecto innovador y único para permitir que los sitios que creo sean fácilmente identificables por sus usuarios.",
"contact-btn": "Contactame",
"rights-reserved": "Todos los derechos reservados.",
"scroll-top": "↑",
"accent-color": "Color de acento:",
"default": "Predeterminado",
"red": "Rojo",
"orange": "Naranja",
"green": "Verde",
"pink": "Rosa"
}
};
document.addEventListener('DOMContentLoaded', () => {
applyStoredColor();
const settingsIcon = document.getElementById('settings-icon');
const colorPicker = document.getElementById('color-picker');
const languageSelector = document.getElementById('language-selector');
document.querySelectorAll('input[name="accent-color"]').forEach(radio => {
radio.addEventListener('change', () => changeAccentColor(radio.value));
@ -159,8 +235,7 @@
colorPicker.style.display = isExpanded ? 'none' : 'block';
settingsIcon.setAttribute('aria-expanded', !isExpanded);
});
// Fermer le color picker en cliquant en dehors
document.addEventListener('click', (e) => {
if (!colorPicker.contains(e.target) && !settingsIcon.contains(e.target)) {
colorPicker.style.display = 'none';
@ -168,7 +243,32 @@
}
});
}
// Appliquer la langue sauvegardée
const savedLanguage = localStorage.getItem('language') || 'fr';
languageSelector.value = savedLanguage;
updateLanguage(savedLanguage);
languageSelector.addEventListener('change', (e) => {
const language = e.target.value;
localStorage.setItem('language', language);
updateLanguage(language);
});
});
function updateLanguage(language) {
document.documentElement.lang = language;
document.querySelectorAll('[data-translate]').forEach(element => {
const key = element.getAttribute('data-translate');
if (translations[language] && translations[language][key]) {
if (element.tagName === 'INPUT' || element.tagName === 'TEXTAREA') {
element.placeholder = translations[language][key];
} else {
element.textContent = translations[language][key];
}
}
});
}
</script>
</body>
</html>

@ -20,15 +20,24 @@
<li><a href="skills.html" data-translate="nav-skills">Compétences</a></li>
<li><a href="contacts.html" data-translate="nav-contact">Contact</a></li>
</ul>
<button id="settings-icon" aria-label="Paramètres" aria-expanded="false" aria-controls="color-picker">⚙️</button>
<div class="nav-controls">
<div class="language-selector-container">
<select id="language-selector" aria-label="Changer de langue">
<option value="fr">FR</option>
<option value="en">EN</option>
<option value="esp">ESP</option>
</select>
</div>
<button id="settings-icon" aria-label="Paramètres">⚙️</button>
</div>
</nav>
<div id="color-picker" class="color-picker" style="display: none;" role="dialog" aria-labelledby="color-picker-title">
<span id="color-picker-title">Couleur d'accentuation :</span>
<label><input type="radio" name="accent-color" value="#1abc9c" checked> Default</label>
<label><input type="radio" name="accent-color" value="#e74c3c"> Rouge</label>
<label><input type="radio" name="accent-color" value="#f39c12"> Orange</label>
<label><input type="radio" name="accent-color" value="#2ecc71"> Vert</label>
<label><input type="radio" name="accent-color" value="#e84393"> Rose</label>
<span id="color-picker-title" data-translate="accent-color">Couleur d'accentuation :</span>
<label><input type="radio" name="accent-color" value="#1abc9c" checked> <span data-translate="default">Default</span></label>
<label><input type="radio" name="accent-color" value="#e74c3c"> <span data-translate="red">Rouge</span></label>
<label><input type="radio" name="accent-color" value="#f39c12"> <span data-translate="orange">Orange</span></label>
<label><input type="radio" name="accent-color" value="#2ecc71"> <span data-translate="green">Vert</span></label>
<label><input type="radio" name="accent-color" value="#e84393"> <span data-translate="pink">Rose</span></label>
</div>
</header>
<main>
@ -36,10 +45,10 @@
<section class="hero">
<div class="hero-content">
<h2 class="animate-text">Sasha Lorenc</h2>
<p class="animate-text-delay">Développeur Web & Étudiant en BUT Informatique</p>
<p class="animate-text-delay" data-translate="hero-subtitle">Développeur Web & Étudiant en BUT Informatique</p>
<div class="hero-buttons">
<a href="projet.html" class="btn primary">Voir mes projets</a>
<a href="contacts.html" class="btn secondary">Me contacter</a>
<a href="projet.html" class="btn primary" data-translate="view-projects">Voir mes projets</a>
<a href="contacts.html" class="btn secondary" data-translate="contact-me">Me contacter</a>
</div>
</div>
<div class="hero-image">
@ -48,51 +57,51 @@
</section>
<section class="services">
<h2>Ce que je peux faire pour vous</h2>
<h2 data-translate="services-title">Ce que je peux faire pour vous</h2>
<div class="services-grid">
<div class="service-card">
<i class="service-icon web-dev"></i>
<h3>Développement Web</h3>
<p>Création de sites web responsifs et modernes utilisant les dernières technologies.</p>
<h3 data-translate="web-dev-title">Développement Web</h3>
<p data-translate="web-dev-desc">Création de sites web responsifs et modernes utilisant les dernières technologies.</p>
</div>
<div class="service-card">
<i class="service-icon app-dev"></i>
<h3>Applications</h3>
<p>Développement d'applications performantes en C, C++ et autres langages.</p>
<h3 data-translate="app-dev-title">Applications</h3>
<p data-translate="app-dev-desc">Développement d'applications performantes en C, C++ et autres langages.</p>
</div>
<div class="service-card">
<i class="service-icon ui-design"></i>
<h3>UI/UX Design</h3>
<p>Conception d'interfaces utilisateur intuitives et esthétiques.</p>
<h3 data-translate="ui-design-title">UI/UX Design</h3>
<p data-translate="ui-design-desc">Conception d'interfaces utilisateur intuitives et esthétiques.</p>
</div>
</div>
</section>
<section class="skills-highlight">
<h2>Expertise Technique</h2>
<h2 data-translate="technical-expertise">Expertise Technique</h2>
<div class="stats-grid">
<div class="stat-card">
<span class="stat-number">1</span>
<p>Année d'expérience en programmation</p>
<p data-translate="years-experience">Année d'expérience en programmation</p>
</div>
<div class="stat-card">
<span class="stat-number">3+</span>
<p>Projets réalisés</p>
<p data-translate="completed-projects">Projets réalisés</p>
</div>
<div class="stat-card">
<span class="stat-number">5+</span>
<p>Technologies maîtrisées</p>
<p data-translate="technologies-mastered">Technologies maîtrisées</p>
</div>
</div>
<a href="skills.html" class="btn">Voir toutes mes compétences</a>
<a href="skills.html" class="btn" data-translate="view-all-skills">Voir toutes mes compétences</a>
</section>
<section class="quick-contact">
<h2>Travaillons ensemble</h2>
<p>Vous avez un projet en tête ? Je serais ravi d'en discuter !</p>
<h2 data-translate="lets-work">Travaillons ensemble</h2>
<p data-translate="project-idea">Vous avez un projet en tête ? Je serais ravi d'en discuter !</p>
<div class="contact-buttons">
<a href="contacts.html" class="btn primary">Me contacter</a>
<a href="../documents/Cv.pdf" class="btn secondary" download>Télécharger mon CV</a>
<a href="contacts.html" class="btn primary" data-translate="contact-me">Me contacter</a>
<a href="../documents/Cv_fr.pdf" class="btn secondary" id="cv-download-btn" download data-translate="download-cv">Télécharger mon CV</a>
</div>
</section>
</main>
@ -105,7 +114,7 @@
</div>
</footer>
<button id="scroll-to-top" title="Remonter en haut" data-translate="scroll-to-top" aria-label="Retourner en haut de la page"></button>
<button id="scroll-to-top" title="Remonter en haut" aria-label="Retourner en haut de la page"></button>
<script>
const scrollToTop = document.getElementById("scroll-to-top");
@ -181,6 +190,139 @@
});
}
});
// Système de traduction
const translations = {
fr: {
"nav-home": "Accueil",
"nav-about": "À propos",
"nav-projects": "Projets",
"nav-skills": "Compétences",
"nav-contact": "Contact",
"accent-color": "Couleur d'accentuation :",
"default": "Défaut",
"red": "Rouge",
"orange": "Orange",
"green": "Vert",
"pink": "Rose",
"hero-subtitle": "Développeur Web & Étudiant en BUT Informatique",
"view-projects": "Voir mes projets",
"contact-me": "Me contacter",
"services-title": "Ce que je peux faire pour vous",
"web-dev-title": "Développement Web",
"web-dev-desc": "Création de sites web responsifs et modernes utilisant les dernières technologies.",
"app-dev-title": "Applications",
"app-dev-desc": "Développement d'applications performantes en C, C++ et autres langages.",
"ui-design-title": "UI/UX Design",
"ui-design-desc": "Conception d'interfaces utilisateur intuitives et esthétiques.",
"technical-expertise": "Expertise Technique",
"years-experience": "Année d'expérience en programmation",
"completed-projects": "Projets réalisés",
"technologies-mastered": "Technologies maîtrisées",
"view-all-skills": "Voir toutes mes compétences",
"lets-work": "Travaillons ensemble",
"project-idea": "Vous avez un projet en tête ? Je serais ravi d'en discuter !",
"download-cv": "Télécharger mon CV",
"rights-reserved": "Tous droits réservés.",
},
en: {
"nav-home": "Home",
"nav-about": "About",
"nav-projects": "Projects",
"nav-skills": "Skills",
"nav-contact": "Contact",
"accent-color": "Accent color:",
"default": "Default",
"red": "Red",
"orange": "Orange",
"green": "Green",
"pink": "Pink",
"hero-subtitle": "Web Developer & Computer Science Student",
"view-projects": "View my projects",
"contact-me": "Contact me",
"services-title": "What I can do for you",
"web-dev-title": "Web Development",
"web-dev-desc": "Creation of responsive and modern websites using the latest technologies.",
"app-dev-title": "Applications",
"app-dev-desc": "Development of high-performance applications in C, C++ and other languages.",
"ui-design-title": "UI/UX Design",
"ui-design-desc": "Design of intuitive and aesthetic user interfaces.",
"technical-expertise": "Technical Expertise",
"years-experience": "Year of programming experience",
"completed-projects": "Completed projects",
"technologies-mastered": "Technologies mastered",
"view-all-skills": "View all my skills",
"lets-work": "Let's work together",
"project-idea": "Have a project in mind? I'd love to discuss it!",
"download-cv": "Download my CV",
"rights-reserved": "All rights reserved.",
},
esp: {
"nav-home": "Inicio",
"nav-about": "Acerca de",
"nav-projects": "Proyectos",
"nav-skills": "Habilidades",
"nav-contact": "Contacto",
"accent-color": "Color de acento:",
"default": "Predeterminado",
"red": "Rojo",
"orange": "Naranja",
"green": "Verde",
"pink": "Rosa",
"hero-subtitle": "Desarrollador Web & Estudiante de Informática en BUT",
"view-projects": "Ver mis proyectos",
"contact-me": "Contactame",
"services-title": "Lo que puedo hacer para ti",
"web-dev-title": "Desarrollo Web",
"web-dev-desc": "Creación de sitios web responsivos y modernos utilizando las últimas tecnologías.",
"app-dev-title": "Aplicaciones",
"app-dev-desc": "Desarrollo de aplicaciones de alto rendimiento en C, C++ y otros lenguajes.",
"ui-design-title": "Diseño UI/UX",
"ui-design-desc": "Diseño de interfaces de usuario intuitivas y estéticas.",
"technical-expertise": "Habilidades técnicas",
"years-experience": "Año de experiencia en programación",
"completed-projects": "Proyectos completados",
"technologies-mastered": "Tecnologías dominadas",
"view-all-skills": "Ver todas mis habilidades",
"lets-work": "Trabajemos juntos",
"project-idea": "¿Tienes un proyecto en mente? ¡Estoy encantado de discutirlo!",
"download-cv": "Descargar mi CV",
"rights-reserved": "Todos los derechos reservados."
}
};
document.addEventListener('DOMContentLoaded', () => {
const languageSelector = document.getElementById('language-selector');
// Appliquer la langue sauvegardée
const savedLanguage = localStorage.getItem('language') || 'fr';
languageSelector.value = savedLanguage;
updateLanguage(savedLanguage);
// Écouteur d'événement pour le changement de langue
languageSelector.addEventListener('change', (e) => {
const language = e.target.value;
localStorage.setItem('language', language);
updateLanguage(language);
});
});
function updateLanguage(language) {
document.documentElement.lang = language;
const cvButton = document.getElementById('cv-download-btn');
cvButton.href = `../documents/Cv_${language}.pdf`;
document.querySelectorAll('[data-translate]').forEach(element => {
const key = element.getAttribute('data-translate');
if (translations[language][key]) {
if (element.tagName === 'INPUT' || element.tagName === 'TEXTAREA') {
element.placeholder = translations[language][key];
} else {
element.textContent = translations[language][key];
}
}
});
}
</script>
</body>
</html>

@ -1,9 +1,9 @@
<!DOCTYPE html>
<html lang="fr">
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Contact - Portfolio de Sasha Lorenc</title>
<title>Contact - Sasha Lorenc's Portfolio</title>
<link rel="stylesheet" href="../css/contacts_css.css">
<link rel="stylesheet" href="../css/global.css">
<link rel="preconnect" href="https://fonts.googleapis.com">
@ -13,78 +13,84 @@
<nav>
<h1>Sasha Lorenc</h1>
<ul>
<li><a href="accueil.html">Accueil</a></li>
<li><a href="about.html">À propos</a></li>
<li><a href="projet.html">Projets</a></li>
<li><a href="skills.html">Compétences</a></li>
<li><a href="contacts.html">Contact</a></li>
<li><a href="accueil.html" data-translate="nav-home">Home</a></li>
<li><a href="about.html" data-translate="nav-about">About</a></li>
<li><a href="projet.html" data-translate="nav-projects">Projects</a></li>
<li><a href="skills.html" data-translate="nav-skills">Skills</a></li>
<li><a href="contacts.html" data-translate="nav-contact">Contact</a></li>
</ul>
<button id="settings-icon" aria-label="Paramètres" aria-expanded="false" aria-controls="color-picker">⚙️</button>
<div class="nav-controls">
<div class="language-selector-container">
<select id="language-selector" aria-label="Change language">
<option value="fr">FR</option>
<option value="en">EN</option>
<option value="esp">ESP</option>
</select>
</div>
<button id="settings-icon" aria-label="Settings">⚙️</button>
</div>
</nav>
<div id="color-picker" class="color-picker" style="display: none;" role="dialog" aria-labelledby="color-picker-title">
<span id="color-picker-title">Couleur d'accentuation :</span>
<label><input type="radio" name="accent-color" value="#1abc9c" checked> Default</label>
<label><input type="radio" name="accent-color" value="#e74c3c"> Rouge</label>
<label><input type="radio" name="accent-color" value="#f39c12"> Orange</label>
<label><input type="radio" name="accent-color" value="#2ecc71"> Vert</label>
<label><input type="radio" name="accent-color" value="#e84393"> Rose</label>
<span id="color-picker-title" data-translate="accent-color">Accent color:</span>
<label><input type="radio" name="accent-color" value="#1abc9c" checked> <span data-translate="default">défaut</span></label>
<label><input type="radio" name="accent-color" value="#e74c3c"> <span data-translate="red">rouge</span></label>
<label><input type="radio" name="accent-color" value="#f39c12"> <span data-translate="orange">orange</span></label>
<label><input type="radio" name="accent-color" value="#2ecc71"> <span data-translate="green">vert</span></label>
<label><input type="radio" name="accent-color" value="#e84393"> <span data-translate="pink">rose</span></label>
</div>
</header>
<!-- Section Contact -->
<section class="contact">
<h2>Contactez-moi</h2>
<p>N'hésitez pas à me contacter pour toute question ou collaboration. Je serai ravi d'échanger avec vous !</p>
<h2 data-translate="contact-title">Contact Me</h2>
<p data-translate="contact-desc">Don't hesitate to contact me for any questions or collaboration. I would be happy to discuss with you!</p>
<form id="contactForm">
<div class="form-group">
<label class="form-label" for="name">Nom <span class="required">*</span></label>
<label class="form-label" for="name" data-translate="name">Name <span class="required">*</span></label>
<input type="text" id="name" name="name" required minlength="2" maxlength="50"
placeholder="Votre nom complet"
pattern="[A-Za-zÀ-ÿ\s]+" title="Veuillez entrer un nom valide">
data-translate="name-placeholder" placeholder="Your full name"
pattern="[A-Za-zÀ-ÿ\s]+" title="Please enter a valid name">
</div>
<div class="form-group">
<label class="form-label" for="email">Email <span class="required">*</span></label>
<input type="email" id="email" name="email" required
placeholder="exemple@email.com"
data-translate="email-placeholder" placeholder="example@email.com"
pattern="[a-z0-9._%+-]+@[a-z0-9.-]+\.[a-z]{2,}$">
</div>
<div class="form-group">
<label class="form-label" for="subject">Sujet <span class="required">*</span></label>
<label class="form-label" for="subject" data-translate="subject">Subject <span class="required">*</span></label>
<select id="subject" name="subject" required>
<option value="">Sélectionnez un sujet</option>
<option value="collaboration">Proposition de collaboration</option>
<option value="question">Question générale</option>
<option value="projet">Discussion de projet</option>
<option value="autre">Autre</option>
<option value="" data-translate="select-subject">Select a subject</option>
<option value="collaboration" data-translate="collaboration">Collaboration proposal</option>
<option value="question" data-translate="general-question">General question</option>
<option value="projet" data-translate="project-discussion">Project discussion</option>
<option value="autre" data-translate="other">Other</option>
</select>
</div>
<div class="form-group">
<label class="form-label" for="message">Message <span class="required">*</span></label>
<label class="form-label" for="message" data-translate="message">Message <span class="required">*</span></label>
<textarea id="message" name="message" rows="5" required minlength="10" maxlength="1000"
placeholder="Votre message ici (10-1000 caractères)"></textarea>
data-translate="message-placeholder" placeholder="Your message here (10-1000 characters)"></textarea>
<div class="character-count"><span id="charCount">0</span>/1000</div>
</div>
<div class="form-group">
<label class="checkbox-container">
<input type="checkbox" required name="privacy">
<span class="checkmark"></span>
J'accepte que mes données soient utilisées pour être recontacté(e)
<span data-translate="privacy-policy">I agree that my data will be used to be contacted</span>
</label>
</div>
<button type="submit" class="btn">
<span class="btn-text">Envoyer</span>
<span class="btn-text" data-translate="send">Send</span>
<span class="btn-icon">📨</span>
</button>
</form>
<!-- Infos de contact -->
<div class="contact-info">
<p><strong>Email :</strong> sasha03.lorenc@gmail.com</p>
<p><strong>Suivez-moi :</strong>
<p><strong>Email:</strong> sasha.LORENC@etu.uca.fr</p>
<p><strong data-translate="follow-me">Follow me:</strong>
<a href="https://www.linkedin.com/in/sasha-lorenc-9a073b278/" target="_blank" rel="noopener noreferrer">LinkedIn</a> |
<a href="https://codefirst.iut.uca.fr/git/sasha.lorenc" target="_blank" rel="noopener noreferrer">GitHub</a> |
<a href="#" target="_blank" rel="noopener noreferrer">Twitter</a>
@ -92,11 +98,11 @@
</div>
</section>
<!-- Pied de page -->
<!-- Footer -->
<footer>
<p>&copy; 2024 Sasha Lorenc. Tous droits réservés.</p>
<p><span data-translate="copyright">&copy; 2024 Sasha Lorenc. All rights reserved.</span></p>
</footer>
<button id="scroll-to-top" title="Remonter en haut"></button>
<button id="scroll-to-top" title="Scroll to top"></button>
<script src="https://cdn.jsdelivr.net/npm/@emailjs/browser@3/dist/email.min.js"></script>
<script>
@ -115,7 +121,7 @@
document.documentElement.scrollTop = 0;
};
// Fonction pour changer la couleur d'accentuation
// Function to change accent color
document.querySelectorAll('input[name="accent-color"]').forEach(function(radio) {
radio.addEventListener('change', function() {
document.documentElement.style.setProperty('--accent-color', this.value);
@ -123,7 +129,7 @@
});
document.addEventListener('DOMContentLoaded', function() {
// Gestion du compteur de caractères
// Character counter management
const messageTextarea = document.getElementById('message');
const charCount = document.getElementById('charCount');
@ -131,7 +137,7 @@
charCount.textContent = this.value.length;
});
// Validation et envoi du formulaire par Email.js
// Form validation and submission via Email.js
const contactForm = document.getElementById('contactForm');
contactForm.addEventListener('submit', function(e) {
@ -152,19 +158,19 @@
emailjs.send('service_s1wv65t', 'template_391zlnl', templateParams)
.then(function(response) {
alert('Message envoyé avec succès !');
alert('Message sent successfully!');
contactForm.reset();
charCount.textContent = '0';
submitBtn.classList.remove('sending');
}, function(error) {
alert('Une erreur est survenue. Veuillez réessayer.');
alert('An error occurred. Please try again.');
submitBtn.classList.remove('sending');
console.error('Erreur:', error);
console.error('Error:', error);
});
}
});
// Gestion des couleurs d'accentuation
// Accent color management
function changeAccentColor(color) {
document.documentElement.style.setProperty('--accent-color', color);
localStorage.setItem('accentColor', color);
@ -205,6 +211,110 @@
}
});
}
// Translation system
const translations = {
fr: {
"contact-title": "Contactez-moi",
"contact-desc": "N'hésitez pas à me contacter pour toute question ou collaboration. Je serai ravi d'échanger avec vous !",
"name": "Nom",
"name-placeholder": "Votre nom complet",
"email-placeholder": "exemple@email.com",
"subject": "Sujet",
"select-subject": "Sélectionnez un sujet",
"collaboration": "Proposition de collaboration",
"general-question": "Question générale",
"project-discussion": "Discussion de projet",
"other": "Autre",
"message": "Message",
"message-placeholder": "Votre message ici (10-1000 caractères)",
"privacy-policy": "J'accepte que mes données soient utilisées pour être recontacté(e)",
"send": "Envoyer",
"follow-me": "Suivez-moi :",
"copyright": "© 2024 Sasha Lorenc. Tous droits réservés.",
"default": "Défaut",
"red": "Rouge",
"orange": "Orange",
"green": "Vert",
"pink": "Rose"
},
en: {
"contact-title": "Contact Me",
"contact-desc": "Don't hesitate to contact me for any questions or collaboration. I would be happy to discuss with you!",
"name": "Name",
"name-placeholder": "Your full name",
"email-placeholder": "example@email.com",
"subject": "Subject",
"select-subject": "Select a subject",
"collaboration": "Collaboration proposal",
"general-question": "General question",
"project-discussion": "Project discussion",
"other": "Other",
"message": "Message",
"message-placeholder": "Your message here (10-1000 characters)",
"privacy-policy": "I agree that my data will be used to be contacted",
"send": "Send",
"follow-me": "Follow me:",
"copyright": "© 2024 Sasha Lorenc. All rights reserved.",
"default": "Default",
"red": "Red",
"orange": "Orange",
"green": "Green",
"pink": "Pink"
},
esp: {
"contact-title": "Contactame",
"contact-desc": "No dudes en contactarme para cualquier pregunta o colaboración. ¡Estoy feliz de discutir contigo!",
"name": "Nombre",
"name-placeholder": "Tu nombre completo",
"email-placeholder": "ejemplo@email.com",
"subject": "Asunto",
"select-subject": "Selecciona un asunto",
"collaboration": "Propuesta de colaboración",
"general-question": "Pregunta general",
"project-discussion": "Discusión de proyecto",
"other": "Otro",
"message": "Mensaje",
"message-placeholder": "Tu mensaje aquí (10-1000 caracteres)",
"privacy-policy": "Acepto que mis datos se utilicen para ser contactado(a)",
"send": "Enviar",
"follow-me": "Sígueme:",
"copyright": "© 2024 Sasha Lorenc. Todos los derechos reservados.",
"default": "Predeterminado",
"red": "Rojo",
"orange": "Naranja",
"green": "Verde",
"pink": "Rosa"
}
};
const languageSelector = document.getElementById('language-selector');
// Apply saved language
const savedLanguage = localStorage.getItem('language') || 'fr';
languageSelector.value = savedLanguage;
updateLanguage(savedLanguage);
// Language change event listener
languageSelector.addEventListener('change', (e) => {
const language = e.target.value;
localStorage.setItem('language', language);
updateLanguage(language);
});
function updateLanguage(language) {
document.documentElement.lang = language;
document.querySelectorAll('[data-translate]').forEach(element => {
const key = element.getAttribute('data-translate');
if (translations[language][key]) {
if (element.tagName === 'INPUT' || element.tagName === 'TEXTAREA') {
element.placeholder = translations[language][key];
} else {
element.textContent = translations[language][key];
}
}
});
}
});
</script>
</body>

@ -3,78 +3,84 @@
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Projets - Portfolio de Sasha Lorenc</title>
<title data-translate="page-title">Projets - Portfolio de Sasha Lorenc</title>
<link rel="stylesheet" href="../css/projet_css.css">
<link rel="stylesheet" href="../css/global.css">
<link rel="preconnect" href="https://fonts.googleapis.com">
</head>
<body>
<!-- Navigation -->
<header>
<nav>
<h1>Sasha Lorenc</h1>
<ul>
<li><a href="accueil.html">Accueil</a></li>
<li><a href="about.html">À propos</a></li>
<li><a href="projet.html">Projets</a></li>
<li><a href="skills.html">Compétences</a></li>
<li><a href="contacts.html">Contact</a></li>
<li><a href="accueil.html" data-translate="nav-home">Accueil</a></li>
<li><a href="about.html" data-translate="nav-about">À propos</a></li>
<li><a href="projet.html" data-translate="nav-projects">Projets</a></li>
<li><a href="skills.html" data-translate="nav-skills">Compétences</a></li>
<li><a href="contacts.html" data-translate="nav-contact">Contact</a></li>
</ul>
<button id="settings-icon" aria-label="Paramètres">⚙️</button>
<div class="nav-controls">
<div class="language-selector-container">
<select id="language-selector" aria-label="Changer de langue">
<option value="fr">FR</option>
<option value="en">EN</option>
<option value="esp">ESP</option>
</select>
</div>
<button id="settings-icon" aria-label="Paramètres">⚙️</button>
</div>
</nav>
<div id="color-picker" class="color-picker" style="display: none;" role="dialog" aria-labelledby="color-picker-title">
<span id="color-picker-title">Couleur d'accentuation :</span>
<label><input type="radio" name="accent-color" value="#1abc9c" checked> Default</label>
<label><input type="radio" name="accent-color" value="#e74c3c"> Rouge</label>
<label><input type="radio" name="accent-color" value="#f39c12"> Orange</label>
<label><input type="radio" name="accent-color" value="#2ecc71"> Vert</label>
<label><input type="radio" name="accent-color" value="#e84393"> Rose</label>
<span id="color-picker-title" data-translate="accent-color">Couleur d'accentuation :</span>
<label><input type="radio" name="accent-color" value="#1abc9c" checked> <span data-translate="default">Default</span></label>
<label><input type="radio" name="accent-color" value="#e74c3c"> <span data-translate="red">Rouge</span></label>
<label><input type="radio" name="accent-color" value="#f39c12"> <span data-translate="orange">Orange</span></label>
<label><input type="radio" name="accent-color" value="#2ecc71"> <span data-translate="green">Vert</span></label>
<label><input type="radio" name="accent-color" value="#e84393"> <span data-translate="pink">Rose</span></label>
</div>
</header>
<!-- Section Projets -->
<section class="projects">
<h2>Mes Projets</h2>
<h2 data-translate="projects-title">Mes Projets</h2>
<div class="project-list">
<!-- projet 1 -->
<div class="project-card">
<h3>Projet 1 : Jeux vidéo</h3>
<p>Un jeux vidéo médieval en tour par tour basé sur le pierre feuille cisceau. </p>
<p><strong class="strong_word">Technologies :</strong> C</p>
<a href="https://codefirst.iut.uca.fr/git/sasha.lorenc/sae1.02" class="btn">Voir le projet</a>
<h3 data-translate="project1-title">Projet 1 : Jeux vidéo</h3>
<p data-translate="project1-desc">Un jeux vidéo médieval en tour par tour basé sur le pierre feuille cisceau.</p>
<p><strong class="strong_word" data-translate="technologies">Technologies :</strong> C</p>
<a href="https://codefirst.iut.uca.fr/git/sasha.lorenc/sae1.02" class="btn" data-translate="view-project">Voir le projet</a>
</div>
<!-- projet 2 -->
<div class="project-card">
<h3>Projet 2 : Application de Gestion</h3>
<p>Une application pour gérer stages au sein du département informatique de l'IUT de Clermont-Ferrand.</p>
<p><strong class="strong_word">Technologies :</strong> C</p>
<a href="https://codefirst.iut.uca.fr/git/sasha.lorenc/sae1.01_algo" class="btn">Voir le projet</a>
<h3 data-translate="project2-title">Projet 2 : Application de Gestion</h3>
<p data-translate="project2-desc">Une application pour gérer stages au sein du département informatique de l'IUT de Clermont-Ferrand.</p>
<p><strong class="strong_word" data-translate="technologies">Technologies :</strong> C</p>
<a href="https://codefirst.iut.uca.fr/git/sasha.lorenc/sae1.01_algo" class="btn" data-translate="view-project">Voir le projet</a>
</div>
<!-- projet 3 -->
<div class="project-card">
<h3>Projet 3 : Portfolio Interactif</h3>
<p>Un portfolio interactif pour présenter mes compétences et projets de manière visuelle.</p>
<p><strong class="strong_word">Technologies :</strong> HTML, CSS, JavaScript</p>
<a href="https://codefirst.iut.uca.fr/git/sasha.lorenc/portfolio" class="btn">Voir le projet</a>
<h3 data-translate="project3-title">Projet 3 : Portfolio Interactif</h3>
<p data-translate="project3-desc">Un portfolio interactif pour présenter mes compétences et projets de manière visuelle.</p>
<p><strong class="strong_word" data-translate="technologies">Technologies :</strong> HTML, CSS, JavaScript</p>
<a href="https://codefirst.iut.uca.fr/git/sasha.lorenc/portfolio" class="btn" data-translate="view-project">Voir le projet</a>
</div>
<!-- projet 4 -->
<div class="project-card">
<h3>Projet 4 : TaskShade</h3>
<p>Une To Do List en ligne permettant d'organiser vos tâches par importance et date d'échéance, tout en suivant vos performances via des statistiques détaillées.</p>
<p><strong class="strong_word">Technologies :</strong> HTML, CSS, JavaScript</p>
<a href="https://codefirst.iut.uca.fr/git/sasha.lorenc/portfolio" class="btn">Voir le projet</a>
<h3 data-translate="project4-title">Projet 4 : TaskShade</h3>
<p data-translate="project4-desc">Une To Do List en ligne permettant d'organiser vos tâches par importance et date d'échéance, tout en suivant vos performances via des statistiques détaillées.</p>
<p><strong class="strong_word" data-translate="technologies">Technologies :</strong> HTML, CSS, JavaScript</p>
<a href="https://codefirst.iut.uca.fr/git/sasha.lorenc/portfolio" class="btn" data-translate="view-project">Voir le projet</a>
</div>
</div>
</section>
<!-- Pied de page -->
<footer>
<p>&copy; 2024 Sasha Lorenc. Tous droits réservés.</p>
<p>&copy; 2024 Sasha Lorenc. <span data-translate="rights-reserved">Tous droits réservés.</span></p>
<div class="social-links">
<a href="https://www.linkedin.com/in/sasha-lorenc-9a073b278/" target="_blank">LinkedIn</a>
<a href="https://codefirst.iut.uca.fr/git/sasha.lorenc" target="_blank">GitHub</a>
@ -143,6 +149,119 @@
});
}
});
</script>
// Système de traduction
const translations = {
fr: {
"page-title": "Projets - Portfolio de Sasha Lorenc",
"nav-home": "Accueil",
"nav-about": "À propos",
"nav-projects": "Projets",
"nav-skills": "Compétences",
"nav-contact": "Contact",
"accent-color": "Couleur d'accentuation :",
"default": "Default",
"red": "Rouge",
"orange": "Orange",
"green": "Vert",
"pink": "Rose",
"projects-title": "Mes Projets",
"project1-title": "Projet 1 : Jeux vidéo",
"project1-desc": "Un jeux vidéo médieval en tour par tour basé sur le pierre feuille cisceau.",
"project2-title": "Projet 2 : Application de Gestion",
"project2-desc": "Une application pour gérer stages au sein du département informatique de l'IUT de Clermont-Ferrand.",
"project3-title": "Projet 3 : Portfolio Interactif",
"project3-desc": "Un portfolio interactif pour présenter mes compétences et projets de manière visuelle.",
"project4-title": "Projet 4 : TaskShade",
"project4-desc": "Une To Do List en ligne permettant d'organiser vos tâches par importance et date d'échéance.",
"view-project": "Voir le projet",
"technologies": "Technologies :",
"rights-reserved": "Tous droits réservés.",
},
en: {
"page-title": "Projects - Sasha Lorenc's Portfolio",
"nav-home": "Home",
"nav-about": "About",
"nav-projects": "Projects",
"nav-skills": "Skills",
"nav-contact": "Contact",
"accent-color": "Accent color:",
"default": "Default",
"red": "Red",
"orange": "Orange",
"green": "Green",
"pink": "Pink",
"projects-title": "My Projects",
"project1-title": "Project 1: Video Game",
"project1-desc": "A medieval turn-based video game based on rock paper scissors.",
"project2-title": "Project 2: Management Application",
"project2-desc": "An application to manage internships within the IT department of the IUT of Clermont-Ferrand.",
"project3-title": "Project 3: Interactive Portfolio",
"project3-desc": "An interactive portfolio to showcase my skills and projects visually.",
"project4-title": "Project 4: TaskShade",
"project4-desc": "An online To Do List allowing you to organize your tasks by importance and due date.",
"view-project": "View project",
"technologies": "Technologies:",
"rights-reserved": "All rights reserved.",
},
esp: {
"page-title": "Proyectos - Portafolio de Sasha Lorenc",
"nav-home": "Inicio",
"nav-about": "Acerca de",
"nav-projects": "Proyectos",
"nav-skills": "Habilidades",
"nav-contact": "Contacto",
"accent-color": "Color de acento:",
"default": "Predeterminado",
"red": "Rojo",
"orange": "Naranja",
"green": "Verde",
"pink": "Rosa",
"projects-title": "Mis Proyectos",
"project1-title": "Proyecto 1: Juego de Video",
"project1-desc": "Un juego de video medieval en turnos basado en piedra, papel y tijera.",
"project2-title": "Proyecto 2: Aplicación de Gestión",
"project2-desc": "Una aplicación para gestionar pasantías en el departamento de informática del IUT de Clermont-Ferrand.",
"project3-title": "Proyecto 3: Portafolio Interactivo",
"project3-desc": "Un portafolio interactivo para mostrar mis habilidades y proyectos de manera visual.",
"project4-title": "Proyecto 4: TaskShade",
"project4-desc": "Una lista de tareas en línea para organizar tus tareas por importancia y fecha de vencimiento.",
"view-project": "Ver proyecto",
"technologies": "Tecnologías:",
"rights-reserved": "Todos los derechos reservados."
}
};
document.addEventListener('DOMContentLoaded', () => {
const languageSelector = document.getElementById('language-selector');
// Appliquer la langue sauvegardée
const savedLanguage = localStorage.getItem('language') || 'fr';
languageSelector.value = savedLanguage;
updateLanguage(savedLanguage);
// Écouteur d'événement pour le changement de langue
languageSelector.addEventListener('change', (e) => {
const language = e.target.value;
localStorage.setItem('language', language);
updateLanguage(language);
});
});
function updateLanguage(language) {
document.documentElement.lang = language;
document.querySelectorAll('[data-translate]').forEach(element => {
const key = element.getAttribute('data-translate');
if (translations[language][key]) {
if (element.tagName === 'INPUT' || element.tagName === 'TEXTAREA') {
element.placeholder = translations[language][key];
} else {
element.textContent = translations[language][key];
}
}
});
}
</script>
</body>
</html>

@ -18,98 +18,104 @@
<nav>
<h1>Sasha Lorenc</h1>
<ul>
<li><a href="accueil.html">Accueil</a></li>
<li><a href="about.html">À propos</a></li>
<li><a href="projet.html">Projets</a></li>
<li><a href="skills.html">Compétences</a></li>
<li><a href="contacts.html">Contact</a></li>
<li><a href="accueil.html" data-translate="nav-home">Accueil</a></li>
<li><a href="about.html" data-translate="nav-about">À propos</a></li>
<li><a href="projet.html" data-translate="nav-projects">Projets</a></li>
<li><a href="skills.html" data-translate="nav-skills">Compétences</a></li>
<li><a href="contacts.html" data-translate="nav-contact">Contact</a></li>
</ul>
<button id="settings-icon" aria-label="Paramètres">⚙️</button>
<div class="nav-controls">
<div class="language-selector-container">
<select id="language-selector" aria-label="Changer de langue">
<option value="fr">FR</option>
<option value="en">EN</option>
<option value="esp">ESP</option>
</select>
</div>
<button id="settings-icon" aria-label="Paramètres">⚙️</button>
</div>
</nav>
<div id="color-picker" class="color-picker" style="display: none;" role="dialog" aria-labelledby="color-picker-title">
<span id="color-picker-title">Couleur d'accentuation :</span>
<label><input type="radio" name="accent-color" value="#1abc9c" checked> Default</label>
<label><input type="radio" name="accent-color" value="#e74c3c"> Rouge</label>
<label><input type="radio" name="accent-color" value="#f39c12"> Orange</label>
<label><input type="radio" name="accent-color" value="#2ecc71"> Vert</label>
<label><input type="radio" name="accent-color" value="#e84393"> Rose</label>
<span id="color-picker-title" data-translate="accent-color">Couleur d'accentuation :</span>
<label><input type="radio" name="accent-color" value="#1abc9c" checked> <span data-translate="default">Default</span></label>
<label><input type="radio" name="accent-color" value="#e74c3c"> <span data-translate="red">Rouge</span></label>
<label><input type="radio" name="accent-color" value="#f39c12"> <span data-translate="orange">Orange</span></label>
<label><input type="radio" name="accent-color" value="#2ecc71"> <span data-translate="green">Vert</span></label>
<label><input type="radio" name="accent-color" value="#e84393"> <span data-translate="pink">Rose</span></label>
</div>
</header>
<!-- Section Compétences -->
<section class="skills">
<h2>Mes Compétences</h2>
<h2 data-translate="skills-title">Mes Compétences</h2>
<!-- Compétences Techniques -->
<div class="skills-section" role="region" aria-labelledby="technical-skills">
<h3 id="technical-skills">Compétences Techniques</h3>
<h3 id="technical-skills" data-translate="technical-skills">Compétences Techniques</h3>
<div class="skill">
<p id="html-skill">HTML & CSS</p>
<p id="html-skill" data-translate="html-css">HTML & CSS</p>
<div class="progress-bar" role="progressbar" aria-valuenow="90" aria-valuemin="0" aria-valuemax="100" aria-labelledby="html-skill">
<div class="progress" style="width: 90%;"></div>
</div>
</div>
<div class="skill">
<p>JavaScript</p>
<p data-translate="javascript">JavaScript</p>
<div class="progress-bar">
<div class="progress" style="width: 80%;"></div>
</div>
</div>
<div class="skill">
<p>PHP & MySQL</p>
<p data-translate="php-mysql">PHP & MySQL</p>
<div class="progress-bar">
<div class="progress" style="width: 75%;"></div>
</div>
</div>
<div class="skill">
<p>React & Node.js</p>
<p data-translate="react-nodejs">React & Node.js</p>
<div class="progress-bar">
<div class="progress" style="width: 70%;"></div>
</div>
</div>
<div class="skill-category">
<h4>Frameworks & Outils</h4>
<h4 data-translate="frameworks-tools">Frameworks & Outils</h4>
<div class="skill-tags">
<span class="skill-tag">Git</span>
<span class="skill-tag">VS Code</span>
<span class="skill-tag">React</span>
<!-- Ajouter d'autres tags -->
</div>
</div>
</div>
<!-- Compétences Générales -->
<div class="skills-section">
<h3>Compétences Générales</h3>
<h3 data-translate="general-skills">Compétences Générales</h3>
<div class="project-list">
<div class="project-card">
<h3>Gestion de projet</h3>
<p>Leadership naturel avec expérience dans la coordination d'équipes. Excellente capacité à établir des plannings réalistes et à gérer les ressources efficacement. Compétences avérées en gestion des risques et résolution de conflits.</p>
<h3 data-translate="project-management">Gestion de projet</h3>
<p data-translate="project-management-desc">Leadership naturel avec expérience dans la coordination d'équipes. Excellente capacité à établir des plannings réalistes et à gérer les ressources efficacement. Compétences avérées en gestion des risques et résolution de conflits.</p>
</div>
<div class="project-card">
<h3>Communication</h3>
<p>Communication claire et persuasive en français et en anglais. Capacité à vulgariser des concepts techniques complexes. Excellente aptitude à la rédaction de documentation technique et rapports professionnels. Fort esprit d'équipe avec capacité à fédérer autour d'objectifs communs.</p>
<h3 data-translate="communication">Communication</h3>
<p data-translate="communication-desc">Communication claire et persuasive en français et en anglais. Capacité à vulgariser des concepts techniques complexes. Excellente aptitude à la rédaction de documentation technique et rapports professionnels. Fort esprit d'équipe avec capacité à fédérer autour d'objectifs communs.</p>
</div>
<div class="project-card">
<h3>Résolution de problèmes</h3>
<p>Capacité à décomposer des problèmes complexes en éléments gérables. Maîtrise des techniques de debugging et d'optimisation. Expérience en analyse de données pour la prise de décision. Capacité à anticiper les problèmes potentiels et à mettre en place des solutions préventives.</p>
<h3 data-translate="problem-solving">Résolution de problèmes</h3>
<p data-translate="problem-solving-desc">Capacité à décomposer des problèmes complexes en éléments gérables. Maîtrise des techniques de debugging et d'optimisation. Expérience en analyse de données pour la prise de décision. Capacité à anticiper les problèmes potentiels et à mettre en place des solutions préventives.</p>
</div>
<div class="project-card">
<h3>Adaptabilité</h3>
<p>Excellente capacité d'adaptation aux changements technologiques et organisationnels. Apprentissage rapide des nouveaux outils et frameworks.Capacité à travailler efficacement dans des environnements multiculturels. Résilience face aux situations stressantes et aux deadlines serrées.</p>
<h3 data-translate="adaptability">Adaptabilité</h3>
<p data-translate="adaptability-desc">Excellente capacité d'adaptation aux changements technologiques et organisationnels. Apprentissage rapide des nouveaux outils et frameworks.Capacité à travailler efficacement dans des environnements multiculturels. Résilience face aux situations stressantes et aux deadlines serrées.</p>
</div>
<div class="project-card">
<h3>Créativité</h3>
<p>Approche innovante dans la résolution de problèmes techniques. Capacité à concevoir des solutions efficaces. Expérience en design thinking et brainstorming créatif. Aptitude à sortir des sentiers battus pour proposer des solutions originales. Passion pour l'innovation technologique et l'amélioration continue.</p>
<h3 data-translate="creativity">Créativité</h3>
<p data-translate="creativity-desc">Approche innovante dans la résolution de problèmes techniques. Capacité à concevoir des solutions efficaces. Expérience en design thinking et brainstorming créatif. Aptitude à sortir des sentiers battus pour proposer des solutions originales. Passion pour l'innovation technologique et l'amélioration continue.</p>
</div>
<div class="project-card">
<h3>Organisation</h3>
<p>Excellence dans la gestion du temps et des priorités. Maîtrise des outils de gestion de projet et de productivité. Capacité à gérer plusieurs projets simultanément. Rigueur dans le suivi des tâches et le respect des délais.</p>
<h3 data-translate="organization">Organisation</h3>
<p data-translate="organization-desc">Excellence dans la gestion du temps et des priorités. Maîtrise des outils de gestion de projet et de productivité. Capacité à gérer plusieurs projets simultanément. Rigueur dans le suivi des tâches et le respect des délais.</p>
</div>
<div class="project-card">
<h3>Esprit d'analyse</h3>
<p>Capacité à analyser des situations complexes et à en tirer des conclusions pertinentes. Compétences en analyse de données et en prise de décision basée sur les faits. Approche critique et objective des problèmes.</p>
<h3 data-translate="analysis">Esprit d'analyse</h3>
<p data-translate="analysis-desc">Capacité à analyser des situations complexes et à en tirer des conclusions pertinentes. Compétences en analyse de données et en prise de décision basée sur les faits. Approche critique et objective des problèmes.</p>
</div>
</div>
</div>
@ -117,7 +123,7 @@
<!-- Pied de page -->
<footer>
<p>&copy; 2024 Sasha Lorenc. Tous droits réservés.</p>
<p data-translate="copyright">&copy; 2024 Sasha Lorenc. Tous droits réservés.</p>
<div class="social-links">
<a href="https://www.linkedin.com/in/sasha-lorenc-9a073b278/" target="_blank">LinkedIn</a>
<a href="https://codefirst.iut.uca.fr/git/sasha.lorenc" target="_blank">GitHub</a>
@ -186,6 +192,148 @@
});
}
});
</script>
// Ajout du système de traduction
const translations = {
fr: {
"nav-home": "Accueil",
"nav-about": "À propos",
"nav-projects": "Projets",
"nav-skills": "Compétences",
"nav-contact": "Contact",
"accent-color": "Couleur d'accentuation :",
"default": "Défaut",
"red": "Rouge",
"orange": "Orange",
"green": "Vert",
"pink": "Rose",
"skills-title": "Mes Compétences",
"technical-skills": "Compétences Techniques",
"general-skills": "Compétences Générales",
"html-css": "HTML & CSS",
"javascript": "JavaScript",
"php-mysql": "PHP & MySQL",
"react-nodejs": "React & Node.js",
"frameworks-tools": "Frameworks & Outils",
"project-management": "Gestion de projet",
"communication": "Communication",
"problem-solving": "Résolution de problèmes",
"adaptability": "Adaptabilité",
"creativity": "Créativité",
"organization": "Organisation",
"analysis": "Esprit d'analyse",
"project-management-desc": "Leadership naturel avec expérience dans la coordination d'équipes. Excellente capacité à établir des plannings réalistes et à gérer les ressources efficacement. Compétences avérées en gestion des risques et résolution de conflits.",
"communication-desc": "Communication claire et persuasive en français et en anglais. Capacité à vulgariser des concepts techniques complexes. Excellente aptitude à la rédaction de documentation technique et rapports professionnels. Fort esprit d'équipe avec capacité à fédérer autour d'objectifs communs.",
"problem-solving-desc": "Capacité à décomposer des problèmes complexes en éléments gérables. Maîtrise des techniques de debugging et d'optimisation. Expérience en analyse de données pour la prise de décision. Capacité à anticiper les problèmes potentiels et à mettre en place des solutions préventives.",
"adaptability-desc": "Excellente capacité d'adaptation aux changements technologiques et organisationnels. Apprentissage rapide des nouveaux outils et frameworks.Capacité à travailler efficacement dans des environnements multiculturels. Résilience face aux situations stressantes et aux deadlines serrées.",
"creativity-desc": "Approche innovante dans la résolution de problèmes techniques. Capacité à concevoir des solutions efficaces. Expérience en design thinking et brainstorming créatif. Aptitude à sortir des sentiers battus pour proposer des solutions originales. Passion pour l'innovation technologique et l'amélioration continue.",
"organization-desc": "Excellence dans la gestion du temps et des priorités. Maîtrise des outils de gestion de projet et de productivité. Capacité à gérer plusieurs projets simultanément. Rigueur dans le suivi des tâches et le respect des délais.",
"analysis-desc": "Capacité à analyser des situations complexes et à en tirer des conclusions pertinentes. Compétences en analyse de données et en prise de décision basée sur les faits. Approche critique et objective des problèmes.",
"copyright": "© 2024 Sasha Lorenc. Tous droits réservés.",
},
en: {
"nav-home": "Home",
"nav-about": "About",
"nav-projects": "Projects",
"nav-skills": "Skills",
"nav-contact": "Contact",
"accent-color": "Accent color:",
"default": "Default",
"red": "Red",
"orange": "Orange",
"green": "Green",
"pink": "Pink",
"skills-title": "My Skills",
"technical-skills": "Technical Skills",
"general-skills": "General Skills",
"html-css": "HTML & CSS",
"javascript": "JavaScript",
"php-mysql": "PHP & MySQL",
"react-nodejs": "React & Node.js",
"frameworks-tools": "Frameworks & Tools",
"project-management": "Project Management",
"communication": "Communication",
"problem-solving": "Problem Solving",
"adaptability": "Adaptability",
"creativity": "Creativity",
"organization": "Organization",
"analysis": "Analysis",
"project-management-desc": "Natural leadership with team coordination experience. Excellent ability to establish realistic schedules and efficiently manage resources. Proven skills in risk management and conflict resolution.",
"communication-desc": "Clear and persuasive communication in both French and English. Ability to explain complex technical concepts. Excellent technical documentation and professional report writing skills. Strong team spirit with ability to unite around common goals.",
"problem-solving-desc": "Ability to break down complex problems into manageable elements. Mastery of debugging and optimization techniques. Experience in data analysis for decision making. Ability to anticipate potential problems and implement preventive solutions.",
"adaptability-desc": "Excellent adaptability to technological and organizational changes. Quick learning of new tools and frameworks. Ability to work effectively in multicultural environments. Resilience in stressful situations and tight deadlines.",
"creativity-desc": "Innovative approach to technical problem solving. Ability to design effective solutions. Experience in design thinking and creative brainstorming. Aptitude for thinking outside the box to propose original solutions. Passion for technological innovation and continuous improvement.",
"organization-desc": "Excellence in time and priority management. Mastery of project management and productivity tools. Ability to manage multiple projects simultaneously. Rigorous in task tracking and meeting deadlines.",
"analysis-desc": "Ability to analyze complex situations and draw relevant conclusions. Skills in data analysis and fact-based decision making. Critical and objective approach to problems.",
"copyright": "© 2024 Sasha Lorenc. All rights reserved.",
},
esp: {
"nav-home": "Inicio",
"nav-about": "Acerca de",
"nav-projects": "Proyectos",
"nav-skills": "Habilidades",
"nav-contact": "Contacto",
"accent-color": "Color de acento:",
"default": "Predeterminado",
"red": "Rojo",
"orange": "Naranja",
"green": "Verde",
"pink": "Rosa",
"skills-title": "Mis Habilidades",
"technical-skills": "Habilidades Técnicas",
"general-skills": "Habilidades Generales",
"html-css": "HTML & CSS",
"javascript": "JavaScript",
"php-mysql": "PHP & MySQL",
"react-nodejs": "React & Node.js",
"frameworks-tools": "Frameworks & Herramientas",
"project-management": "Gestión de proyectos",
"communication": "Comunicación",
"problem-solving": "Resolución de problemas",
"adaptability": "Adaptabilidad",
"creativity": "Creatividad",
"organization": "Organización",
"analysis": "Espíritu analítico",
"project-management-desc": "Liderazgo natural con experiencia en la coordinación de equipos. Excelente capacidad para establecer programas realistas y gestionar recursos de manera eficiente. Habilidades probadas en la gestión de riesgos y resolución de conflictos.",
"communication-desc": "Comunicación clara y persuasiva en ambos idiomas. Capacidad para explicar conceptos técnicos complejos. Excelentes habilidades en la redacción de documentación técnica y reportes profesionales. Espíritu de equipo fuerte con capacidad para unirse a objetivos comunes.",
"problem-solving-desc": "Capacidad para descomponer problemas complejos en elementos manejables. Maestría en técnicas de depuración y optimización. Experiencia en análisis de datos para la toma de decisiones. Capacidad para anticipar problemas potenciales y implementar soluciones preventivas.",
"adaptability-desc": "Excelente capacidad de adaptación a cambios tecnológicos y organizativos. Aprendizaje rápido de nuevas herramientas y frameworks. Capacidad para trabajar efectivamente en entornos multicultural",
"creativity-desc": "Enfoque innovador en la resolución de problemas técnicos. Capacidad para diseñar soluciones efectivas. Experiencia en pensamiento de diseño y brainstorming creativo. Aptitud para salir de los caminos convencionales para proponer soluciones originales. Pasión por la innovación tecnológica y la mejora continua.",
"organization-desc": "Excelencia en la gestión del tiempo y las prioridades. Maestría en herramientas de gestión de proyectos y productividad. Capacidad para administrar varios proyectos simultáneamente. Rigor en el seguimiento de tareas y cumplimiento de plazos.",
"analysis-desc": "Capacidad para analizar situaciones complejas y extraer conclusiones relevantes. Habilidades en análisis de datos y toma de decisiones basadas en hechos. Enfoque crítico y objetivo en los problemas.",
"copyright": "© 2024 Sasha Lorenc. Todos los derechos reservados.",
}
};
document.addEventListener('DOMContentLoaded', () => {
const languageSelector = document.getElementById('language-selector');
// Appliquer la langue sauvegardée
const savedLanguage = localStorage.getItem('language') || 'fr';
languageSelector.value = savedLanguage;
updateLanguage(savedLanguage);
// Écouteur d'événement pour le changement de langue
languageSelector.addEventListener('change', (e) => {
const language = e.target.value;
localStorage.setItem('language', language);
updateLanguage(language);
});
});
function updateLanguage(language) {
document.documentElement.lang = language;
document.querySelectorAll('[data-translate]').forEach(element => {
const key = element.getAttribute('data-translate');
if (translations[language][key]) {
if (element.tagName === 'INPUT' || element.tagName === 'TEXTAREA') {
element.placeholder = translations[language][key];
} else {
element.textContent = translations[language][key];
}
}
});
}
</script>
</body>
</html>

Loading…
Cancel
Save