MAIS NON
This commit is contained in:
		
							
								
								
									
										550
									
								
								index.html
									
									
									
									
									
										Normal file
									
								
							
							
						
						
									
										550
									
								
								index.html
									
									
									
									
									
										Normal file
									
								
							@@ -0,0 +1,550 @@
 | 
				
			|||||||
 | 
					
 | 
				
			||||||
 | 
					<!doctype html>
 | 
				
			||||||
 | 
					<html>
 | 
				
			||||||
 | 
					<head>
 | 
				
			||||||
 | 
					    <meta charset="utf-8">
 | 
				
			||||||
 | 
					    <meta name="viewport" content="width=device-width, initial-scale=1.0">
 | 
				
			||||||
 | 
					    <link rel="icon" type="image/png" href="img/favicon.ico"/>
 | 
				
			||||||
 | 
					    <title>Nicolas Riault</title>
 | 
				
			||||||
 | 
					
 | 
				
			||||||
 | 
					    <!--------------------------------------CSS-------------------------------------->
 | 
				
			||||||
 | 
					        <link href="css/libs/google-font.min.css" rel="stylesheet">
 | 
				
			||||||
 | 
					    <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.0.10/css/all.css"
 | 
				
			||||||
 | 
					          integrity="sha384-+d0P83n9kaQMCwj8F4RJB66tzIwOKmrdb46+porD/OvrJ+37WqIM7UoBtwHO6Nlg" crossorigin="anonymous">
 | 
				
			||||||
 | 
					    <link href="css/libs/flexboxgrid.css" rel="stylesheet">
 | 
				
			||||||
 | 
					    <link href="css/libs/bootstrap.css" rel="stylesheet">
 | 
				
			||||||
 | 
					    <link href="css/libs/owl.carousel.min.css" rel="stylesheet">
 | 
				
			||||||
 | 
					    <link href="css/libs/owl.theme.default.min.css" rel="stylesheet">
 | 
				
			||||||
 | 
					    <link href="css/styles.css" type="text/css" rel="stylesheet"/>
 | 
				
			||||||
 | 
					    <link href="css/timeline.css" type="text/css" rel="stylesheet"/>
 | 
				
			||||||
 | 
					    <!--------------------------------------JS-------------------------------------->
 | 
				
			||||||
 | 
					    <script src="js/form.js"></script>
 | 
				
			||||||
 | 
					    <script src="js/libs/jquery.min.js"></script>
 | 
				
			||||||
 | 
					</head>
 | 
				
			||||||
 | 
					
 | 
				
			||||||
 | 
					<!--------------------------------------PRELOAD PAGE-------------------------------------->
 | 
				
			||||||
 | 
					
 | 
				
			||||||
 | 
					<div id="preload-overlay">
 | 
				
			||||||
 | 
					    <div class="loader-frame">
 | 
				
			||||||
 | 
					        <div class="loader1" id="loader1"></div>
 | 
				
			||||||
 | 
					        <div class="loader2" id="loader2"></div>
 | 
				
			||||||
 | 
					    </div>
 | 
				
			||||||
 | 
					</div>
 | 
				
			||||||
 | 
					
 | 
				
			||||||
 | 
					<body>
 | 
				
			||||||
 | 
					
 | 
				
			||||||
 | 
					
 | 
				
			||||||
 | 
					
 | 
				
			||||||
 | 
					<!--------------------------------------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="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"> Developeur 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-------------------------------------->
 | 
				
			||||||
 | 
					<!--------------------------------------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/illust_TimeLaps.JPG">
 | 
				
			||||||
 | 
					                            <div class="carousel-caption d-none d-md-block">
 | 
				
			||||||
 | 
					                                <h5>TimeLaps</h5>
 | 
				
			||||||
 | 
					                                <p>
 | 
				
			||||||
 | 
					                                    Application de gestion de relai de course d'endurance.
 | 
				
			||||||
 | 
					                                    Permet entre autre de gérer les relais, le panneautage, l'autonomie et la durée dans les stands.
 | 
				
			||||||
 | 
					                                </p>
 | 
				
			||||||
 | 
					                            </div>
 | 
				
			||||||
 | 
					                        </div>
 | 
				
			||||||
 | 
					                        <div class="carousel-item">
 | 
				
			||||||
 | 
					                            <img src="img/illust_VaultMeUp.JPG">
 | 
				
			||||||
 | 
					                            <div class="carousel-caption d-none d-md-block">
 | 
				
			||||||
 | 
					                                <h5>VaultMeUp</h5>
 | 
				
			||||||
 | 
					                                <p>
 | 
				
			||||||
 | 
					                                    Application permettant de générer un mot de passe complèxe à partir d'une url et d'une clé de génération (Mot de passe qu'on utilise régulièrement).
 | 
				
			||||||
 | 
					                                    Le mot de passe généré est unique pour chaque couple url/clé ce qui permet de retrouver le mot de passe d'origine en cas d'oubli.
 | 
				
			||||||
 | 
					                                </p>
 | 
				
			||||||
 | 
					                                <a class="btn btn-outline-light" href="/vault" target="_blank">Ouvrir l'application</a>
 | 
				
			||||||
 | 
					                            </div>
 | 
				
			||||||
 | 
					                        </div>
 | 
				
			||||||
 | 
					                        <div class="carousel-item">
 | 
				
			||||||
 | 
					                            <img src="img/illust_FlatWeather.JPG">
 | 
				
			||||||
 | 
					                            <div class="carousel-caption d-none d-md-block">
 | 
				
			||||||
 | 
					                                <h5>FlatWeather</h5>
 | 
				
			||||||
 | 
					                                <p>
 | 
				
			||||||
 | 
					                                    Application mobile permetant d'obtenir la météo de de manière géolocalisée, à la demande et via carte.
 | 
				
			||||||
 | 
					                                    Cette application à été réalisée pour monter en compétence sur IonicFramefork et AngularJs.
 | 
				
			||||||
 | 
					                                </p>
 | 
				
			||||||
 | 
					                            </div>
 | 
				
			||||||
 | 
					                        </div>
 | 
				
			||||||
 | 
					                    </div>
 | 
				
			||||||
 | 
					
 | 
				
			||||||
 | 
					                    <!-- Left and right controls -->
 | 
				
			||||||
 | 
					                    <a class="carousel-control-prev hover-dark" href="#carousel-projets" data-slide="prev">
 | 
				
			||||||
 | 
					                        <i class="fas fa-2x fa-chevron-left hover-dark"></i>
 | 
				
			||||||
 | 
					                    </a>
 | 
				
			||||||
 | 
					                    <a class="carousel-control-next hover-dark" href="#carousel-projets" data-slide="next">
 | 
				
			||||||
 | 
					                        <i class="fas fa-2x fa-chevron-right "></i>
 | 
				
			||||||
 | 
					                    </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-6 col-sm-6 col-md-6 col-lg-6">
 | 
				
			||||||
 | 
									<div class="contact-info">
 | 
				
			||||||
 | 
										<div class="contact-block">
 | 
				
			||||||
 | 
											<i class="fas fa-mobile-alt"></i>
 | 
				
			||||||
 | 
											<div class="contact-text">
 | 
				
			||||||
 | 
												<p>Numéro :</p>
 | 
				
			||||||
 | 
												<p>0637290170</p>
 | 
				
			||||||
 | 
											</div>
 | 
				
			||||||
 | 
										</div>
 | 
				
			||||||
 | 
									</div>
 | 
				
			||||||
 | 
								</div>
 | 
				
			||||||
 | 
					
 | 
				
			||||||
 | 
								<div class="col-xs-6 col-sm-6 col-md-6 col-lg-6">
 | 
				
			||||||
 | 
									<div class="contact-block">
 | 
				
			||||||
 | 
										<i class="far fa-envelope"></i>
 | 
				
			||||||
 | 
										<div class="contact-text">
 | 
				
			||||||
 | 
											<p>Email : </p>
 | 
				
			||||||
 | 
											<p></p>
 | 
				
			||||||
 | 
											<p><a href="mailto:nicolas.riault@gmail.com">nicolas.riault@gmail.com</a></p>
 | 
				
			||||||
 | 
										</div>
 | 
				
			||||||
 | 
									</div>
 | 
				
			||||||
 | 
								</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>
 | 
				
			||||||
 | 
					
 | 
				
			||||||
 | 
					
 | 
				
			||||||
 | 
					<!--------------------------------------FOOTER SECTION-------------------------------------->
 | 
				
			||||||
 | 
					
 | 
				
			||||||
 | 
					<script src="js/libs/isotope.pkgd.min.js"></script>
 | 
				
			||||||
 | 
					<script src="js/libs/particles.min.js"></script>
 | 
				
			||||||
 | 
					<script src="js/libs/particles-conf.js"></script>
 | 
				
			||||||
 | 
					<script src="js/libs/owl.carousel.min.js"></script>
 | 
				
			||||||
 | 
					<script src="js/libs/scrollmagic/minified/ScrollMagic.min.js"></script>
 | 
				
			||||||
 | 
					<script src="js/libs/scrollmagic/uncompressed/plugins/debug.addIndicators.js"></script>
 | 
				
			||||||
 | 
					<script src="js/libs/bootstrap.js"></script>
 | 
				
			||||||
 | 
					<script src="js/main.js"></script>
 | 
				
			||||||
 | 
					<!--<script src="js/timeline.js"></script>-->
 | 
				
			||||||
 | 
					<script src="js/libs/jscrollreveal.min.js"></script>
 | 
				
			||||||
 | 
					
 | 
				
			||||||
 | 
					</body>
 | 
				
			||||||
 | 
					</html>
 | 
				
			||||||
							
								
								
									
										85
									
								
								vault/index.html
									
									
									
									
									
										Normal file
									
								
							
							
						
						
									
										85
									
								
								vault/index.html
									
									
									
									
									
										Normal file
									
								
							@@ -0,0 +1,85 @@
 | 
				
			|||||||
 | 
					<!doctype html>
 | 
				
			||||||
 | 
					<html>
 | 
				
			||||||
 | 
					<head>
 | 
				
			||||||
 | 
					    <meta charset="utf-8">
 | 
				
			||||||
 | 
					    <meta name="viewport" content="width=device-width, initial-scale=1.0">
 | 
				
			||||||
 | 
					    <link rel="icon" type="image/png" href="/img/favicon.ico"/>
 | 
				
			||||||
 | 
					    <title>Nicolas Riault</title>
 | 
				
			||||||
 | 
					
 | 
				
			||||||
 | 
					    <!--------------------------------------CSS-------------------------------------->
 | 
				
			||||||
 | 
					        <link href="/css/libs/google-font.min.css" rel="stylesheet">
 | 
				
			||||||
 | 
					    <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.0.10/css/all.css"
 | 
				
			||||||
 | 
					          integrity="sha384-+d0P83n9kaQMCwj8F4RJB66tzIwOKmrdb46+porD/OvrJ+37WqIM7UoBtwHO6Nlg" crossorigin="anonymous">
 | 
				
			||||||
 | 
					    <link href="/css/libs/flexboxgrid.css" rel="stylesheet">
 | 
				
			||||||
 | 
					    <link href="/css/libs/bootstrap.css" rel="stylesheet">
 | 
				
			||||||
 | 
					    <link href="/css/libs/owl.carousel.min.css" rel="stylesheet">
 | 
				
			||||||
 | 
					    <link href="/css/libs/owl.theme.default.min.css" rel="stylesheet">
 | 
				
			||||||
 | 
					    <link href="/css/styles.css" type="text/css" rel="stylesheet"/>
 | 
				
			||||||
 | 
					    <link href="/css/timeline.css" type="text/css" rel="stylesheet"/>
 | 
				
			||||||
 | 
					    <!--------------------------------------JS-------------------------------------->
 | 
				
			||||||
 | 
					    <script src="../js/form.js"></script>
 | 
				
			||||||
 | 
					    <script src="../js/libs/jquery.min.js"></script>
 | 
				
			||||||
 | 
					</head>
 | 
				
			||||||
 | 
					
 | 
				
			||||||
 | 
					<!--------------------------------------PRELOAD PAGE-------------------------------------->
 | 
				
			||||||
 | 
					
 | 
				
			||||||
 | 
					<div id="preload-overlay">
 | 
				
			||||||
 | 
					    <div class="loader-frame">
 | 
				
			||||||
 | 
					        <div class="loader1" id="loader1"></div>
 | 
				
			||||||
 | 
					        <div class="loader2" id="loader2"></div>
 | 
				
			||||||
 | 
					    </div>
 | 
				
			||||||
 | 
					</div>
 | 
				
			||||||
 | 
					
 | 
				
			||||||
 | 
					<body>
 | 
				
			||||||
 | 
					    <header id="vault-header">
 | 
				
			||||||
 | 
					        <div class="header-wrapper">
 | 
				
			||||||
 | 
					            <a class="navbar-brand" href="/vault">
 | 
				
			||||||
 | 
					                <img src="../img/texte-logo.png">
 | 
				
			||||||
 | 
					            </a>
 | 
				
			||||||
 | 
					        </div>
 | 
				
			||||||
 | 
					    </header>
 | 
				
			||||||
 | 
					    <link href="/css/vault.css" type="text/css" rel="stylesheet"/>
 | 
				
			||||||
 | 
					
 | 
				
			||||||
 | 
					    <section class="contact-wrap">
 | 
				
			||||||
 | 
					        <form class="material-form" onsubmit="return genpass();">
 | 
				
			||||||
 | 
					            <div class="input-block floating-field">
 | 
				
			||||||
 | 
					                <label>Url du site</label>
 | 
				
			||||||
 | 
					                <input value="" class="form-control" name="url" type="url" id="url" required>
 | 
				
			||||||
 | 
					            </div>
 | 
				
			||||||
 | 
					            <div class="input-block floating-field">
 | 
				
			||||||
 | 
					                <label>Votre mot de passe pour encoder</label>
 | 
				
			||||||
 | 
					                <input name="salt" type="password" class="form-control" id="salt" required/>
 | 
				
			||||||
 | 
					            </div>
 | 
				
			||||||
 | 
					            <div class="input-block floating-field">
 | 
				
			||||||
 | 
					                <label>Taille</label>
 | 
				
			||||||
 | 
					                <input name="maxchars" type="number" class="form-control" value="10" id="maxchars" required/>
 | 
				
			||||||
 | 
					            </div>
 | 
				
			||||||
 | 
					
 | 
				
			||||||
 | 
					            <button class="btn square-button material-btn d-sm-none">Générer</button>
 | 
				
			||||||
 | 
					            <button class="btn square-button material-btn d-none d-sm-block">Générer votre mot de passe sécurisé</button>
 | 
				
			||||||
 | 
					
 | 
				
			||||||
 | 
					            <p class="result">
 | 
				
			||||||
 | 
					                <label for="resAlNum">Alphanumérique</label>
 | 
				
			||||||
 | 
					                <input name="resAlNum" class="feedback-input" type="text" class="" id="resAlNum" disabled/>
 | 
				
			||||||
 | 
					                <label for="resAlNumSpe">Alphanumérique + Spé</label>
 | 
				
			||||||
 | 
					                <input name="resAlNumSpe" class="feedback-input" type="text" class="" id="resAlNumSpe" disabled/>
 | 
				
			||||||
 | 
					            </p>
 | 
				
			||||||
 | 
					        </form>
 | 
				
			||||||
 | 
					    </section>
 | 
				
			||||||
 | 
					    <script src="../js/libs/sha512.js"></script>
 | 
				
			||||||
 | 
					    <script src="../js/vault.js"></script>
 | 
				
			||||||
 | 
					
 | 
				
			||||||
 | 
					
 | 
				
			||||||
 | 
					<!--------------------------------------FOOTER SECTION-------------------------------------->
 | 
				
			||||||
 | 
					
 | 
				
			||||||
 | 
					<script src="../js/libs/isotope.pkgd.min.js"></script>
 | 
				
			||||||
 | 
					<script src="../js/libs/owl.carousel.min.js"></script>
 | 
				
			||||||
 | 
					<script src="../js/libs/scrollmagic/minified/ScrollMagic.min.js"></script>
 | 
				
			||||||
 | 
					<script src="../js/libs/scrollmagic/uncompressed/plugins/debug.addIndicators.js"></script>
 | 
				
			||||||
 | 
					<script src="../js/libs/bootstrap.js"></script>
 | 
				
			||||||
 | 
					<script src="../js/main.js"></script>
 | 
				
			||||||
 | 
					<!--<script src="js/timeline.js"></script>-->
 | 
				
			||||||
 | 
					<script src="../js/libs/jscrollreveal.min.js"></script>
 | 
				
			||||||
 | 
					
 | 
				
			||||||
 | 
					</body>
 | 
				
			||||||
 | 
					</html>
 | 
				
			||||||
		Reference in New Issue
	
	Block a user