SITE VITRINE

HTML – CSS – BOOTSTRAP

CODE HTML
<!DOCTYPE html>
<html>
<head>
    <title>CV Thomas HOUDARD</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH" crossorigin="anonymous">
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-YvpcrYf0tY3lHB60NNkmXc5s9fDVZLESaAA55NDzOxhy9GkcIdslK1eN7N6jIeHz" crossorigin="anonymous"></script>
    <link href="https://fonts.googleapis.com/css2?family=Lato:ital,wght@0,100;0,300;0,400;0,700;0,900;1,100;1,300;1,400;1,700;1,900&display=swap" rel="stylesheet">
    <link src="js/script.js">
    <link rel="stylesheet" href="css/style.css">
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.3/font/bootstrap-icons.min.css">
</head>

<body data-bs-spy="scroll" data-bs-target="#myNavBar"> 

<!-- BAR NAVIGATION -->
<nav id="myNavBar" class="navbar navbar-expand-lg navbar-dark sticky-top">
    <a class="navbar-brand" href="#"></a>  <!-- toggler a droite -->
    <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNavAltMarkup" aria-controls="navbarNavAltMarkup" aria-expanded="false" aria-label="Toggle navigation">
      <span class="navbar-toggler-icon"></span>
    </button>
    <div class="collapse navbar-collapse" id="navbarNavAltMarkup">
      <div class="navbar-nav">
        <a class="nav-item nav-link active" href="#about">Moi</a>
        <a class="nav-item nav-link" href="#skills">Compétences</a>
        <a class="nav-item nav-link" href="#experiences">experiences</a>
        <a class="nav-item nav-link" href="#education">éducations</a>
        <a class="nav-item nav-link" href="#portfolio">portfolio</a>
        <!--<a class="nav-item nav-link" href="#recommendation">recommandation</a>-->
      </div>
    </div>
  </nav>


<!-- A PROPOS -->
    <section id="about" class="container-fluid">
        <div class="col-8 col-lg-4 profil-picture" class="rounded-circle">   
            <img src="images/me.png">
        </div>
        
        <div class="heading">
        <h1>Hello c'est moi Thomas</h1>
        <h3>Développeur Web</h3>
        <a href="docs/CV_Developpeur_Thomas_Houdard.pdf" class="button1" target="_blank">Télécharger CV</a>
        </div>
    </section>


<!-- COMPETENCES -->
<section id="skills">
        <div class="divider"></div>
        <div class="heading">
            <h2>Compétences</h2>
        </div>

<div class="container">
    <div class="row">
        <div class="col-md-3">
        <div class="icons"><span class="bi-circle-fill bi-code-slash" alt="Card image cap"></span>
            <div class="card-body">
              <h5 class="card-title">PROGRAMMATION</h5>
              <p class="card-text">HTML / CSS<br>Javascript<br>JQuery<br>bootstrap<br>Blueprint</p>
            </div>
        </div>
    </div>

       <div class="col-md-3">
        <div class="icons"><span class="bi-journals bi-code-slash" alt="Card image cap"></span>
            <div class="card-body">
              <h5 class="card-title">GAME & LEVEL DESIGN</h5>
              <p class="card-text">Design itératif<br>Rédaction de Document de Game & Level Design<br>Prototypage<br>Level Building<br>Rational Game & Level Design</p>
            </div>
        </div>
    </div>

        <div class="col-md-3">
          <div class="icons"><span class="bi-laptop bi-code-slash" alt="Card image cap"></span>
            <div class="card-body">
              <h5 class="card-title">UI & UX DESIGN</h5>
              <p class="card-text">Design Thinking<br>Wireframe<br>Audit Concurrentiel<br>Prototype<br>Design d’interaction<br>Responsive web design</p>
            </div>
         </div>           
        </div>

          <div class="col-md-3">
            <div class="icons"><span class="bi-gear bi-code-slash" alt="Card image cap"></span>
              <div class="card-body">
                <h5 class="card-title">COMPÉTENCES ANNEXES</h5>
                <p class="card-text">Intelligence Artificielle<br>E-Commerce<br>Branding<br>Web Design<br>Marketing / SEO</p>
              </div>
           </div>
           <br><br><br>           
          </div>

       <div class="col-md-3">
        <div class="icons"><span class="bi-people-fill bi-code-slash" alt="Card image cap"></span>
          <div class="card-body">
            <h5 class="card-title">ESPRIT  D'ÉQUIPE</h5>
          </div>
       </div>           
      </div> 

      <div class="col-md-3">
        <div class="icons"><span class="bi-pencil-fill bi-code-slash" alt="Card image cap"></span>
          <div class="card-body">
            <h5 class="card-title">CRÉATIF</h5>
          </div>
       </div>           
      </div> 

      <div class="col-md-3">
        <div class="icons"><span class="bi-arrows-fullscreen bi-code-slash" alt="Card image cap"></span>
          <div class="card-body">
            <h5 class="card-title">POLYVALENT</h5>
          </div>
       </div>           
      </div> 


      <div class="col-md-3">
        <div class="icons"><span class="bi-patch-question-fill bi-code-slash" alt="Card image cap"></span>
          <div class="card-body">
            <h5 class="card-title">CURIEUX</h5>
          </div>
       </div>           
      </div> 

     </div>
</div>

</div>
</section>

<!-- EXPERIENCES PRO -->
    <section id="experiences">
        <div class="container">
        <div class="divider white"></div>
        <div class="heading">
            <h2>Expériences professionnelles </h2>
        </div>
        <ul class="timeline">

            <li> <!-- CHROMATEQ -->
                <div class="timeline-badge"><span class="bi-briefcase-fill"></span>
                </div>
                <div class="timeline-panel-container">
                    <div class="timeline-panel">
                        <div class="timeline-heading">
                            <h3>CHROMATEQ</h3>
                            <h4>Technicien Support Client</h4>
                            <p class="text-muted"><span class="bi-clock-fill"></span> Juillet 2023 - Janvier 2024</p>
                        </div>
                        <div class="timeline-body">
                            <p>Entreprise qui développe des logiciels de contrôle d'éclairage, de la maintenance des
                                supports de communication, de la formation clientèle et préparateur de commandes.</p>
                        </div>
                    </div>
                </div>
            </li>

            <li> <!-- O3D -->
                <div class="timeline-badge"><span class="bi-briefcase-fill"></span>
                </div>
                <div class="timeline-panel-container-inverted">
                    <div class="timeline-panel">
                        <div class="timeline-heading">
                            <h3>OBJECTIF 3D</h3>
                            <h4>LAY</h4>
                            <p class="text-muted"><span class="bi-clock-fill"></span> Juin 2021 - Juin 2022</p>
                        </div>
                        <div class="timeine-body">
                            <p>Jeu d'exploration et explorer les îles de ce monde en y résolvant des énigmes.</p>
                            <p>Game Design - Level Design -Programmation - Blueprint</p>
                        </div>
                    </div>
                </div>
            </li>

            
            <li> <!-- TOTAL -->
                <div class="timeline-badge"><span class="bi-briefcase-fill"></span>
                </div>
                <div class="timeline-panel-container">
                    <div class="timeline-panel">
                        <div class="timeline-heading">
                            <h3>TOTAL ENERGIES</h3>
                            <h4>Assistant Administratif</h4>
                            <p class="text-muted"><span class="bi-clock-fill"></span> Aout 2021</p>
                        </div>
                        <div class="timeine-body">
                            <p>Numérisation, Mise à jour de données, Saisie informatique</p>
                        </div>
                    </div>
                </div>
            </li>

         </ul>
        </div>
    </section>

<!-- EDUCATION -->
<section id="education">
    <div class="container">
        <div class="divider"></div>
        <div class="heading">
            <h2>Éducation</h2>
        </div>

    <div class="row">
        <div class="col-md-6"><!-- superieur à 768px -->
            <div class="education-block">
                <h5>Septembre 2018 - Juin 2022</h5>
                <span class="bi-award-fill"></span>
                <h3>OBJECTIF 3D</h3>
                <h4>RNCP Niveau 6</h4>
                <div class="divider"></div>
                <p>Game & Level Design</p>
                <p>Animation 3D</p>
                <p>Modélisation 3D</p>
            </div>
            </div>
 
        <div class="col-md-6">
            <div class="education-block">
                <h5>2014</h5>
                <span class="bi-award-fill"></span>
                <h3>EPSI</h3>
                <h4>RNCP Niveau 6</h4>
                <div class="divider"></div>
                <p>DevOps</p>
                <p>Front-End & Back-End</p>
                <p>Intelligence Artificielle</p>
            </div>
        </div>
       </div> 
    </div>
</div>
</section>


<!-- PORTFOLIO -->
<section id="portfolio">
    <div class="container">
        <div class="divider white"></div>
        <div class="heading">
            <h2>Portfolio</h2>
        </div>
    <div class="row">
        <div class="col-md-4">
            <a href="https://voyage.thomashoudard.com/" target="_blank">
                <img src="images/voyage.png" class="img-thumbnail" alt="voyage">
            </a>
        </div>
        <div class="col-md-4">
            <a href="https://jeuduserpent.thomashoudard.com/" target="_blank">
                <img src="images/serpent.png" class="img-thumbnail" alt="linkedin">
            </a>
        </div>
        <div class="col-md-4">
            <a href="https://top5acteurs.thomashoudard.com" target="_blank">
                <img src="images/actrices.png" class="img-thumbnail" alt="github">
            </a>
        </div>
    </div>
</div>
</section>

 <!-- FOOTER -->
<footer id="footer">
    <a href="#about"> <span class="bi-chevron-compact-up"></span></a> <!-- # = directement sur un element de la page -->
    <h5>Apprendre a coder.com</h5>
</footer>

</body>
</html>
CODE CSS
/* GENERAL */
body {
    font-family: 'Lato', 'sans-serif';
}

h1, h2, h3, h4, h5, h6 {
    font-weight: bold;
}

img {
    max-width: 100%;
    height: auto;
}

section {
    padding: 65px 0 80px 0;
}

section .heading {
    text-align: center;
    padding-bottom: 40px;
}

.divider {
    width: 100px;
    height: 2px;
    background-color: rgb(85, 164, 255);
    margin: 0 auto 20px;
}

.divider.white {
    background-color: white;
}

section .heading h2 {
    text-transform: uppercase;
}

ul {
    list-style: none;
}

/* NAVBAR */
.navbar {
    background-color: rgb(85, 164, 255);
    letter-spacing: 2px; /* place entre les lettres */
    text-transform: uppercase;
    font-weight: bold;
    border-bottom: 1px solid white;
}

.navbar-nav {
    margin: 0 auto; /* center le menu */
    text-align: center;
}

.nav-link {
    color: white;
    margin: 0 6px;
}

.nav-link.active, .nav-link:hover {
    background-color: white;
    color: rgb(85, 164, 255) !important;
}

/* ABOUT */
#about {
    background-color: rgb(85, 164, 255);
}

.profil-picture {
    text-align: center;
    margin: 0px auto 30px;
}

#about .heading h1 {
    text-transform: uppercase;
    color: white;
    margin-bottom: 20px;
}

.button1 {
    color: white;
    text-transform: uppercase;
    border: 2px white solid;
    padding: 18px 50px;
    margin-top: 20px;
    font-weight: bold;
    display: inline-block;
    border-radius: 3px;
    text-decoration: none;
    transition: all 0.3s ease-in 0s;
}

.button1:hover {
    background-color: white;
    color: rgb(85, 164, 255);
}

/* SKILLS */
#skills .heading h2 {
    color: rgb(85, 164, 255);
}

#skills .row .col-md-2 {
    justify-content: center;
}

.row span {
    font-size: 50px;
    border-radius: 50%;
}

#skills .icons {
    text-align: center;
}

/* EXPERIENCES PRO */
#experiences {
    background-color: rgb(85, 164, 255);
}

#experiences .heading h2 {
    color: white;
}

.timeline {
    padding: 30px 10px;
    position: relative;
}

.timeline:before {
    content: " ";
    top: 0;
    bottom: 0;
    position: absolute;
    width: 5px;
    background-color: #333;
    left: 50%;
    margin-left: -2.5px;
}

.timeline-body {
    text-align: justify;
}

.timeline > li { /* > : enfant direct de la timeline */
    margin-bottom: 20px;
    position: relative;
}

.timeline > li:after, .timeline > li:before {
    content: " ";
    display: table;
}

.timeline > li:after {
    clear: both;
}

.timeline li .timeline-badge {
    color: rgb(85, 164, 255);
    width: 50px;
    line-height: 50px;
    font-size: 20px;
    text-align: center;
    position: absolute;
    top: 16px;
    left: 50%;
    margin-left: -25px;
    background-color: white;
    border-radius: 50%;
}

.timeline-panel-container {
    width: 50%;
    float: left;
}

.timeline-panel-container-inverted {
    width: 50%;
    float: right;
    margin-top: -38px;
}

.timeline-panel {
    width: 90%;
    float: right;
    margin-right: 40px;
    border: 1px solid grey;
    border-radius: 7px;
    padding: 20px 25px;
    position: relative;
    box-shadow: 0 1px 6px rgba(0,0,0, 0.175);
    background-color: white;
}

.timeline-panel-container-inverted .timeline-panel {
    float: left;
    margin: 40px;
}

.timeline-panel:after {
    position: absolute;
    top: 27px;
    right: -14px;
    display: inline-block;
    border-top: 14px solid transparent;
    border-left: 14px solid white;
    border-right: 0 solid white;
    border-bottom: 14px solid transparent;
    content: " ";
}

.timeline-panel-container-inverted .timeline-panel:after {
    border-left-width: 0;
    border-right-width: 14px;
    left: -14px;
    right: auto;
}

.timeline-heading h3 {
    margin-top: 5px;
    font-size: 20px;
}

.timeline-heading h4 {
    color: rgb(85, 164, 255);
}

/* EDUCATION */
#education .heading h2 {
    color: rgb(85, 164, 255);
    margin: 15px 0px;
}

.education-block {
    width: 99%;
    margin: 0 auto;
    text-align: center;
    padding: 30px;
    background: #e0e0e0;
    border-radius: 5px;
    border: 1px solid #888;
    margin-bottom: 20px; 
}

.education-block h5 {
    color: #888;
    font-size: 15px;
    margin-bottom: 15px;
}

.education-block span {
    font-size: 35px;
}

.education-block h3 {
    color: rgb(85, 164, 255);
    margin: 15px 0px;
}

.education-block h4 {
    margin-bottom: 20px;
    font-weight: normal;
}

/* PORTFOLIO */
#portfolio {
    background-color: rgb(85, 164, 255);
}

#portfolio .heading h2 {
    color: white;
}

#portfolio img {
    width: 100%;
    height: 100%;
    filter: grayscale(100%); /* rendre en noir et blanc */
    -webkit-filter: grayscale(100%);
}

#portfolio img:hover {
    filter: none; /* annuler le noir et blanc lors du hover */
    -webkit-filter: none;
}

#portfolio .col-md-4 {
    margin-bottom: 20px;
}

/* FOOTER */
footer {
    background-color: #333; 
    text-align: center;
    padding: 20px 0 40px;
}

footer span {
    color: rgb(85, 164, 255);
    font-size: 25px;
    line-height: 40px;
}

footer h5 {
    color: white;
    font-weight: normal;
}

footer span:hover {
    color: rgb(85, 164, 255);
    font-size: 35px;
}
LIEN DU SITE