PageSourceSearch

https://gmirmand.fr/

html gmirmand.fr collected 2026-10-02 01:53:40 UTC 26,415 bytes, 554 lines download raw bytes

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 &copy; 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.