sasha.lorenc
/
portfolio
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Ajout des fichiers html

Browse Source
master
Sasha LORENC 3 months ago
commit 267fbd50a3
5 changed files with 872 additions and 0 deletions
Show Stats Download Patch File Download Diff File

171
html/about.html
Unescape View File

@ -0,0 +1,171 @@
<!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>
<!-- Navigation -->
<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>
<button id="settings-icon" aria-label="Paramètres" aria-expanded="false" aria-controls="color-picker">⚙️</button>
</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>
</div>
</header>
<!-- Section À propos -->
<main>
<section class="about">
<h2>À propos de moi</h2>
<p>
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</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>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>.
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.
</p>
</div>
<div class="motivation">
<h3>Ce qui me motive</h3>
<p>
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>
</section>
</main>
<!-- Pied de page -->
<footer>
<p>&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" 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" aria-label="Retourner en haut de la page">↑</button>
<script>
// Gestion du défilement avec animation fluide
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>

180
html/accueil.html
Unescape View File

@ -0,0 +1,180 @@
<!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>&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" 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>

201
html/contacts.html
Unescape View File

@ -0,0 +1,201 @@
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Contact - Portfolio de Sasha Lorenc</title>
<link rel="stylesheet" href="../css/contacts_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>
</ul>
<button id="settings-icon" aria-label="Paramètres">⚙️</button>
</nav>
<div id="color-picker" class="color-picker" style="display: none;">
<span>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>
<!-- 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>
<form id="contactForm">
<div class="form-group">
<label class="form-label" for="name">Nom <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">
</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"
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>
<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>
</select>
</div>
<div class="form-group">
<label class="form-label" for="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>
<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)
</label>
</div>
<button type="submit" class="btn">
<span class="btn-text">Envoyer</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>
<a href="https://www.linkedin.com/in/sasha-lorenc-9a073b278/" target="_blank" rel="noopener noreferrer">LinkedIn</a> |
<a href="https://github.com/tallko9?tab=repositories" target="_blank" rel="noopener noreferrer">GitHub</a> |
<a href="#" target="_blank" rel="noopener noreferrer">Twitter</a>
</p>
</div>
</section>
<!-- Pied de page -->
<footer>
<p>&copy; 2024 Sasha Lorenc. Tous droits réservés.</p>
</footer>
<button id="scroll-to-top" title="Remonter en haut">↑</button>
<script src="https://cdn.jsdelivr.net/npm/@emailjs/browser@3/dist/email.min.js"></script>
<script>
window.onscroll = function() {scrollFunction()};
function scrollFunction() {
if (document.body.scrollTop > 20 || document.documentElement.scrollTop > 20) {
document.getElementById("scroll-to-top").style.display = "block";
} else {
document.getElementById("scroll-to-top").style.display = "none";
}
}
document.getElementById("scroll-to-top").onclick = function() {
document.body.scrollTop = 0;
document.documentElement.scrollTop = 0;
};
// Fonction pour changer la couleur d'accentuation
document.querySelectorAll('input[name="accent-color"]').forEach(function(radio) {
radio.addEventListener('change', function() {
document.documentElement.style.setProperty('--accent-color', this.value);
});
});
document.addEventListener('DOMContentLoaded', function() {
// Gestion du compteur de caractères
const messageTextarea = document.getElementById('message');
const charCount = document.getElementById('charCount');
messageTextarea.addEventListener('input', function() {
charCount.textContent = this.value.length;
});
// Validation et envoi du formulaire par Email.js
const contactForm = document.getElementById('contactForm');
contactForm.addEventListener('submit', function(e) {
e.preventDefault();
if (this.checkValidity()) {
const submitBtn = this.querySelector('button[type="submit"]');
submitBtn.classList.add('sending');
emailjs.init("pBMgXiG4tpfVkCxhY");
const templateParams = {
name: document.getElementById('name').value,
email: document.getElementById('email').value,
subject: document.getElementById('subject').value,
message: document.getElementById('message').value
};
emailjs.send('service_s1wv65t', 'template_391zlnl', templateParams)
.then(function(response) {
alert('Message envoyé avec succès !');
contactForm.reset();
charCount.textContent = '0';
submitBtn.classList.remove('sending');
}, function(error) {
alert('Une erreur est survenue. Veuillez réessayer.');
submitBtn.classList.remove('sending');
console.error('Erreur:', error);
});
}
});
// Gestion des couleurs d'accentuation
function changeAccentColor(color) {
document.documentElement.style.setProperty('--accent-color', color);
localStorage.setItem('accentColor', color);
}
document.querySelectorAll('input[name="accent-color"]').forEach(function(radio) {
radio.addEventListener('change', function() {
changeAccentColor(this.value);
});
});
function applyStoredColor() {
var storedColor = localStorage.getItem('accentColor');
if (storedColor) {
document.documentElement.style.setProperty('--accent-color', storedColor);
var radioButton = document.querySelector(`input[name="accent-color"][value="${storedColor}"]`);
if (radioButton) {
radioButton.checked = true;
}
}
}
applyStoredColor();
var settingsIcon = document.getElementById('settings-icon');
var colorPicker = document.getElementById('color-picker');
if (settingsIcon && colorPicker) {
settingsIcon.addEventListener('click', function() {
colorPicker.style.display = colorPicker.style.display === 'none' ? 'block' : 'none';
});
}
});
</script>
</body>
</html>

141
html/projet.html
Unescape View File

@ -0,0 +1,141 @@
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<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>
</ul>
<button id="settings-icon" aria-label="Paramètres">⚙️</button>
</nav>
<div id="color-picker" class="color-picker" style="display: none;">
<span>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>
<!-- Section Projets -->
<section class="projects">
<h2>Mes Projets</h2>
<div class="project-list">
<!-- Exemple de projet 1 -->
<div class="project-card">
<h3>Projet 1 : Site E-commerce</h3>
<p>Un site de commerce en ligne permettant aux utilisateurs de parcourir et d’acheter des produits. </p>
<p><strong class="strong_word">Technologies :</strong> HTML, CSS, JavaScript, PHP</p>
<a href="#" class="btn">Voir le projet</a>
</div>
<!-- Exemple de projet 2 -->
<div class="project-card">
<h3>Projet 2 : Application de Gestion</h3>
<p>Une application pour gérer les tâches quotidiennes d'une petite entreprise, avec suivi des performances.</p>
<p><strong class="strong_word">Technologies :</strong> React, Node.js, MongoDB</p>
<a href="#" class="btn">Voir le projet</a>
</div>
<!-- Exemple de 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="#" class="btn">Voir le projet</a>
</div>
</div>
</section>
<!-- Pied de page -->
<footer>
<p>&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://github.com/tallko9?tab=repositories" target="_blank">GitHub</a>
</div>
</footer>
<button id="scroll-to-top" title="Remonter en haut">↑</button>
<script>
window.onscroll = function() {scrollFunction()};
function scrollFunction() {
if (document.body.scrollTop > 20 || document.documentElement.scrollTop > 20) {
document.getElementById("scroll-to-top").style.display = "block";
} else {
document.getElementById("scroll-to-top").style.display = "none";
}
}
document.getElementById("scroll-to-top").onclick = function() {
document.body.scrollTop = 0;
document.documentElement.scrollTop = 0;
};
// Fonction pour changer la couleur d'accentuation
document.querySelectorAll('input[name="accent-color"]').forEach(function(radio) {
radio.addEventListener('change', function() {
document.documentElement.style.setProperty('--accent-color', this.value);
});
});
document.addEventListener('DOMContentLoaded', function() {
// Fonction pour changer la couleur d'accentuation
function changeAccentColor(color) {
document.documentElement.style.setProperty('--accent-color', color);
localStorage.setItem('accentColor', color);
}
// Ajouter les écouteurs d'événements aux boutons radio
document.querySelectorAll('input[name="accent-color"]').forEach(function(radio) {
radio.addEventListener('change', function() {
changeAccentColor(this.value);
});
});
// Fonction pour appliquer la couleur sauvegardée
function applyStoredColor() {
var storedColor = localStorage.getItem('accentColor');
if (storedColor) {
document.documentElement.style.setProperty('--accent-color', storedColor);
var radioButton = document.querySelector(`input[name="accent-color"][value="${storedColor}"]`);
if (radioButton) {
radioButton.checked = true;
}
}
}
// Appliquer la couleur sauvegardée au chargement de la page
applyStoredColor();
// Gestion du bouton de paramètres
var settingsIcon = document.getElementById('settings-icon');
var colorPicker = document.getElementById('color-picker');
if (settingsIcon && colorPicker) {
settingsIcon.addEventListener('click', function() {
colorPicker.style.display = colorPicker.style.display === 'none' ? 'block' : 'none';
});
}
});
</script>
</body>
</html>

179
html/skills.html
Unescape View File

@ -0,0 +1,179 @@
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Compétences - Portfolio de Sasha Lorenc</title>
<link rel="stylesheet" href="../css/skills_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>
</ul>
<button id="settings-icon" aria-label="Paramètres">⚙️</button>
</nav>
<div id="color-picker" class="color-picker" style="display: none;">
<span>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>
<!-- Section Compétences -->
<section class="skills">
<h2>Mes Compétences</h2>
<!-- Compétences Techniques -->
<div class="skills-section">
<h3>Compétences Techniques</h3>
<div class="skill">
<p>HTML & CSS</p>
<div class="progress-bar">
<div class="progress" style="width: 90%;"></div>
</div>
</div>
<div class="skill">
<p>JavaScript</p>
<div class="progress-bar">
<div class="progress" style="width: 80%;"></div>
</div>
</div>
<div class="skill">
<p>PHP & MySQL</p>
<div class="progress-bar">
<div class="progress" style="width: 75%;"></div>
</div>
</div>
<div class="skill">
<p>React & Node.js</p>
<div class="progress-bar">
<div class="progress" style="width: 70%;"></div>
</div>
</div>
</div>
<!-- Compétences Générales -->
<div class="skills-section">
<h3>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>
</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>
</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>
</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>
</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>
</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>
</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>
</div>
</div>
</div>
</section>
<!-- Pied de page -->
<footer>
<p>&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://github.com/tallko9?tab=repositories" target="_blank">GitHub</a>
</div>
</footer>
<button id="scroll-to-top" title="Remonter en haut">↑</button>
<script>
window.onscroll = function() {scrollFunction()};
function scrollFunction() {
if (document.body.scrollTop > 20 || document.documentElement.scrollTop > 20) {
document.getElementById("scroll-to-top").style.display = "block";
} else {
document.getElementById("scroll-to-top").style.display = "none";
}
}
document.getElementById("scroll-to-top").onclick = function() {
document.body.scrollTop = 0;
document.documentElement.scrollTop = 0;
};
// Fonction pour changer la couleur d'accentuation
document.querySelectorAll('input[name="accent-color"]').forEach(function(radio) {
radio.addEventListener('change', function() {
document.documentElement.style.setProperty('--accent-color', this.value);
});
});
document.addEventListener('DOMContentLoaded', function() {
// Fonction pour changer la couleur d'accentuation
function changeAccentColor(color) {
document.documentElement.style.setProperty('--accent-color', color);
localStorage.setItem('accentColor', color);
}
// Ajouter les écouteurs d'événements aux boutons radio
document.querySelectorAll('input[name="accent-color"]').forEach(function(radio) {
radio.addEventListener('change', function() {
changeAccentColor(this.value);
});
});
// Fonction pour appliquer la couleur sauvegardée
function applyStoredColor() {
var storedColor = localStorage.getItem('accentColor');
if (storedColor) {
document.documentElement.style.setProperty('--accent-color', storedColor);
var radioButton = document.querySelector(`input[name="accent-color"][value="${storedColor}"]`);
if (radioButton) {
radioButton.checked = true;
}
}
}
// Appliquer la couleur sauvegardée au chargement de la page
applyStoredColor();
// Gestion du bouton de paramètres
var settingsIcon = document.getElementById('settings-icon');
var colorPicker = document.getElementById('color-picker');
if (settingsIcon && colorPicker) {
settingsIcon.addEventListener('click', function() {
colorPicker.style.display = colorPicker.style.display === 'none' ? 'block' : 'none';
});
}
});
</script>
</body>
</html>
Write Preview
Loading…
Cancel
Save