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