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