From 61bf6c9288d204d0e30cc65808f0807935e7c53f Mon Sep 17 00:00:00 2001
From: Destroyeur6315 <romain.fillot630@gmail.com>
Date: Mon, 10 Jun 2024 10:51:24 +0200
Subject: [PATCH] update index.html

---
 Dockerfile |    3 -
 index.html | 1628 ++++++++--------------------------------------------
 2 files changed, 231 insertions(+), 1400 deletions(-)
diff --git a/Dockerfile b/Dockerfile
index f1ec84b..6919c09 100644
--- a/Dockerfile
+++ b/Dockerfile
@@ -7,9 +7,6 @@ COPY . /usr/share/nginx/html
 # Expose le port 80 pour que le serveur web soit accessible
 EXPOSE 80
 
-# Commande shell
-RUN ["ls", "-l", "/usr/share/nginx/html/images"]
-
 # Commande par défaut pour lancer Nginx en mode non-démon
 CMD ["nginx", "-g", "daemon off;"]
 
diff --git a/index.html b/index.html
index 35e21e4..339b2e2 100644
--- a/index.html
+++ b/index.html
@@ -1,1217 +1,158 @@
 <!DOCTYPE html>
 <html lang="en">
-
 <head>
-  <meta charset="UTF-8">
-  <meta name="viewport" content="width=device-width, initial-scale=1.0">
-  <title>Mon portfolio</title>
-  <link rel="stylesheet" href="style.css">
-
-  <style>
-    * {
-      margin: 0;
-      padding: 0;
-      box-sizing: border-box;
-      text-decoration: none;
-    }
-
-    html {
-      scroll-behavior: smooth;
-    }
-
-    ::-webkit-scrollbar {
-      width: 6px;
-    }
-
-    ::-webkit-scrollbar-track {
-      background: #f1f1f1;
-    }
-
-    .loader_bg {
-      position: fixed;
-      z-index: 9999999;
-      background: #fff;
-      width: 100%;
-      height: 100%;
-    }
-
-    .loader {
-      height: 100%;
-      width: 100%;
-      position: absolute;
-      left: 0;
-      top: 0;
-      display: flex;
-      justify-content: center;
-      align-items: center;
-    }
-
-    .loader img {
-      width: 280px;
-    }
-
-    ::-webkit-scrollbar-thumb {
-      border-radius: 12px;
-      background: linear-gradient(135deg, #1a6ad2, #fff, rgb(245, 5, 53));
-    }
-
-    /*  Simillar  */
-
-    section {
-      padding: 100px 0;
-    }
-
-    .max-width {
-      max-width: 1300px;
-      padding: 0 80px;
-      margin: auto;
-    }
-
-    .about,
-    .services,
-    .skills,
-    .projects,
-    .contact,
-    footer {
-      font-family: "Poppins", sans-serif;
-    }
-
-    .about .about-content,
-    .services .serv-content,
-    .skills .skills-content,
-    .contact .contact-content {
-      display: flex;
-      flex-wrap: wrap;
-      align-items: center;
-      justify-content: space-between;
-    }
-
-    section .title {
-      position: relative;
-      text-align: center;
-      font-size: 40px;
-      font-weight: 500;
-      margin-bottom: 60px;
-      padding-bottom: 20px;
-      font-family: "Ubuntu", sans-serif;
-    }
-
-    section .title::before {
-      content: "";
-      position: absolute;
-      bottom: 0px;
-      left: 50%;
-      width: 180px;
-      height: 3px;
-      transform: translateX(-50%);
-    }
-
-    section .title::after {
-      position: absolute;
-      bottom: -8px;
-      left: 50%;
-      font-size: 20px;
-      color: #1e3551;
-      padding: 0 5px;
-      transform: translateX(-50%);
-    }
-
-    /*  Navbar  */
-    .navbar {
-      position: fixed;
-      width: 100%;
-      z-index: 999;
-      padding: 30px 0;
-      font-family: "Ubuntu", sans-serif;
-      transition: all 0.3s ease;
-    }
-
-    .navbar.sticky {
-      padding: 15px 0;
-      background: #0f2e50;
-    }
-
-    .navbar .max-width {
-      display: flex;
-      align-items: center;
-      justify-content: space-between;
-    }
-
-    .navbar .logo a {
-      color: #fff;
-      font-size: 35px;
-      font-weight: 600;
-    }
-
-    /*  Nav Logo Span Linear-Gradient  */
-    .navbar .logo a span {
-      background: linear-gradient(135deg, #1d64c2, #fff, crimson);
-      -webkit-background-clip: text;
-      -webkit-text-fill-color: transparent;
-      transition: all 0.3s ease;
-    }
-
-    .navbar.sticky .logo a span {
-      color: #fff;
-    }
-
-    .navbar .menu li {
-      list-style: none;
-      display: inline-block;
-    }
-
-    .navbar .menu li a {
-      display: block;
-      color: #fff;
-      font-size: 18px;
-      font-weight: 500;
-      margin-left: 25px;
-      transition: color 0.3s ease;
-    }
-
-    .navbar .menu li a:hover {
-      color: #4587d7;
-    }
-
-    .navbar.sticky .menu li a:hover {
-      color: #fff;
-    }
-
-    /*  Menu Btn  */
-    .menu-btn {
-      color: #fff;
-      font-size: 23px;
-      cursor: pointer;
-      display: none;
-    }
-
-    .scroll-up-btn {
-      position: fixed;
-      height: 45px;
-      width: 42px;
-      background: #1e3551;
-      right: 30px;
-      bottom: 10px;
-      text-align: center;
-      line-height: 45px;
-      color: #fff;
-      z-index: 9999;
-      font-size: 30px;
-      border-radius: 6px;
-      border-bottom-width: 2px;
-      cursor: pointer;
-      opacity: 0;
-      pointer-events: none;
-      transition: all 0.3s ease;
-    }
-
-    .scroll-up-btn.show {
-      bottom: 30px;
-      opacity: 1;
-      pointer-events: auto;
-    }
-
-    .scroll-up-btn:hover {
-      filter: brightness(90%);
-    }
-
-    /*  Home  */
-    .home {
-      display: flex;
-      background: url("./images/3409297.jpg") no-repeat center;
-      height: 100vh;
-      color: #fff;
-      min-height: 500px;
-      background-size: cover;
-      background-attachment: fixed;
-      font-family: "Ubuntu", sans-serif;
-      /* background-color: black; */
-    }
-
-    .home .max-width {
-      width: 100%;
-      display: flex;
-    }
-
-    .home .max-width .row {
-      margin-right: 0;
-    }
-
-    .home .home-content .text-1 {
-      font-size: 27px;
-    }
-
-    .home .home-content .text-2 {
-      font-size: 75px;
-      font-weight: 600;
-      margin-left: -3px;
-    }
-
-    .home .home-content .text-3 {
-      font-size: 40px;
-      margin: 5px 0;
-    }
-
-    /* Linear Gradient */
-    .home .home-content .text-3 span {
-      color: #1e3551;
-      background: linear-gradient(135deg, #041d3d, #fff, crimson);
-      -webkit-background-clip: text;
-      -webkit-text-fill-color: transparent;
-      font-weight: 500;
-    }
-
-    .home .home-content a {
-      display: inline-block;
-      background: #1e3551;
-      color: #fff;
-      font-size: 25px;
-      padding: 12px 36px;
-      margin-top: 20px;
-      font-weight: 400;
-      border-radius: 6px;
-      border: 2px solid #1e3551;
-      transition: all 0.3s ease;
-    }
-
-    .home .home-content a:hover {
-      /* color: w; */
-      /* background: none; */
-      /* animation: pulsate 1s ease-in-out; */
-      color: #1e3551;
-      background: rgb(240, 246, 254);
-    }
-
-    /*  About  */
-    .about {
-      background: radial-gradient(#e1efff, white);
-    }
-
-    .about .title::after {
-      content: "—Qui suis-je ?—";
-      text-overflow: ellipsis;
-      display: -webkit-inline-box;
-      -webkit-line-clamp: 3;
-      -webkit-box-orient: vertical;
-    }
-
-    .about .about-content .left {
-      width: 45%;
-    }
-
-    .about .about-content .left img {
-      height: 400px;
-      width: 400px;
-      object-fit: cover;
-      border-radius: 6px;
-    }
-
-    .about .about-content .right {
-      width: 55%;
-    }
-
-    .about .about-content .right .text {
-      font-size: 25px;
-      font-weight: 600;
-      margin-bottom: 10px;
-    }
-
-    /* Linear Gradiant */
-    .about .about-content .right .text span {
-      /* color: #1e3551; */
-      background: linear-gradient(135deg, #041d3d, #fff, crimson);
-      -webkit-background-clip: text;
-      -webkit-text-fill-color: transparent;
-    }
-
-    .about .about-content .right p {
-      text-align: justify;
-    }
-
-    .about .about-content .right a {
-      display: inline-block;
-      background: #1e3551;
-      color: #fff;
-      font-size: 20px;
-      font-weight: 500;
-      padding: 10px 30px;
-      margin-top: 20px;
-      border-radius: 6px;
-      border: 2px solid #1e3551;
-      transition: all 0.3s ease;
-    }
-
-    .about .about-content .right a:hover {
-      color: #1e3551;
-      background: none;
-      /* animation: pulsate 1s ease-in-out; */
-    }
-
-    /*  Service  */
-    .carousel-container {
-      position: relative;
-      width: 90%;
-      /* max-width: 600px; */
-      margin-bottom: 20px;
-    }
-
-    .carousel-slide {
-      display: none;
-      text-align: center;
-      background: #222;
-      padding: 20px;
-      border-radius: 10px;
-      min-height: 200px;
-      box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
-    }
-
-    .carousel-slide h2 {
-      margin-bottom: 20px;
-    }
-
-    .carousel-container-img {
-      display: flex;
-    }
-
-    .carousel-img {
-      width: 40%;
-    }
-
-    .carousel-text {
-      width: 60%;
-      text-align: start;
-      padding-left: 20px;
-      font-size: 1.2em;
-    }
-
-    .carousel-slide.active {
-      display: block;
-    }
-
-    .carousel-buttons {
-      display: flex;
-      justify-content: center;
-    }
-
-    .carousel-buttons button {
-      background-color: #2e72c4;
-      color: white;
-      border: none;
-      padding: 10px 20px;
-      margin: 0 5px;
-      cursor: pointer;
-      border-radius: 5px;
-    }
-
-    .carousel-buttons button:hover {
-      background-color: #0056b3;
-    }
-
-    .services,
-    .projects {
-      color: #fff;
-      background: #0f2e50;
-    }
-
-    .services .title::before,
-    .projects .title::before {
-      background: #fff;
-    }
-
-    .services .max-width {
-      display: flex;
-      flex-direction: column;
-      align-items: center;
-      /* justify-content: center; */
-    }
-
-    /* 
-.services .title::after,
-.projects .title::after {
-  background: #111;
-  content: "What I Provide ?";
-} */
-
-    .services .serv-content .card {
-      width: calc(33% - 20px);
-      background: #222;
-      text-align: center;
-      border-radius: 10px;
-      padding: 50px 25px;
-      cursor: pointer;
-      transition: all 0.3s ease;
-    }
-
-    .services .serv-content .card:hover {
-      background: #1e3551;
-    }
-
-    .services .serv-content .card .box {
-      transition: all 0.3s ease;
-    }
-
-    .services .serv-content .card:hover .box {
-      transform: scale(1.05);
-    }
-
-    .services .serv-content .card i {
-      font-size: 50px;
-      color: #888e8d;
-      background: linear-gradient(135deg, #041d3d, #fff, crimson);
-      -webkit-background-clip: text;
-      -webkit-text-fill-color: transparent;
-      transition: color 0.3s ease;
-    }
-
-    .services .serv-content .card:hover i {
-      color: #fff;
-    }
-
-    .services .serv-content .card .text {
-      font-size: 25px;
-      font-weight: 500;
-      margin: 10px 0 7px 0;
-    }
-
-    /*  Skills  */
-    .skills {
-      background: radial-gradient(#e1efff, white);
-    }
-
-    .skills .title::after {
-      content: "—What I Know ?—";
-    }
-
-    .skills .skills-content .column {
-      width: calc(50% - 30px);
-    }
-
-    .skills .skills-content .left .text {
-      font-size: 20px;
-      font-weight: 600;
-      margin-bottom: 10px;
-    }
-
-    .skills .skills-content .left p {
-      text-align: justify;
-    }
-
-    .skills .skills-content .left a {
-      display: inline-block;
-      background: #1e3551;
-      color: #fff;
-      font-size: 18px;
-      font-weight: 500;
-      padding: 8px 16px;
-      margin-top: 20px;
-      border-radius: 6px;
-      border: 2px solid #1e3551;
-      transition: all 0.3s ease;
-    }
-
-    .skills .skills-content .left a:hover {
-      color: #1e3551;
-      background: none;
-      animation: pulsate 1s ease-in-out;
-    }
-
-    .intern,
-    .project {
-      list-style: none;
-    }
-
-    .intern::before,
-    .project::before {
-      content: "✪ ";
-      color: #1e3551;
-    }
-
-    .skills .skills-content .right .bars {
-      margin-bottom: 15px;
-    }
-
-    .skills .skills-content .right .info {
-      display: flex;
-      margin-bottom: 5px;
-      align-items: center;
-      justify-content: space-between;
-    }
-
-    .skills .skills-content .right span {
-      font-weight: 500;
-      font-size: 18px;
-    }
-
-    .skills .skills-content .right .line {
-      height: 5px;
-      width: 100%;
-      background: lightgrey;
-      position: relative;
-    }
-
-    .skills .skills-content .right .line::before {
-      content: "";
-      position: absolute;
-      height: 100%;
-      left: 0;
-      top: 0;
-      background: #1e3551;
-    }
-
-    .skills-content .right .python::before {
-      width: 90%;
-    }
-
-    .skills-content .right .html::before {
-      width: 80%;
-    }
-
-    .skills-content .right .css::before {
-      width: 60%;
-    }
-
-    .skills-content .right .js::before {
-      width: 40%;
-    }
-
-    .skills-content .right .bootstraps::before {
-      width: 60%;
-    }
-
-    .skills-content .right .django::before {
-      width: 70%;
-    }
-
-    /*  Projects  */
-    .projects .title::after {
-      content: "What I did ?";
-    }
-
-    .projects .carousel .card {
-      background: #222;
-      border-radius: 6px;
-      padding: 25px 35px;
-      text-align: center;
-      overflow: hidden;
-      transition: all 0.3s ease;
-    }
-
-    .projects .carousel .card:hover {
-      background: #1e3551;
-    }
-
-    .projects .carousel .card .box {
-      display: flex;
-      flex-direction: column;
-      align-items: center;
-      justify-content: center;
-      transition: all 0.3s ease;
-    }
-
-    .projects .carousel .card:hover .box {
-      transform: scale(1.05);
-    }
-
-    .projects .carousel .card .text {
-      font-size: 25px;
-      font-weight: 500;
-      margin: 10px 0 7px 0;
-    }
-
-    .projects .carousel .card img {
-      height: 150px;
-      width: 150px;
-      object-fit: cover;
-      border-radius: 50%;
-      border: 5px solid #888c8d;
-      transition: all 0.3s ease;
-    }
-
-    .projects .carousel .card:hover img {
-      border-color: #fff;
-    }
-
-    .owl-dots {
-      text-align: center;
-      margin-top: 20px;
-    }
-
-    .owl-dot {
-      height: 13px;
-      width: 13px;
-      margin: 0 5px;
-      outline: none !important;
-      border-radius: 50%;
-      border: 2px solid #888c8d !important;
-      transition: all 0.3s ease;
-    }
-
-    .owl-dot.active {
-      width: 35px;
-      border-radius: 14px;
-    }
-
-    .owl-dot.active,
-    .owl-dot:hover {
-      background: #18365a !important;
-    }
-
-    /*  Contact  */
-    .contact {
-      background: radial-gradient(#e1efff, white);
-    }
-
-    .contact .title::after {
-      content: "—Entrer en contact—";
-    }
-
-    .contact .contact-content .column {
-      width: calc(50% - 30px);
-    }
-
-    .contact .contact-content .text {
-      font-size: 20px;
-      font-weight: 600;
-      margin-bottom: 10px;
-    }
-
-    .contact .contact-content .left p {
-      text-align: justify;
-    }
-
-    .contact .contact-content .left .icons {
-      margin: 10px 0;
-    }
-
-    .contact .contact-content .row {
-      display: flex;
-      height: 65px;
-      align-items: center;
-    }
-
-    .contact .contact-content .row .info {
-      margin-left: 30px;
-    }
-
-    .contact .contact-content .row i {
-      font-size: 25px;
-      color: #1e3551;
-    }
-
-    .contact .contact-content .info .head {
-      font-weight: 500;
-      color: #000;
-    }
-
-    .contact .contact-content .info .sub-title {
-      color: #333;
-    }
-
-    .contact .right form .fields {
-      display: flex;
-    }
-
-    .contact .right form .field,
-    .contact .right form .fields .field {
-      height: 45px;
-      width: 100%;
-      margin-bottom: 15px;
-    }
-
-    .contact .right form .textarea {
-      height: 80px;
-      width: 100%;
-    }
-
-    .contact .right form .name {
-      margin-right: 10px;
-    }
-
-    .contact .right form .field input,
-    .contact .right form .textarea textarea {
-      height: 100%;
-      width: 100%;
-      border: 1px solid lightgrey;
-      border-radius: 6px;
-      outline: none;
-      padding: 0 15px;
-      font-size: 17px;
-      font-family: "Poppins", sans-serif;
-      transition: all 0.3s ease;
-    }
-
-    .contact .right form .field input:focus,
-    .contact .right form .textarea textarea:focus {
-      border-color: #b3b3b3;
-    }
-
-    .contact .right form .textarea textarea {
-      padding-top: 10px;
-      resize: none;
-    }
-
-    .contact .right form .button-area {
-      display: flex;
-      align-items: center;
-    }
-
-    .right form .button-area button {
-      color: #fff;
-      display: block;
-      width: 160px !important;
-      height: 45px;
-      outline: none;
-      font-size: 18px;
-      font-weight: 500;
-      border-radius: 6px;
-      cursor: pointer;
-      flex-wrap: nowrap;
-      background: #1e3551;
-      border: 2px solid #1e3551;
-      transition: all 0.3s ease;
-    }
-
-    .right form .button-area button:hover {
-      color: #1e3551;
-      background: none;
-      /* animation: pulsate 1s ease-in-out; */
-    }
-
-    /*  Social  */
-    .col-4 {
-      background: #d8d8d8;
-    }
-
-    .social-menu ul {
-      position: absolute;
-      left: 20%;
-      padding: 0;
-      margin-top: 35px;
-      transform: translate(-50%, -50%);
-      display: flex;
-    }
-
-    .social-menu ul li {
-      list-style: none;
-      margin: 0 15px;
-    }
-
-    .social-menu ul li .fa {
-      font-size: 30px;
-      line-height: 60px;
-      transition: 0.6s;
-      color: #000;
-    }
-
-    .social-menu ul li .fa:hover {
-      color: #fff;
-    }
-
-    .social-menu ul li a {
-      left: px;
-      right: 12px;
-      padding-top: 3px;
-      position: relative;
-      display: block;
-      width: 30px;
-      height: 30px;
-      border-radius: 50%;
-      background-color: #1e3551;
-      text-align: center;
-      transition: 0.6s;
-      box-shadow: 0 5px 4px rgba(0, 0, 0, 0.5);
-    }
-
-    .social-menu ul li a:hover {
-      transform: translate(0, -10px);
-    }
-
-    .social-menu ul li:nth-child(1) a:hover {
-      background-color: #131418;
-    }
-
-    .social-menu ul li:nth-child(2) a:hover {
-      background-color: #0a66c2;
-    }
-
-    .social-menu ul li:nth-child(3) a:hover {
-      background-color: #e4405f;
-    }
-
-    .social-menu ul li:nth-child(4) a:hover {
-      background-color: #1da1f2;
-    }
-
-    .social-menu ul li:nth-child(5) a:hover {
-      background-color: #e33054;
-    }
-
-    .social-menu ul li:nth-child(6) a:hover {
-      background-color: #fc4f08;
-    }
-
-    .fa-brands {
-      color: #fff;
-    }
-
-    .fa-solid {
-      color: #fff;
-    }
-
-    .reach {
-      margin-top: 50px;
-    }
-
-    /*  Footer  */
-    footer {
-      background: #0f2e50;
-      color: #888c8d;
-      text-align: center;
-      padding-top: 15px;
-      padding-bottom: 15px;
-      padding-left: 10px;
-      padding-right: 10px;
-    }
-
-    footer span a {
-      color: white;
-      text-decoration: none;
-    }
-
-    footer span a:hover {
-      text-decoration: underline;
-    }
-
-    /*  Media Query  */
-    @keyframes pulsate {
-      0% {
-        box-shadow: 0 0 25px #888e8d, 0 0 50px #1e3551;
-      }
-    }
-
-    @media (max-width: 1104px) {
-      .about .about-content .left img {
-        height: 350px;
-        width: 350px;
-      }
-
-      section .title::after {
-        bottom: -8px;
-        font-size: 16px;
-      }
-    }
-
-    @media (max-width: 991px) {
-      .social-menu ul li a {
-        left: 114px;
-      }
-    }
-
-    @media (max-width: 947px) {
-      .menu-btn {
-        display: block;
-        z-index: 999;
-      }
-
-      .menu-btn i.active:before {
-        content: "\f00d";
-      }
-
-      .navbar .menu {
-        position: fixed;
-        height: 100vh;
-        width: 100%;
-        left: -100%;
-        top: 0;
-        background: #111;
-        text-align: center;
-        padding-top: 80px;
-        transition: all 0.3s ease;
-      }
-
-      .navbar .menu.active {
-        left: 0;
-      }
-
-      .navbar .menu li {
-        display: block;
-      }
-
-      .navbar .menu li a {
-        display: inline-block;
-        margin: 20px 0;
-        font-size: 25px;
-      }
-
-      .home .home-content .text-2 {
-        font-size: 70px;
-      }
-
-      .home .home-content .text-3 {
-        font-size: 35px;
-      }
-
-      .home .home-content a {
-        font-size: 23px;
-        padding: 10px 30px;
-      }
-
-      .max-width {
-        max-width: 930px;
-      }
-
-      .about .about-content .column {
-        width: 100%;
-      }
-
-      .about .about-content .left {
-        display: flex;
-        justify-content: center;
-        margin: 0 auto 60px;
-      }
-
-      .about .about-content .right {
-        flex: 100%;
-      }
-
-      .services .serv-content .card {
-        width: calc(50% - 10px);
-        margin-bottom: 20px;
-      }
-
-      .skills .skills-content .column,
-      .contact .contact-content .column {
-        width: 100%;
-        margin-bottom: 35px;
-      }
-
-      .carousel-container-img {
-        display: flex;
-        flex-direction: column;
-      }
-
-      .carousel-img {
-        width: 100%;
-      }
-
-      .carousel-text {
-        width: 100%;
-        text-align: justify;
-        padding-left: 0px;
-        font-size: 1.2em;
-        padding-top: 20px;
-      }
-    }
-
-    @media (max-width: 690px) {
-      .max-width {
-        padding: 0 23px;
-      }
-
-      .home .home-content .text-2 {
-        font-size: 60px;
-      }
-
-      .home .home-content .text-3 {
-        font-size: 32px;
-      }
-
-      .home .home-content a {
-        font-size: 20px;
-      }
-
-      .services .serv-content .card {
-        width: 100%;
-      }
-    }
-
-    @media (max-width: 500px) {
-      .home .home-content .text-2 {
-        font-size: 50px;
-      }
-
-      .home .home-content .text-3 {
-        font-size: 27px;
-      }
-
-      .about .about-content .right .text,
-      .skills .skills-content .left .text {
-        font-size: 19px;
-      }
-
-      .contact .right form .fields {
-        flex-direction: column;
-      }
-
-      .contact .right form .name,
-      .contact .right form .email {
-        margin: 0;
-      }
-
-      .right form .error-box {
-        width: 150px;
-      }
-
-      .scroll-up-btn {
-        right: 15px;
-        bottom: 15px;
-        height: 38px;
-        width: 35px;
-        font-size: 23px;
-        line-height: 38px;
-      }
-    }
-  </style>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Mon portfolio</title>
+    <link rel="stylesheet" href="style.css">
 
 </head>
-
 <body>
-  <div class="scroll-up-btn">
-    <i class="fas fa-angle-up"></i>
-  </div>
-
-  <!-- Header -->
-  <nav class="navbar">
-    <div class="max-width">
-      <div class="logo"><a href="#"><span>romain-fillot.fr</span><span></span></a></div>
-      <ul class="menu">
-        <li><a href="#home" class="menu-btn"><strong>Accueil</strong></a></li>
-        <li><a href="#about" class="menu-btn"><strong>A propos</strong></a></li>
-        <li><a href="#services" class="menu-btn"><strong>Expériences</strong></a></li>
-        <li><a href="#contact" class="menu-btn"><strong>Contact</strong></a></li>
-      </ul>
-      <div class="menu-btn">
-        <i class="fas fa-bars"></i>
-      </div>
+    <div class="scroll-up-btn">
+      <i class="fas fa-angle-up"></i>
     </div>
-  </nav>
-
-  <!-- Home -->
-  <section class="home" id="home">
-    <div class="max-width">
-      <div class="home-content">
-        <div class="text-1">Bonjour, Je m'appelle</div>
-        <div class="text-2">Fillot Romain</div>
-        <div class="text-3">Et je suis alternant en informatique <span class="typing"></span></div>
-        <a href="#about">A propos de moi</a>
-      </div>
-    </div>
-  </section>
-
-  <!--  About  -->
-  <section class="about" id="about">
-    <div class="max-width">
-      <h2 class="title">A propos de moi</h2>
-      <div class="about-content">
-        <div class="column left">
-          <img src="./images/picture-profil_2.jpg" alt="Profile Image 626x626">
+  
+    <!-- Header -->
+    <nav class="navbar">
+      <div class="max-width">
+        <div class="logo"><a href="#"><span>romain-fillot.fr</span><span></span></a></div>
+        <ul class="menu">
+          <li><a href="#home" class="menu-btn"><strong>Accueil</strong></a></li>
+          <li><a href="#about" class="menu-btn"><strong>A propos</strong></a></li>
+          <li><a href="#services" class="menu-btn"><strong>Expériences</strong></a></li>
+          <li><a href="#contact" class="menu-btn"><strong>Contact</strong></a></li>
+        </ul>
+        <div class="menu-btn">
+          <i class="fas fa-bars"></i>
         </div>
-        <div class="column right">
-          <div class="text">Moi c'est Romain <span class="typing-2"></span></div>
-          <p>
-            Passionné d'informatique, j'ai découvert ce domaine lors de ma première année de lycée,
-            en seconde. En effet, j'ai opté pour l'option ICN qui m'a permis de faire mon premier
-            pas dans ce monde fabuleux. J'ai pu y découvrir les bases du fonctionnement d'un ordinateur
-            ainsi que le langage python.
-            <br><br>
-            J'ai beaucoup apprécié cette option, qui m'est apparue dans un premier temps très
-            obscure et compliquée. Néanmoins, cela n'a pas suffi pour me décourager étant donné
-            que je suis en 3e année d'IUT informatique. Bien entendu, je ne m'arrête pas en si bon chemin. L'année
-            prochaine, c'est parti pour deux ans supplémentaires en
-            Mastère informatique à l'école Hexagone. Cette fois-ci, je me spécialise un peu en me
-            tournant vers la filière "Architecture des Systèmes d'information".
-            <br><br>
-            Pendant mon temps libre je ne fais pas que de l'informatique. J'aime beaucoup le sport
-            (pratiquant de musculation depuis presque 6 ans), je sors souvent avec mes ami(e)s et
-            je m'intéresse depuis peu à deux nouveaux domaines qui me passionnent : les
-            cryptomonnaies avec tout ce qui se cache derrière (NFT, blockchain, DeFi...) et les
-            voitures (vieilles voitures, mécanique...).
-          </p>
-          <br>
-          <a href="CV-RomainFillot.pdf" target="blank" download>Télécharger CV</a>
+      </div>
+    </nav>
+  
+    <!-- Home -->
+    <section class="home" id="home">
+      <div class="max-width">
+        <div class="home-content">
+          <div class="text-1">Bonjour, Je m'appelle</div>
+          <div class="text-2">Fillot Romain</div>
+          <div class="text-3">Et je suis alternant en informatique <span class="typing"></span></div>
+          <a href="#about">A propos de moi</a>
         </div>
       </div>
-    </div>
-  </section>
-
-  <!-- Services -->
-  <section class="services" id="services">
-    <div class="max-width">
-      <h2 class="title">Mes expériences</h2>
-      <!-- <div class="serv-content"> -->
-      <div class="carousel-container">
-        <div class="carousel-slide active" id="slide-1">
-          <h2>Stage au Canada</h2>
-          <div class="carousel-container-img">
-            <div class="carousel-img">
-              <img src="./images/UQAC.png" style="width: 100%; border-radius: 15px;">
-            </div>
-            <div class="carousel-text">
-              J'ai réalisé mon premiers stage au canada
-              à l'UQAC d'une durée de 2 mois. Ce projet consistait en la reconnaissance de geste
-              de cuisine à l'aide d'un bracelet polar et d'un modèle d'apprentissage.
-              <br><br>
-              Je l'ai réalisé
-              avec un camarade de l'iut. J'ai énormément apprécié ce projet car j'ai été confronté à
-              des problèmes réels liés à la qualité des données, à leur traitement et à
-              leur interprétation, ce qui explique l'utilisation du langage Python ainsi que
-              de la bibliothèque auto_sklearn. Ce stage m'a fait découvrir une véritable passion pour
-              l'analyse et la gestion des données, ainsi que pour l'intelligence artificielle avec
-              l'apprentissage automatique.
-            </div>
+    </section>
+  
+    <!--  About  -->
+    <section class="about" id="about">
+      <div class="max-width">
+        <h2 class="title">A propos de moi</h2>
+        <div class="about-content">
+          <div class="column left">
+            <img src="./images/picture-profil_2.jpg" alt="Profile Image 626x626">
           </div>
-        </div>
-        <div class="carousel-slide" id="slide-2">
-          <h2>Alternance chez Matussière Toiles</h2>
-          <div class="carousel-container-img">
-            <div class="carousel-img">
-              <img src="./images/store-toile.png" style="width: 100%; border-radius: 15px;">
-            </div>
-            <div class="carousel-text">
-              Ma deuxième expérience, plus professionnalisante est ma 3 ème année d'IUT
-              informatique que je réalise actuellement en alternance chez Matussière-toiles. Cette
-              entreprise est spécialisée dans la production et la distribution de protection solaire extérieure.
-              Pour vendre leur produit, ils utilisent un site internet.
+          <div class="column right">
+            <div class="text">Moi c'est Romain <span class="typing-2"></span></div>
+            <p>
+              Passionné d'informatique, j'ai découvert ce domaine lors de ma première année de lycée, 
+              en seconde. En effet, j'ai opté pour l'option ICN qui m'a permis de faire mon premier 
+              pas dans ce monde fabuleux. J'ai pu y découvrir les bases du fonctionnement d'un ordinateur 
+              ainsi que le langage python.
               <br><br>
-              Ma mission d'alternance consiste en la refonte du site web car il n'est plus au goût du jour et ne
-              peut se positionner face à la concurrence. Pour mener à bien ce projet, j'utilise
-              les langages tels que PHP, JavaScript et HTML/CSS. Etant seul à piloter le projet,
-              je dois faire preuve d'autonomie et de sérieux.
-            </div>
-          </div>
-        </div>
-        <div class="carousel-slide" id="slide-3">
-          <h2>Vendeur chez E.Leclerc</h2>
-          <div class="carousel-container-img">
-            <div class="carousel-img">
-              <img src="./images/leclerc.png" style="width: 100%; border-radius: 15px;">
-            </div>
-            <div class="carousel-text">
-              J'ai eu l'occasion de travailler plusieurs fois chez E. Leclerc en tant
-              que vendeur. Mon premier emploi remonte à 2022, où j'ai passé un mois au
-              rayon traiteur. Cette expérience a été extrêmement enrichissante, notamment
-              en termes de communication et d'autonomie. Dès la première semaine, j'ai dû
-              gérer le stand seul pendant plusieurs heures. Il était également nécessaire
-              d'être attentif aux besoins des clients pour leur offrir le meilleur service.
+              J'ai beaucoup apprécié cette option, qui m'est apparue dans un premier temps très 
+              obscure et compliquée. Néanmoins, cela n'a pas suffi pour me décourager étant donné 
+              que je suis en 3e année d'IUT informatique. Bien entendu, je ne m'arrête pas en si bon chemin. L'année prochaine, c'est parti pour deux ans supplémentaires en 
+              Mastère informatique à l'école Hexagone. Cette fois-ci, je me spécialise un peu en me 
+              tournant vers la filière "Architecture des Systèmes d'information".
               <br><br>
-              Ma deuxième expérience a eu lieu à la fin de 2023, pendant la période de Noël,
-              où j'ai alterné entre le rayon de la poissonnerie et celui de la saurisserie.
-              J'ai dû m'adapter rapidement et démontrer ma capacité
-              à agir de manière autonome.
-            </div>
+              Pendant mon temps libre je ne fais pas que de l'informatique. J'aime beaucoup le sport 
+              (pratiquant de musculation depuis presque 6 ans), je sors souvent avec mes ami(e)s et 
+              je m'intéresse depuis peu à deux nouveaux domaines qui me passionnent : les 
+              cryptomonnaies avec tout ce qui se cache derrière (NFT, blockchain, DeFi...) et les 
+              voitures (vieilles voitures, mécanique...).
+            </p>
+            <br>
+            <a href="CV-RomainFillot.pdf" target="blank" download>Télécharger CV</a>
           </div>
         </div>
       </div>
-      <div class="carousel-buttons">
-        <button onclick="showSlide(1)">1</button>
-        <button onclick="showSlide(2)">2</button>
-        <button onclick="showSlide(3)">3</button>
+    </section>
+  
+    <!-- Services -->
+    <section class="services" id="services">
+      <div class="max-width">
+        <h2 class="title">Mes expériences</h2>
+        <!-- <div class="serv-content"> -->
+            <div class="carousel-container">
+                <div class="carousel-slide active" id="slide-1">
+                    <h2>Stage au Canada</h2>
+                    <div class="carousel-container-img">
+                        <div class="carousel-img">
+                            <img src="./images/UQAC.png" style="width: 100%; border-radius: 15px;">
+                        </div>
+                        <div class="carousel-text">
+                            J'ai réalisé mon premiers stage au canada
+                            à l'UQAC d'une durée de 2 mois. Ce projet consistait en la reconnaissance de geste 
+                            de cuisine à l'aide d'un bracelet polar et d'un modèle d'apprentissage.
+                            <br><br>
+                            Je l'ai réalisé
+                            avec un camarade de l'iut. J'ai énormément apprécié ce projet car j'ai été confronté à 
+                            des problèmes réels liés à la qualité des données, à leur traitement et à 
+                            leur interprétation, ce qui explique l'utilisation du langage Python ainsi que 
+                            de la bibliothèque auto_sklearn. Ce stage m'a fait découvrir une véritable passion pour 
+                            l'analyse et la gestion des données, ainsi que pour l'intelligence artificielle avec 
+                            l'apprentissage automatique. 
+                        </div>
+                    </div>  
+                </div>
+                <div class="carousel-slide" id="slide-2">
+                    <h2>Alternance chez Matussière Toiles</h2>
+                    <div class="carousel-container-img">
+                        <div class="carousel-img">
+                            <img src="./images/store-toile.png" style="width: 100%; border-radius: 15px;">
+                        </div>
+                        <div class="carousel-text">
+                            Ma deuxième expérience, plus professionnalisante est ma 3 ème année d'IUT 
+                            informatique que je réalise actuellement en alternance chez Matussière-toiles. Cette 
+                            entreprise est spécialisée dans la production et la distribution de protection solaire extérieure. 
+                            Pour vendre leur produit, ils utilisent un site internet.
+                            <br><br>
+                            Ma mission d'alternance consiste en la refonte du site web car il n'est plus au goût du jour et ne 
+                            peut se positionner face à la concurrence. Pour mener à bien ce projet, j'utilise
+                            les langages tels que PHP, JavaScript et HTML/CSS. Etant seul à piloter le projet,
+                            je dois faire preuve d'autonomie et de sérieux.
+                        </div>
+                    </div> 
+                </div>
+                <div class="carousel-slide" id="slide-3">
+                    <h2>Vendeur chez E.Leclerc</h2>
+                    <div class="carousel-container-img">
+                        <div class="carousel-img">
+                            <img src="./images/leclerc.png" style="width: 100%; border-radius: 15px;">
+                        </div>
+                        <div class="carousel-text">
+                          J'ai eu l'occasion de travailler plusieurs fois chez E. Leclerc en tant 
+                          que vendeur. Mon premier emploi remonte à 2022, où j'ai passé un mois au
+                          rayon traiteur. Cette expérience a été extrêmement enrichissante, notamment 
+                          en termes de communication et d'autonomie. Dès la première semaine, j'ai dû 
+                          gérer le stand seul pendant plusieurs heures. Il était également nécessaire 
+                          d'être attentif aux besoins des clients pour leur offrir le meilleur service.
+                          <br><br>
+                          Ma deuxième expérience a eu lieu à la fin de 2023, pendant la période de Noël,
+                          où j'ai alterné entre le rayon de la poissonnerie et celui de la saurisserie. 
+                          J'ai dû m'adapter rapidement et démontrer ma capacité 
+                          à agir de manière autonome.
+                        </div>
+                    </div> 
+                </div>
+            </div>
+            <div class="carousel-buttons">
+                <button onclick="showSlide(1)">1</button>
+                <button onclick="showSlide(2)">2</button>
+                <button onclick="showSlide(3)">3</button>
+            </div>
       </div>
-    </div>
-  </section>
-
-  <!-- Skills -->
-  <!-- <section class="skills" id="skills">
+    </section>
+  
+    <!-- Skills -->
+    <!-- <section class="skills" id="skills">
       <div class="max-width">
         <h2 class="title">My Skills</h2>
         <div class="skills-content">
@@ -1291,9 +232,9 @@
         </div>
       </div>
     </section> -->
-
-  <!-- Projects -->
-  <!-- <section class="projects" id="projects">
+  
+    <!-- Projects -->
+    <!-- <section class="projects" id="projects">
       <div class="max-width">
         <h2 class="title">My Projects</h2>
         <div class="carousel owl-carousel">
@@ -1342,213 +283,106 @@
         </div>
       </div>
     </section> -->
-
-  <!-- Contact -->
-  <section class="contact" id="contact">
-    <div class="max-width">
-      <h2 class="title">Me contacter</h2>
-      <div class="contact-content">
-        <div class="column left">
-          <div class="text">Entrer en contact</div>
-          <p>
-            N'hésitez pas à me contacter ! Je suis ouvert à toute discussion et ce serait avec
-            plaisir d'échanger avec des passionnés.
-          </p>
-          <div class="icons">
-
-            <a href="https://instagram.com/aistscience">
+  
+    <!-- Contact -->
+    <section class="contact" id="contact">
+      <div class="max-width">
+        <h2 class="title">Me contacter</h2>
+        <div class="contact-content">
+          <div class="column left">
+            <div class="text">Entrer en contact</div>
+            <p> 
+                N'hésitez pas à me contacter ! Je suis ouvert à toute discussion et ce serait avec
+                plaisir d'échanger avec des passionnés.
+            </p>
+            <div class="icons">
+  
+              <a href="https://instagram.com/aistscience">
+                <div class="row">
+                  <i class="fa-solid fa-user-large"></i>
+                  <div class="info">
+                    <div class="head">Nom</div>
+                    <div class="sub-title"><a href="https://aistechx.com/" style="text-decoration: none; color: #333;"> Fillot Romain</a></div>
+                  </div>
+                </div>
+              </a>
+  
               <div class="row">
-                <i class="fa-solid fa-user-large"></i>
+                <i class="fa-solid fa-location-dot"></i>
                 <div class="info">
-                  <div class="head">Nom</div>
-                  <div class="sub-title"><a href="https://aistechx.com/" style="text-decoration: none; color: #333;">
-                      Fillot Romain</a></div>
+                  <div class="head">&nbsp;Adresse</div>
+                  <div class="sub-title">&nbsp;Clermont-Ferrand</div>
                 </div>
               </div>
-            </a>
-
-            <div class="row">
-              <i class="fa-solid fa-location-dot"></i>
-              <div class="info">
-                <div class="head">&nbsp;Adresse</div>
-                <div class="sub-title">&nbsp;Clermont-Ferrand</div>
+  
+              <div class="row">
+                <i class="fa-solid fa-envelope"></i>
+                <div class="info">
+                  <div class="head">Email</div>
+                  <div class="sub-title"><a href="mailto:#" style="text-decoration: none; color: #333;">romain.fillot630@gmail.com</a></div>
+                </div>
               </div>
-            </div>
-
-            <div class="row">
-              <i class="fa-solid fa-envelope"></i>
-              <div class="info">
-                <div class="head">Email</div>
-                <div class="sub-title"><a href="mailto:#"
-                    style="text-decoration: none; color: #333;">romain.fillot630@gmail.com</a></div>
+  
+              <div class="row">
+                <i class="fa-solid fa-globe"></i>
+                <div class="info">
+                  <div class="head">Langue</div>
+                  <div class="sub-title">Anglais opérationnel</div>
+                </div>
               </div>
-            </div>
-
-            <div class="row">
-              <i class="fa-solid fa-globe"></i>
-              <div class="info">
-                <div class="head">Langue</div>
-                <div class="sub-title">Anglais opérationnel</div>
+            
+              <br>
+
+              <!-- Social -->
+              <div class="social-menu">
+                <ul>
+                  <li><a href="https://github.com/Destroyeur6315"><i class="fa-brands fa-github"></i></a></li>
+                  <li><a href="https://www.linkedin.com/in/romain-fillot/"><i class="fa-brands fa-linkedin-in"></i></a></li>
+                  <li><a href="https://www.instagram.com/romain.flt/"><i class="fa-brands fa-instagram"></i></a></li>
+                  <!-- <li><a href="https://twitter.com/___kaaashx___/"><i class="fa-brands fa-twitter"></i></a></li> -->
+                  <!-- <li><a href="https://aistechx.com/" title="Get Educate with Us"><i class="fa-solid fa-graduation-cap"></i></a></li> -->
+                </ul>
               </div>
             </div>
-
-            <br>
-
-            <!-- Social -->
-            <div class="social-menu">
-              <ul>
-                <li><a href="https://github.com/Destroyeur6315"><i class="fa-brands fa-github"></i></a></li>
-                <li><a href="https://www.linkedin.com/in/romain-fillot/"><i class="fa-brands fa-linkedin-in"></i></a>
-                </li>
-                <li><a href="https://www.instagram.com/romain.flt/"><i class="fa-brands fa-instagram"></i></a></li>
-                <!-- <li><a href="https://twitter.com/___kaaashx___/"><i class="fa-brands fa-twitter"></i></a></li> -->
-                <!-- <li><a href="https://aistechx.com/" title="Get Educate with Us"><i class="fa-solid fa-graduation-cap"></i></a></li> -->
-              </ul>
-            </div>
           </div>
-        </div>
-
-        <!-- Reach -->
-        <div class="column right reach">
-          <div class="text">Formulaire </div>
-          <form action="#">
-            <div class="fields">
-              <div class="field name">
-                <input type="text" placeholder="Votre nom" required>
+  
+          <!-- Reach -->
+          <div class="column right reach">
+            <div class="text">Formulaire </div>
+            <form action="#">
+              <div class="fields">
+                <div class="field name">
+                  <input type="text" placeholder="Votre nom" required>
+                </div>
+                <div class="field email">
+                  <input type="email" placeholder="Votre email" required>
+                </div>
               </div>
-              <div class="field email">
-                <input type="email" placeholder="Votre email" required>
+              <div class="field">
+                <input type="text" placeholder="Sujet" required>
               </div>
-            </div>
-            <div class="field">
-              <input type="text" placeholder="Sujet" required>
-            </div>
-            <div class="field textarea">
-              <textarea cols="30" rows="10" placeholder="Message.." required></textarea>
-            </div>
-            <div class="button-area">
-              <button type="submit">Envoyer</button>
-            </div>
-          </form>
+              <div class="field textarea">
+                <textarea cols="30" rows="10" placeholder="Message.." required></textarea>
+              </div>
+              <div class="button-area">
+                <button type="submit">Envoyer</button>
+              </div>
+            </form>
+          </div>
         </div>
       </div>
-    </div>
-  </section>
-
-  <!-- Footer -->
-  <footer>
-    <span>
-      <a href="https://www.linkedin.com/in/paithankarvarad">
-        Fillot Romain</a> | <span class="far fa-copyright"></span> 2024 All Rights Reserved. Privacy Policy
-    </span>
-  </footer>
-
-  <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
-  <!-- <script src="main.js"></script> -->
-  <script src="https://kit.fontawesome.com/b29a4dce1b.js" crossorigin="anonymous"></script>
-  <script type="text/javascript">
-    $(document).ready(function () {
-      $(window).scroll(function () {
-        if (this.scrollY > 20) {
-          $(".navbar").addClass("sticky");
-          console.log("romain");
-        } else {
-          $(".navbar").removeClass("sticky");
-          console.log("romain");
-        }
-
-        //  scroll-up button show/hide script  //
-        if (this.scrollY > 500) {
-          $(".scroll-up-btn").addClass("show");
-        } else {
-          $(".scroll-up-btn").removeClass("show");
-        }
-      });
-
-      //  slide-up script  //
-
-      $(".scroll-up-btn").click(function () {
-        $("html").animate({ scrollTop: 0 });
-        //  removing smooth scroll on slide-up button click  //
-        $("html").css("scrollBehavior", "auto");
-      });
-
-      $(".navbar .menu li a").click(function () {
-        //  Smooth scroll on Menu Items click  //
-
-        $("html").css("scrollBehavior", "smooth");
-      });
-
-      //  Toggle Navbar  //
-
-      $(".menu-btn").click(function () {
-        $(".navbar .menu").toggleClass("active");
-        $(".menu-btn i").toggleClass("active");
-      });
-
-      //  Typing Text Animation  //
-
-      var typed = new Typed(".typing", {
-        strings: [
-          "Fullstack Developer",
-          "Software Developer",
-          "Python Developer",
-          "Founder",
-          "Author"
-        ],
-        typeSpeed: 100,
-        backSpeed: 60,
-        loop: true
-      });
-
-      var typed = new Typed(".typing-2", {
-        strings: [
-          "Fullstack Developer",
-          "Software Developer",
-          "Python Developer",
-          "Founder",
-          "Author"
-        ],
-        typeSpeed: 100,
-        backSpeed: 60,
-        loop: true
-      });
-
-      //  Owl Carousel  //
-
-      $(".carousel").owlCarousel({
-        margin: 20,
-        loop: true,
-        autoplay: true,
-        autoplayTimeOut: 2000,
-        autoplayHoverPause: true,
-        responsive: {
-          0: {
-            items: 1,
-            nav: false
-          },
-          600: {
-            items: 2,
-            nav: false
-          },
-          1000: {
-            items: 3,
-            nav: false
-          }
-        }
-      });
-    });
-
-    function showSlide(slideIndex) {
-      const slides = document.querySelectorAll('.carousel-slide');
-      slides.forEach((slide, index) => {
-        if (index === slideIndex - 1) {
-          slide.classList.add('active');
-        } else {
-          slide.classList.remove('active');
-        }
-      });
-    }
-  </script>
-
-</body>
\ No newline at end of file
+    </section>
+  
+    <!-- Footer -->
+    <footer>
+      <span>
+        <a href="https://www.linkedin.com/in/paithankarvarad"> 
+          Fillot Romain</a> | <span class="far fa-copyright"></span> 2024 All Rights Reserved. Privacy Policy
+      </span>
+    </footer>
+
+    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
+    <script src="main.js"></script>
+    <script src="https://kit.fontawesome.com/b29a4dce1b.js" crossorigin="anonymous"></script>
+  
+  </body>
\ No newline at end of file
