Supprimer portfolio.html
This commit is contained in:
285
portfolio.html
285
portfolio.html
@@ -1,285 +0,0 @@
|
|||||||
<!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>
|
|
||||||
<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 {
|
|
||||||
background: rgba(0, 0, 0, 0.7) !important;
|
|
||||||
backdrop-filter: blur(6px);
|
|
||||||
}
|
|
||||||
|
|
||||||
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;
|
|
||||||
}
|
|
||||||
|
|
||||||
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;
|
|
||||||
}
|
|
||||||
|
|
||||||
.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 {
|
|
||||||
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;
|
|
||||||
}
|
|
||||||
|
|
||||||
@media (max-width:720px){
|
|
||||||
header{padding:8rem 1.2rem;}
|
|
||||||
section{margin:6rem 1rem; padding:1.6rem;}
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
</head>
|
|
||||||
<body>
|
|
||||||
|
|
||||||
<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>
|
|
||||||
|
|
||||||
<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>
|
|
||||||
|
|
||||||
<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>
|
|
||||||
|
|
||||||
<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>
|
|
||||||
|
|
||||||
<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>
|
|
||||||
<a href="https://github.com/kilian-terki/Keylogger-" target="_blank" style="text-decoration: none; color:inherit;">
|
|
||||||
<div class="project-card mb-4">
|
|
||||||
<h4>Keylogger (Python)</h4>
|
|
||||||
<p>Développement d’un keylogger éducatif en Python permettant d’enregistrer les frappes clavier pour comprendre le fonctionnement des outils utilisés en cybersécurité. Ce projet m’a permis d’approfondir la gestion des événements système, les modules Python avancés et les bonnes pratiques en sécurité.</p>
|
|
||||||
</div>
|
|
||||||
</a>
|
|
||||||
|
|
||||||
</section>
|
|
||||||
|
|
||||||
<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>
|
|
||||||
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');
|
|
||||||
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);
|
|
||||||
|
|
||||||
el.addEventListener('click', (e) => {
|
|
||||||
if (el.classList.contains('active')) {
|
|
||||||
deactivate();
|
|
||||||
} else {
|
|
||||||
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();
|
|
||||||
}
|
|
||||||
});
|
|
||||||
});
|
|
||||||
}
|
|
||||||
|
|
||||||
setupBars('.skill');
|
|
||||||
setupBars('.lang');
|
|
||||||
</script>
|
|
||||||
</body>
|
|
||||||
</html>
|
|
||||||
Reference in New Issue
Block a user