<commit_before><!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta http-equiv="x-ua-compatible" content="ie=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <title><NAME> - Développeur web</title>
    <meta name="description" content="Portfolio de <NAME>, développeur front-end et étudiant en BTS SIO.">

    <meta name="robots" content="index,follow,noodp">
    <meta name="googlebot" content="index,follow">

    <meta name="generator" content="built-from-scratch">
    <meta name="subject" content="Alexandre Mouton-Brady Portfolio">
    <meta name="summary" content="<NAME>-Brady Portfolio">
    <meta name="abstract" content="<NAME> Workd And Biography">
    <meta name="topic" content="Portfolio">
    <meta name="url" content="http://alexandre-mouton-brady.fr/">
    <meta name="coverage" content="Worldwide">
    <meta name="distribution" content="Global">
    <meta name="rating" content="General">

    <link rel="author" href="humans.txt">

    <link rel="apple-touch-icon" sizes="180x180" href="./favicon/apple-touch-icon.png">
    <link rel="icon" type="image/png" href="./favicon/favicon-32x32.png" sizes="32x32">
    <link rel="icon" type="image/png" href="./favicon/favicon-16x16.png" sizes="16x16">
    <link rel="manifest" href="./favicon/manifest.json">
    <link rel="mask-icon" href="./favicon/safari-pinned-tab.svg" color="#5bbad5">
    <meta name="theme-color" content="#ffffff">

    <style media="screen">
      *,
      *::after,
      *::before {
        box-sizing: border-box;
      }

      :root {
        font-size: 16px;
        font-family: 'Century Gothic', sans-serif;
        color: #262630;
      }

      body {
        margin: 0;
        background-color: #F2F2F2;
      }

      a {
        text-decoration: none;
        color: inherit;
        cursor: pointer;
      }

      .header {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        justify-content: space-between;
        padding: 0 100px;
      }

      .logo {
        font-family: Helvetica, Arial, sans-serif;
        font-weight: bold;
        font-size: 30px;
        letter-spacing: -7px;
        color: #566473;
        transition: transform 300ms ease-in-out, color 300ms ease-in-out;
        will-change: color;
      }
      .logo:hover {
        color: #F39C12;
      }

      .nav {
        display: flex;
        position: relative;
      }
      .nav__position {
        position: absolute;
        content: '';
        top: calc(100% - 3px);
        left: 0;
        background-color: #F39C12;
        width: auto;
        height: 3px;
        transition: transform 300ms ease-in-out, width 300ms ease-in-out;
        will-change: transform, width;
      }

      .nav__item {
        padding: 30px 20px;
        text-transform: capitalize;
        color: #A1B5C2;
        position: relative;
        display: block;
        transition: color 300ms ease-in-out;
      }

      .nav__item--active,
      .nav__item--hover {
        color: #F39C12;
      }

      .banner {
        padding: 250px 0;
        width: 100%;
        background-color: #54646E;
      }
    </style>

    <!-- @TODO: Add social media special format -->
  </head>
  <body>
    <header class="header">
      <a href="/" class="logo">
        <span class="logo__title">AMB</span>
      </a>

      <nav role="navigation" class="nav">
        <a href="#0" class="nav__item nav__item--active">Accueil</a>
        <a href="#0" class="nav__item">A propos</a>
        <a href="#0" class="nav__item">Compétences</a>
        <a href="#0" class="nav__item">Projets</a>
        <a href="#0" class="nav__item">Contact</a>
        <span class="nav__position"></span>
      </nav>
    </header>

    <div class="banner">

    </div>

    <main>

    </main>

    <script   type="text/javascript">
      window.onload = function() {

        /*-----------------------------------------------------*/

        var baseUrl = location.protocol + '//' + location.host + location.pathname;
        var link = document.querySelector('.logo');

        link.href = baseUrl;
<commit_msg>Banner Section + Responsive + Mobile Nav & Ham Menu<commit_after><!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta http-equiv="x-ua-compatible" content="ie=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <title><NAME> - Développeur web</title>
    <meta name="description" content="Portfolio de <NAME>, développeur front-end et étudiant en BTS SIO.">

    <meta name="robots" content="index,follow,noodp">
    <meta name="googlebot" content="index,follow">

    <meta name="generator" content="built-from-scratch">
    <meta name="subject" content="Alexandre Mouton-Brady Portfolio">
    <meta name="summary" content="<NAME>-Brady Portfolio">
    <meta name="abstract" content="<NAME>-Brady Workd And Biography">
    <meta name="topic" content="Portfolio">
    <meta name="url" content="http://alexandre-mouton-brady.fr/">
    <meta name="coverage" content="Worldwide">
    <meta name="distribution" content="Global">
    <meta name="rating" content="General">

    <link rel="author" href="humans.txt">

    <link rel="apple-touch-icon" sizes="180x180" href="./favicon/apple-touch-icon.png">
    <link rel="icon" type="image/png" href="./favicon/favicon-32x32.png" sizes="32x32">
    <link rel="icon" type="image/png" href="./favicon/favicon-16x16.png" sizes="16x16">
    <link rel="manifest" href="./favicon/manifest.json">
    <link rel="mask-icon" href="./favicon/safari-pinned-tab.svg" color="#5bbad5">
    <meta name="theme-color" content="#ffffff">

    <style media="screen">
      /* My normalize */
      *,
      *::after,
      *::before {
        box-sizing: border-box;
        -webkit-tap-highlight-color: rgba(255, 255, 255, 0);
      }

      :root {
        font-size: 16px;
        font-family: 'Century Gothic', sans-serif;
        color: #262630;
      }

      body {
        margin: 0;
        background-color: #EFEFEF;
      }

      a {
        text-decoration: none;
        color: inherit;
        cursor: pointer;
      }

      /* Header */
      .header {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        justify-content: space-between;
        padding: 0 70px;
        background-color: #FAFAFA;
      }

      .logo {
        font-family: Helvetica, Arial, sans-serif;
        position: relative;
        font-weight: bold;
        font-size: 30px;
        color: #566473;
        letter-spacing: -7px;
        transition: transform 300ms ease-in-out, color 300ms ease-in-out;
        will-change: color;
      }
      .logo:hover {
        color: #424c57;
      }

      /* Desktop navigation */
      .nav {
        display: flex;
        position: relative;
      }

      .nav__position {
        position: absolute;
        content: '';
        top: calc(100% - 3px);
        left: 0;
        background-color: #F39C12;
        width: auto;
        height: 3px;
        transition: transform 300ms ease-in-out, width 300ms ease-in-out;
        will-change: transform, width;
      }

      .nav__item {
        padding: 25px 20px;
        text-transform: capitalize;
        color: #A1B5C2;
        position: relative;
        display: block;
        transition: color 300ms ease-in-out;
        white-space: nowrap;
      }

      .nav__item--active,
      .nav__item--hover {
        color: #F39C12;
      }

      /* Mobile navigation */
      .btn-open-nav {
        height: 51px;
        width: 51px;
        position: relative;
        display: none;
        padding: 8px 5px;
        flex-direction: column;
        justify-content: space-around;
        cursor: pointer;
      }
      .btn-open-nav > span {
        width: 100%;
        background-color: #566473;
        height: 4px;
        border-radius: 5px;
      }

      .btn-close-nav {
        height: 51px;
        width: 51px;
        position: absolute;
        padding: 8px 5px;
        cursor: pointer;
        right: 5%;
        top: 0;
      }
      .btn-close-nav > span {
        height: 100%;
        width: 4px;
        display: block;
        left: calc(50% - 2px);
        top: 0;
        position: absolute;
        border-radius: 5px;
        background-color: #F39C12;
      }
      .btn-close-nav > span:first-child {
        transform: rotate(45deg);
      }
      .btn-close-nav > span:last-child {
        transform: rotate(-45deg);
      }

      .navigation--mobile {
        height: 100vh;
        width: 100%;
        position: absolute;
        top: 0;
        left: 0;
        background-color: rgba(84, 100, 110, 1);
        z-index: 99;
        display: none;
        flex-direction: column;
        justify-content: space-between;
        align-items: center;
        opacity: 0;
        transform: scale(0);
        transition: transform 300ms ease-in-out, opacity 300ms ease-in-out;
        transform-origin: 90% 25px;
        will-change: transform, opacity;
      }

      .navigation--mobile.show {
        transform: scale(1);
        opacity: 1;
      }

      .nav__item--mobile {
        color: #FAFAFA;
        font-size: 1.6rem;
        display: flex;
        justify-content: center;
        align-items: center;
        flex: 1;
        width: 100%;
        background-color: transparent;
        will-change: background-color;
        transition: background-color 300ms ease-in-out;
      }
      .nav__item--mobile:focus {
        background-color: rgba(250, 250, 250, 0.088);
      }

      /* Main content */
      .banner {
        padding: 150px 0;
        width: 100%;
        background-color: #54646E;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        overflow: hidden;
      }

      .banner__headline {
        color: #FAFAFA;
        font-size: 3rem;
        margin: 5px 0;
      }

      .banner__subtitle {
        color: #A1B5C2;
        font-size: 1.7rem;
      }

      .banner__cta {
        background-color: #FAFAFA;
        border-radius: 7px;
        margin: 50px 0;
        font-size: 2rem;
        position: relative;
        display: flex;
        overflow: hidden;
      }
      .banner__cta > span {
        padding: 15px 25px;
      }
      .banner__cta > a {
        background-color: #A1B5C2;
        color: #FAFAFA;
        padding: 15px 25px;
      }

      /* Responsive */
      @media screen and (max-width: 800px) {
        .header {
          padding: 0 5%;
        }

        .nav {
          display: none;
        }

        .btn-open-nav {
          display: flex;
        }

        .navigation--mobile {
          display: flex;
        }

        .banner__headline {
          font-size: 2.5rem;
        }
        .banner__subtitle {
          font-size: 1.2rem;
        }
        .banner__cta {
          font-size: 1.5rem;
        }
      }

      @media screen and (max-width: 600px) {
        .banner__headline {
          font-size: 2.5rem;
          text-align: center;
        }
        .banner__headline > span {
          display: block;
        }
        .banner__subtitle {
          font-size: 1.7rem;
        }
        .banner__subtitle > span:nth-child(2) {
          display: none;
        }
        .banner__subtitle > span {
          display: block;
          text-align: center;
        }
        .banner__cta {
          font-size: 1.2rem;
        }
        .banner__cta > span {
          padding: 10px;
        }
        .banner__cta > a {
          padding: 10px 15px;
        }
      }
    </style>

    <!-- @TODO: Add social media special format -->
  </head>
  <body>
    <nav class="navigation--mobile">
      <div class="btn-close-nav">
        <span></span>
        <span></span>
      </div>
      <a href="#0" class="nav__item--mobile">Accueil</a>
      <a href="#0" class="nav__item--mobile">A propos</a>
      <a href="#0" class="nav__item--mobile">Compétences</a>
      <a href="#0" class="nav__item--mobile">Projets</a>
      <a href="#0" class="nav__item--mobile">Contact</a>
    </nav>

    <header class="header">
      <a href="/" class="logo">
        <span class="logo__title">AMB</span>
      </a>

      <nav role="navigation" class="nav">
        <a href="#0" class="nav__item nav__item--active">Accueil</a>
        <a href="#0" class="nav__item">A propos</a>
        <a href="#0" class="nav__item">Compétences</a>
        <a href="#0" class="nav__item">Projets</a>
        <a href="#0" class="nav__item">Contact</a>
        <span class="nav__position"></span>
      </nav>

      <div class="btn-open-nav">
        <span></span>
        <span></span>
        <span></span>
      </div>
    </header>

    <div class="banner">
      <h1 class="banner__headline"><span>Alexandre </span><span>Mouton-Brady</span></h1>
      <p class="banner__subtitle"><span>Etudiant en BTS SIO</span><span> // </span><span>Développeur en devenir</span></p>
      <div class="banner__cta">
        <span>Construisons l'avenir ensemble</span>
        <a href="#0">🡢</a>
      </div>
    </div>

    <main>

    </main>

    <script   type="text/javascript">
      window.onload = function() {

        var btnOpenNav = document.querySelector('.btn-open-nav');
        var btnCloseNav = document.querySelector('.btn-close-nav')
        var mobileNav = document.querySelector('.navigation--mobile');

        btnOpenNav.onclick = function() {
          if(!mobileNav.classList.contains('show'))
            mobileNav.classList.add('show');
        };

        btnCloseNav.onclick = function() {
          if(mobileNav.classList.contains('show'))
            mobileNav.classList.remove('show');
        };

        /*-----------------------------------------------------*/

        var baseUrl = location.protocol + '//' + location.host + location.pathname;
        var link = document.querySelector('.logo');

        link.href = baseUrl;

{'fraction_non_alphanumeric': 0.1543806862955799, 'fraction_numerical': 0.027150942044559066, 'mean_word_length': 1.8980693377620925, 'pattern_counts': {'":': 0, '<': 171, '<?xml version=': 0, '>': 182, 'https://': 0, 'lorem ipsum': 0, 'www.': 0, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 0, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '1238606', 'n_tokens_mistral': 4821, 'n_tokens_neox': 4438, 'n_words': 912}