Téléverser les fichiers vers "/"
This commit is contained in:
19
Dockerfile
Normal file
19
Dockerfile
Normal file
@@ -0,0 +1,19 @@
|
||||
# Utilise l'image légère d'Nginx
|
||||
FROM nginx:alpine
|
||||
|
||||
# Supprime la config par défaut (optionnel mais propre)
|
||||
RUN rm -rf /usr/share/nginx/html/*
|
||||
|
||||
# Copie ton site dans le dossier public d'Nginx
|
||||
COPY . /usr/share/nginx/html
|
||||
|
||||
# Expose le port 80
|
||||
EXPOSE 80
|
||||
|
||||
# Démarre nginx
|
||||
CMD ["nginx", "-g", "daemon off;"]
|
||||
|
||||
|
||||
# docker build -t mon-site .
|
||||
# docker run -d -p 8080:80 Portfolio
|
||||
# http.localhost:8080
|
||||
130
index.html
Normal file
130
index.html
Normal file
@@ -0,0 +1,130 @@
|
||||
<!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">
|
||||
<link rel="stylesheet" href="style.css">
|
||||
</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"><svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-linkedin" viewBox="0 0 16 16"><path d="M0 1.146C0 .513.526 0 1.175 0h13.65C15.474 0 16 .513 16 1.146v13.708c0 .633-.526 1.146-1.175 1.146H1.175C.526 16 0 15.487 0 14.854zm4.943 12.248V6.169H2.542v7.225zm-1.2-8.212c.837 0 1.358-.554 1.358-1.248-.015-.709-.52-1.248-1.342-1.248S2.4 3.226 2.4 3.934c0 .694.521 1.248 1.327 1.248zm4.908 8.212V9.359c0-.216.016-.432.08-.586.173-.431.568-.878 1.232-.878.869 0 1.216.662 1.216 1.634v3.865h2.401V9.25c0-2.22-1.184-3.252-2.764-3.252-1.274 0-1.845.7-2.165 1.193v.025h-.016l.016-.025V6.169h-2.4c.03.678 0 7.225 0 7.225z"/></svg> Mon LinkedIn</a>
|
||||
<a class="btn btn-dark" href="https://github.com/kilian-terki" target="_blank"><svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-github" viewBox="0 0 16 16"><path d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27s1.36.09 2 .27c1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.01 8.01 0 0 0 16 8c0-4.42-3.58-8-8-8"/></svg> 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 src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.bundle.min.js"></script>
|
||||
<script src="script.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
43
script.js
Normal file
43
script.js
Normal file
@@ -0,0 +1,43 @@
|
||||
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');
|
||||
118
style.css
Normal file
118
style.css
Normal file
@@ -0,0 +1,118 @@
|
||||
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;
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user