first commit
This commit is contained in:
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>
|
||||
Reference in New Issue
Block a user