{extends '../../../../../module/Application/view/layout/layout.tpl'}
{block 'content'}

    <!--------------------------------------HEADER-------------------------------------->

    <header id="main-header">
        <div class="header-wrapper">
            <a class="logo" href="#">Nicolas</a>

            <div class="mobile-toggle">
                <span></span>
                <span></span>
                <span></span>
            </div>

            <nav>
                <ul>
                    <!--Main nav to navigate to different parts of the page-->
                    <li><a id="hero-link" href="#hero">Accueil</a></li>
                    <li><a id="about-link" href="#about">À propos </a></li>
                    <li><a id="competences-link" href="#competences">Competences</a></li>
                    <li><a id="experiences-link" href="#experiences">Experiences</a></li>
                    {*<li><a id="engagement-link" href="#engagement">Engagements</a></li>*}
                    <li><a id="projets-link" href="#projets">Projets</a></li>
                    <li><a id="contact-link" href="#contact">Contact</a></li>
                </ul>
            </nav>
        </div>
    </header>

    <!--------------------------------------HERO IMAGE-------------------------------------->


    <section id="hero">
        <div id="particles-js">
            <div class="row center-xs center-sm center-md center-lg middle-xs middle-sm middle-md middle-lg">
                <div class="static col-xs-10 col-sm-10 col-md-10 col-lg-10">
                    <div class="hero-content">
                        <img src="img/profile-pic2.jpg">
                        <h1>Nicolas Riault</h1>
                        <h2 id="hero-text-animation">Web Developer Full Stack, Consultant IT</h2>
                        <button class="download"><a download href="downloads/example.txt">Télécharger mon CV</a></button>
                        <!--To add your file simply replace example.txt with whatever file you want-->
                    </div>
                </div>
            </div>
        </div>
    </section>

    <!--------------------------------------ABOUT SECTION-------------------------------------->

    <section id="about">
        <div class="container">
            <div class="row left-xs left-sm left-md left-lg">
                <div class="col-xs-12 col-sm-12 col-md-6 col-lg-6">
                    <div class="about-text">
                        <h2>Bonjour, je m'appelle <span class="accent-text">Nicolas</span></h2>
                        <p>
                            Ouvert et curieux de caractère, je suis à l’aise dans la relation client et apprécie le travail
                            en équipe.
                            J’aime ce travail de développeur qui nécessite une capacité d’adaptation et d’écoute au service
                            d’un projet.
                            <br>
                            Du point de vue technique, je développe principalement en PHP, C#. Je suis également a l'aise
                            avec SQL Server et la solution MSBI.
                            <br>
                            Sur mon temps libre je travaille sur des projets personnels que j'autilise au quotidien en
                            utilisant de nouvelles technologies (AngularJs, Ionic ... ).
                        </p>
                        <ul class="about-social">
                            <!--Social icons for the about section-->
                            <!--These icons are font-awesome icons and more can be looked up at https://fontawesome.com/icons?d=gallery-->
                            <li><a href="http://www.google.com"><i class="fab fa-facebook-f"></i></a></li>
                            <!--Simply replace the google link with your social media link-->
                            <li><a href="http://www.google.com"><i class="fab fa-twitter"></i></a></li>
                            <li><a href="http://www.google.com"><i class="far fa-envelope"></i></a></li>
                            <li><a href="http://www.google.com"><i class="fab fa-google-plus-g"></i></a></li>
                            <li><a href="http://www.google.com"><i class="fab fa-youtube"></i></a></li>
                        </ul>
                    </div>
                </div>
                <div class="col-xs-12 col-sm-12 col-md-6 col-lg-6">
                    <div class="about-resume">
                        <div class="education">
                            <h2>Cursus et certifications</h2>
                            <div class="eduction-block">
                                <h4>SQL Server 2014 Performance Tuning and Optimization</h4>
                                <p>2017 - IB Formation - Paris</p>
                            </div>
                            <div class="eduction-block">
                                <h4>Licence Professionelle logiciel libre et propriétaire</h4>
                                <p>2012 - UFR Des Sciences - Angers</p>
                            </div>
                            <div class="eduction-block">
                                <h4>BTS Informatique de Gestion</h4>
                                <p>2011 - Lycée Chevrollier - Angers</p>
                            </div>
                            <div class="eduction-block">
                                <h4>Lycée Notre Dame</h4>
                                <p>2009 - Baccalauréat Scientifique - La Flèche</p>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <!--------------------------------------COMPETENCES SECTION-------------------------------------->

    <section id="competences">
        <div class="container">
            <div class="section-title">
                <h1>Mes <span class="accent-text">Compétences</span></h1>
            </div>
            <div class="row left-xs left-sm left-md left-lg">
                <div class="col-xs-12 col-sm-12 col-md-6 col-lg-6">
                    <div class="about-resume">
                        <div class="skills">
                            <h2>Développement</h2>

                            <div class="skill-progress-container">
                                <p>PHP</p>
                                <div class="skill-bar">
                                    <div class="bar-percent php">
                                        <div class="inner-percent"></div>
                                    </div>
                                </div>
                            </div>

                            <div class="skill-progress-container">
                                <p>Javascript</p>
                                <div class="skill-bar">
                                    <div class="bar-percent php">
                                        <div class="inner-percent"></div>
                                    </div>
                                </div>
                            </div>

                            <div class="skill-progress-container">
                                <p>HTML / CSS</p>
                                <div class="skill-bar">
                                    <div class="bar-percent html">
                                        <div class="inner-percent"></div>
                                    </div>
                                </div>
                            </div>

                            <div class="skill-progress-container">
                                <p>.NET / C#</p>
                                <div class="skill-bar">
                                    <div class="bar-percent net">
                                        <div class="inner-percent"></div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="col-xs-12 col-sm-12 col-md-6 col-lg-6">
                    <div class="about-resume">
                        <div class="skills">
                            <h2>SGBD / Business intelligence</h2>

                            <div class="skill-progress-container">
                                <p>SQL Server</p>
                                <div class="skill-bar">
                                    <div class="bar-percent php">
                                        <div class="inner-percent"></div>
                                    </div>
                                </div>
                            </div>

                            <div class="skill-progress-container">
                                <p>Microsoft BI</p>
                                <div class="skill-bar">
                                    <div class="bar-percent msbi">
                                        <div class="inner-percent"></div>
                                    </div>
                                </div>
                            </div>

                            <div class="skill-progress-container">
                                <p>MySQL</p>
                                <div class="skill-bar">
                                    <div class="bar-percent mysql">
                                        <div class="inner-percent"></div>
                                    </div>
                                </div>
                            </div>

                            <div class="skill-progress-container">
                                <p>PostgreSQL</p>
                                <div class="skill-bar">
                                    <div class="bar-percent postgresql">
                                        <div class="inner-percent"></div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="row left-xs left-sm left-md left-lg">

                <div class="col-xs-12 col-sm-12 col-md-6 col-lg-6">
                    <div class="about-resume">
                        <div class="skills">
                            <h2>Autres</h2>

                            <div class="skill-progress-container">
                                <p>MongoDb / CassandraDb</p>
                                <div class="skill-bar">
                                    <div class="bar-percent msbi">
                                        <div class="inner-percent"></div>
                                    </div>
                                </div>
                            </div>

                            <div class="skill-progress-container">
                                <p>Python</p>
                                <div class="skill-bar">
                                    <div class="bar-percent msbi">
                                        <div class="inner-percent"></div>
                                    </div>
                                </div>
                            </div>

                            <div class="skill-progress-container">
                                <p>NodeJs</p>
                                <div class="skill-bar">
                                    <div class="bar-percent mysql">
                                        <div class="inner-percent"></div>
                                    </div>
                                </div>
                            </div>

                            <div class="skill-progress-container">
                                <p>AngularJS</p>
                                <div class="skill-bar">
                                    <div class="bar-percent mysql">
                                        <div class="inner-percent"></div>
                                    </div>
                                </div>
                            </div>

                            <div class="skill-progress-container">
                                <p>Ionic Framework</p>
                                <div class="skill-bar">
                                    <div class="bar-percent postgresql">
                                        <div class="inner-percent"></div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <!--------------------------------------EXPERIENCES SECTION-------------------------------------->

    <section id="experiences" class="timeline">
        <div class="container">
            <div class="section-title">
                <h1>Mes <span class="accent-text">Experiences</span></h1>
            </div>
            <div class="timeline-item">
                <div class="timeline-img"></div>
                <div class="timeline-content js--fadeInLeft">
                    <h3>Développeur Full Stack - Serveurcom</h3>
                    <div class="date">12/2015 - Actuel</div>
                    <p>
                        Maintenance évolutive d'une application de facturation pour les télécoms.
                        <br>
                        Macro gestion de l'équipe de développement.
                        <br>
                        Formation Microsoft 55144B.
                    </p>
                    <a class="bnt-more" onclick="launchModale('#modalServeurcom')">Détail</a>
                </div>
            </div>

            <div class="timeline-item">
                <div class="timeline-img"></div>
                <div class="timeline-content js--fadeInRight">
                    <h3>Consultant SI - Capgémini</h3>
                    <div class="date">02/2013 - 11/2015</div>
                    <p>
                        Développeur référent pour une TMA pour le groupe La Poste.
                        <br>
                        <small><i>PHP(CakePhp), MSBI/Asp.NET ( SSAS, SSRS, SSIS)</i></small>
                        <br>
                        TMA pour le ministère des sports.
                        <br>
                        <small><i>.NET/MSBI</i></small>
                        <br>
                        TMA pour l'Agence nationale de la recherche.
                        <br>
                        <small><i>C#, ASP, Sharepoint</i></small>
                        <br>
                    </p>
                    <a class="bnt-more" onclick="launchModale('#modalCapgemini')">Détail</a>


                </div>

            </div>

            <div class="timeline-item">
                <div class="timeline-img"></div>
                <div class="timeline-content js--fadeInLeft">
                    <div class="date">04/2012 - 11/2012</div>
                    <h3>Développeur - INRA</h3>
                    <p>
                        Développement d'une application web pour informatiser le métier des chercheurs.
                        <br>
                        <small><i>Qooxdoo, Python, PostgreSQL</i></small>
                    </p>
                </div>
            </div>

            <div class="timeline-item">
                <div class="timeline-img"></div>
                <div class="timeline-content js--fadeInRight">
                    <h3>Développeur Web - Archimède</h3>
                    <div class="date">06/2011 - 07/2011</div>
                    <p>Developpement d'un site vitrine sous Joomla</p>
                </div>
            </div>
        </div>
    </section>

    <!--------------------------------------ENGAGEMENT SECTION-------------------------------------->
    {*
    <section id="engagement">
        <div class="container">
            <div class="section-title">
                <h1>Mes <span class="accent-text">Engagements</span></h1>
            </div>


            <div class="row center-xs center-sm center-md center-lg trigger"><!--Row 1-->
                <div class="col-xs-12 col-sm-6 col-md-4 col-lg-4 hb vb">
                    <div class="service-block">
                        <i class="icon fas fa-code"></i>
                        <h3>Web Development</h3>
                    </div>
                </div>
                <div class="col-xs-12 col-sm-6 col-md-4 col-lg-4 hb vb">
                    <div class="service-block">
                        <i class="icon fas fa-laptop"></i>
                        <h3>Web Design</h3>
                    </div>
                </div>
                <div class="col-xs-12 col-sm-6 col-md-4 col-lg-4 hb vb">
                    <div class="service-block">
                        <i class="icon fas fa-mobile-alt"></i>
                        <h3>Responsif</h3>
                    </div>
                </div>

                <div class="col-xs-12 col-sm-6 col-md-4 col-lg-4 hb vb">
                    <div class="service-block">
                        <i class="icon far fa-file-alt"></i>
                        <h3>Documentation</h3>
                        <p>
                            Analyse du besoin, qualification, chiffrage, rédaction des spécifications et des cahiers de
                            test.
                        </p>
                    </div>
                </div>
                <div class="col-xs-12 col-sm-6 col-md-4 col-lg-4 hb vb">
                    <div class="service-block">
                        <i class="icon far fa-copy"></i>
                        <h3>Clean Coder</h3>
                        <p>
                            Adepte du manifeste "Software craftsmanship manifesto".
                            <br>
                            <small>
                                <i>Pas seulement une application qui marche, mais une application bien faite, perreine,
                                    robuste, maintenable et évolutive. </i>
                            </small>
                        </p>
                    </div>
                </div>
                <div class="col-xs-12 col-sm-6 col-md-4 col-lg-4 hb vb">
                    <div class="service-block">
                        <i class="icon fas fa-cogs"></i>
                        <h3>Support</h3>
                        <p>Gestion du SAV, priorisation des tickets.</p>
                    </div>
                </div>
            </div>

        </div>
    </section>
    *}
    <!--------------------------------------PROJETS PERSONELS SECTION-------------------------------------->
    <section id="projets">
        <div class="container">
            <div class="section-title">
                <h1>Mes projets <span class="accent-text">Personels</span></h1>
            </div>


            <div class="row center-xs center-sm center-md center-lg">
                <div class="col-xs-12 col-sm-12 col-md-12 col-lg-12">

                    <div id="carousel-projets" class="carousel slide" data-ride="carousel">
                        <!-- Indicators -->
                        <ul class="carousel-indicators">
                            <li data-target="#carousel-projets" data-slide-to="0" class="active"></li>
                            <li data-target="#carousel-projets" data-slide-to="1"></li>
                            <li data-target="#carousel-projets" data-slide-to="2"></li>
                        </ul>

                        <!-- The slideshow -->
                        <div class="carousel-inner">
                            <div class="carousel-item active">
                                <img src="img/hero8.jpg" alt="Los Angeles">
                            </div>
                            <div class="carousel-item">
                                <img src="img/hero9.jpg" alt="Chicago">
                            </div>
                            <div class="carousel-item">
                                <img src="img/hero10.jpg" alt="New York">
                            </div>
                        </div>

                        <!-- Left and right controls -->
                        <a class="carousel-control-prev" href="#carousel-projets" data-slide="prev">
                            <span class="carousel-control-prev-icon"><i class="fas fa-chevron-left"></i></span>
                        </a>
                        <a class="carousel-control-next" href="#carousel-projets" data-slide="next">
                            <span class="carousel-control-next-icon"><i class="fas fa-chevron-right"></i></span>
                        </a>

                    </div>

                </div>
            </div>
    </section>
    <!--------------------------------------CONTACT SECTION-------------------------------------->

    <section id="contact">
        <div class="container">
            <div class="section-title">
                <h1>Contactez <span class="accent-text">Moi</span></h1>
            </div>

            <div class="row center-xs center-sm center-md center-lg">
                <div class="col-xs-12 col-sm-4 col-md-4 col-lg-4">
                    <div class="contact-info">

                        <div class="contact-block">
                            <i class="fas fa-mobile-alt"></i>
                            <div class="contact-text">
                                <p>Numéro :</p>
                                <p>+33637290170</p>
                            </div>
                        </div>

                        <div class="contact-block">
                            <i class="far fa-envelope"></i>
                            <div class="contact-text">
                                <p>Email : </p>
                                <p>nicolas.riault@gmail.com</p>
                            </div>
                        </div>

                        <div class="contact-block">
                            <i class="fas fa-location-arrow"></i>
                            <div class="contact-text">
                                <p>
                                    Addresse :
                                </p>
                                <p>
                                    90 boulevard de la butte
                                    72230 - Mulsanne
                                </p>
                            </div>
                        </div>
                    </div>
                </div>

                <div class="col-xs-12 col-sm-8 col-md-8 col-lg-8">
                    <form id="contact-form" onsubmit="submitForm(); return false;">
                        <div class="field">
                            Nom<br>
                            <input type="text" id="name" value="" required>
                        </div>
                        <div class="field">
                            Email<br>
                            <input type="text" id="email" value="" required>
                        </div>
                        <div class="field">
                            Sujet<br>
                            <input type="text" id="subject" value="" required>
                        </div>
                        <div class="field">
                            Message<br>
                            <textarea id="message" rows="10" cols="75"
                                      required></textarea>
                        </div>
                        <div class="field">
                            <input type="submit" id="contact-submit" value="Envoyer"><span id="status"></span>
                        </div>
                    </form>
                </div>

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

    <!--------------------------------------MODALES LIST-------------------------------------->
    <div class="modal fade" id="modalServeurcom" tabindex="-1" role="dialog">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title">Développeur Full Stack - Serveurcom</h5>
                </div>
                <div class="modal-body">
                    <p>
                        Reprise en interne puis maintenance évolutive d'une application de facturation
                        Télécom développée par un prestataire externe.<br>
                        Développements de plusieurs briques dont une refonte visuelle complète de
                        l'application et la création de tableaux de bords complets dans le but de suivre
                        l'activité de l'entreprise mais aussi permettre aux revendeurs de suivre leur
                        activité.<br>
                        Responsable de la tenue des performances et de l'optimisation des traitements de
                        facturation sous SQL Server 2014.<br>
                        Rédaction de spécifications fonctionnelles pour les évolutions, définition de
                        roadmap pour planifier les besoins, macro gestion de l'équipe de développeurs et
                        organisation de daily meetings pour gérer l’activité de l'équipe de développement.<br>
                        Mise en place de JIRA pour gérer les taches de l'équipe.<br>
                        <br>
                        Formation Microsoft 55144B : "SQL Server 2014 Performance Tuning and
                        Optimization"
                    </p>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-dismiss="modal">Fermer</button>
                </div>
            </div>
        </div>
    </div>
    <div class="modal fade" id="modalCapgemini" tabindex="-1" role="dialog">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title">Consultant SI - Capgémini</h5>
                </div>
                <div class="modal-body">
                    <p>
                        Projet de TMA pour le groupe La Poste, Développeur référent <br>
                        - 6 applications php, sous framework CakePhp<br>
                        - 3 applications MSBI/Asp.NET ( SSAS, SSRS, SSIS)<br>
                        - Outre le développement pur, j'ai régulièrement réalisé les conceptions techniques, la mise à jour
                        des spécifications fonctionnelles, mais aussi la rédaction et le passage des campagnes de tests sous
                        quality center.<br>
                        -Communication régulière avec le client<br><br>

                        TMA pour le ministère des sports.<br>
                        - Développeur en support pour 2 applications .NET/MSBI pour le ministère des sports.<br>
                        - Réalisation de conception techniques, mise à jour des spécifications fonctionnelles, rédaction et
                        passage des campagnes de tests sous quality center.<br><br>

                        Développeur - Projet de TMA pour l'ANR.<br>
                        - Maintenance et évolution d'une application de gestion des demandes
                    </p>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-dismiss="modal">Fermer</button>
                </div>
            </div>
        </div>
    </div>
{/block}