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.
181 lines
8.6 KiB
181 lines
8.6 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="Portfolio de Sasha Lorenc - Développeur web passionné par l'innovation et le design">
|
|
<title>Accueil - Portfolio de Sasha Lorenc</title>
|
|
<link rel="stylesheet" href="../css/accueil_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" aria-current="page">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" aria-expanded="false" aria-controls="color-picker">⚙️</button>
|
|
</nav>
|
|
<div id="color-picker" class="color-picker">
|
|
<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>
|
|
</div>
|
|
</header>
|
|
<main>
|
|
<section class="intro">
|
|
<h2 data-translate="welcome">Bienvenue sur mon portfolio !</h2>
|
|
<p data-translate="intro-text">Développeur passionné par l'innovation et le design web, je vous invite à découvrir mes projets et compétences.</p>
|
|
<div class="cta-buttons">
|
|
<a href="contacts.html" class="btn secondary">Me contacter</a>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- Section À propos -->
|
|
<section class="about-preview">
|
|
<h2><strong class="strong_word" data-translate="who-am-i">Qui suis-je ?</strong></h2>
|
|
<p data-translate="about-preview">Étudiant en première année de BUT Informatique, je suis passionné par le développement web et les nouvelles technologies. Mon objectif est de créer des expériences web innovantes et accessibles.</p>
|
|
<a href="about.html" class="btn" data-translate="learn-more">En savoir plus</a>
|
|
</section>
|
|
|
|
<!-- Section Compétences -->
|
|
<section class="skills-preview">
|
|
<h2><strong class="strong_word" data-translate="key-skills">Mes compétences clés</strong></h2>
|
|
<div class="skills-list">
|
|
<div class="skill-item">
|
|
<i class="skill-icon html-icon"></i>
|
|
<p data-translate="skill-html-css">HTML5 & CSS3</p>
|
|
</div>
|
|
<div class="skill-item">
|
|
<i class="skill-icon js-icon"></i>
|
|
<p data-translate="skill-js">JavaScript</p>
|
|
</div>
|
|
<div class="skill-item">
|
|
<i class="skill-icon c-icon"></i>
|
|
<p data-translate="skill-c">Développement C</p>
|
|
</div>
|
|
<div class="skill-item">
|
|
<i class="skill-icon responsive-icon"></i>
|
|
<p data-translate="skill-responsive">Design responsive</p>
|
|
</div>
|
|
</div>
|
|
<a href="skills.html" class="btn" data-translate="all-skills">Toutes mes compétences</a>
|
|
</section>
|
|
|
|
<section class="recent-projects">
|
|
<h2><strong data-translate="recent-projects">Projets récents</strong></h2>
|
|
<div class="project-grid">
|
|
<article class="project-card" tabindex="0">
|
|
<h3 data-translate="project-1-title">Site web responsive</h3>
|
|
<p data-translate="project-1-desc">Création d'un site web pour une association locale</p>
|
|
<a href="projet.html#site-web" class="project-link">En savoir plus</a>
|
|
</article>
|
|
<article class="project-card" tabindex="0">
|
|
<h3 data-translate="project-2-title">Application de gestion</h3>
|
|
<p data-translate="project-2-desc">Développement d'une application en C pour la gestion de tâches</p>
|
|
<a href="projet.html#app-gestion" class="project-link">En savoir plus</a>
|
|
</article>
|
|
</div>
|
|
<a href="projet.html" class="btn" data-translate="all-projects">Tous mes projets</a>
|
|
</section>
|
|
</main>
|
|
|
|
<!-- Pied de page -->
|
|
<footer>
|
|
<p>© 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" rel="noopener" aria-label="LinkedIn">LinkedIn</a>
|
|
<a href="https://github.com/tallko9?tab=repositories" target="_blank" rel="noopener" aria-label="GitHub">GitHub</a>
|
|
</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>
|
|
|
|
<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();
|
|
});
|
|
|
|
// 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);
|
|
|
|
setTimeout(() => {
|
|
notification.remove();
|
|
}, 2000);
|
|
};
|
|
|
|
// Application de la couleur sauvegardée
|
|
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;
|
|
}
|
|
};
|
|
|
|
document.addEventListener('DOMContentLoaded', () => {
|
|
applyStoredColor();
|
|
|
|
const settingsIcon = document.getElementById('settings-icon');
|
|
const colorPicker = document.getElementById('color-picker');
|
|
|
|
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);
|
|
});
|
|
|
|
// 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';
|
|
settingsIcon.setAttribute('aria-expanded', 'false');
|
|
}
|
|
});
|
|
}
|
|
});
|
|
</script>
|
|
</body>
|
|
</html>
|