Téléverser les fichiers vers "/"
This commit is contained in:
306
portfolio.html
Normal file
306
portfolio.html
Normal file
@@ -0,0 +1,306 @@
|
||||
<!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>
|
||||
Reference in New Issue
Block a user