From 66e2a5d40314586125f224f30be00e3878475864 Mon Sep 17 00:00:00 2001 From: yanis Date: Mon, 8 Dec 2025 16:54:01 +0100 Subject: [PATCH] first commit --- dockerfile | 11 ++ index.html | 179 +++++++++++++++++++++ launch-dockers.sh | 9 ++ script.js | 15 ++ style.css | 384 ++++++++++++++++++++++++++++++++++++++++++++++ 5 files changed, 598 insertions(+) create mode 100644 dockerfile create mode 100644 index.html create mode 100755 launch-dockers.sh create mode 100644 script.js create mode 100644 style.css diff --git a/dockerfile b/dockerfile new file mode 100644 index 0000000..ac63f9d --- /dev/null +++ b/dockerfile @@ -0,0 +1,11 @@ +FROM nginx:alpine + +LABEL authors="yanis" + +RUN rm -rf /usr/share/nginx/html/* + +COPY . /usr/share/nginx/html/ + +EXPOSE 80 + +CMD ["nginx", "-g", "daemon off;"] \ No newline at end of file diff --git a/index.html b/index.html new file mode 100644 index 0000000..41d979e --- /dev/null +++ b/index.html @@ -0,0 +1,179 @@ + + + + + + Portfolio - Yanis Himidi + + + + + +
+
+ + +
+
+ +
+
+

Yanis Himidi

+

Étudiant en BTS CIEL option A - Développement & Cybersécurité

+ +
+
+ +
+
+

À propos de moi

+
+
+

HIMIDI Yanis

+

Étudiant en BTS CIEL option A à La Salle Saint-Denis. Passionné par le développement web et la sécurité informatique. J'apprends à créer des sites web et à comprendre comment protéger les systèmes.

+

Je travaille sur des projets académiques pour mettre en pratique ce que j'apprends en cours. Je suis curieux et j'aime découvrir de nouvelles technologies.

+
+
+ Formation + BTS CIEL option A +
+
+ Établissement + La Salle Saint-Denis +
+
+ Domaines + Web & Sécurité +
+
+
+
+
+
+ +
+
+

Mes Compétences

+
+
+ +

HTML5

+

Création de pages web structurées avec les balises HTML modernes.

+
+
+ +

CSS3

+

Mise en forme de sites web avec des styles et des layouts responsives.

+
+
+ +

JavaScript

+

Ajout d'interactivité aux pages web avec des scripts simples.

+
+
+ +

Python

+

Développement de scripts et applications en Python pour différents projets.

+
+
+
+
+ +
+
+

Mes Projets

+
+ +
+ +
+
+

Système CMS

+

Création d'un système de gestion de contenu en PHP avec MySQL pour gérer des articles.

+
+ PHP + MySQL + HTML/CSS +
+
+ + + +
+ +
+
+

Keylogger Éducatif

+

Programme Python qui enregistre les touches du clavier pour comprendre son fonctionnement.

+
+ Python + Éducatif +
+
+ + + +
+ +
+
+

Vérificateur Mot de Passe

+

Application Python avec double authentification et code de secours.

+
+ Python + Sécurité + Authentification +
+
+ +
+
+
+ +
+
+

Contact

+
+

N'hésitez pas à me contacter pour discuter de projets ou d'opportunités.

+
+ + + Email + himidihamadiyanis@gmail.com + + + + LinkedIn + Profil LinkedIn + + + + GitHub + Mes projets + +
+
+
+
+ + + + + + \ No newline at end of file diff --git a/launch-dockers.sh b/launch-dockers.sh new file mode 100755 index 0000000..ae96d24 --- /dev/null +++ b/launch-dockers.sh @@ -0,0 +1,9 @@ + +Bash +#!/bin/bash + +docker stop portefolio + +docker build -t portefolio . + +docker run -it --rm -p 8080:80 --name portefolio -v .:/usr/share/nginx/html/ nginx \ No newline at end of file diff --git a/script.js b/script.js new file mode 100644 index 0000000..6e4e730 --- /dev/null +++ b/script.js @@ -0,0 +1,15 @@ +document.querySelectorAll('nav a').forEach(link => { + link.addEventListener('click', function(e) { + e.preventDefault(); + const target = this.getAttribute('href'); + document.querySelector(target).scrollIntoView({ + behavior: 'smooth' + }); + }); +}); + +document.querySelector('.scroll-down').addEventListener('click', function() { + document.querySelector('#apropos').scrollIntoView({ + behavior: 'smooth' + }); +}); \ No newline at end of file diff --git a/style.css b/style.css new file mode 100644 index 0000000..75b1015 --- /dev/null +++ b/style.css @@ -0,0 +1,384 @@ +* { + margin: 0; + padding: 0; + box-sizing: border-box; +} + +html { + scroll-behavior: smooth; +} + +body { + font-family: 'Inter', sans-serif; + line-height: 1.6; + color: #333; + background: #fff; +} + +.container { + max-width: 1200px; + margin: 0 auto; + padding: 0 20px; +} + +header { + padding: 1rem 0; + background: white; + position: fixed; + width: 100%; + top: 0; + z-index: 100; + box-shadow: 0 2px 10px rgba(0,0,0,0.1); +} + +.header-container { + display: flex; + justify-content: space-between; + align-items: center; +} + +.logo { + font-size: 1.8rem; + font-weight: 700; + color: #2d3748; + text-decoration: none; +} + +nav ul { + display: flex; + list-style: none; + gap: 2rem; +} + +nav a { + text-decoration: none; + color: #4a5568; + font-weight: 500; + transition: color 0.3s; +} + +nav a:hover { + color: #2d3748; +} + +section { + padding: 120px 0; + min-height: 100vh; + display: flex; + align-items: center; +} + +h1, h2, h3 { + font-weight: 600; + color: #2d3748; +} + +h1 { + font-size: 3.5rem; + margin-bottom: 1rem; +} + +h2 { + font-size: 2.8rem; + text-align: center; + margin-bottom: 4rem; +} + +h3 { + font-size: 1.8rem; + margin-bottom: 1rem; +} + +p { + margin-bottom: 1.5rem; + color: #4a5568; + line-height: 1.8; +} + +.hero { + text-align: center; + background: linear-gradient(135deg, #f7fafc 0%, #edf2f7 100%); +} + +.hero p { + font-size: 1.3rem; + max-width: 600px; + margin: 0 auto 3rem; + color: #4a5568; +} + +.scroll-down { + position: absolute; + bottom: 2rem; + left: 50%; + transform: translateX(-50%); + color: #718096; + cursor: pointer; + text-align: center; +} + +.scroll-down i { + margin-top: 0.5rem; + animation: bounce 2s infinite; +} + +@keyframes bounce { + 0%, 100% { transform: translateY(0); } + 50% { transform: translateY(-10px); } +} + +.about-box { + max-width: 900px; + margin: 0 auto; + text-align: center; +} + +.about-info { + display: grid; + grid-template-columns: repeat(3, 1fr); + gap: 2rem; + margin-top: 3rem; +} + +.info-item { + padding: 2rem; + background: #f7fafc; + border-radius: 10px; + transition: transform 0.3s; +} + +.info-item:hover { + transform: translateY(-5px); +} + +.info-item strong { + display: block; + color: #2d3748; + margin-bottom: 0.5rem; + font-size: 1.1rem; +} + +.info-item span { + color: #4a5568; +} + +.skills { + display: grid; + grid-template-columns: repeat(4, 1fr); + gap: 2rem; +} + +.skill { + padding: 2.5rem; + text-align: center; + border: 1px solid #e2e8f0; + border-radius: 12px; + transition: all 0.3s; + background: white; +} + +.skill:hover { + transform: translateY(-8px); + border-color: #4299e1; + box-shadow: 0 10px 25px rgba(66, 153, 225, 0.1); +} + +.skill i { + font-size: 3.5rem; + margin-bottom: 1.5rem; + color: #4299e1; +} + +.projects { + display: grid; + grid-template-columns: repeat(3, 1fr); + gap: 2.5rem; +} + +.project { + display: block; + text-decoration: none; + color: inherit; + border: 1px solid #e2e8f0; + border-radius: 12px; + overflow: hidden; + transition: all 0.3s; + background: white; + height: 100%; +} + +.project:hover { + transform: translateY(-8px); + border-color: #4299e1; + box-shadow: 0 15px 30px rgba(66, 153, 225, 0.15); +} + +.project-image { + height: 220px; + background: linear-gradient(135deg, #4299e1, #667eea); + display: flex; + align-items: center; + justify-content: center; + color: white; +} + +.project-image i { + font-size: 4.5rem; +} + +.project-content { + padding: 2rem; +} + +.project-tags { + display: flex; + gap: 0.5rem; + margin: 1.5rem 0; + flex-wrap: wrap; +} + +.project-tags span { + background: #edf2f7; + padding: 0.5rem 1rem; + border-radius: 20px; + font-size: 0.9rem; + color: #4a5568; + font-weight: 500; +} + +.contact-box { + max-width: 800px; + margin: 0 auto; + text-align: center; +} + +.contact-box p { + font-size: 1.1rem; + max-width: 600px; + margin: 0 auto 3rem; +} + +.contact-links { + display: flex; + justify-content: center; + gap: 2rem; + margin-top: 2rem; +} + +.contact-link { + display: flex; + flex-direction: column; + align-items: center; + gap: 0.8rem; + padding: 2rem; + border: 1px solid #e2e8f0; + border-radius: 12px; + text-decoration: none; + color: #4a5568; + transition: all 0.3s; + width: 220px; +} + +.contact-link:hover { + border-color: #4299e1; + color: #2d3748; + transform: translateY(-5px); + box-shadow: 0 5px 20px rgba(66, 153, 225, 0.1); +} + +.contact-link i { + font-size: 2.5rem; + color: #4299e1; +} + +.contact-link small { + font-size: 0.9rem; + color: #718096; + text-align: center; +} + +footer { + padding: 3rem 0; + text-align: center; + color: #718096; + border-top: 1px solid #e2e8f0; + background: #f7fafc; +} + +.footer-note { + font-size: 0.9rem; + margin-top: 1rem; + color: #a0aec0; +} + +@media (max-width: 1024px) { + .skills, .projects { + grid-template-columns: repeat(2, 1fr); + } + + .about-info { + grid-template-columns: repeat(2, 1fr); + } +} + +@media (max-width: 768px) { + .header-container { + flex-direction: column; + gap: 1.5rem; + } + + nav ul { + gap: 1.5rem; + flex-wrap: wrap; + justify-content: center; + } + + h1 { + font-size: 2.8rem; + } + + h2 { + font-size: 2.2rem; + } + + .about-info { + grid-template-columns: 1fr; + } + + .contact-links { + flex-direction: column; + align-items: center; + } + + .contact-link { + width: 100%; + max-width: 300px; + } + + section { + padding: 100px 0; + } +} + +@media (max-width: 600px) { + .skills, .projects { + grid-template-columns: 1fr; + } + + h1 { + font-size: 2.5rem; + } + + h2 { + font-size: 2rem; + margin-bottom: 3rem; + } + + .skill { + padding: 2rem; + } + + .project-image { + height: 180px; + } +} \ No newline at end of file