<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="utf-8">
  <meta content="width=device-width, initial-scale=1.0" name="viewport">
  <title>Portfolio Lestiennes Lucas</title>
  <meta content="" name="description">
  <meta content="" name="keywords">

  <!-- Favicons -->
  <link href="assets/img/favicon.png" rel="icon">
  <link href="assets/img/apple-touch-icon.png" rel="apple-touch-icon">

  <!-- Fonts -->
  <link href="https://fonts.googleapis.com" rel="preconnect">
  <link href="https://fonts.gstatic.com" rel="preconnect" crossorigin>
  <link href="https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&family=Raleway:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap" rel="stylesheet">

  <!-- Vendor CSS Files -->
  <link href="assets/vendor/bootstrap/css/bootstrap.min.css" rel="stylesheet">
  <link href="assets/vendor/bootstrap-icons/bootstrap-icons.css" rel="stylesheet">
  <link href="assets/vendor/aos/aos.css" rel="stylesheet">
  <link href="assets/vendor/glightbox/css/glightbox.min.css" rel="stylesheet">
  <link href="assets/vendor/swiper/swiper-bundle.min.css" rel="stylesheet">

  <!-- Main CSS File -->
  <link href="assets/css/main.css" rel="stylesheet">

</head>

<body class="index-page">

  <header id="header" class="header dark-background d-flex flex-column">
    <i class="header-toggle d-xl-none bi bi-list"></i>

    <div class="profile-img">
      <img src="assets/img/my-profile-img.jpg" alt="" class="img-fluid rounded-circle">
    </div>

    <a href="index.html" class="logo d-flex align-items-center justify-content-center">
      <!-- Uncomment the line below if you also wish to use an image logo -->
      <!-- <img src="assets/img/logo.png" alt=""> -->
      <h1 class="sitename">Lucas Lestiennes</h1>
    </a>

    <div class="social-links text-center">
      <a href="#" class="linkedin"><i class="bi bi-linkedin"></i></a>
    </div>

    <nav id="navmenu" class="navmenu">
      <ul>
        <li><a href="#hero" class="active"><i class="bi bi-house navicon"></i>Home</a></li>
        <li><a href="#about"><i class="bi bi-person navicon"></i> À propos</a></li>
        <li><a href="#resume"><i class="bi bi-file-earmark-text navicon"></i> CV</a></li>
        <li><a href="#portfolio"><i class="bi bi-images navicon"></i> Portfolio</a></li>
        <li><a href="#services"><i class="bi bi-hdd-stack navicon"></i> Services</a></li>
        <li><a href="#contact"><i class="bi bi-envelope navicon"></i> Contact</a></li>
      </ul>
    </nav>

  </header>

  <main class="main">

    <!-- Hero Section -->
    <section id="hero" class="hero section dark-background">

      <img src="assets/img/background.png" alt="" data-aos="fade-in" class="">

      <div class="container" data-aos="fade-up" data-aos-delay="10">
        <h2>Lucas Lestiennes</h2>
        <p><span class="typed" data-typed-items="Cybersécurité, Réseaux, Pentest, Hébergement"></span><span class="typed-cursor typed-cursor--blink" aria-hidden="true"></span><span class="typed-cursor typed-cursor--blink" aria-hidden="true"></span></p>
      </div>

    </section><!-- /Hero Section -->

    <!-- About Section -->
    <section id="about" class="about section">

      <!-- Section Title -->
      <div class="container section-title" data-aos="fade-up">
        <h2> À propos de moi</h2>
        <p>Je suis Lucas Lestiennes, étudiant en systèmes et réseaux, en cours de formation pour développer des compétences solides en virtualisation, infrastructure réseau et cybersécurité. Motivé et passionné, je suis à la recherche d'opportunités pour mettre en pratique mes connaissances et continuer à apprendre dans le domaine de l'informatique.</p>
      </div>

      <div class="container" data-aos="fade-up" data-aos-delay="100">


            <p class="fst-italic py-3">
              <!-- possibiltié ajoute txt -->
            </p>
            <div class="row">
              <div class="col-lg-6">
                <ul>
                  <li><i class="bi bi-chevron-right"></i> <strong>Date Naissance:</strong> <span>15 février 2004</span></li>
                  <li><i class="bi bi-chevron-right"></i> <strong>Ville:</strong> <span>Toulouse</span></li>
                </ul>
              </div>
              <div class="col-lg-6">
                <ul>
                  <li><i class="bi bi-chevron-right"></i> <strong>Age:</strong> <span>21</span></li>
                </ul>
              </div>
            </div>
            <p class="py-3">
              descriptiosn X Y jsp
            </p>
          </div>
        </div>

      </div>

    </section><!-- /About Section -->

    <!-- Stats Section -->
    <!-- /Stats Section -->

    <!-- Skills Section -->
    <section id="skills" class="skills section light-background">

      <!-- Section Title -->
		<div class="container section-title" data-aos="fade-up">
		<h2>Mes Compétences</h2>
		<p>Systèmes et Réseaux, Virtualisation, Cybersécurité, Administration réseau et Support Technique.</p>
		</div>
	<!-- End Section Title -->


      <div class="container" data-aos="fade-up" data-aos-delay="100">

        <div class="row skills-content skills-animation">

          <div class="col-lg-6">

            <div class="progress">
              <span class="skill"><span>Réseaux</span> <i class="val">100%</i></span>
              <div class="progress-bar-wrap">
                <div class="progress-bar" role="progressbar" aria-valuenow="100" aria-valuemin="0" aria-valuemax="100"></div>
              </div>
            </div><!-- End Skills Item -->

            <div class="progress">
              <span class="skill"><span>Hyperviseur Proxmox</span> <i class="val">90%</i></span>
              <div class="progress-bar-wrap">
                <div class="progress-bar" role="progressbar" aria-valuenow="90" aria-valuemin="0" aria-valuemax="100"></div>
              </div>
            </div>

            <div class="progress">
              <span class="skill"><span>Développement C# & Python</span> <i class="val">75%</i></span>
              <div class="progress-bar-wrap">
                <div class="progress-bar" role="progressbar" aria-valuenow="75" aria-valuemin="0" aria-valuemax="100"></div>
              </div>
            </div>

          </div>

          <div class="col-lg-6">

            <div class="progress">
              <span class="skill"><span>PHP</span> <i class="val">80%</i></span>
              <div class="progress-bar-wrap">
                <div class="progress-bar" role="progressbar" aria-valuenow="80" aria-valuemin="0" aria-valuemax="100"></div>
              </div>
            </div><!-- End Skills Item -->

            <div class="progress">
              <span class="skill"><span>Hébergement</span> <i class="val">90%</i></span>
              <div class="progress-bar-wrap">
                <div class="progress-bar" role="progressbar" aria-valuenow="90" aria-valuemin="0" aria-valuemax="100"></div>
              </div>
            </div>

            <div class="progress">
              <span class="skill"><span>Pentest sur réseau interne</span> <i class="val">55%</i></span>
              <div class="progress-bar-wrap">
                <div class="progress-bar" role="progressbar" aria-valuenow="55" aria-valuemin="0" aria-valuemax="100"></div>
              </div>
            </div>
          </div>

        </div>

      </div>

    </section>


    <section id="resume" class="resume section">

      <div class="container section-title" data-aos="fade-up">
        <h2>CV</h2>
      </div>

      <div class="container">
 <h3><p><a href="assets/img/cv.jpg" target="_blank">Voir mon CV</a></p> </h3>
</div>


            </div>

          </div>

        </div>

      </div>

    </section>


    <section id="portfolio" class="portfolio section light-background"><div class="container section-title" data-aos="fade-up"><h2>Portfolio</h2><p>Découvrez mes certificats et mes projets en réseau informatique et en cybersécurité.</p></div><!-- End Section Title -->
	
      <div class="container">

        <div class="isotope-layout" data-default-filter="*" data-layout="masonry" data-sort="original-order">

          
<ul class=\"portfolio-filters isotope-filters" data-aos="fade-up" data-aos-delay="100">
			<h3 data-filter=".filter-app">Certificat OpenClassroom</h3>
			<br>
				<p>
				  <a href="assets/openclassroom/seo.png" target="_blank" rel="noopener noreferrer">Augmentez votre traffic grâce au référencement naturel (SEO)</a>
				</p>
				<p>
				  <a href="assets/openclassroom/cm.png" target="_blank" rel="noopener noreferrer">Découvrez le métier de community manager</a>
				</p>
				<p>
				  <a href="assets/openclassroom/cyber.png" target="_blank" rel="noopener noreferrer">Découvrez l'univers de la cybersécurité</a>
				</p>
				<p>
				  <a href="assets/openclassroom/initlinux.png" target="_blank" rel="noopener noreferrer">Initiez-vous à Linux</a>
				</p>
				<p>
				  <a href="assets/openclassroom/sec.png" target="_blank" rel="noopener noreferrer">Découvrez les bases de la sécurité numérique</a>
				</p>
				<p>
				  <a href="assets/openclassroom/tcpip.png" target="_blank" rel="noopener noreferrer">Concevez votre réseau TCP/IP</a>
				</p>
				<p>
				  <a href="assets/openclassroom/btc.png" target="_blank" rel="noopener noreferrer">Comprendre le Bitcoin et la Blockchain</a>
				</p>



			<br>
			<h3 data-filter=".filter-app">Certificat TryHackMe</h3>
			<br>
			<p><a href="assets/img/cv.jpg" target="_blank">Voir mon CV</a></p>
			
			<br>
			<h3 data-filter=".filter-app">Classement TryHackMe</h3>
			<br>
			<iframe src="https://tryhackme.com/api/v2/badges/public-profile?userPublicId=2519562" style="border:none; margin: 0; padding: 0; width: 100%; height: 400px;"></iframe>
       
          </div>

        </div>

      </div>

    </section>

    <section id="services" class="services section">

	<div class="container section-title" data-aos="fade-up">
    <h2>Services</h2>
    <p>
        Découvrez mes services dans le domaine des systèmes et réseaux, incluant l'audit, la virtualisation, la gestion des infrastructures, 
        et le support technique. Étudiant passionné et motivé, je propose des solutions adaptées à vos besoins IT.
    </p>
</div>


<div class="container">

    <div class="row gy-4">
        <div class="col-lg-4 col-md-6 service-item d-flex" data-aos="fade-up" data-aos-delay="100">
            <div class="icon flex-shrink-0"><i class="bi bi-diagram-3"></i></div>
            <div>
                <p class="description">Identification des besoins et proposition d’améliorations pour des infrastructures simples.</p>
            </div>
        </div>
        <div class="col-lg-4 col-md-6 service-item d-flex" data-aos="fade-up" data-aos-delay="200">
            <div class="icon flex-shrink-0"><i class="bi bi-cloud-upload"></i></div>
            <div>
                <p class="description">Déploiement et gestion d'environnements virtualisés (Proxmox, VMware, Hyper-V).</p>
            </div>
        </div>
        <div class="col-lg-4 col-md-6 service-item d-flex" data-aos="fade-up" data-aos-delay="300">
            <div class="icon flex-shrink-0"><i class="bi bi-router"></i></div>
            <div>
                <p class="description">Installation, configuration et maintenance de réseaux locaux et équipements (switchs, routeurs, etc.).</p>
            </div>
        </div>
        <div class="col-lg-4 col-md-6 service-item d-flex" data-aos="fade-up" data-aos-delay="400">
            <div class="icon flex-shrink-0"><i class="bi bi-tools"></i></div>
            <div>
                <p class="description">Assistance pour la résolution de problèmes informatiques matériels et logiciels.</p>
            </div>
        </div>

    </div>
</div>


    </section>

    <section id="contact" class="contact section">
      <div class="container section-title" data-aos="fade-up">
        <h2>Contact</h2>
        <p>X</p>
      </div>
      <div class="container" data-aos="fade-up" data-aos-delay="100">

        <div class="row gy-4">

          <div class="col-lg-5">

            <div class="info-wrap">
              <div class="info-item d-flex" data-aos="fade-up" data-aos-delay="200">
                <div>
                </div>
              </div>


              <div class="info-item d-flex" data-aos="fade-up" data-aos-delay="400">
                <i class="bi bi-envelope flex-shrink-0"></i>
                <div>
                  <h3>Email</h3>
                  <p>lucas.lestiennes@gmail.com</p>
                </div>
              </div>
            </div>
          </div>

          <div class="col-lg-7">
            <form action="forms/contact.php" method="post" class="php-email-form" data-aos="fade-up" data-aos-delay="200">
              <div class="row gy-4">

                <div class="col-md-6">
                  <label for="name-field" class="pb-2">Votre nom</label>
                  <input type="text" name="name" id="name-field" class="form-control" required="">
                </div>

                <div class="col-md-6">
                  <label for="email-field" class="pb-2">Votre Email</label>
                  <input type="email" class="form-control" name="email" id="email-field" required="">
                </div>

                <div class="col-md-12">
                  <label for="subject-field" class="pb-2">Sujet</label>
                  <input type="text" class="form-control" name="subject" id="subject-field" required="">
                </div>

                <div class="col-md-12">
                  <label for="message-field" class="pb-2">Message</label>
                  <textarea class="form-control" name="message" rows="10" id="message-field" required=""></textarea>
                </div>

                <div class="col-md-12 text-center">
                  <div class="loading">Chargement</div>
                  <div class="error-message"></div>
                  <div class="sent-message">Votre message à été envoyé Merci !</div>

                  <button type="submit">Envoyer message</button>
                </div>

              </div>
            </form>
          </div>
        </div>

      </div>

    </section>

  </main>

  <a href="#" id="scroll-top" class="scroll-top d-flex align-items-center justify-content-center"><i class="bi bi-arrow-up-short"></i></a>

  <div id="preloader"></div>

  <script src="assets/vendor/bootstrap/js/bootstrap.bundle.min.js"></script>
  <script src="assets/vendor/php-email-form/validate.js"></script>
  <script src="assets/vendor/aos/aos.js"></script>
  <script src="assets/vendor/typed.js/typed.umd.js"></script>
  <script src="assets/vendor/purecounter/purecounter_vanilla.js"></script>
  <script src="assets/vendor/waypoints/noframework.waypoints.js"></script>
  <script src="assets/vendor/glightbox/js/glightbox.min.js"></script>
  <script src="assets/vendor/imagesloaded/imagesloaded.pkgd.min.js"></script>
  <script src="assets/vendor/isotope-layout/isotope.pkgd.min.js"></script>
  <script src="assets/vendor/swiper/swiper-bundle.min.js"></script>

  <script src="assets/js/main.js"></script>

</body>

</html>