first commit
This commit is contained in:
11
dockerfile
Normal file
11
dockerfile
Normal file
@@ -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;"]
|
||||||
179
index.html
Normal file
179
index.html
Normal file
@@ -0,0 +1,179 @@
|
|||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="fr">
|
||||||
|
<head>
|
||||||
|
<meta charset="UTF-8">
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||||
|
<title>Portfolio - Yanis Himidi</title>
|
||||||
|
<link rel="stylesheet" href="style.css">
|
||||||
|
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css">
|
||||||
|
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap" rel="stylesheet">
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<header>
|
||||||
|
<div class="container header-container">
|
||||||
|
<a href="#" class="logo">YH</a>
|
||||||
|
<nav>
|
||||||
|
<ul>
|
||||||
|
<li><a href="#accueil">Accueil</a></li>
|
||||||
|
<li><a href="#apropos">À propos</a></li>
|
||||||
|
<li><a href="#competences">Compétences</a></li>
|
||||||
|
<li><a href="#projets">Projets</a></li>
|
||||||
|
<li><a href="#contact">Contact</a></li>
|
||||||
|
</ul>
|
||||||
|
</nav>
|
||||||
|
</div>
|
||||||
|
</header>
|
||||||
|
|
||||||
|
<section id="accueil" class="hero">
|
||||||
|
<div class="container">
|
||||||
|
<h1>Yanis Himidi</h1>
|
||||||
|
<p>Étudiant en BTS CIEL option A - Développement & Cybersécurité</p>
|
||||||
|
<div class="scroll-down">
|
||||||
|
<span>Découvrir mon portfolio</span>
|
||||||
|
<i class="fas fa-chevron-down"></i>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<section id="apropos">
|
||||||
|
<div class="container">
|
||||||
|
<h2>À propos de moi</h2>
|
||||||
|
<div class="about-box">
|
||||||
|
<div class="about-text">
|
||||||
|
<h3>HIMIDI Yanis</h3>
|
||||||
|
<p>É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.</p>
|
||||||
|
<p>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.</p>
|
||||||
|
<div class="about-info">
|
||||||
|
<div class="info-item">
|
||||||
|
<strong>Formation</strong>
|
||||||
|
<span>BTS CIEL option A</span>
|
||||||
|
</div>
|
||||||
|
<div class="info-item">
|
||||||
|
<strong>Établissement</strong>
|
||||||
|
<span>La Salle Saint-Denis</span>
|
||||||
|
</div>
|
||||||
|
<div class="info-item">
|
||||||
|
<strong>Domaines</strong>
|
||||||
|
<span>Web & Sécurité</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<section id="competences">
|
||||||
|
<div class="container">
|
||||||
|
<h2>Mes Compétences</h2>
|
||||||
|
<div class="skills">
|
||||||
|
<div class="skill">
|
||||||
|
<i class="fab fa-html5"></i>
|
||||||
|
<h3>HTML5</h3>
|
||||||
|
<p>Création de pages web structurées avec les balises HTML modernes.</p>
|
||||||
|
</div>
|
||||||
|
<div class="skill">
|
||||||
|
<i class="fab fa-css3-alt"></i>
|
||||||
|
<h3>CSS3</h3>
|
||||||
|
<p>Mise en forme de sites web avec des styles et des layouts responsives.</p>
|
||||||
|
</div>
|
||||||
|
<div class="skill">
|
||||||
|
<i class="fab fa-js"></i>
|
||||||
|
<h3>JavaScript</h3>
|
||||||
|
<p>Ajout d'interactivité aux pages web avec des scripts simples.</p>
|
||||||
|
</div>
|
||||||
|
<div class="skill">
|
||||||
|
<i class="fab fa-python"></i>
|
||||||
|
<h3>Python</h3>
|
||||||
|
<p>Développement de scripts et applications en Python pour différents projets.</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<section id="projets">
|
||||||
|
<div class="container">
|
||||||
|
<h2>Mes Projets</h2>
|
||||||
|
<div class="projects">
|
||||||
|
<a href="https://gitea.lasallesaintdenis.com/yanis/projet_cms" target="_blank" class="project">
|
||||||
|
<div class="project-image">
|
||||||
|
<i class="fas fa-cogs"></i>
|
||||||
|
</div>
|
||||||
|
<div class="project-content">
|
||||||
|
<h3>Système CMS</h3>
|
||||||
|
<p>Création d'un système de gestion de contenu en PHP avec MySQL pour gérer des articles.</p>
|
||||||
|
<div class="project-tags">
|
||||||
|
<span>PHP</span>
|
||||||
|
<span>MySQL</span>
|
||||||
|
<span>HTML/CSS</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</a>
|
||||||
|
|
||||||
|
<a href="https://github.com/yanishimidi/keylogger" target="_blank" class="project">
|
||||||
|
<div class="project-image">
|
||||||
|
<i class="fas fa-keyboard"></i>
|
||||||
|
</div>
|
||||||
|
<div class="project-content">
|
||||||
|
<h3>Keylogger Éducatif</h3>
|
||||||
|
<p>Programme Python qui enregistre les touches du clavier pour comprendre son fonctionnement.</p>
|
||||||
|
<div class="project-tags">
|
||||||
|
<span>Python</span>
|
||||||
|
<span>Éducatif</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</a>
|
||||||
|
|
||||||
|
<a href="https://github.com/yanishimidi/VerifMotDePasse" target="_blank" class="project">
|
||||||
|
<div class="project-image">
|
||||||
|
<i class="fas fa-shield-alt"></i>
|
||||||
|
</div>
|
||||||
|
<div class="project-content">
|
||||||
|
<h3>Vérificateur Mot de Passe</h3>
|
||||||
|
<p>Application Python avec double authentification et code de secours.</p>
|
||||||
|
<div class="project-tags">
|
||||||
|
<span>Python</span>
|
||||||
|
<span>Sécurité</span>
|
||||||
|
<span>Authentification</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<section id="contact">
|
||||||
|
<div class="container">
|
||||||
|
<h2>Contact</h2>
|
||||||
|
<div class="contact-box">
|
||||||
|
<p>N'hésitez pas à me contacter pour discuter de projets ou d'opportunités.</p>
|
||||||
|
<div class="contact-links">
|
||||||
|
<a href="mailto:himidihamadiyanis@gmail.com" class="contact-link">
|
||||||
|
<i class="fas fa-envelope"></i>
|
||||||
|
<span>Email</span>
|
||||||
|
<small>himidihamadiyanis@gmail.com</small>
|
||||||
|
</a>
|
||||||
|
<a href="https://www.linkedin.com/in/yanis-himidi-hamadi-a327aa276/" class="contact-link">
|
||||||
|
<i class="fab fa-linkedin"></i>
|
||||||
|
<span>LinkedIn</span>
|
||||||
|
<small>Profil LinkedIn</small>
|
||||||
|
</a>
|
||||||
|
<a href="https://github.com/yanishimidi" class="contact-link">
|
||||||
|
<i class="fab fa-github"></i>
|
||||||
|
<span>GitHub</span>
|
||||||
|
<small>Mes projets</small>
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<footer>
|
||||||
|
<div class="container">
|
||||||
|
<p>© 2024 Yanis HIMIDI - Portfolio étudiant</p>
|
||||||
|
<p class="footer-note">Projets réalisés dans le cadre de ma formation</p>
|
||||||
|
</div>
|
||||||
|
</footer>
|
||||||
|
|
||||||
|
<script src="script.js"></script>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
9
launch-dockers.sh
Executable file
9
launch-dockers.sh
Executable file
@@ -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
|
||||||
15
script.js
Normal file
15
script.js
Normal file
@@ -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'
|
||||||
|
});
|
||||||
|
});
|
||||||
384
style.css
Normal file
384
style.css
Normal file
@@ -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;
|
||||||
|
}
|
||||||
|
}
|
||||||
Reference in New Issue
Block a user