klnsancho/Portfolio
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Actualiser portfolio.html

Browse Source
This commit is contained in:
klnsancho
2025-12-04 12:47:59 +00:00
parent f06ee4fdc5
commit 680fda3ff2
1 changed files with 0 additions and 20 deletions
Download Patch File Download Diff File Expand all files Collapse all files

20
portfolio.html
View File

@@ -4,8 +4,6 @@
<meta charset="UTF-8" /> <meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0"/> <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
<title>Portfolio - Kilian TERKI</title> <title>Portfolio - Kilian TERKI</title>
<!-- Bootstrap -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css" rel="stylesheet"> <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css" rel="stylesheet">
<style> <style>
@@ -17,13 +15,11 @@
color: #e6e6e6; color: #e6e6e6;
} }
/* NAVBAR */
.navbar { .navbar {
background: rgba(0, 0, 0, 0.7) !important; background: rgba(0, 0, 0, 0.7) !important;
backdrop-filter: blur(6px); backdrop-filter: blur(6px);
} }
/* HEADER */
header { header {
background: linear-gradient(145deg, #2a2a2a, #1c1c1c); background: linear-gradient(145deg, #2a2a2a, #1c1c1c);
color: white; color: white;
@@ -35,7 +31,6 @@
justify-content: center; justify-content: center;
} }
/* SECTIONS */
section { section {
scroll-margin-top: 8rem; scroll-margin-top: 8rem;
max-width: 900px; max-width: 900px;
@@ -56,7 +51,6 @@
letter-spacing: 1px; letter-spacing: 1px;
} }
/* CARDS PROJETS */
.project-card { .project-card {
background: #3b3b3b; background: #3b3b3b;
padding: 2rem; padding: 2rem;
@@ -78,7 +72,6 @@
background: #777 !important; background: #777 !important;
} }
/* SKILL / LANG styling + fill bar */
.skill, .lang { .skill, .lang {
padding: 1rem; padding: 1rem;
background: #3b3b3b; background: #3b3b3b;
@@ -121,7 +114,6 @@
opacity: 1; opacity: 1;
} }
/* responsive */
@media (max-width:720px){ @media (max-width:720px){
header{padding:8rem 1.2rem;} header{padding:8rem 1.2rem;}
section{margin:6rem 1rem; padding:1.6rem;} section{margin:6rem 1rem; padding:1.6rem;}
@@ -130,7 +122,6 @@
</head> </head>
<body> <body>
<!-- Barre de navigation Bootstrap -->
<nav class="navbar navbar-expand-lg navbar-dark bg-dark fixed-top"> <nav class="navbar navbar-expand-lg navbar-dark bg-dark fixed-top">
<div class="container-fluid"> <div class="container-fluid">
<a class="navbar-brand" href="#">Mon Portfolio</a> <a class="navbar-brand" href="#">Mon Portfolio</a>
@@ -153,14 +144,12 @@
<p>Étudiant en Informatique, Réseau</p> <p>Étudiant en Informatique, Réseau</p>
</header> </header>
<!-- À PROPOS -->
<section id="apropos"> <section id="apropos">
<h2>À propos de moi</h2> <h2>À propos de moi</h2>
<p>Je m'appelle Kilian TERKI, étudiant en deuxième année de BTS CIEL (Cybersécurité, Informatique et Électronique). Passionné par les technologies et l'informatique, j’aime comprendre comment fonctionnent les systèmes et développer mes compétences à travers des projets concrets. Curieux et motivé, je cherche toujours à progresser dans le domaine du numérique.</p> <p>Je m'appelle Kilian TERKI, étudiant en deuxième année de BTS CIEL (Cybersécurité, Informatique et Électronique). Passionné par les technologies et l'informatique, j’aime comprendre comment fonctionnent les systèmes et développer mes compétences à travers des projets concrets. Curieux et motivé, je cherche toujours à progresser dans le domaine du numérique.</p>
<h3 style="margin-top:2rem; border-left:4px solid #777; padding-left:10px;">Langues</h3> <h3 style="margin-top:2rem; border-left:4px solid #777; padding-left:10px;">Langues</h3>
<!-- langues avec barre -->
<div class="lang" data-percent="100" tabindex="0"> <div class="lang" data-percent="100" tabindex="0">
<div class="fill" aria-hidden="true"></div> <div class="fill" aria-hidden="true"></div>
<div class="label">Français</div> <div class="label">Français</div>
@@ -181,7 +170,6 @@
</section> </section>
<!-- COMPETENCES -->
<section id="competences"> <section id="competences">
<h2>Compétences</h2> <h2>Compétences</h2>
@@ -217,7 +205,6 @@
</section> </section>
<!-- PROJETS -->
<section id="projets"> <section id="projets">
<h2>Projets</h2> <h2>Projets</h2>
@@ -236,7 +223,6 @@
</section> </section>
<!-- CONTACT -->
<section id="contacter"> <section id="contacter">
<h2>Me contacter</h2> <h2>Me contacter</h2>
<div class="project-card mb-4" style="display:flex; flex-direction:column; gap:1rem;"> <div class="project-card mb-4" style="display:flex; flex-direction:column; gap:1rem;">
@@ -252,7 +238,6 @@
</section> </section>
<script> <script>
// gère hover, focus et touch : remplit la .fill selon data-percent
function setupBars(selector) { function setupBars(selector) {
document.querySelectorAll(selector).forEach(el => { document.querySelectorAll(selector).forEach(el => {
const fill = el.querySelector('.fill'); const fill = el.querySelector('.fill');
@@ -262,7 +247,6 @@
function activate() { function activate() {
fill.style.width = pct + '%'; fill.style.width = pct + '%';
el.classList.add('active'); el.classList.add('active');
// ensure percent visible
if (percentText) percentText.style.opacity = '1'; if (percentText) percentText.style.opacity = '1';
} }
function deactivate() { function deactivate() {
@@ -276,13 +260,10 @@
el.addEventListener('focus', activate); el.addEventListener('focus', activate);
el.addEventListener('blur', deactivate); el.addEventListener('blur', deactivate);
// touch / click toggling for mobiles
el.addEventListener('click', (e) => { el.addEventListener('click', (e) => {
// toggle active
if (el.classList.contains('active')) { if (el.classList.contains('active')) {
deactivate(); deactivate();
} else { } else {
// deactivate all others to avoid multiple open bars
document.querySelectorAll(selector + '.active').forEach(other => { document.querySelectorAll(selector + '.active').forEach(other => {
if (other !== el) { if (other !== el) {
other.classList.remove('active'); other.classList.remove('active');
@@ -297,7 +278,6 @@
}); });
} }
// initialise pour skills et langues
setupBars('.skill'); setupBars('.skill');
setupBars('.lang'); setupBars('.lang');
</script> </script>