307 lines
9.4 KiB
HTML
307 lines
9.4 KiB
HTML
<!DOCTYPE html>
|
||
<html lang="fr">
|
||
<head>
|
||
<meta charset="UTF-8" />
|
||
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
|
||
<title>Portfolio - Kilian TERKI</title>
|
||
|
||
<!-- Bootstrap -->
|
||
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css" rel="stylesheet">
|
||
|
||
<style>
|
||
body {
|
||
font-family: 'Segoe UI', sans-serif;
|
||
margin: 0;
|
||
padding: 0;
|
||
background: linear-gradient(135deg, #1f1f1f, #3a3a3a);
|
||
color: #e6e6e6;
|
||
}
|
||
|
||
/* NAVBAR */
|
||
.navbar {
|
||
background: rgba(0, 0, 0, 0.7) !important;
|
||
backdrop-filter: blur(6px);
|
||
}
|
||
|
||
/* HEADER */
|
||
header {
|
||
background: linear-gradient(145deg, #2a2a2a, #1c1c1c);
|
||
color: white;
|
||
padding: 26rem 2rem;
|
||
min-height: 100vh;
|
||
text-align: center;
|
||
display: flex;
|
||
flex-direction: column;
|
||
justify-content: center;
|
||
}
|
||
|
||
/* SECTIONS */
|
||
section {
|
||
scroll-margin-top: 8rem;
|
||
max-width: 900px;
|
||
margin: 12rem auto;
|
||
background: #2d2d2d;
|
||
min-height: 70vh;
|
||
padding: 3rem;
|
||
border-radius: 20px;
|
||
box-shadow: 0 0 25px rgba(0,0,0,0.4);
|
||
color: #f0f0f0;
|
||
}
|
||
|
||
section h2 {
|
||
border-left: 6px solid #888;
|
||
padding-left: 1rem;
|
||
margin-bottom: 2rem;
|
||
font-size: 2rem;
|
||
letter-spacing: 1px;
|
||
}
|
||
|
||
/* CARDS PROJETS */
|
||
.project-card {
|
||
background: #3b3b3b;
|
||
padding: 2rem;
|
||
border-radius: 15px;
|
||
transition: 0.3s;
|
||
box-shadow: 0 0 15px rgba(0,0,0,0.3);
|
||
}
|
||
.project-card:hover {
|
||
transform: translateY(-5px);
|
||
box-shadow: 0 0 25px rgba(255,255,255,0.1);
|
||
}
|
||
|
||
.btn-dark {
|
||
background: #555 !important;
|
||
border: none;
|
||
transition: 0.2s;
|
||
}
|
||
.btn-dark:hover {
|
||
background: #777 !important;
|
||
}
|
||
|
||
/* SKILL / LANG styling + fill bar */
|
||
.skill, .lang {
|
||
padding: 1rem;
|
||
background: #3b3b3b;
|
||
border-radius: 10px;
|
||
position: relative;
|
||
cursor: pointer;
|
||
overflow: hidden;
|
||
margin-bottom: 0.8rem;
|
||
}
|
||
|
||
.fill {
|
||
position: absolute;
|
||
top: 0;
|
||
left: 0;
|
||
height: 100%;
|
||
width: 0%;
|
||
background: linear-gradient(90deg, rgba(255,255,255,0.08), rgba(255,255,255,0.16));
|
||
transition: width 0.7s cubic-bezier(.2,.9,.2,1);
|
||
border-radius: 10px;
|
||
z-index: 0;
|
||
}
|
||
|
||
.label {
|
||
position: relative;
|
||
z-index: 1;
|
||
font-weight: 600;
|
||
}
|
||
|
||
.percent {
|
||
position: relative;
|
||
z-index: 1;
|
||
float: right;
|
||
font-weight: 700;
|
||
opacity: 0;
|
||
transition: opacity 0.25s ease;
|
||
}
|
||
|
||
.skill:hover .percent, .lang:hover .percent,
|
||
.skill.active .percent, .lang.active .percent {
|
||
opacity: 1;
|
||
}
|
||
|
||
/* responsive */
|
||
@media (max-width:720px){
|
||
header{padding:8rem 1.2rem;}
|
||
section{margin:6rem 1rem; padding:1.6rem;}
|
||
}
|
||
</style>
|
||
</head>
|
||
<body>
|
||
|
||
<!-- Barre de navigation Bootstrap -->
|
||
<nav class="navbar navbar-expand-lg navbar-dark bg-dark fixed-top">
|
||
<div class="container-fluid">
|
||
<a class="navbar-brand" href="#">Mon Portfolio</a>
|
||
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav">
|
||
<span class="navbar-toggler-icon"></span>
|
||
</button>
|
||
<div class="collapse navbar-collapse" id="navbarNav">
|
||
<ul class="navbar-nav ms-auto">
|
||
<li class="nav-item"><a class="nav-link" href="#apropos">À propos</a></li>
|
||
<li class="nav-item"><a class="nav-link" href="#competences">Compétences</a></li>
|
||
<li class="nav-item"><a class="nav-link" href="#projets">Projets</a></li>
|
||
<li class="nav-item"><a class="nav-link" href="#contacter">Contacter</a></li>
|
||
</ul>
|
||
</div>
|
||
</div>
|
||
</nav>
|
||
|
||
<header>
|
||
<h1>Kilian TERKI</h1>
|
||
<p>Étudiant en Informatique, Réseau</p>
|
||
</header>
|
||
|
||
<!-- À PROPOS -->
|
||
<section id="apropos">
|
||
<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>
|
||
|
||
<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="fill" aria-hidden="true"></div>
|
||
<div class="label">Français</div>
|
||
<div class="percent">100%</div>
|
||
</div>
|
||
|
||
<div class="lang" data-percent="50" tabindex="0">
|
||
<div class="fill" aria-hidden="true"></div>
|
||
<div class="label">Anglais</div>
|
||
<div class="percent">50%</div>
|
||
</div>
|
||
|
||
<div class="lang" data-percent="20" tabindex="0">
|
||
<div class="fill" aria-hidden="true"></div>
|
||
<div class="label">Espagnol</div>
|
||
<div class="percent">20%</div>
|
||
</div>
|
||
|
||
</section>
|
||
|
||
<!-- COMPETENCES -->
|
||
<section id="competences">
|
||
<h2>Compétences</h2>
|
||
|
||
<div class="skill" data-percent="65" tabindex="0">
|
||
<div class="fill" aria-hidden="true"></div>
|
||
<div class="label">HTML / CSS</div>
|
||
<div class="percent">65%</div>
|
||
</div>
|
||
|
||
<div class="skill" data-percent="25" tabindex="0">
|
||
<div class="fill" aria-hidden="true"></div>
|
||
<div class="label">PHP</div>
|
||
<div class="percent">25%</div>
|
||
</div>
|
||
|
||
<div class="skill" data-percent="20" tabindex="0">
|
||
<div class="fill" aria-hidden="true"></div>
|
||
<div class="label">JavaScript</div>
|
||
<div class="percent">20%</div>
|
||
</div>
|
||
|
||
<div class="skill" data-percent="70" tabindex="0">
|
||
<div class="fill" aria-hidden="true"></div>
|
||
<div class="label">Python</div>
|
||
<div class="percent">70%</div>
|
||
</div>
|
||
|
||
<div class="skill" data-percent="85" tabindex="0">
|
||
<div class="fill" aria-hidden="true"></div>
|
||
<div class="label">Réseau</div>
|
||
<div class="percent">85%</div>
|
||
</div>
|
||
|
||
</section>
|
||
|
||
<!-- PROJETS -->
|
||
<section id="projets">
|
||
<h2>Projets</h2>
|
||
|
||
<a href="https://github.com/kilian-terki/CMS" target="_blank" style="text-decoration:none; color:inherit;">
|
||
<div class="project-card mb-4">
|
||
<h4>CMS (Projet BTS CIEL)</h4>
|
||
<p>Développement d’un mini système de gestion de contenu permettant l’ajout, la modification et l’affichage d’articles. Projet réalisé en PHP avec une base de données.</p>
|
||
</div>
|
||
</a>
|
||
|
||
|
||
|
||
<div class="project-card mb-4">
|
||
<h4>CMS (Projet BTS CIEL)</h4>
|
||
<p>Développement d’un mini système de gestion de contenu permettant l’ajout, la modification et l’affichage d’articles. Projet réalisé en PHP avec une base de données.</p>
|
||
</div>
|
||
|
||
</section>
|
||
|
||
<!-- CONTACT -->
|
||
<section id="contacter">
|
||
<h2>Me contacter</h2>
|
||
<div class="project-card mb-4" style="display:flex; flex-direction:column; gap:1rem;">
|
||
<a class="btn btn-dark" href="mailto:kilian.terki2@gmail.com">📧 Envoyer un E-mail</a>
|
||
<a class="btn btn-dark" href="https://www.linkedin.com/in/kilian-terki-057b84347" target="_blank">🔗 Mon LinkedIn</a>
|
||
<a class="btn btn-dark" href="https://github.com/kilian-terki" target="_blank">💻 Voir mon GitHub</a>
|
||
|
||
<div style="margin-top:1rem;">
|
||
<h4>📞 Téléphone</h4>
|
||
<p style="font-size:1.2rem; letter-spacing:1px;">+33 6 25 36 22 56</p>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<script>
|
||
// gère hover, focus et touch : remplit la .fill selon data-percent
|
||
function setupBars(selector) {
|
||
document.querySelectorAll(selector).forEach(el => {
|
||
const fill = el.querySelector('.fill');
|
||
const pct = parseInt(el.dataset.percent) || 0;
|
||
const percentText = el.querySelector('.percent');
|
||
|
||
function activate() {
|
||
fill.style.width = pct + '%';
|
||
el.classList.add('active');
|
||
// ensure percent visible
|
||
if (percentText) percentText.style.opacity = '1';
|
||
}
|
||
function deactivate() {
|
||
fill.style.width = '0%';
|
||
el.classList.remove('active');
|
||
if (percentText) percentText.style.opacity = '0';
|
||
}
|
||
|
||
el.addEventListener('mouseenter', activate);
|
||
el.addEventListener('mouseleave', deactivate);
|
||
el.addEventListener('focus', activate);
|
||
el.addEventListener('blur', deactivate);
|
||
|
||
// touch / click toggling for mobiles
|
||
el.addEventListener('click', (e) => {
|
||
// toggle active
|
||
if (el.classList.contains('active')) {
|
||
deactivate();
|
||
} else {
|
||
// deactivate all others to avoid multiple open bars
|
||
document.querySelectorAll(selector + '.active').forEach(other => {
|
||
if (other !== el) {
|
||
other.classList.remove('active');
|
||
other.querySelector('.fill').style.width = '0%';
|
||
const pt = other.querySelector('.percent');
|
||
if (pt) pt.style.opacity = '0';
|
||
}
|
||
});
|
||
activate();
|
||
}
|
||
});
|
||
});
|
||
}
|
||
|
||
// initialise pour skills et langues
|
||
setupBars('.skill');
|
||
setupBars('.lang');
|
||
</script>
|
||
</body>
|
||
</html>
|