From 16467345039f1ddab85e96e4b526706451bfeb1d Mon Sep 17 00:00:00 2001 From: klnsancho Date: Thu, 4 Dec 2025 15:47:02 +0000 Subject: [PATCH] =?UTF-8?q?T=C3=A9l=C3=A9verser=20les=20fichiers=20vers=20?= =?UTF-8?q?"/"?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- Dockerfile | 19 ++++++++ index.html | 130 +++++++++++++++++++++++++++++++++++++++++++++++++++++ script.js | 43 ++++++++++++++++++ style.css | 118 ++++++++++++++++++++++++++++++++++++++++++++++++ 4 files changed, 310 insertions(+) create mode 100644 Dockerfile create mode 100644 index.html create mode 100644 script.js create mode 100644 style.css diff --git a/Dockerfile b/Dockerfile new file mode 100644 index 0000000..5372438 --- /dev/null +++ b/Dockerfile @@ -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 \ No newline at end of file diff --git a/index.html b/index.html new file mode 100644 index 0000000..5682115 --- /dev/null +++ b/index.html @@ -0,0 +1,130 @@ + + + + + + Portfolio - Kilian TERKI + + + + + + + + +
+

Kilian TERKI

+

Étudiant en Informatique, Réseau

+
+ +
+

À propos de moi

+

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.

+ +

Langues

+ +
+ +
Français
+
100%
+
+ +
+ +
Anglais
+
50%
+
+ +
+ +
Espagnol
+
20%
+
+
+ +
+

Compétences

+ +
+ +
HTML / CSS
+
65%
+
+ +
+ +
PHP
+
25%
+
+ +
+ +
JavaScript
+
20%
+
+ +
+ +
Python
+
70%
+
+ +
+ +
Réseau
+
85%
+
+
+ +
+

Projets

+ + +
+

CMS (Projet BTS CIEL)

+

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.

+
+ + + +
+

Keylogger (Python)

+

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é.

+
+ +
+ +
+

Me contacter

+
+ 📧 Envoyer un E-mail + Mon LinkedIn + Voir mon GitHub + +
+

📞 Téléphone

+

+33 6 25 36 22 56

+
+
+
+ + + + + + diff --git a/script.js b/script.js new file mode 100644 index 0000000..dbb4bee --- /dev/null +++ b/script.js @@ -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'); \ No newline at end of file diff --git a/style.css b/style.css new file mode 100644 index 0000000..53b48a7 --- /dev/null +++ b/style.css @@ -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; + } +} \ No newline at end of file