1<!DOCTYPE html> 2<html class="no-js" lang="fr"> 3 4<head> 5 <title>Developpeur Web - Front-end | Gaetan Mirmand | Lyon & Haute Loire</title> 6 <meta property="og:title" content="Developpeur Web - Front-end | Gaetan Mirmand | Lyon & Haute Loire"/> 7 <meta property="og:type" content="website"/> 8 <meta property="og:url" content="https://gmirmand.fr/"/> 9 <meta property="og:image" content="https://gmirmand.fr/images/logo2.png"/> 10 <meta charset="utf-8"> 11 <meta http-equiv="X-UA-Compatible" content="IE=edge"> 12 <meta name="viewport" content="width=device-width, initial-scale=1"> 13 <meta name="description" 14 content="Gaetan Mirmand, développeur web front-end passionné. Visitez mon portfolio pour découvrir mes compétences et expériences."> 15 <link rel="shortcut icon" href="favicon.ico" type="image/x-icon"> 16 <link rel="icon" href="favicon.ico" type="image/x-icon"> 17 <link href="https://fonts.googleapis.com/css?family=Lato:300,400,700,900" rel="stylesheet"> 18 <link rel="stylesheet" href="libs/font-awesome/css/font-awesome.min.css"> 19 <link href="css/bootstrap.min.css" rel="stylesheet"> 20 <link href="css/styles.css" rel="stylesheet"> 21 22 <link rel="stylesheet" type="text/css" href="assets/slick/slick.css"/> 23 <link rel="stylesheet" type="text/css" href="assets/slick/slick-theme.css"/> 24</head> 25 26<body> 27<div id="mobile-menu-open" class="shadow-large"> 28 <i class="fa fa-bars" aria-hidden="true"></i> 29</div> 30<!-- End #mobile-menu-toggle --> 31<header> 32 <div id="mobile-menu-close"> 33 <span>Close</span> <i class="fa fa-times" aria-hidden="true"></i> 34 </div> 35 <ul id="menu" class="shadow"> 36 <li> 37 <a href="#about">à mon propos</a> 38 </li> 39 <li> 40 <a href="#experience">Expériences</a> 41 </li> 42 <li> 43 <a href="#education">Ãtudes</a> 44 </li> 45 <li> 46 <a href="#projets">Projets</a> 47 </li> 48 <li> 49 <a href="#skills">Compétences</a> 50 </li> 51 <li> 52 <a href="#contact">Contact</a> 53 </li> 54 </ul> 55</header> 56<!-- End header --> 57 58<div id="lead"> 59 <img id="logo" src="images/logo2.png" alt="Logo Gaëtam Mirmand"/> 60 <div id="lead-content"> 61 <h1><strong>Mirmand Gaëtan</strong></h1> 62 <h2><strong>Développeur web</strong> spécialisé <strong>Front-End</strong></h2> 63 <!--<a target="_blank" href="assets/projets/CV_Mirmand_Gaetan.pdf" class="btn-rounded-white">Voir mon CV</a>--> 64 </div> 65 <!-- End #lead-content --> 66 67 <div id="lead-overlay"></div> 68 69 <div id="lead-down"> 70 <span> 71 <i class="fa fa-chevron-down" aria-hidden="true"></i> 72 </span> 73 </div> 74 <!-- End #lead-down --> 75</div> 76<!-- End #lead --> 77 78<div id="about"> 79 <div class="container"> 80 <div class="row"> 81 <div class="col-md-4"> 82 <h2 class="heading">à mon propos</h2> 83 </div> 84 <div class="col-md-8"> 85 <p><b>Freelance - Développeur web front-end - Vue.js ; Nuxt.js</b></p> 86 <br> 87 <p>Expert digital et développeur web de 5 années dâexpérience, spécialisé Vue.js depuis 2 ans et ayant concrétisé plus dâune dizaine de projets professionnels en développement Web et Mobile dans des secteurs d'activité variés. </p> 88 <p>Je vous propose de vous accompagner dans vos missions concernant :</p> 89 <ul> 90 <li>Développement dâapplications Web Vue.js ; Nuxt.js</li> 91 <li>Développement de Progressive Web App (PWA) Nuxt.js</li> 92 <li>Développement dâapplications Mobiles Ionic</li> 93 <li>Développement et maintenance de site Wordpress / Woocommerce</li> 94 <li>Accompagnement SEO</li> 95 </ul> 96 <p>Au plaisir d'échanger avec vous via <a 97 href="#contact">le formulaire en bas de page</a> ou sur <a href="https://www.malt.fr/profile/gaetanmirmand">mon profil Malt</a>. 98 </p> 99 </div> 100 </div> 101 </div> 102</div> 103<!-- End #about --> 104 105<div id="experience" class="background-alt"> 106 <h2 class="heading">Experiences</h2> 107 <div id="experience-timeline"> 108 109 <div data-date="Janvier 2022 â Maintenant"> 110 <h3>Freelance</h3> 111 <h4>Développeur web front-end</h4> 112 <p> 113 à la recherche de plus d'indépendance, de flexibilité et de nouveaux défis, j'ai pris la décision de me lancer dans l'entreprenariat afin d'accompagner des entreprises dans leurs projets web. Retrouvez toutes mes informations et disponibilité sur 114 <a href="https://www.malt.fr/profile/gaetanmirmand">mon profil Malt</a>. 115 </p> 116 </div> 117 118 <div data-date="Septembre 2019 â Août 2021"> 119 <h3>Webqam</h3> 120 <h4>Développeur web (Alternance)</h4> 121 <p> 122 Dans la continuité de mon parcours, j'ai conservé le poste de développeur web durant mes 2 années de 123 Master en alternance où j'ai pu approfondir mes connaissances dans les technologies front-end 124 </p>
125 <span class="separator"><span>ET</span></span> 126 <span> 127 <h3>Freel</h3> 128 <h4>Concepteur</h4> 129 <p> 130 En parallèle de mon alternance et dans le cadre de mon Master, j'ai pu mener en duo un projet professionnel de développement 131 d'un service de location de vélo entre particulier. Si vous êtes curieux, <a 132 href="https://freel.gmirmand.fr/" target="_blank">vous pouvez consulter les documents</a> et me contacter dans <a 133 href="#contact">le formulaire en bas de page</a> pour toute proposition. 134 </p> 135 </span> 136 </div> 137 138 <div data-date="Janvier 2019 â Août 2019"> 139 <h3>Webqam</h3> 140 <h4>Développeur web (Junior)</h4> 141 <p> 142 à la suite d'un DUT et d'une licence, j'ai souhaité intégrer l'équipe de développement de <a 143 href="https://www.webqam.fr/">Webqam</a>, à l'antenne de Lyon. 144 L'objectif de cette expérience professionnelle était de pouvoir notamment monter en compétence sur des 145 technos Front tel que VueJs ou ReactJs. 146 </p> 147 </div> 148 149 <div data-date="Septembre 2017 â Août 2018"> 150 <span> 151 <h3>Webqam</h3> 152 <h4>Développeur web (Alternance)</h4> 153 <p> 154 J'ai pu faire une alternance en temps que développeur web au sein de l'entreprise <a 155 href="https://www.webqam.fr/">Webqam</a>, à Saint-Ãtienne. 156 Cette alternance m'a permis de développer et enrichir mes compétences dans les domaines de conception et développement web tout en me professionnalisant. 157 </p> 158 </span> 159 <span class="separator"><span>ET</span></span> 160 <span> 161 <h3>GoVélo!</h3> 162 <h4>Concepteur / Développeur</h4> 163 <p> 164 En parallèle de mon alternance et dans le cadre de ma licence, j'ai pu mener au sein d'une équipe de 5 personnes un projet professionnel de développement 165 d'une application mobile. Ce projet m'a permis d'acquérir de nombreuses compétences tel qu'en conception de projets, étude de marché, communication, 166 gestion de projets et bien évidemment développement web (Ionic) 167 </p> 168 </span> 169 </div> 170 171 <div data-date="Sept. 2016 â Mars 2017"> 172 <h3>DSDEN43</h3> 173 <h4>Graphiste, développeur et project manager</h4> 174 <p> 175 Dans le cadre d'un projet tutoré de 2nd année de DUT MMI au Puy-en-Velay, j'ai pu travailler en duo avec 176 <a target="_blank" href="http://www.yannchapuis.fr/">Yann Chapuis</a> 177 sur un projet en liaison avec l'académie de Clermont, ayant pour commanditaire la <a 178 href="http://www.ac-clermont.fr/dsden43/">DSDEN43</a>. Ce projet 179 a consisté à développer mes compétences en 180 relations client, en gestion de projets ainsi qu'en développement web. 181 </p> 182 </div> 183 184 <div data-date="Avril 2017 â Août 2017"> 185 <h3>Webqam</h3> 186 <h4>Développeur web (Stage)</h4> 187 <p> 188 Durant ma deuxième année de DUT MMI au Puy-en-Velay, j'ai pu réaliser un stage de 4 mois en temps que 189 développeur web au sein de l'entreprise <a href="https://www.webqam.fr/">Webqam</a>, à Saint-Ãtienne. Ce 190 stage a eu pour but de développer des 191 compétences dans les domaines de conception et développement web avec une approche professionnelle. 192 </p> 193 </div> 194 195 <div data-date="Juin 2016"> 196 <h3>Atelier 2G Publicité</h3> 197 <h4>Graphiste</h4> 198 <p> 199 Dans le cadre d'une découverte du monde professionnel, un stage de 2 semaines m'a été proposé par le 200 département MMI du Puy-en-Velay. à la recherche d'une certaine polyvalence, je me suis essayé au monde 201 du graphisme plutôt qu'à celui de la programmation web, que j'affection plus particulièrement. Cela m'a 202 permis d'accueillir des compétences en graphisme et ainsi m'a permis d'acquérir un esprit critique dans 203 le domaine. 204 </p> 205 </div> 206 </div> 207</div> 208<!-- End #experience --> 209 210<div id="education"> 211 <h2 class="heading">Ãtudes</h2> 212 <div class="education-block"> 213 <h3>Digital Campus</h3>
214 <span class="education-date">Sept 2019 - Aout 2021</span> 215 <h4>Mastères Expert en stratégie digitale</h4> 216 <p>Afin de compléter mes connaissances dans le domaine du numérique, j'ai souhaité réaliser un Mastère expert en 217 stratégie digitale en alternance. </p> 218 </div> 219 <div class="education-block"> 220 <h3>Université d'Auvergne</h3> 221 <span class="education-date">Sept 2017 - Sept 2018</span> 222 <h4>Licence professionnelle Métiers du numérique : conception, rédaction et réalisation web</h4> 223 <p>à la suite de mon DUT MMI, j'ai souhaité réaliser une licence professionnelle afin de découvrir le monde 224 professionnel 225 de manière plus approfondi qu'en stage. Au même titre que le stage réalisé précédemment, j'ai pu monter en 226 compétences 227 sûres de nombreux points, plus spécifiquement orienté vers le développement web bien que restant 228 polyvalent.</p> 229 </div> 230 <div class="education-block"> 231 <h3>Université d'Auvergne</h3> 232 <span class="education-date">
232Sept 2015 - Sept 2017</span> 233 <h4>DUT Métiers du Multimédia et de l'internet.</h4> 234 <p> 235 Ce DUT offre des compétences associées aux activités de communication d'entreprise, de création multimédia, 236 de gestion de réseaux. Ainsi, ses compétences me permettent de participer à toutes les étapes de la 237 conception et du développement de produits Web, offrant une maîtrise des outils de production et une 238 connaissance des supports (audio, vidéo et papier).</p> 239 </div> 240 <div class="education-block"> 241 <h3>Lycée Charles et Adrien Dupuy</h3> 242 <span class="education-date">Sept 2013 - Sept 2015</span> 243 <h4>Baccalauréat scientifique</h4> 244 <p>Obtention d'un baccalauréat Scientifique option Science de l'ingénieur spécialisation Informatique et 245 Sciences du numérique au sein du Lycée Charles et Adrien Dupuy, au Puy-en-Velay.</p> 246 </div> 247 <!-- End .education-block --> 248</div> 249<!-- End #education --> 250 251<div id="projets" class="background-alt"> 252 <h2 class="heading">Projets</h2> 253 <div class="container"> 254 <div class="row"> 255 <div class="project shadow-large"> 256 <div class="project-image"> 257 <img src="images/freel.jpg" alt="Image GoVélo!"/> 258 </div> 259 <!-- End .project-image --> 260 <div class="project-info"> 261 <h3>Freel</h3> 262 <p>Durant mes deux années de master, j'ai pu repenser et monter un dossier concernant une PWA de mobilité en ville entrepris durant ma licence.</p> 263 <p>Le travail réalisé passe de la définition du concept au développement d'un prototype en passant par business plan, cahier des charges et pitchs. 264 Le projet a été mené à bien et bien que n'ayant pas été déployé au 265 public de par les événements, j'ai été extrêmement fière de développer et présenter ce très beau projet.</p> 266 <a target="_blank" href="https://drive.google.com/file/d/1hdtAL56GO9w8GHIDoqn5EazCdbamoG_f/view">Voir l'executive summary (soumis aux droits d'auteurs).</a> 267 <br> 268 <a target="_blank" href="https://tinyurl.com/proto-freel">Voir le prototype Xd (soumis aux droits d'auteurs).</a> 269 </div> 270 <!-- End .project-info --> 271 </div> 272 <!-- End .project --> 273 <div class="project shadow-large"> 274 <div class="project-image"> 275 <img src="images/ecosia.jpg" alt="Image ecosia!"/> 276 </div> 277 <!-- End .project-image --> 278 <div class="project-info"> 279 <h3>Ecosia dark-mode extension</h3> 280 <p>En tant que projet personnel, j'ai développé une extension chromium déployé sur le chrome web store et sur Microsoft edge store.</p> 281 <p>En 3 ans de développement, j'ai atteint +25.000 utilisateurs cumulés et +100.000 installations.</p> 282 <a target="_blank" 283 href="https://chrome.google.com/webstore/detail/ecosia-dark-mode/lpgjbchlhnpodjjnemfpfajibnclknam?hl=fr">Extension chrome</a> 284 <br> 285 <a target="_blank" 286 href="https://microsoftedge.microsoft.com/addons/detail/ecosia-darkmode/gebncindnlemmhnigjhkgdfcmaakjcio">Extension edge</a> 287 </div> 288 <!-- End .project-info --> 289 </div> 290 <!-- End .project --> 291 <div class="project shadow-large"> 292 <div class="project-image"> 293 <img src="images/rallye.jpg" alt="Image rallye mathématique"/> 294 </div> 295 <!-- End .project-image --> 296 <div class="project-info"> 297 <h3>Rallye mathématique.</h3> 298 <p>Dans le cadre de ma 2ème année de DUT MMI, un projet professionnalisant appelé projet tuteuré m'a 299 été demandé. J'ai ainsi pu travailler sur un projet, accompagné d'une autre étudiant, <a 300 target="_blank" href="http://www.yannchapuis.fr/">Yann 301 Chapuis</a>, également développeur web.. 302 </p> 303 <p>Le projet porte donc sur le concours rallye mathématique. Dans une approche pédagogique, ce 304 projet consistait au développement d'une application web permettant à des enseignants 305 dâentraîner leurs élèves au rallye mathématique facilement. Vous trouverez 306 ci-joint le rapport de ce projet.</p> 307 <a target="_blank" href="assets/projets/Compte_rendu_de_projet-2nd_annee-rallye_maths.pdf">Voir le 308 compte 309 rendu</a> 310 </div> 311 <!-- End .project-info --> 312 </div> 313 <!-- End .project --> 314 315 <div class="project shadow-large"> 316 <div class="project-image"> 317 <img src="images/usol.jpg" alt="Image association USOL"/> 318 </div> 319 <!-- End .project-image --> 320 <div class="project-info"> 321 <h3>USOL</h3> 322 <p> 323 <p> Au même titre que le projet ci-dessus, j'ai pu mener un deuxiême projet tutoré avec 3 autres 324 personnes (<a href="http://www.geoffreyallary.fr/"> Geoffrey Allary</a> | <a 325 href="http://valentinpoirot.fr/">Valentin Poirot</a> | 326 Maxime Rodde). Ces projets ont pour but de mettre à profit les 327 enseignements de notre formation, dâaméliorer le travail de groupe et dâavoir une expérience 328 dans le milieu professionnel.</p> 329 <p>Mon rôle principal au sein de se projet étant développeur web, j'ai pu travailler sur le site Web 330 qui permet de promouvoir lâ<a href="http://www.usol.fr/">USOL</a> (Union Sportive Ouest 331 Lyonnais) 332 . J'ai donc pu 333 réaliser un site wordpress entièrement paramétrable par les différents 334 gérants de l'association.</p> 335 </p> 336 <a target="_blank" href="http://www.usol.fr/">Voir le site</a> | 337 <a target="_blank" href="assets/projets/Rapport
337-de-projet-USOL.pdf">Voir le rapport</a> 338 </div> 339 <!-- End .project-info --> 340 </div> 341 <!-- End .project --> 342 343 <h2>Autres travaux</h2> 344 <div class="slider shadow-large"> 345 <div> 346 <div class="project-image under-project"> 347 <img src="images/marvel.jpg" alt="Image Marvel"/> 348 </div> 349 <div class="under-project-text"> 350 <h3>Marvel heroes</h3> 351 <p>Développement d'un site basé sur l'API Marvel</p> 352 <a target="_blank" href="https://www.gmirmand.fr/marvel">Voir le site</a> 353 </p> 354 </div> 355 </div> 356 <div> 357 <div class="project-image under-project"> 358 <img src="images/ikea.jpg" alt="Image Ikéa"/> 359 </div> 360 <div class="under-project-text"> 361 <h3>Ikea</h3> 362 <p>Projet de webdesign pour une refonte du site Ikea. <br>(Adobe xD, Photoshop, 363 InVision)</p> 364 <a target="_blank" href="https://invis.io/Y7B42HKZR">Voir 365 le InVision</a> 366 </p> 367 </div> 368 </div> 369 <div> 370 <div class="project-image under-project"> 371 <img src="images/mpo.jpg" alt="Image projet Mes portes ouvertes"/> 372 </div> 373 <div class="under-project-text"> 374 <h3>MPO</h3> 375 <p> 376 Application mobile "Mes portes ouvertes", une application pour faire de manière intéractif 377 les portes ouvertes de l'IUT du Puy-en-Velay. <br>Application 378 mobile sous Cordova/ionic + API Symfony. 379 </p> 380 </div> 381 </div> 382 <div> 383 <div class="project-image under-project"> 384 <img src="images/kbf.jpg" alt="Image KBF"/> 385 </div> 386 <div class="under-project-text"> 387 <h3>KBF</h3> 388 <p> 389 Développement d'un petit jeu web afin d'amméliorer mes compétences de 390 développeur/intégrateur, principalement en Jquery. 391 </p> 392 </div> 393 </div> 394 <div> 395 <div class="project-image under-project"> 396 <img src="images/2g2c.jpg" alt="Image projet 2g2c"/> 397 </div> 398 <div class="under-project-text"> 399 <h3>2G2C</h3> 400 <p> 401 Développement d'un site web de création de palettes de couleurs afin de s'amméliorer en 402 création, gestion et utilisattion de base de données, en requêtes SQL ainsi qu'en PHP. 403 </p> 404 </div> 405 </div> 406 <div> 407 <div class="project-image under-project"> 408 <img src="images/vision.jpg" alt="Image projet votre vision"/> 409 </div> 410 <div class="under-project-text"> 411 <h3>Votre vision</h3> 412 <p> 413 <p>Projet audiovisuel incluant la création d'un site web, dans le but d'améliorer mes compétences en développement et gestion de projet.</p> 414 <p>Projet réalisé avec <a target="_blank" href="http://geoffreyallary.fr/">Geoffrey Allary</a>. 415 </p> 416 <a target="_blank" href="assets/projets/Votre vision - Cahier des Charges - Geoffrey_Gaëtan.pdf">Voir 417 le rapport</a> 418 </p> 419 </div> 420 </div> 421 </div> 422 </div> 423 </div> 424</div> 425<!-- End #projects --> 426 427<div id="skills"> 428 <h2 class="heading">Compétences / Logiciels / Divers</h2> 429 <ul> 430 <li>Vue.js</li> 431 <li>Nuxt.js</li> 432 <li><span class="little">VueX</span></li> 433 <li><span class="little">Vue-router</span></li> 434 <li><span class="little">StoryBook</span></li> 435 <li>Javascript</li> 436 <li><span class="middle">Git</span></li> 437 <li><span class="little">HTML</span></li> 438 <li><span class="little">Sass</span></li> 439 <li><span class="little">
439Docker</span></li> 440 <li>Firebase</li> 441 <li><span class="little">GraphQl</span></li> 442 <li>React</li> 443 <li><span class="little">Jest</span></li> 444 <li><span class="little">Cypress</span></li> 445 <li>PWA</li> 446 <li><span class="middle">Cordova/ionic</span></li> 447 <li><span class="little">Prismic</span></li> 448 <li>Wordpress</li> 449 <li><span class="little">e-commerce/woocommerce</span></li> 450 <li>Photoshop</li> 451 <li>Illustrator</li> 452 <li>Indesign</li> 453 <li><span class="middle">Premiere Pro</span></li> 454 </ul> 455</div> 456<!-- End #skills --> 457 458<div id="contact"> 459 <h2>Contact</h2> 460 <div id="contact-form"> 461 <form method="POST" action="https://formspree.io/[email protected]"> 462 <input type="hidden" name="_subject" value="Contact request from personal website"/> 463 <input type="email" name="_replyto" placeholder="Votre mail" required> 464 <textarea name="message" placeholder="Votre message" required></textarea> 465 <button type="submit">Envoyer</button> 466 </form> 467 </div> 468 <!-- End #contact-form --> 469</div> 470<!-- End #contact --> 471 472<footer> 473 <div class="container"> 474 <div class="row"> 475 <div class="col-sm-5 copyright"> 476 <p> 477 Copyright © 2022 Gaëtan Mirmand 478 </p> 479 </div> 480 <div class="col-sm-2 top"> 481 <span id="to-top"> 482 <i class="fa fa-chevron-up" aria-hidden="true"></i> 483 </span> 484 </div> 485 <div class="col-sm-5 social"> 486 <ul> 487 <li class="social__text"> 488 <a href="https://www.malt.fr/profile/gaetanmirmand" target="_blank"> 489 Profil Malt 490 </a> 491 </li> 492 <li> 493 <a href="https://github.com/gmirmand" target="_blank"> 494 <i class="fa fa-github" aria-hidden="true"></i> 495 </a> 496 </li> 497 <li> 498 <a href="http://linkedin.com/in/gmirmand" target="_blank"> 499 <i class="fa fa-linkedin" aria-hidden="true"></i> 500 </a> 501 </li> 502 <li> 503 <a href="https://codepen.io/gmirmand/pens/popular/" target="_blank"> 504 <i class="fa fa-codepen" aria-hidden="true"></i> 505 </a> 506 </li> 507 </ul> 508 </div> 509 </div> 510 </div> 511</footer> 512<!-- End footer --> 513
514<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
vendor: 1 bytes, line 514
514
515<script src="js/scripts.min.js"></script>
vendor: 1 bytes, line 515
515
516<script type="text/javascript" src="//code.jquery.com/jquery-1.11.0.min.js"></script>
vendor: 1 bytes, line 516
516
517<script type="text/javascript" src="assets/slick/slick.min.js"></script>
vendor: 1 bytes, line 517
517
518<script type="text/javascript"> 519 $(document).ready(function () { 520 $('.slider').slick({ 521 infinite: true, 522 slidesToShow: 3, 523 slidesToScroll: 3, 524 responsive: [ 525 { 526 breakpoint: 1024, 527 settings: { 528 slidesToShow: 3, 529 slidesToScroll: 3, 530 infinite: true, 531 dots: true 532 } 533 }, 534 { 535 breakpoint: 600, 536 settings: { 537 slidesToShow: 2, 538 slidesToScroll: 2 539 } 540 }, 541 { 542 breakpoint: 480, 543 settings: { 544 slidesToShow: 1, 545 slidesToScroll: 1 546 } 547 } 548 ] 549 }); 550 }); 551</script>
551 552</body> 553 554</html>
Line numbers count LF bytes from the start of the resource, as the search results do. Vendor segments are library code the classifier recognised; they are stored but not indexed. Bytes are shown as Latin1 characters, one per byte.