You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
275 lines
18 KiB
275 lines
18 KiB
<!DOCTYPE html>
|
|
<html lang="fr">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<meta name="description" content="À propos de Sasha Lorenc - Développeur web passionné par l'innovation et le design">
|
|
<title>À propos - Portfolio de Sasha Lorenc</title>
|
|
<link rel="stylesheet" href="../css/about_css.css">
|
|
<link rel="stylesheet" href="../css/global.css">
|
|
<link rel="preconnect" href="https://fonts.googleapis.com">
|
|
</head>
|
|
<body>
|
|
<header>
|
|
<nav>
|
|
<h1>Sasha Lorenc</h1>
|
|
<ul>
|
|
<li><a href="accueil.html" data-translate="nav-home">Accueil</a></li>
|
|
<li><a href="about.html" data-translate="nav-about" aria-current="page">À 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>
|
|
<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" 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>
|
|
<section class="about">
|
|
<div class="about-header">
|
|
<div class="profile-image">
|
|
<img src="../images/sasha.png" alt="Photo" width="200" height="200">
|
|
</div>
|
|
<h2 data-translate="about-title">À propos de moi</h2>
|
|
</div>
|
|
<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
|
|
<strong class="strong_word">BUT Informatique</strong> passionné par
|
|
le développement web, je maîtrise les langages
|
|
<strong class="strong_word">HTML</strong>,
|
|
<strong class="strong_word">CSS</strong>, me permettant la création
|
|
d'applications web. J'apprécie également le développement
|
|
d'applications bureau avec des langages tels que le
|
|
<strong class="strong_word">C,C++</strong>. Mon adaptabilité me permet
|
|
de relever les défis techniques
|
|
en combinant mes compétences techniques, incluant des
|
|
connaissances en
|
|
<strong class="strong_word">frameworks</strong>, je suis capable
|
|
de transformer des concepts en applications web de manière
|
|
<strong class="strong_word">professionnelle</strong>. Pour la
|
|
rentrée 2025, je suis à la recherche d'une
|
|
<strong class="strong_word">alternance</strong> dans le domaine
|
|
du développement web ou autre.
|
|
</p>
|
|
<div class="about-details">
|
|
<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.
|
|
</p>
|
|
</div>
|
|
|
|
<div class="motivation">
|
|
<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" data-translate="contact-btn">Me contacter</a>
|
|
</section>
|
|
</main>
|
|
|
|
<footer>
|
|
<p><span>© 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" data-translate="scroll-top">↑</button>
|
|
|
|
<script>
|
|
const scrollToTop = document.getElementById("scroll-to-top");
|
|
|
|
const scrollFunction = () => {
|
|
if (document.body.scrollTop > 20 || document.documentElement.scrollTop > 20) {
|
|
scrollToTop.style.display = "block";
|
|
} else {
|
|
scrollToTop.style.display = "none";
|
|
}
|
|
};
|
|
|
|
window.addEventListener('scroll', scrollFunction);
|
|
|
|
scrollToTop.addEventListener('click', () => {
|
|
const scrollToTop = () => {
|
|
const c = document.documentElement.scrollTop || document.body.scrollTop;
|
|
if (c > 0) {
|
|
window.requestAnimationFrame(scrollToTop);
|
|
window.scrollTo(0, c - c / 8);
|
|
}
|
|
};
|
|
scrollToTop();
|
|
});
|
|
|
|
const changeAccentColor = (color) => {
|
|
document.documentElement.style.setProperty('--accent-color', color);
|
|
localStorage.setItem('accentColor', color);
|
|
|
|
const notification = document.createElement('div');
|
|
notification.className = 'color-change-notification';
|
|
document.body.appendChild(notification);
|
|
|
|
setTimeout(() => {
|
|
notification.remove();
|
|
}, 2000);
|
|
};
|
|
|
|
const applyStoredColor = () => {
|
|
const storedColor = localStorage.getItem('accentColor');
|
|
if (storedColor) {
|
|
document.documentElement.style.setProperty('--accent-color', storedColor);
|
|
const radioButton = document.querySelector(`input[name="accent-color"][value="${storedColor}"]`);
|
|
if (radioButton) radioButton.checked = true;
|
|
}
|
|
};
|
|
|
|
// 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));
|
|
});
|
|
|
|
if (settingsIcon && colorPicker) {
|
|
settingsIcon.addEventListener('click', () => {
|
|
const isExpanded = colorPicker.style.display !== 'none';
|
|
colorPicker.style.display = isExpanded ? 'none' : 'block';
|
|
settingsIcon.setAttribute('aria-expanded', !isExpanded);
|
|
});
|
|
|
|
document.addEventListener('click', (e) => {
|
|
if (!colorPicker.contains(e.target) && !settingsIcon.contains(e.target)) {
|
|
colorPicker.style.display = 'none';
|
|
settingsIcon.setAttribute('aria-expanded', 'false');
|
|
}
|
|
});
|
|
}
|
|
|
|
// 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>
|