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

<head>
  <meta charset="utf-8" />
  <meta http-equiv="content-type" content="text/html;charset=UTF-8" />
  <meta content="width=device-width, initial-scale=1.0" name="viewport" />
  <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  <meta
    content="Portfolio de Salaheddine BELHASKA - Etudiant en BTS SIO (Services Informatiques aux Organisations) option SLAM (Solutions Logicielles et Application Métier)"
    name="description" />
  <meta content="SOUKOUNA, Mahamadou ,Portfolio, BTS SIO, SLAM, STUDI, Bourg" name="keywords" />
  <meta content="TEST" name="author" />
  <title>Portfolio BTS SIO⎟ Salaheddine BELHASKA</title>

  <!-- ===== Favicons ===== -->
  <link href="./assets/img/mslogo-removebg-preview (1).png" rel="icon" />

  <!-- ===== Google fonts ===== -->
  <link rel="preconnect" href="https://fonts.googleapis.com" />
  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
  <link rel="preconnect" href="https://fonts.googleapis.com">
  <!-- ===== Google fonts que moi je vais ajouter  ===== -->
  <link rel="preconnect" href="https://fonts.googleapis.com">
  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
  <link href="https://fonts.googleapis.com/css2?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&display=swap" rel="stylesheet">

  <link rel="preconnect" href="https://fonts.googleapis.com">
  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
  <link href="https://fonts.googleapis.com/css2?family=Kalam:wght@300;400;700&display=swap" rel="stylesheet">

  <link rel="preconnect" href="https://fonts.googleapis.com">
  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
  <link href="https://fonts.googleapis.com/css2?family=Luckiest+Guy&family=Wellfleet&display=swap" rel="stylesheet">


  <!-- ===== Google fonts que moi je vais ajouter  ===== -->
  



  <link
    href="https://fonts.googleapis.com/css?family=Open+Sans:300,300i,400,400i,600,600i,700,700i|Roboto:300,300i,400,400i,500,500i,600,600i,700,700i|Poppins:300,300i,400,400i,500,500i,600,600i,700,700i"
    rel="stylesheet">

  <!-- ====== Boxicons ====== -->
  <link rel="stylesheet" href="./assets/css/icomoon.css">
  <link href="./assets/vendor/boxicons/css/boxicons.min.css" rel="stylesheet" />

  <!-- ===== Vendeur CSS ===== -->
  <link href="./assets/vendor/aos/aos.css" rel="stylesheet" />
  <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/glightbox/css/glightbox.min.css" rel="stylesheet" />
  <link href="./assets/vendor/swiper/swiper-bundle.min.css" rel="stylesheet" />

  <!-- ===== Main CSS ===== -->
  <link href="./assets/css/style.css" rel="stylesheet" />
</head>
<!-- ========== Fin Head ========== -->

<body>
  <!-- ========== Header ========== -->
  <header id="header" class="fixed-top">
    <div class="container d-flex align-items-center justify-content-between">
      <h1 class="logo">
        <a href="index.html">S.B </a>
      </h1>

      <!-- ========== Navbar ========== -->
      <nav id="navbar" class="navbar">
        <ul>
          <li><a class="nav-link scrollto active" href="#hero">Acceuil</a></li>
          <li><a class="nav-link scrollto" href="#about">A propos</a></li>
          <li><a class="nav-link scrollto" href="#resume">Parcours</a></li>
          <li><a class="nav-link scrollto" href="#skills">Compétences</a></li>
          <li><a class="nav-link scrollto" href="#veille">Veille Téchnologique</a></li>
          <li class="dropdown"><a href="#"><span>Épreuves</span> <i class="bi bi-chevron-down"></i></a>
            <ul>
              <li><a href="./autres/epreuve4.html">Épreuve E4</a></li>
              <li><a href="./autres/epreuve5.html">Épreuve E5</a></li>
              <li><a href="./autres/certif.html">Certifications</a></li>
            </ul>
          </li>
          <li><a class="nav-link scrollto" href="#contact">Contact</a></li>
          <li>
            <a class="getstarted scrollto" href="./autres/projet.html">Projet</a>
          </li>
        </ul>
        <i class="bi bi-list mobile-nav-toggle"></i>
      </nav>
      <!-- ========== Fin Navbar ========== -->
    </div>
  </header>
  <!-- ========== Fin Header ========== -->

  <!-- ========== Hero section ========== -->
  <section id="hero" class="d-flex align-items-center">
    <div class="container-fluid" data-aos="fade-up">
      <div class="row justify-content-center">
        <div class="col-xl-5 col-lg-6 pt-3 pt-lg-0 order-2 order-lg-1 d-flex flex-column justify-content-center">
          <ul class="socials list-unstyled">
            <li>
              <!-- <a href="https://www.linkedin.com/in/mrsoukouna/" target="_blank" title="Profile Linkedin"><i
                  class="bx bxl-linkedin"></i></a> -->
            </li>
            <li>
              <!-- <a href="#" target="_blank" title="Profile Twitter"><i class="bx bxl-twitter"></i></a> -->
            </li>
            <li>
              <!-- <a href="https://github.com/SMahamadou" target="_blank" title="Profile Github"><i
                  class="bx bxl-github"></i></a> -->
            </li>
          </ul>
          <h1>BELHASKA Salaheddine</h1>
          <h2>Étudiant en informatique</h2>
          <div>
            <a href="#about" class="btn-get-started scrollto">Bienvenue</a>
          </div>
        </div>
        <div class="col-xl-4 col-lg-6 order-1 order-lg-2 hero-img" data-aos="zoom-in" data-aos-delay="150">
          <img src="./assets/img/Hand coding-bro.png" class="img-fluid animated" alt="" />
        </div>
      </div>
    </div>
  </section>
  <!-- ========== Fin Hero ========== -->

  <!-- ========== Main ========== -->
  <main id="main">
    <!-- ========== About section ========== -->
    <section id="about" class="about">
      <div class="container">
        <div class="row">
          <div class="col-lg-6 order-1 order-lg-2" data-aos="zoom-in" data-aos-delay="150">
            <img src="./assets/img/Programming-bro (1).png" class="img-fluid" alt="" />
          </div>
          <div class="col-lg-6 pt-4 pt-lg-0 order-2 order-lg-1 content" data-aos="fade-right">
            <div class="about-elementor-widget-container">
              <h2 class="elementor-heading-title elementor-size-default">
                A propos
              </h2>
            </div>
            <p>
              Bonjour je suis BELHASKA Salaheddine, aprenant en BTS SIO (Services
              Informatiques aux Organisations) à Carriat,
              dans la spécialité SLAM (Solutions Logicielles et Applications
              Métiers).
            </p>
            <p>
              Toujours en cours d'étude, à l'issue de mon BTS j'envisage de
              continuer par une année de Licence en Développement .
            </p>
            <p>
              En attendant, je vous invite à découvrir ce portfolio qui présente une sélection de mes réalisations
              académiques, de mes compétences et de mon parcours. J'ai le plaisir de partager avec vous mes projets, mon
              implication dans le domaine de l'informatique, ainsi que mes compétences en développement et mon
              cheminement académique.
            </p>
            <p>
              Enfin vous retrouverez ci-dessous mon CV
            </p>
            <a href="./" class="read-more" target="_blank">CV<i class="bi bi-long-arrow-right"></i>
            </a>
            <a href="./" class="read-more" target="_blank">Lettre de
              Motivation<i class="bi bi-long-arrow-right"></i>
            </a>
            <h3>Centres d'intérêt</h3>
            <div class="about-hobbies-section">
              <!-- ========== Start Lordicon : Animated Icons ========== -->
              <div>
                <lord-icon src="https://cdn.lordicon.com/vlycxjwx.json" trigger="loop" delay="2000"
                  colors="primary:#121331,secondary:#4030e8" style="width: 45px; height: 45px">
                </lord-icon>
              </div>
              <div class="ue-lord-icon-contet">
                <div class="about-ue-box-title">Coder</div>
              </div>
              <div>
                <lord-icon src="https://cdn.lordicon.com/iauexvsm.json" trigger="loop" delay="2000"
                  colors="primary:#121331,secondary:#4030e8" style="width: 50px; height: 50px">
                </lord-icon>
              </div>
              <div class="ue-lord-icon-contet">
                <div class="about-ue-box-title">Sport</div>
              </div>
              <div>
                <lord-icon src="https://cdn.lordicon.com/lenjvibx.json" trigger="loop" delay="2000"
                  colors="primary:#121331,secondary:#4030e8" style="width: 45px; height: 45px">
                </lord-icon>
              </div>
              <div class="ue-lord-icon-contet">
                <div class="about-ue-box-title">Lire</div>
              </div>
              <div>
                <lord-icon src="https://cdn.lordicon.com/pbbsmkso.json" trigger="loop" delay="2000"
                  colors="primary:#121331,secondary:#4030e8" style="width: 45px; height: 45px">
                </lord-icon>
              </div>
              <div class="ue-lord-icon-contet">
                <div class="about-ue-box-title">Voyager</div>
              </div>
              <!-- ========== Fin Lordicon: Animated Icons ========== -->
            </div>
          </div>
        </div>
      </div>
    </section>
    <!-- ========== Fin About section  ========== -->

    <!-- ========== BTS section ========== -->
    <section id="about" class="about-bts-sio">
      <div class="container">
        <div class="section-header">
          <h2>Qu'est ce que le BTS SIO ?</h2>
          <span>Je vous présente la formation que j'ai suivie et évolué durant
            deux ans.</span>
          <p>
            Le Brevet de Technicien Supérieur en Services Informatiques aux Organisations (BTS SIO) est une formation de
            niveau Bac+2 destinée à ceux qui souhaitent se spécialiser, en deux ans, dans les métiers d'administrateur
            réseau ou de développeur.
        
            Cette formation peut être suivie soit en alternance, d'une durée de 12 à 24 mois, soit en initial, avec un
            minimum de 10 semaines de stage en entreprise, réparties sur une période de 2 à 3 mois, afin de se
            confronter aux réalités du monde professionnel. 
        </p>
          <h3>Elle propose deux spécialités :</h3>
        </div>
        <div class="about-study-bts-sio">
          <div class="about-col_bts_slam">
            <h4>
              <img src="./assets/img/code.svg" alt="Code Logo" width="30px" />
              Spécialité SLAM
            </h4>
            <br> <!--j'ai ajouter -->

            <p>
              Cette spécialité vous formera à développer des compétences en
              développement d'applications et de logiciels, à concevoir des
              bases de données, programmer dans divers langages, tester et
              déployer des solutions logicielles.
            </p>
            <br>
            <p>
              Voici une liste de quelque'uns des métiers principaux
              accessibles après l’obtention de ce diplôme (SLAM) :
            </p>
            <ul>
              <li>Analyste-programmeur</li>
              <li>Développeur / Développeuse d’applications mobile</li>
              <li>Technicien / Technicienne informatique</li>
              <li>Développeur / Développeuse web</li>
              <li>Intégrateur web</li>
            </ul>
          </div>
          <div class="about-col_bts_sisr">
            <h4>
              <img src="./assets/img/workflows.svg" alt="Code Logo" width="30px" />
              Spécialité SISR
            </h4>
            <br> <!--j'ai ajouter -->
            <p>
              Cette spécialité vous formera sur la gestion, la maintenance des
              infrastructures réseau. Vous apprendrez à gérer des systèmes
              d'exploitation, des services réseaux, mais aussi à sécuriser une
              infrastructure et à proposer des solutions pour optimiser la
              performance d'un réseau.
            </p>
            <br>
            <p>
              Voici une liste de quelque'uns des métiers principaux
              accessibles après l’obtention de ce diplôme (SISR) :
            </p>
            <ul>
              <li>Administrateur systèmes et réseaux</li>
              <li>Technicien / Technicienne support</li>
              <li>Technicien / Technicienne réseau</li>
              <li>Gestionnaire d’infrastructures informatiques</li>
              <li>Responsable sécurité des systèmes d’information junior</li>
            </ul>
          </div>
        </div>
      </div>
    </section>
    <!-- ========== Fin BTS section ========== -->

    <!-- ========== Resumer section ========== -->
    <section id="resume" class="resume">
      <div class="container">
        <div class="section-title">
          <h2>Parcours Scolaire</h2>
          <span>Suiver mon cursus scolaire, mes différentes formations et mon
            parcours professionnel.</span>
        </div>
        <div class="row">
          <div class="col-md-12 col-md-offset-0">
            <ul class="timeline">
              <li class="timeline-heading text-center animate-box fadeInUp animated-fast">
                <div>
                  <h3>Expériences professionnelles</h3>
                </div>
              </li>
              <li class="animate-box timeline-unverted fadeInUp animated-fast">
                <div class="timeline-badge"><i class="icon-suitcase"></i></div>
                <div class="timeline-panel">
                  <div class="timeline-heading">
                    <h3 class="timeline-title">Stage 1re année</h3>
                    <span class="company"> ⎪ juillet 2024 - août 2024</span>
                  </div>
                  <div class="timeline-body">
                    <p>Création d'un site web pour un médecin, permettant de gérer les rendez-vous, espace administrateur</p>
                    </p>
                  </div>
                </div>
              </li>
              <li class="timeline-inverted animate-box fadeInUp animated-fast">
                <div class="timeline-badge"><i class="icon-suitcase"></i></div>
                <div class="timeline-panel">
                  <div class="timeline-heading">
                    <h3 class="timeline-title"> ANDRE BONDET </h3>
                    <span class="company"> ⎪ Janvier 2023 </span>
                  </div>
                  <div class="timeline-body">
                    <p>Stage de 1 mois chez "ANDRE BONDET" dans la formation "Excel"</p>
                  </div>
                </div>
              </li>
              <li class="animate-box timeline-unverted fadeInUp animated-fast">
                <div class="timeline-badge"><i class="icon-suitcase"></i></div>
                <div class="timeline-panel">
                  <div class="timeline-heading">
                    <h3 class="timeline-title">Stage Assistant de Bureau</h3>
                    <span class="company">Hôpital d'Oyonnax ⎪  Novembre 2021 </span>
                  </div>
                  <div class="timeline-body">
                    <p>
                      montage, démontage de PC,
                      changement de tour , 
                      changement de disque dur de pc portable 
                      faire une image de pc avec l'outil rescuezilla.
                    </p>
                  </div>
                </div>
              </li>
              
              <br>
              <li class="timeline-heading text-center animate-box fadeInUp animated-fast">
                <div>
                  <h3>Education</h3>
                </div>
              </li>
              <li class="timeline-inverted animate-box fadeInUp animated-fast">
                <div class="timeline-badge"><i class="icon-graduation-cap"></i></div>
                <div class="timeline-panel">
                  <div class="timeline-heading">
                    <h3 class="timeline-title">BTS - Services Informatiques aux Organisations</h3>
                    <span class="company">BTS SIO (Actuel)⎥ 2023 - 2025</span>
                  </div>
                  <div class="timeline-body">
                    <p>Choix spécialités : Option SLAM (Solutions logicielles et Applications Métiers).</p>
                  </div>
                </div>
              </li>
              <li class="animate-box timeline-unverted fadeInUp animated-fast">
                <div class="timeline-badge"><i class="icon-graduation-cap"></i></div>
                <div class="timeline-panel">
                  <div class="timeline-heading">
                    <h3 class="timeline-title">BAC PRO - Systèmes Numériques option c </h3>
                    <span class="company">Lycée Arbez-Carme, Bellignat 2020 - 2022</span>
                  </div>
                  <div class="timeline-body">
                    <p>Choix de spécialités : Bac Professionnel Systèmes Numériques option C (SN)</p>
                  </div>
                </div>
              </li>
              <li class="timeline-inverted animate-box fadeInUp animated-fast">
                <div class="timeline-badge"><i class="icon-graduation-cap"></i></div>
                <div class="timeline-panel">
                  <div class="timeline-heading">
                    <h3 class="timeline-title">Diplôme National du Brevet</h3>
                    <span class="company">Collège Jean Rostand, Arbent ⎥ 2019 - 2020</span>
                  </div>
                  <div class="timeline-body">
                    <p>Obtention du Brevet</p>
                  </div>
                </div>
              </li>
            </ul>
          </div>
        </div>
      </div>
    </section>
    <!-- ========== Fin Resume seciton =========  -->

    <!-- ========== Logiciels section ========== -->
    <section id="skills" class="skills-softwar">
      <div id="fh5co-features" class="animate-box fadeInUp animated-fast">
        <div class="container">
          <div class="services-padding">
            <div class="section-title">
              <h2>Logiciels utilisés </h2>
              <span>Voici les différents outils et logiciels que j'ai utilisés lors
                de ma formation.</span>
            </div>
            <div class="row">
              <div class="col-md-4 text-center">
                <div class="feature-left">
                  <span class="icon">
                    <!-- ========== Start Lordicon: Animated Icons ========== -->
                    <script src="https://cdn.lordicon.com/lordicon.js"></script>
                    <lord-icon src="https://cdn.lordicon.com/vlycxjwx.json" trigger="hover" stroke="bold"
                      colors="primary:#ffffff,secondary:#ffffff" style="width: 38px; height: 38px">
                    </lord-icon>
                    <!-- ========== Animated icons by Lordicon.com ========== -->
                  </span>
                  <div class="feature-copy">
                    <h3 class="title">Visual Studio Code</h3>
                    <p class="description">
                      l'Éditeur de code complet de Microsoft, polyvalent avec de
                      nombreux langages de programmation.
                    </p>
                  </div>
                </div>
              </div>

              <div class="col-md-4 text-center">
                <div class="feature-left">
                  <div class="icon">
                    <!-- ========== Start Lordicon: Animated Icons ========== -->
                    <script src="https://cdn.lordicon.com/lordicon.js"></script>
                    <lord-icon src="https://cdn.lordicon.com/afuthwlx.json" trigger="hover" stroke="bold"
                      colors="primary:#ffffff,secondary:#ffffff" style="width: 38px; height: 38px">
                    </lord-icon>
                    <!-- ========== Animated icons by Lordicon.com ========== -->
                  </div>
                  <div class="feature-copy">
                    <h3 class="title">PHP</h3>
                    <p class="description">
                      PHP est un langage de programmation libre, principalement utilisé pour produire des pages web dynamiques. Il est utilisé pour écrire et exécuter du code.
                  </div>
                </div>
              </div>

              <div class="col-md-4 text-center">
                <div class="feature-left">
                  <div class="icon">
                    <!-- ========== Start Lordicon: Animated Icons ========== -->
                    <script src="https://cdn.lordicon.com/lordicon.js"></script>
                    <lord-icon src="https://cdn.lordicon.com/xynjytfp.json" trigger="hover" stroke="bold"
                      colors="primary:#ffffff,secondary:#ffffff" style="width: 38px; height: 38px">
                    </lord-icon>
                    <!-- ========== Animated icons by Lordicon.com ========== -->
                  </div>
                  <div class="feature-copy">
                    <h3 class="title">Xampp </h3>
                    <p class="description">
                      XAMPP est un logiciel permettant de mettre en place un serveur Web local.
                    </p>
                  </div>
                </div>
              </div>
            </div>


            <div class="row">
              <div class="col-md-4 text-center">
                <div class="feature-left">
                  <div class="icon">
                    <!-- ========== Start Lordicon: Animated Icons ========== -->
                    <script src="https://cdn.lordicon.com/lordicon.js"></script>
                    <lord-icon src="https://cdn.lordicon.com/xirobkro.json" trigger="hover" stroke="bold"
                      colors="primary:#ffffff,secondary:#ffffff" style="width: 38px; height: 38px">
                    </lord-icon>
                    <!-- ========== Animated icons by Lordicon.com ========== -->
                  </div>
                  <div class="feature-copy">
                    <h3 class="title">VirtualBox & Vmware</h3>
                    <p class="description">
                      Logiciels et applications de virtualisation, créer et exécuter des machines virtuelles, utilisés
                      pour exécuter plusieurs
                      systèmes d'exploitation à la fois.
                    </p>
                  </div>
                </div>
              </div>

              <div class="col-md-4 text-center">
                <div class="feature-left">
                  <div class="icon">
                    <!-- ===== Start Lordicon: Animated Icons ===== -->
                    <script src="https://cdn.lordicon.com/lordicon.js"></script>
                    <lord-icon src="https://cdn.lordicon.com/zvheymqn.json" trigger="hover" stroke="bold"
                      colors="primary:#ffffff,secondary:#ffffff" style="width: 38px; height: 38px">
                    </lord-icon>
                    <!-- ========== Animated icons by Lordicon.com ========== -->
                  </div>
                  <div class="feature-copy">
                    <h3 class="title">MySql</h3>
                    <p class="description">
                      Système de gestion de base de données relationnelles (RDBMS) libre et populaire.
                    </p>
                  </div>
                </div>
              </div>

              <div class="col-md-4 text-center">
                <div class="feature-left">
                  <div class="icon">
                    <!-- ========== Start Lordicon: Animated Icons ========== -->
                    <script src="https://cdn.lordicon.com/lordicon.js"></script>
                    <lord-icon src="https://cdn.lordicon.com/kqvibaec.json" trigger="hover" stroke="bold"
                      colors="primary:#ffffff,secondary:#ffffff" style="width: 40px; height: 40px">
                    </lord-icon>
                    <!-- ========== Animated icons by Lordicon.com ========== -->
                  </div>
                  <div class="feature-copy">
                    <h3 class="title">GitHub & BitBucket</h3>
                    <p class="description">
                      GitHub et Bitbucket sont des plateformes de développement de logiciels en ligne.
                    </p>
                  </div>
                </div>
              </div>
            </div>
        </div>
      </div>
    </section>
    <!-- ========== Fin Logiciel section ========== -->

    <!-- ========== Compétences section ========== -->
    <section id="skills" class="skills-language">
      <div class="container aos-init aos-animate" data-aos="fade-up">
        <div class="section-title">
          <h2>Langages Pratiqués</h2>
          <span>Durant ma formation j'ai pu pratiquer et aqcuérir des
            connaissances sur différents langages.</span>
        </div>

        <div class="row">
          <div class="col-md-6">
            <div class="progress-wrap">
              <h3><span class="name-left">HTML5</span><span class="value-right">90%</span></h3>
              <div class="progress">
                <div class="progress-bar progress-bar-1 progress-bar-striped active" role="progressbar"
                  aria-valuenow="90" aria-valuemin="0" aria-valuemax="100" style="width:90%">
                </div>
              </div>
            </div>

            <div class="progress-wrap">
              <h3><span class="name-left">PHP</span><span class="value-right">65%</span></h3>
              <div class="progress">
                <div class="progress-bar progress-bar-2 progress-bar-striped active" role="progressbar"
                  aria-valuenow="65" aria-valuemin="0" aria-valuemax="100" style="width:65%">
                </div>
              </div>
            </div>

            <div class="progress-wrap">
              <h3><span class="name-left">CSS3</span><span class="value-right">80%</span></h3>
              <div class="progress">
                <div class="progress-bar progress-bar-3 progress-bar-striped active" role="progressbar"
                  aria-valuenow="80" aria-valuemin="0" aria-valuemax="100" style="width:80%">
                </div>
              </div>
            </div>

          </div>
          <div class="col-md-6">
            <div class="progress-wrap">
              <h3><span class="name-left">JAVASCRIPT</span><span class="value-right">5%</span></h3>
              <div class="progress">
                <div class="progress-bar progress-bar-4 progress-bar-striped active" role="progressbar"
                  aria-valuenow="5" aria-valuemin="0" aria-valuemax="5" style="width:5%">
                </div>
              </div>
            </div>

            <div class="progress-wrap">
              <h3><span class="name-left">Angualr</span><span class="value-right">20%</span></h3>
              <div class="progress">
                <div class="progress-bar progress-bar-5 progress-bar-striped active" role="progressbar"
                  aria-valuenow="50" aria-valuemin="0" aria-valuemax="100" style="width:20%">
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </section>
    <!-- ========== Fin Compétences section =========== -->

    <!-- ========== Veille section  ========== -->
    <section id="veille" class="faq">
      <div class="container" data-aos="fade-up">
        <div class="section-title">
          <h2>Veille Technologique</h2>
        </div>

        <div class="faq-list">
          <ul>
            <li data-aos="fade-up" data-aos="fade-up" data-aos-delay="100">
              <i class="bx bx-help-circle icon-help"></i>
              <a id="icon" data-bs-toggle="collapse" class="collapsed" data-bs-target="#faq-list-1">Qu'est ce que la
                veille
                technologique ?
                <i class="bx bx-chevron-down icon-show"></i><i class="bx bx-chevron-up icon-close"></i></a>
              <div id="faq-list-1" class="collapse show" data-bs-parent=".faq-list">
                <p class="description">
                  La veille technologique, consiste à surveiller les
                  évolutions techniques, les innovations dans un secteur
                  d’activité donnée, prendre les informations les plus
                  pertinentes et les plus récentes afin de passer le moins de
                  temps possible sur des recherches d'information, pour
                  faciliter les recherches, il faut que la collecte, le
                  partage et la diffusion d'informations permette d'anticiper
                  ou de s'informer sur des changements en matière de
                  recherche.
                </p>
              </div>


            </li>

            <li data-aos="fade-up" data-aos-delay="200">
              <i class="bx bx-help-circle icon-help"></i>
              <a id="icon" data-bs-toggle="collapse" data-bs-target="#faq-list-2" class="collapsed">
                Qu'est ce que le but d'une veille technologique ?
                <i class="bx bx-chevron-down icon-show"></i><i class="bx bx-chevron-up icon-close"></i></a>
              <div id="faq-list-2" class="collapse" data-bs-parent=".faq-list">
                <p class="list-obj">
                  - Suivre les évolutions techniques <br />
                  - Etre informé des inventions et innovations des concurrents
                  <br />
                  - Diminuer les coûts de production <br />
                  - Augmenter nos compétences <br />
                </p>
              </div>
            </li>

            <li data-aos="fade-up" data-aos-delay="300">
              <i class="bx bx-help-circle icon-help"></i>
              <a id="icon" data-bs-toggle="collapse" data-bs-target="#faq-list-3" class="collapsed">Quelles sont les
                outils de ma
                veille ?
                <i class="bx bx-chevron-down icon-show"></i><i class="bx bx-chevron-up icon-close"></i></a>
              <div id="faq-list-3" class="collapse" data-bs-parent=".faq-list">
                <span class="header-infos">
                  Pour veiller aux derniers tendance de la realité virtuelle
                  j'ai utilisé :
                </span>
                <h6>Google Actualités & Alerte : </h6>
                <p class="definition">
                  Un outil simple d’utilisation qui permet de se tenir
                  informé des dernières technologies sorties</p>

                <h6>Feedly : </h6>
                <p class="definition">
                  Un agrégateur de flux RSS très connu, un
                  outil complet pour toute veille technologique.</p>

                <h6>Twitter : </h6>
                <p class="definition">
                  Une mine d'information, le
                  réseau social qui permet de se tenir informer des dernières
                  innovations.</p>

                  <h6>Youtube : </h6>
                <p class="definition">
                 un réseau social pour voir les dernières actualités (vidéo)</p>
              </div>
              
            </li>

            <li data-aos="fade-up" data-aos-delay="400">
              <i class="bx bx-help-circle icon-help"></i>
              <a id="icon" data-bs-toggle="collapse" data-bs-target="#faq-list-4" class="collapsed">
                Quelle a été le sujet de ma veille technologie ?
                <i class="bx bx-chevron-down icon-show"></i><i class="bx bx-chevron-up icon-close"></i></a>
              <div id="faq-list-4" class="collapse" data-bs-parent=".faq-list">
                <span class="header-infos">
                  J'ai choisi d'aborder le thème de la
                  5G SA, une technologie en
                  perpétuelle évolution, utilisée dans de nombreux domaines.
                </span>
                <br />
                <h5>Principal problématique :</h5>
                <h6>Quel futur de la 5G SA faut-il espérer ?</h6>
                <p class="prob1">
                  Nous allons répondre à cette problématique en distingant
                  trois thématique :
                </p>
                <p class="subject1"> - <strong>Théme 1</strong> : Qu'est ce que la 5G SA ?</p>
                <p class="subject1"> - <strong>Thème 1</strong> : Comment fonctionne la 5G SA ?</p>
                <p class="subject1"> - <strong>Thème 1</strong> : Quelle est la différence entre la 5G SA et la 5G Normale ?</p>
                
              </div>
            </li>

            <li data-aos="fade-up" data-aos-delay="500">
              <i class="bx bx-help-circle icon-help"></i>
              <a id="icon" data-bs-toggle="collapse" data-bs-target="#faq-list-5" class="collapsed">
                Quelles sont les différents thématiques abordés ?
                <i class="bx bx-chevron-down icon-show"></i><i class="bx bx-chevron-up icon-close"></i></a>
              <div id="faq-list-5" class="collapse" data-bs-parent=".faq-list">

                <!-- ========== Thème 1 ========== -->
                <h4>"Qu'est ce que la 5G SA ?"</h4>
                <div class="blog-meta">
                  <p><i class="bx bx-news"> Aurélie </i></p>
                  <p><i class="bx bxs-calendar"> 21-09-2024</i></p>
                </div>

                <h5>Définition :</h5>
                <p class="description">
                  La 5G SA (Stand-Alone) est une version de la 5G qui fonctionne de manière indépendante, sans utiliser
                  d'infrastructure 4G. Elle offre des vitesses de connexion plus rapides, une latence réduite et une
                  meilleure capacité de gestion des données par rapport à la 5G NSA (Non-Stand-Alone). Free a commencé à
                  déployer la 5G SA en France pour offrir des performances améliorées à ses utilisateurs.
                </p>
                <a class="btn" href="https://www.edcom.fr/actualites/comment-profiter-de-la-5g-sa-de-free"
                  target="_blank">Article
                  <i class='bx bx-link-external'></i>
                </a>


                <div class="blog-meta">
                  <p><i class="bx bx-news"> ? </i></p>
                  <p><i class="bx bxs-calendar"> 19-10-2023</i></p>
                </div>

                <h5>D'autre Article :</h5>
                <p class="description">
                  
                  Attention à ne pas confondre d'une part :
                  Free lance ce 18 septembre la 5G SA une version "avancée" de la 5G qui promet des débits améliorés et
                  qui pourrait bien faire la différence dans les prochaines années.
                </p>
                <!-- <img src="" alt="" width="400" />  -->
                
                <p class="description">
                
                  La 5G  représente une avancée technologique majeure qui transforme la manière dont nous connectons et interagissons avec les appareils. Elle offre des vitesses de téléchargement et d'upload beaucoup plus rapides que la 4G
                </p>

                <a class="btn"
                  href="https://intersec.com/fr/blog/5g-vs-5g-standalone-comprendre-les-differences"
                  target="_blank">Article
                  <i class='bx bx-link-external'></i>
                </a>
                <hr>
                <!-- ========== Thème 2 ========== -->

                <!-- ========= Thème 3 ========== -->
                <a class="btn" href="./autres/veille.html" target="_blank">
                  Ma veille technologique en détail :                    
                  <i class="bx bx-link-external"></i>
                  </a>
                  

              </div>
            </li>

          

         
        </div>
        
      </div>
    </section>
    <!-- ========== Fin Veille section ==========  -->

    <!-- ========== Contact section ========== -->
    <section id="contact" class="contact section-bg">
      <div class="container" data-aos="fade-up">
        <div class="section-title">
          <h2>Contact</h2>
          <span>
            Si vous avez une question, une demande, ou juste une
            envie d'en savoir un peu plus sur moi n'hésitez sourtout pas.
            Contactez-moi !
          </span>
          <br>
          <br>
        </div>
        <div class="row">
          <div class="col-lg-6">
            <div class="info-box mb-4">
              <i class="bx bx-map"></i>
              <h3>Localisation</h3>
              <p>01000 Bourg en bresse, France</p>
            </div>
          </div>

          <div class="col-lg-3 col-md-6">
            <div class="info-box mb-4">
              <i class="bx bx-envelope"></i>
              <h3>Adress mail</h3>
              <p> salaheddine.belhaska@sio-carriat.com</p>
            </div>
          </div>

          <div class="col-lg-3 col-md-6">
            <div class="info-box mb-4">
              <i class="bx bx-phone-call"></i>
              <h3>Numéro Téléphone</h3>
              <p>+33 xxxxxxxxxx</p>
            </div>
          </div>
        </div>

        <div class="row">
          <div class="col-lg-6">
            <iframe
              src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d13323.736896458592!2d5.233226499999999!3d46.204194899999996!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x47f3e32f4c9b6a49%3A0x406473d44d3b3a0!2sBourg-en-Bresse!5e0!3m2!1sfr!2sfr!4v1716127793069!5m2!1sfr!2sfr"
              allowfullscreen="" loading="lazy" allowfullscreen="" loading="lazy"
              referrerpolicy="no-referrer-when-downgrade" style="border:0" frameborder="0" width="100%" height="384px">
            </iframe>
          </div>
          <div class="col-lg-6">
            <form action="./forms/contact.php" method="post" role="form" class="php-email-form">
              <div class="row">
                <div class="col-md-6 form-group">
                  <input type="text" name="lastName" class="form-control" id="name" placeholder="Votre nom"
                    autocomplete="family-name" required />
                </div>
                <div class="col-md-6 form-group mt-3 mt-md-0">
                  <input type="email" class="form-control" name="email" id="email" placeholder="Votre mail"
                    autocomplete="email" required />
                </div>
              </div>
              <div class="form-group mt-3">
                <input type="text" class="form-control" name="subject" id="subject" placeholder="Objet" required />
              </div>
              <div class="form-group mt-3">
                <textarea class="form-control" name="message" rows="5" placeholder="Message" required></textarea>
              </div>
              <div class="my-3">
                <div class="loading">Loading</div>
                <div class="error-message"></div>
                <div class="sent-message">
                  Votre message a été envoyé. Nous vous remercions de votre
                  attention.
                </div>
              </div>
              <div class="text-center">
                <button type="submit">Envoyer le message</button>
              </div>
            </form>
          </div>
        </div>
      </div>
    </section>
    <!-- ========== Fin Contact section ========== -->
  </main>
  <!-- ========== Fin Main ========== -->

  <!-- ========== Footer ========== -->
  <footer id="footer">
    <div class="footer-top">
      <div class="container">
        <div class="row">
          <div class="footer-contact">
            <h3>S.B</h3>
            <p>
              <strong>Localisation</strong> : France, 01000 Bourg en bresse<br>
              <strong>Mobile</strong> : +33 XXXXXXXXX <br>
              <strong>Email</strong>: salaheddine.belhaska@sio-carriat.com  <br>
            </p>
          </div>
        </div>
      </div>
    </div>

    <div class="container">
      <div class="copyright-wrap d-md-flex py-4">
        <div class="me-md-auto text-center text-md-start">
          <div class="copyright">
            &copy; Copyright <strong><span>2024 -</span></strong> Tous droits
            réservés
          </div>
          <div class="credits">
            <!-- Designed by -->
            <a href="#">Salaheddine BELHASKA</a>
          </div>
        </div>
        <div class="social-links text-center text-md-right pt-3 pt-md-0">
          <a href="#" class="twitter"><i class="bx bxl-twitter"></i></a>
          <a href="https://www.linkedin.com/in/mrsoukouna/" class="linkedin"><i class="bx bxl-linkedin"></i></a>
          <a href="https://github.com/Mamade92" target="_blank" title="Profile Github"><i class="bx bxl-github"></i></a>
        </div>
      </div>
    </div>
  </footer>
  <!-- ========== Fin Footer ========== -->



  <a href="#" class="back-to-top d-flex align-items-center justify-content-center">
    <i class="bi bi-arrow-up-short"></i> Revenir en haut
</a>
<div id="preloader"></div>


  <!-- ========== Vendor JS ========== -->
  <script src="assets/vendor/purecounter/purecounter_vanilla.js"></script>
  <script src="assets/vendor/aos/aos.js"></script>
  <script src="assets/vendor/bootstrap/js/bootstrap.bundle.min.js"></script>
  <script src="assets/vendor/glightbox/js/glightbox.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/vendor/php-email-form/validate.js"></script>

  <!-- ========== Main JS ========== -->
  <script src="assets/js/main.js"></script>
  <script src="https://cdn.lordicon.com/lordicon.js"></script>


  <!-- test -->
  <script>
    document.getElementById("content").innerHTML = "<p>Contenu caché jusqu'à ce que JavaScript s'exécute</p>";
  </script>
  
  
  <!-- test -->

</body>

</html>