Actualiser portfolio.html
This commit is contained in:
611
portfolio.html
611
portfolio.html
@@ -1,306 +1,305 @@
|
|||||||
<!DOCTYPE html>
|
<!DOCTYPE html>
|
||||||
<html lang="fr">
|
<html lang="fr">
|
||||||
<head>
|
<head>
|
||||||
<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 -->
|
<!-- 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>
|
||||||
body {
|
body {
|
||||||
font-family: 'Segoe UI', sans-serif;
|
font-family: 'Segoe UI', sans-serif;
|
||||||
margin: 0;
|
margin: 0;
|
||||||
padding: 0;
|
padding: 0;
|
||||||
background: linear-gradient(135deg, #1f1f1f, #3a3a3a);
|
background: linear-gradient(135deg, #1f1f1f, #3a3a3a);
|
||||||
color: #e6e6e6;
|
color: #e6e6e6;
|
||||||
}
|
}
|
||||||
|
|
||||||
/* NAVBAR */
|
/* 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 {
|
header {
|
||||||
background: linear-gradient(145deg, #2a2a2a, #1c1c1c);
|
background: linear-gradient(145deg, #2a2a2a, #1c1c1c);
|
||||||
color: white;
|
color: white;
|
||||||
padding: 26rem 2rem;
|
padding: 26rem 2rem;
|
||||||
min-height: 100vh;
|
min-height: 100vh;
|
||||||
text-align: center;
|
text-align: center;
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
justify-content: center;
|
justify-content: center;
|
||||||
}
|
}
|
||||||
|
|
||||||
/* SECTIONS */
|
/* SECTIONS */
|
||||||
section {
|
section {
|
||||||
scroll-margin-top: 8rem;
|
scroll-margin-top: 8rem;
|
||||||
max-width: 900px;
|
max-width: 900px;
|
||||||
margin: 12rem auto;
|
margin: 12rem auto;
|
||||||
background: #2d2d2d;
|
background: #2d2d2d;
|
||||||
min-height: 70vh;
|
min-height: 70vh;
|
||||||
padding: 3rem;
|
padding: 3rem;
|
||||||
border-radius: 20px;
|
border-radius: 20px;
|
||||||
box-shadow: 0 0 25px rgba(0,0,0,0.4);
|
box-shadow: 0 0 25px rgba(0,0,0,0.4);
|
||||||
color: #f0f0f0;
|
color: #f0f0f0;
|
||||||
}
|
}
|
||||||
|
|
||||||
section h2 {
|
section h2 {
|
||||||
border-left: 6px solid #888;
|
border-left: 6px solid #888;
|
||||||
padding-left: 1rem;
|
padding-left: 1rem;
|
||||||
margin-bottom: 2rem;
|
margin-bottom: 2rem;
|
||||||
font-size: 2rem;
|
font-size: 2rem;
|
||||||
letter-spacing: 1px;
|
letter-spacing: 1px;
|
||||||
}
|
}
|
||||||
|
|
||||||
/* CARDS PROJETS */
|
/* CARDS PROJETS */
|
||||||
.project-card {
|
.project-card {
|
||||||
background: #3b3b3b;
|
background: #3b3b3b;
|
||||||
padding: 2rem;
|
padding: 2rem;
|
||||||
border-radius: 15px;
|
border-radius: 15px;
|
||||||
transition: 0.3s;
|
transition: 0.3s;
|
||||||
box-shadow: 0 0 15px rgba(0,0,0,0.3);
|
box-shadow: 0 0 15px rgba(0,0,0,0.3);
|
||||||
}
|
}
|
||||||
.project-card:hover {
|
.project-card:hover {
|
||||||
transform: translateY(-5px);
|
transform: translateY(-5px);
|
||||||
box-shadow: 0 0 25px rgba(255,255,255,0.1);
|
box-shadow: 0 0 25px rgba(255,255,255,0.1);
|
||||||
}
|
}
|
||||||
|
|
||||||
.btn-dark {
|
.btn-dark {
|
||||||
background: #555 !important;
|
background: #555 !important;
|
||||||
border: none;
|
border: none;
|
||||||
transition: 0.2s;
|
transition: 0.2s;
|
||||||
}
|
}
|
||||||
.btn-dark:hover {
|
.btn-dark:hover {
|
||||||
background: #777 !important;
|
background: #777 !important;
|
||||||
}
|
}
|
||||||
|
|
||||||
/* SKILL / LANG styling + fill bar */
|
/* SKILL / LANG styling + fill bar */
|
||||||
.skill, .lang {
|
.skill, .lang {
|
||||||
padding: 1rem;
|
padding: 1rem;
|
||||||
background: #3b3b3b;
|
background: #3b3b3b;
|
||||||
border-radius: 10px;
|
border-radius: 10px;
|
||||||
position: relative;
|
position: relative;
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
margin-bottom: 0.8rem;
|
margin-bottom: 0.8rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
.fill {
|
.fill {
|
||||||
position: absolute;
|
position: absolute;
|
||||||
top: 0;
|
top: 0;
|
||||||
left: 0;
|
left: 0;
|
||||||
height: 100%;
|
height: 100%;
|
||||||
width: 0%;
|
width: 0%;
|
||||||
background: linear-gradient(90deg, rgba(255,255,255,0.08), rgba(255,255,255,0.16));
|
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);
|
transition: width 0.7s cubic-bezier(.2,.9,.2,1);
|
||||||
border-radius: 10px;
|
border-radius: 10px;
|
||||||
z-index: 0;
|
z-index: 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
.label {
|
.label {
|
||||||
position: relative;
|
position: relative;
|
||||||
z-index: 1;
|
z-index: 1;
|
||||||
font-weight: 600;
|
font-weight: 600;
|
||||||
}
|
}
|
||||||
|
|
||||||
.percent {
|
.percent {
|
||||||
position: relative;
|
position: relative;
|
||||||
z-index: 1;
|
z-index: 1;
|
||||||
float: right;
|
float: right;
|
||||||
font-weight: 700;
|
font-weight: 700;
|
||||||
opacity: 0;
|
opacity: 0;
|
||||||
transition: opacity 0.25s ease;
|
transition: opacity 0.25s ease;
|
||||||
}
|
}
|
||||||
|
|
||||||
.skill:hover .percent, .lang:hover .percent,
|
.skill:hover .percent, .lang:hover .percent,
|
||||||
.skill.active .percent, .lang.active .percent {
|
.skill.active .percent, .lang.active .percent {
|
||||||
opacity: 1;
|
opacity: 1;
|
||||||
}
|
}
|
||||||
|
|
||||||
/* responsive */
|
/* 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;}
|
||||||
}
|
}
|
||||||
</style>
|
</style>
|
||||||
</head>
|
</head>
|
||||||
<body>
|
<body>
|
||||||
|
|
||||||
<!-- Barre de navigation Bootstrap -->
|
<!-- 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>
|
||||||
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav">
|
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav">
|
||||||
<span class="navbar-toggler-icon"></span>
|
<span class="navbar-toggler-icon"></span>
|
||||||
</button>
|
</button>
|
||||||
<div class="collapse navbar-collapse" id="navbarNav">
|
<div class="collapse navbar-collapse" id="navbarNav">
|
||||||
<ul class="navbar-nav ms-auto">
|
<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="#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="#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="#projets">Projets</a></li>
|
||||||
<li class="nav-item"><a class="nav-link" href="#contacter">Contacter</a></li>
|
<li class="nav-item"><a class="nav-link" href="#contacter">Contacter</a></li>
|
||||||
</ul>
|
</ul>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</nav>
|
</nav>
|
||||||
|
|
||||||
<header>
|
<header>
|
||||||
<h1>Kilian TERKI</h1>
|
<h1>Kilian TERKI</h1>
|
||||||
<p>Étudiant en Informatique, Réseau</p>
|
<p>Étudiant en Informatique, Réseau</p>
|
||||||
</header>
|
</header>
|
||||||
|
|
||||||
<!-- À PROPOS -->
|
<!-- À 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 -->
|
<!-- 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>
|
||||||
<div class="percent">100%</div>
|
<div class="percent">100%</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="lang" data-percent="50" tabindex="0">
|
<div class="lang" data-percent="50" tabindex="0">
|
||||||
<div class="fill" aria-hidden="true"></div>
|
<div class="fill" aria-hidden="true"></div>
|
||||||
<div class="label">Anglais</div>
|
<div class="label">Anglais</div>
|
||||||
<div class="percent">50%</div>
|
<div class="percent">50%</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="lang" data-percent="20" tabindex="0">
|
<div class="lang" data-percent="20" tabindex="0">
|
||||||
<div class="fill" aria-hidden="true"></div>
|
<div class="fill" aria-hidden="true"></div>
|
||||||
<div class="label">Espagnol</div>
|
<div class="label">Espagnol</div>
|
||||||
<div class="percent">20%</div>
|
<div class="percent">20%</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
</section>
|
</section>
|
||||||
|
|
||||||
<!-- COMPETENCES -->
|
<!-- COMPETENCES -->
|
||||||
<section id="competences">
|
<section id="competences">
|
||||||
<h2>Compétences</h2>
|
<h2>Compétences</h2>
|
||||||
|
|
||||||
<div class="skill" data-percent="65" tabindex="0">
|
<div class="skill" data-percent="65" tabindex="0">
|
||||||
<div class="fill" aria-hidden="true"></div>
|
<div class="fill" aria-hidden="true"></div>
|
||||||
<div class="label">HTML / CSS</div>
|
<div class="label">HTML / CSS</div>
|
||||||
<div class="percent">65%</div>
|
<div class="percent">65%</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="skill" data-percent="25" tabindex="0">
|
<div class="skill" data-percent="25" tabindex="0">
|
||||||
<div class="fill" aria-hidden="true"></div>
|
<div class="fill" aria-hidden="true"></div>
|
||||||
<div class="label">PHP</div>
|
<div class="label">PHP</div>
|
||||||
<div class="percent">25%</div>
|
<div class="percent">25%</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="skill" data-percent="20" tabindex="0">
|
<div class="skill" data-percent="20" tabindex="0">
|
||||||
<div class="fill" aria-hidden="true"></div>
|
<div class="fill" aria-hidden="true"></div>
|
||||||
<div class="label">JavaScript</div>
|
<div class="label">JavaScript</div>
|
||||||
<div class="percent">20%</div>
|
<div class="percent">20%</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="skill" data-percent="70" tabindex="0">
|
<div class="skill" data-percent="70" tabindex="0">
|
||||||
<div class="fill" aria-hidden="true"></div>
|
<div class="fill" aria-hidden="true"></div>
|
||||||
<div class="label">Python</div>
|
<div class="label">Python</div>
|
||||||
<div class="percent">70%</div>
|
<div class="percent">70%</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="skill" data-percent="85" tabindex="0">
|
<div class="skill" data-percent="85" tabindex="0">
|
||||||
<div class="fill" aria-hidden="true"></div>
|
<div class="fill" aria-hidden="true"></div>
|
||||||
<div class="label">Réseau</div>
|
<div class="label">Réseau</div>
|
||||||
<div class="percent">85%</div>
|
<div class="percent">85%</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
</section>
|
</section>
|
||||||
|
|
||||||
<!-- PROJETS -->
|
<!-- PROJETS -->
|
||||||
<section id="projets">
|
<section id="projets">
|
||||||
<h2>Projets</h2>
|
<h2>Projets</h2>
|
||||||
|
|
||||||
<a href="https://github.com/kilian-terki/CMS" target="_blank" style="text-decoration:none; color:inherit;">
|
<a href="https://github.com/kilian-terki/CMS" target="_blank" style="text-decoration:none; color:inherit;">
|
||||||
<div class="project-card mb-4">
|
<div class="project-card mb-4">
|
||||||
<h4>CMS (Projet BTS CIEL)</h4>
|
<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>
|
<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>
|
</div>
|
||||||
</a>
|
</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>
|
||||||
<div class="project-card mb-4">
|
<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>
|
||||||
<h4>CMS (Projet BTS CIEL)</h4>
|
</div>
|
||||||
<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>
|
</a>
|
||||||
</div>
|
|
||||||
|
</section>
|
||||||
</section>
|
|
||||||
|
<!-- CONTACT -->
|
||||||
<!-- 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;">
|
<a class="btn btn-dark" href="mailto:kilian.terki2@gmail.com">📧 Envoyer un E-mail</a>
|
||||||
<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://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>
|
||||||
<a class="btn btn-dark" href="https://github.com/kilian-terki" target="_blank">💻 Voir mon GitHub</a>
|
|
||||||
|
<div style="margin-top:1rem;">
|
||||||
<div style="margin-top:1rem;">
|
<h4>📞 Téléphone</h4>
|
||||||
<h4>📞 Téléphone</h4>
|
<p style="font-size:1.2rem; letter-spacing:1px;">+33 6 25 36 22 56</p>
|
||||||
<p style="font-size:1.2rem; letter-spacing:1px;">+33 6 25 36 22 56</p>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</section>
|
||||||
</section>
|
|
||||||
|
<script>
|
||||||
<script>
|
// gère hover, focus et touch : remplit la .fill selon data-percent
|
||||||
// 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');
|
const pct = parseInt(el.dataset.percent) || 0;
|
||||||
const pct = parseInt(el.dataset.percent) || 0;
|
const percentText = el.querySelector('.percent');
|
||||||
const percentText = el.querySelector('.percent');
|
|
||||||
|
function activate() {
|
||||||
function activate() {
|
fill.style.width = pct + '%';
|
||||||
fill.style.width = pct + '%';
|
el.classList.add('active');
|
||||||
el.classList.add('active');
|
// ensure percent visible
|
||||||
// ensure percent visible
|
if (percentText) percentText.style.opacity = '1';
|
||||||
if (percentText) percentText.style.opacity = '1';
|
}
|
||||||
}
|
function deactivate() {
|
||||||
function deactivate() {
|
fill.style.width = '0%';
|
||||||
fill.style.width = '0%';
|
el.classList.remove('active');
|
||||||
el.classList.remove('active');
|
if (percentText) percentText.style.opacity = '0';
|
||||||
if (percentText) percentText.style.opacity = '0';
|
}
|
||||||
}
|
|
||||||
|
el.addEventListener('mouseenter', activate);
|
||||||
el.addEventListener('mouseenter', activate);
|
el.addEventListener('mouseleave', deactivate);
|
||||||
el.addEventListener('mouseleave', deactivate);
|
el.addEventListener('focus', activate);
|
||||||
el.addEventListener('focus', activate);
|
el.addEventListener('blur', deactivate);
|
||||||
el.addEventListener('blur', deactivate);
|
|
||||||
|
// touch / click toggling for mobiles
|
||||||
// touch / click toggling for mobiles
|
el.addEventListener('click', (e) => {
|
||||||
el.addEventListener('click', (e) => {
|
// toggle active
|
||||||
// toggle active
|
if (el.classList.contains('active')) {
|
||||||
if (el.classList.contains('active')) {
|
deactivate();
|
||||||
deactivate();
|
} else {
|
||||||
} else {
|
// deactivate all others to avoid multiple open bars
|
||||||
// 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');
|
other.querySelector('.fill').style.width = '0%';
|
||||||
other.querySelector('.fill').style.width = '0%';
|
const pt = other.querySelector('.percent');
|
||||||
const pt = other.querySelector('.percent');
|
if (pt) pt.style.opacity = '0';
|
||||||
if (pt) pt.style.opacity = '0';
|
}
|
||||||
}
|
});
|
||||||
});
|
activate();
|
||||||
activate();
|
}
|
||||||
}
|
});
|
||||||
});
|
});
|
||||||
});
|
}
|
||||||
}
|
|
||||||
|
// initialise pour skills et langues
|
||||||
// initialise pour skills et langues
|
setupBars('.skill');
|
||||||
setupBars('.skill');
|
setupBars('.lang');
|
||||||
setupBars('.lang');
|
</script>
|
||||||
</script>
|
</body>
|
||||||
</body>
|
</html>
|
||||||
</html>
|
|
||||||
|
|||||||
Reference in New Issue
Block a user