446 lines
18 KiB
Plaintext
446 lines
18 KiB
Plaintext
<!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"><img alt="Mail" height="13px" src="assets/img/Mail.png"/></span></li>
|
|
<li><span class="pro-title"> Téléphone </span> <span class="pro-detail"><img alt="Phone number" src="assets/img/Phone.png"/></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 in skills|sort(true, false, 'score') %}
|
|
<!--<div class="competency-item mix {{ skill.tags }}"
|
|
<div class="image">
|
|
<img alt="{{skill.name}}" src="{{ skill.logo }}" />
|
|
<p>{{skill.name}}</p>
|
|
</div>
|
|
<div class="score">
|
|
<span class="score-dot {{dotnodot(skill.score,1)}}"></span>
|
|
<span class="score-dot {{dotnodot(skill.score,2)}}"></span>
|
|
<span class="score-dot {{dotnodot(skill.score,3)}}"></span>
|
|
<span class="score-dot {{dotnodot(skill.score,4)}}"></span>
|
|
<span class="score-dot {{dotnodot(skill.score,5)}}"></span>
|
|
</div>
|
|
</div>-->
|
|
<div class="embed-responsive-1by1 col-xs-3 col-sm-3 col-md-2 col-lg-2 col-xl-2 mix {{ skill.tags }}">
|
|
<div class="text-center portfolio-item">
|
|
<div class="shot-item">
|
|
<img src="{{ skill.logo }}" alt="" />
|
|
<div class="overlay">
|
|
<div class="icons">
|
|
<a class="lightbox preview" href="{{ skill.logo }}">
|
|
<i class="icon-eye"></i>
|
|
</a>
|
|
<a class="link" href="#">
|
|
<i class="icon-link"></i>
|
|
</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
{% endfor %}
|
|
</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>
|
|
{% for video in videos %}
|
|
<video height="400" controls>
|
|
<source src="{{video.path}}" type="{{video.type}}">
|
|
Your browser does not support HTML video.
|
|
</video>
|
|
{% endfor %}
|
|
<!-- 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><img alt="Mail" height="13px" src="assets/img/Mail.png"/></p>
|
|
</div>
|
|
<div class="single-contact">
|
|
<div class="contact-icon">
|
|
<i class="fa fa-phone"></i>
|
|
</div>
|
|
<p><img alt="Phone number" src="assets/img/Phone.png"/></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>
|