<!DOCTYPE html>
<html lang="en">
  <head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

		<title>{{ name }} - Page perso</title>

    <!-- Bootstrap CSS -->
    <link rel="stylesheet" type="text/css" href="assets/css/bootstrap.min.css" >
    <!-- Fonts -->
    <link rel="stylesheet" type="text/css" href="assets/fonts/font-awesome.min.css">
    <!-- Icon -->
    <link rel="stylesheet" type="text/css" href="assets/fonts/simple-line-icons.css">
    <!-- Slicknav -->
    <link rel="stylesheet" type="text/css" href="assets/css/slicknav.css">
    <!-- Nivo Lightbox -->
    <link rel="stylesheet" type="text/css" href="assets/css/nivo-lightbox.css" >
    <!-- Animate -->
    <link rel="stylesheet" type="text/css" href="assets/css/animate.css">
    <!-- Main Style -->
		<link rel="stylesheet" type="text/css" href="assets/css/main.css">
    <!-- Responsive Style -->
    <link rel="stylesheet" type="text/css" href="assets/css/responsive.css">

  </head>
  <body>

    <!-- Header Area wrapper Starts -->
    <header id="header-wrap">
      <!-- Navbar Start -->
      <nav class="navbar navbar-expand-lg fixed-top scrolling-navbar indigo">
        <div class="container">
          <!-- Brand and toggle get grouped for better mobile display -->
          <div class="navbar-header">
            <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#main-navbar" aria-controls="main-navbar" aria-expanded="false" aria-label="Toggle navigation">
              <span class="navbar-toggler-icon"></span>
              <span class="icon-menu"></span>
              <span class="icon-menu"></span>
              <span class="icon-menu"></span>
            </button>
            <a href="index.html" class="navbar-brand">
							<div class="navbar-name">{{ name }}</div>
						</a>
          </div>
          <div class="collapse navbar-collapse" id="main-navbar">
            <ul class="onepage-nev navbar-nav mr-auto w-100 justify-content-end clearfix">
              <li class="nav-item active">
                <a class="nav-link" href="#hero-area">
                  Accueil
                </a>
              </li>
              <li class="nav-item">
                <a class="nav-link" href="#about">
                  À propos de moi
                </a>
              </li>
              <li class="nav-item">
                <a class="nav-link" href="#services">
                  Emploi
                </a>
              </li>
              <li class="nav-item">
                <a class="nav-link" href="#resume">
                  CV
                </a>
              </li>
              <li class="nav-item">
                <a class="nav-link" href="#portfolios">
                  Compétences
                </a>
              </li>
              <li class="nav-item">
                <a class="nav-link" href="#contact">
                  Contact
                </a>
              </li>
            </ul>
          </div>
        </div>

        <!-- Mobile Menu Start -->
        <ul class="onepage-nev mobile-menu">
          <li>
            <a href="#home">Accueil</a>
          </li>
          <li>
            <a href="#about">À propos</a>
          </li>
          <li>
            <a href="#services">Emploi</a>
          </li>
          <li>
            <a href="#resume">CV</a>
          </li>
          <li>
            <a href="#portfolio">Compétences</a>
          </li>
          <li>
            <a href="#contact">Contact</a>
          </li>
        </ul>
        <!-- Mobile Menu End -->
      </nav>
      <!-- Navbar End -->

      <!-- Hero Area Start -->
      <div id="hero-area" class="hero-area-bg">
        <div class="overlay"></div>
        <div class="container">
          <div class="row">
            <div class="col-md-12 col-sm-12 text-center">
              <div class="contents">
                <h5 class="script-font wow fadeInUp" data-wow-delay="0.2s">Site perso de</h5>
                <h2 class="head-title wow fadeInUp" data-wow-delay="0.4s">Geoffrey Montel</h2>
                <p class="script-font wow fadeInUp" data-wow-delay="0.6s">Passionné d'informatique et de cybersécurité</p>
                <ul class="social-icon wow fadeInUp" data-wow-delay="0.8s">
									{% for socialbrand, socialurl in social %}
                  <li>
										<a class="{{ socialbrand }}" href="{{ socialurl }}"><i class="icon-social-{{ socialbrand }}"></i></a>
                  </li>
									{% endfor %}
                </ul>
                <div class="header-button wow fadeInUp" data-wow-delay="1s">
                  <a href="#" class="btn btn-common">J'ai besoin d'aide cyber</a>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <!-- Hero Area End -->

    </header>
    <!-- Header Area wrapper End -->

    <!-- About Section Start -->
    <section id="about" class="section-padding">
      <div class="container">
        <div class="row">
          <div class="col-lg-6 col-md-6 col-sm-12 col-xs-12">
            <div class="img-thumb wow fadeInLeft" data-wow-delay="0.3s">
              <img class="img-fluid" src="assets/img/photo_web.png" alt="">
            </div>
          </div> 
          <div class="col-lg-6 col-md-6 col-sm-12 col-xs-12">
            <div class="profile-wrapper wow fadeInRight" data-wow-delay="0.3s">
              <h3>Bonjour à vous!</h3>
							<p>{{ descr | safe }}</p>
              <div class="about-profile">
                <ul class="admin-profile">
									<li><span class="pro-title"> Nom </span> <span class="pro-detail">{{ name }}</span></li>
									<li><span class="pro-title"> Âge </span> <span class="pro-detail">{{ age }}</span></li>
									<li><span class="pro-title"> Expérience </span> <span class="pro-detail">{{ experience.date }}</span></li>
									<li><span class="pro-title"> Emploi </span> <span class="pro-detail">{{ experience.current }}</span></li>
									<li><span class="pro-title"> Pays </span> <span class="pro-detail">{{ country }}</span></li>
									<li><span class="pro-title"> Ville </span> <span class="pro-detail">{{ city }}</span></li>
									<li><span class="pro-title"> Courriel </span> <span class="pro-detail">{{ mail }}</span></li>
									<li><span class="pro-title"> Téléphone </span> <span class="pro-detail">{{ phone }}</span></li>
                </ul>
              </div>
              <a href="" class="btn btn-common"><i class="icon-paper-clip"></i>Téléchargez mon CV</a>
              <a href="#contact" class="btn btn-danger"><i class="icon-speech"></i> Contactez-moi</a>
            </div>
          </div>   
        </div>
      </div>
    </section>
    <!-- About Section End -->

    <!-- Services Section Start -->
    <section id="services" class="services section-padding">
      <h2 class="section-title wow flipInX" data-wow-delay="0.4s">Mon quotidien</h2>
      <div class="container">
        <div class="row">
					{% for activity in activities %}
          <!-- Services item -->
          <div class="col-md-6 col-lg-3 col-xs-12">
            <div class="services-item wow fadeInDown" data-wow-delay="0.3s">
              <div class="icon">
								<i class="{{ activity.icon }}"></i>
              </div>
              <div class="services-content">
								<h3><a href="#">{{ activity.title }}</a></h3>
								<p>{{ activity.details }}</p>
              </div>
            </div>
          </div>
					{% endfor %}
        </div>
      </div>
    </section>
    <!-- Services Section End -->

    <!-- Resume Section Start -->
    <div id="resume" class="section-padding">
      <div class="container">
        <div class="row">
          <div class="col-lg-6 col-md-6 col-sm-6">
            <div class="education wow fadeInRight" data-wow-delay="0.3s">
              <ul class="timeline">
                <li>
                  <i class="icon-graduation"></i>
                  <h2 class="timelin-title">Formation</h2>
                </li>
								{% for certification in certifications %}
                <li>
                  <div class="content-text">
										<h3 class="line-title">{{ certification.title }}</h3>
										<span>{{ certification.date }}</span>
										<p class="line-text">{{ certification.details }}</p>
                  </div>
                </li>
								{% endfor %}
              </ul>
            </div>
          </div>
          <div class="col-lg-6 col-md-6 col-sm-6">
            <div class="experience wow fadeInRight" data-wow-delay="0.6s">
              <ul class="timeline">
                <li>
                  <i class="icon-briefcase"></i>
                  <h2 class="timelin-title">Expérience</h2>
                </li>
								{% for job in experience.jobs %}
                <li>
                  <div class="content-text">
										<h3 class="line-title">{{ job.title}}</h3>
										<span>{{ job.date }}</span>
										<p class="line-text">{{ job.details }}</p>
                  </div>
                </li>
								{% endfor %}
              </ul>
            </div>
          </div>
        </div>
      </div>
    </div>
    <!-- Resume Section End -->

    <!-- Portfolio Section -->
    <section id="portfolios" class="section-padding">
      <!-- Container Starts -->
      <div class="container">        
        <h2 class="section-title wow flipInX" data-wow-delay="0.4s">Panel de compétences</h2>
        <div class="row">          
          <div class="col-md-12">
            <!-- Portfolio Controller/Buttons -->
            <div class="controls text-center">
              <a class="filter active btn btn-common" data-filter="all">
                All 
              </a>
							{% for skill_tag in skill_tags %}
							<a class="filter btn btn-common" data-filter=".{{ skill_tag }}">
								{{ skill_tag }} 
              </a>
							{% endfor %}
            </div>
            <!-- Portfolio Controller/Buttons Ends-->
          </div>

          <!-- Portfolio Recent Projects -->
          <div id="portfolio" class="row wow fadeInDown" data-wow-delay="0.4s">
								{%- macro dotnodot(c1,c2) -%}
								{%- if c1 >= c2 -%}
								  full
							  {%- else -%}
								  empty
								{%- endif -%}
								{%- endmacro %}
						{% for skill,item in skills %}
						<div class="competency-item mix {{ item.tags }}">
              <div class="image">
							<!--<img alt="item.logo" src="{{ item.logo }}" />-->
							<p>{{skill}}</p>
              </div>
							<div class="score"><!--debug: {{item.score}}-->
								<span class="score-dot {{dotnodot(item.score,1)}}"></span>
								<span class="score-dot {{dotnodot(item.score,2)}}"></span>
								<span class="score-dot {{dotnodot(item.score,3)}}"></span>
								<span class="score-dot {{dotnodot(item.score,4)}}"></span>
								<span class="score-dot {{dotnodot(item.score,5)}}"></span>
              </div>
            </div>
						{% endfor %}
						<!--
            <div class="col-sm-6 col-md-4 col-lg-4 col-xl-4 mix development print">
              <div class="portfolio-item">
                <div class="shot-item">
                  <img src="assets/img/gallery/img-1.jpg" alt="" />  
                  <div class="overlay">
                    <div class="icons">
                      <a class="lightbox preview" href="assets/img/gallery/img-1.jpg">
                        <i class="icon-eye"></i>
                      </a>
                      <a class="link" href="#">
                        <i class="icon-link"></i>
                      </a>
                    </div>
                  </div>
                </div>               
              </div>
            </div>
            <div class="col-sm-6 col-md-4 col-lg-4 col-xl-4 mix design print">
              <div class="portfolio-item">
                <div class="shot-item">
                  <img src="assets/img/gallery/img-2.jpg" alt=""/> 
                  <div class="overlay">
                    <div class="icons">
                      <a class="lightbox preview" href="assets/img/gallery/img-2.jpg">
                        <i class="icon-eye"></i>
                      </a>
                      <a class="link" href="#">
                        <i class="icon-link"></i>
                      </a>
                    </div>
                  </div>
                </div>               
              </div>
            </div>
            <div class="col-sm-6 col-md-4 col-lg-4 col-xl-4 mix development">
              <div class="portfolio-item">
                <div class="shot-item">
                  <img src="assets/img/gallery/img-3.jpg" alt=""/> 
                  <div class="overlay">
                    <div class="icons">
                      <a class="lightbox preview" href="assets/img/gallery/img-3.jpg">
                        <i class="icon-eye"></i>
                      </a>
                      <a class="link" href="#">
                        <i class="icon-link"></i>
                      </a>
                    </div>
                  </div>
                </div>               
              </div>
            </div>
            <div class="col-sm-6 col-md-4 col-lg-4 col-xl-4 mix development design">
              <div class="portfolio-item">
                <div class="shot-item">
                  <img src="assets/img/gallery/img-4.jpg" alt="" /> 
                  <div class="overlay">
                    <div class="icons">
                      <a class="lightbox preview" href="assets/img/gallery/img-4.jpg">
                        <i class="icon-eye"></i>
                      </a>
                      <a class="link" href="#">
                        <i class="icon-link"></i>
                      </a>
                    </div>
                  </div>
                </div>               
              </div>
            </div>
            <div class="col-sm-6 col-md-4 col-lg-4 col-xl-4 mix development">
              <div class="portfolio-item">
                <div class="shot-item">
                  <img src="assets/img/gallery/img-5.jpg" alt="" /> 
                  <div class="overlay">
                    <div class="icons">
                      <a class="lightbox preview" href="assets/img/gallery/img-5.jpg">
                        <i class="icon-eye"></i>
                      </a>
                      <a class="link" href="#">
                        <i class="icon-link"></i>
                      </a>
                    </div>
                  </div>
                </div>               
              </div>
            </div>
            <div class="col-sm-6 col-md-4 col-lg-4 col-xl-4 mix print design">
              <div class="portfolio-item">
                <div class="shot-item">
                  <img src="assets/img/gallery/img-6.jpg" alt=""/>
                  <div class="overlay">
                    <div class="icons">
                      <a class="lightbox preview" href="assets/img/gallery/img-6.jpg">
                        <i class="icon-eye"></i>
                      </a>
                      <a class="link" href="#">
                        <i class="icon-link"></i>
                      </a>
                    </div>
                  </div>
                </div>               
              </div>
            </div>
          </div>
        </div>
						-->
      </div>
      <!-- Container Ends -->
    </section>
    <!-- Portfolio Section Ends --> 

    <!-- Counter Area Start-->
    <section class="counter-section section-padding">
      <div class="container">
        <div class="row">
					<div id="centered-vids">
					</div>
					<!-- TODO ajouter ici les recos clients -->
					<iframe class="scoop-video" width="560" height="315" src="https://www.youtube.com/embed/xlpEFaUlAgs?start=6&end=164&modestbranding=1&rel=0&color=white&showinfo=0&color=blue" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen>
					</iframe>
        </div>
      </div>
    </section>
    <!-- Counter Area End-->

    <!-- Contact Section Start -->
    <section id="contact" class="section-padding">      
      <div class="contact-form">
        <div class="container">
          <div class="row contact-form-area wow fadeInUp" data-wow-delay="0.4s">          
            <div class="col-md-6 col-lg-6 col-sm-12">
              <div class="contact-block">
                <h2>Contactez-moi</h2>
                <form id="contactForm">
                  <div class="row">
                    <div class="col-md-6">
                      <div class="form-group">
                        <input type="text" class="form-control" id="name" name="name" placeholder="Nom" required data-error="Please enter your name">
                        <div class="help-block with-errors"></div>
                      </div>                                 
                    </div>
                    <div class="col-md-6">
                      <div class="form-group">
                        <input type="text" placeholder="Adresse électronique" id="email" class="form-control" name="email" required data-error="Please enter your email">
                        <div class="help-block with-errors"></div>
                      </div> 
                    </div>
                     <div class="col-md-12">
                      <div class="form-group">
                        <input type="text" placeholder="Sujet" id="msg_subject" class="form-control" required data-error="Please enter your subject">
                        <div class="help-block with-errors"></div>
                      </div>
                    </div>
                    <div class="col-md-12">
                      <div class="form-group"> 
                        <textarea class="form-control" id="message" placeholder="Your Message" rows="5" data-error="Mettez votre message ici..." required></textarea>
                        <div class="help-block with-errors"></div>
                      </div>
                      <div class="submit-button">
                        <button class="btn btn-common" id="submit" type="submit">Envoyer</button>
                        <div id="msgSubmit" class="h3 text-center hidden"></div> 
                        <div class="clearfix"></div> 
                      </div>
                    </div>
                  </div>            
                </form>
              </div>
            </div>
            <div class="col-md-6 col-lg-6 col-sm-12">
              <div class="footer-right-area wow fadeIn">
                <h2>Autres modes de contact</h2>
                <div class="footer-right-contact">
                  <div class="single-contact">
                    <div class="contact-icon">
                      <i class="fa fa-map-marker"></i>
                    </div>
										<p>{{ city }}</p>
                  </div>
                  <div class="single-contact">
                    <div class="contact-icon">
                      <i class="fa fa-envelope"></i>
                    </div>
										<p><a href="mailto:{{ mail }}">{{ mail }}</a></p>
                  </div>
                  <div class="single-contact">
                    <div class="contact-icon">
                      <i class="fa fa-phone"></i>
                    </div>
										<p><a href="#">{{ phone }}</a></p>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>   
    </section>
    <!-- Contact Section End -->

    <!-- Footer Section Start -->
    <footer class="footer-area section-padding">
      <div class="container">
        <div class="row">
          <div class="col-md-12">
            <div class="footer-text text-center wow fadeInDown" data-wow-delay="0.3s">
              <ul class="social-icon">
								{% for socialbrand, socialurl in social %}
                 <li>
									 <a class="{{ socialbrand }}" href="{{ socialurl }}"><i class="icon-social-{{ socialbrand }}"></i></a>
                 </li>
								 {% endfor %}
              </ul>
              <p>Fait par Geoffrey Montel sur le thème de UIdeck, Copyright © 2018 All Rights Reserved</p>
            </div>
          </div>
        </div>
      </div>
    </footer>
    <!-- Footer Section End -->

    <!-- Go to Top Link -->
    <a href="#" class="back-to-top">
      <i class="icon-arrow-up"></i>
    </a>

    <!-- jQuery first, then Popper.js, then Bootstrap JS -->
    <script src="assets/js/jquery-min.js"></script>
    <script src="assets/js/popper.min.js"></script>
    <script src="assets/js/bootstrap.min.js"></script>
    <script src="assets/js/jquery.mixitup.js"></script>
    <script src="assets/js/jquery.counterup.min.js"></script>
    <script src="assets/js/waypoints.min.js"></script>
    <script src="assets/js/wow.js"></script>
    <script src="assets/js/jquery.nav.js"></script>
    <script src="assets/js/jquery.easing.min.js"></script>  
    <script src="assets/js/nivo-lightbox.js"></script>
    <script src="assets/js/jquery.slicknav.js"></script>
    <script src="assets/js/main.js"></script>
      
  </body>
</html>
