Outiref

Code source de l'URL : https://pennec.io/

<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="vendor/material-design-lite/material.min.css">
    <link rel="stylesheet" href="css/main.css">
    <meta name="theme-color" content="#180f24">
    <title>Nicolas PENNEC - Tech Lead / Senior Fullstack Web Developer - Rennes, France</title>
    <meta content="Hi! I'm Nicolas Pennec, a Teach Lead and Web Engineer based in Rennes, France" name="description">
    <meta property="og:title" content="Nicolas PENNEC - Tech Lead Web Engineer - Rennes, France">
    <meta property="og:description" content="Hi! I'm Nicolas Pennec, a Teach Lead and Web Engineer based in Rennes, France">
    <meta property="og:type" content="website">
    <meta property="og:url" content="https://pennec.io/">
    <meta property="og:image" content="https://pennec.io/img/avatar-nicolas-pennec.jpg">
    <meta name="twitter:card" content="summary">
    <meta name="twitter:site" content="@NicoPennec">
    <script type="application/ld+json">
      {
        "@context": "http://schema.org",
        "@type": "Person",
        "name": "Nicolas Pennec",
        "additionalName": "NicoPennec",
        "jobTitle": "Tech Lead Web Engineer",
        "url": "https://pennec.io",
        "image": "https://pennec.io/img/avatar-nicolas-pennec.jpg",
        "sameAs": [
          "https://twitter.com/nicopennec",
          "https://www.linkedin.com/in/nicopennec",
          "https://github.com/nicopennec",
          "https://medium.com/@NicoPennec"
        ]
      }
    </script>
    <link rel="preconnect" href="https://fonts.googleapis.com" crossorigin>
    <link rel="preconnect" href="https://www.google-analytics.com" crossorigin>
    <link rel="preconnect" href="https://fonts.gstatic.com/" crossorigin>
    <link rel="dns-prefetch" href="https://fonts.googleapis.com">
    <link rel="dns-prefetch" href="https://www.google-analytics.com">
    <link rel="dns-prefetch" href="https://fonts.gstatic.com/">
  </head>
  <body class="mdl-color--grey-100 mdl-color-text--grey-800 mdl-base fonts--loading">
    <div class="mdl-layout mdl-js-layout mdl-layout--fixed-header">

      <header class="header mdl-layout__header mdl-layout__header--waterfall">
        <div class="mdl-layout__header-row">
          <span class="mdl-layout-title">Nicolas PENNEC</span>
          <div class="mdl-layout-spacer"></div>
          <nav class="mdl-navigation mdl-layout--large-screen-only">
            <a class="mdl-navigation__link" href="#about">About</a>
            <a class="mdl-navigation__link" href="#skills">Skills</a>
            <a class="mdl-navigation__link" href="#open-source">Open Source</a>
            <a class="mdl-navigation__link" href="#talks">Talks</a>
            <a class="mdl-navigation__link" href="#follow-me">Follow Me</a>
          </nav>
        </div>
      </header>

      <div class="mdl-layout__drawer">
        <span class="mdl-layout-title">Nicolas PENNEC</span>
        <nav class="mdl-navigation">
          <a class="mdl-navigation__link" href="#about">About</a>
          <a class="mdl-navigation__link" href="#skills">Skills</a>
          <a class="mdl-navigation__link" href="#open-source">Open Source</a>
          <a class="mdl-navigation__link" href="#talks">Talks</a>
          <a class="mdl-navigation__link" href="#follow-me">Follow Me</a>
        </nav>
      </div>

      <main class="mdl-layout__content">
        <div class="page-content">
          <section class="about section--center mdl-grid mdl-grid--no-spacing mdl-shadow--2dp">
            <div class="mdl-card mdl-cell mdl-cell--12-col">
              <h1>Nicolas PENNEC</h1>
              <h2>Tech Lead / Senior Fullstack Web Developer</h2>
              <h2>Co-Founder of <a href="https://rennesjs.org" title="Rennes JavaScript User Group">RennesJS</a></h2>
              <h2>Member of <a href="https://github.com/nuxt-community">Nuxt Community</a></h2>
              <div class="resume">
                <p>Hi! I'm Nicolas Pennec, a Teach Lead and Web Engineer based in Rennes, France.</p>
                <p>I'm working as Senior Front-End Engineer for <a rel="nofollow noopener" href="https://www.cg-wire.com/">CGWire</a>, which develops the open-source software <a rel="nofollow noopener" href="https://github.com/cgwire/kitsu">Kitsu</a>.</p>
                <p>
                  With over 15 years of experience in IT, I am passionate about web development.
                  <br>
                  For me, programming feels more like a kind of puzzle! A funny game ツ
                </p>
              </div>
              <!--
              <div>
                <a href="cv/french/cv-nicolas-pennec-2016.pdf" class="mdl-button mdl-js-button mdl-button--raised mdl-js-ripple-effect mdl-button--colored" title="Download my Curriculum Vitae">
                  Download my CV
                  <i class="mdl-color-text--white material-icons mdi-picture-as-pdf" aria-hidden="true"></i>
                </a>
              </div>
              -->
            </div>
            <img id="about" class="avatar mdl-shadow--2dp" src="img/avatar-nicolas-pennec.jpg" alt="Nicolas PENNEC" width="128" height="128">
          </section>

          <section id="skills" class="section--center mdl-grid mdl-grid--no-spacing mdl-shadow--2dp">
            <div class="mdl-card mdl-cell mdl-cell--12-col">
              <div class="mdl-card__supporting-text">
                <h4>
                  <i class="mdl-color-text--blue-grey-400 material-icons mdi-thumb-up" aria-hidden="true"><!--thumb_up--></i>
                  My Skills
                </h4>
                <ul>
                  <li>JavaScript
                    <ul>
                      <li>Front-End: Vue & Nuxt / Reat & Next</li>
                      <li>Back-End: Node.js / Express / Electron</li>
                    </ul>
                  </li>
                  <li>HTML 5</li>
                  <li>CSS / SASS / LESS</li>
                  <li>Java / JEE</li>
                  <li>PHP / Symfony</li>
                  <li>MySQL / PostgreSQL / MongoDB</li>
                  <li><abbr title="Search Engine Optimization">SEO</abbr></li>
                  <li><abbr title="Geographic Information System">GIS</abbr></li>
                  <li>CI/CD (GitLab CI, GitHub Actions, CircleCI, ...)</li>
                </ul>
              </div>
            </div>
          </section>

          <section id="open-source" class="section--center mdl-grid mdl-grid--no-spacing mdl-shadow--2dp">
            <div class="mdl-card mdl-cell mdl-cell--12-col">
              <div class="mdl-card__supporting-text">
                <h4>
                  <i class="mdl-color-text--blue-grey-400 material-icons mdi-extension" aria-hidden="true"><!--extension--></i>
                  Open Source Projects
                </h4>
                <ul class="open-source-projects">
                  <li>
                      <b>Sitemap Module for Nuxt.js 🤖</b>
                      <p><a href="https://github.com/nuxt-community/sitemap-module">nuxt-community/sitemap-module</a></p>
                      <p><a class="github-button" href="https://github.com/nuxt-community/sitemap-module" data-size="large" data-show-count="true" aria-label="Star nuxt-community/sitemap-module on GitHub">Star</a></p>
                  </li>
                  <li>
                      <b>A Weather app build with Nuxt.js 🌤️</b>
                      <p><a href="https://github.com/nicopennec/nuxt-weather">nicopennec/nuxt-weather</a></p>
                      <p><a class="github-button" href="https://github.com/nicopennec/nuxt-weather" data-size="large" data-show-count="true" aria-label="Star nicopennec/nuxt-weather on GitHub">Star</a></p>
                  </li>
                  <li>
                      <b>Easily create your WebPageTest instance with Vagrant ⚡️</b>
                      <p><a href="https://github.com/nicopennec/vagrant-webpagetest">nicopennec/vagrant-webpagetest</a></p>
                      <p><a class="github-button" href="https://github.com/nicopennec/vagrant-webpagetest" data-size="large" data-show-count="true" aria-label="Star nicopennec/vagrant-webpagetest on GitHub">Star</a></p>
                  </li>
                </ul>
              </div>
            </div>
          </section>

          <section id="talks" class="section--center mdl-grid mdl-grid--no-spacing mdl-shadow--2dp">
            <div class="mdl-card mdl-cell mdl-cell--12-col">
              <div class="mdl-card__supporting-text">
                <h4>
                  <i class="mdl-color-text--blue-grey-400 material-icons mdi-forum" aria-hidden="true"><!--forum--></i>
                  My Talks
                </h4>
                <p>I have spoken at several meetups and conferences:</p>
                <ul class="talks__list">
                  <li>
                    <a href="https://www.breizhcamp.org/">BreizhCamp Conference</a> 2025, Rennes, France
                    <ul>
                      <li>
                        <a href="https://www.youtube.com/watch?v=yzKMbVFcukU" title="show the video"><span lang="fr">Montres Cardio-GPS : Mythes, Réalités et Technologies Décryptées</span></a>
                        [<abbr title="french">fr</abbr>]
                        (<a href="https://docs.google.com/presentation/d/e/2PACX-1vSsL60RQ6reJmljR5-nmmB6P0uUNkVlkZS-s27LMtGaU1Nr6LSo6-bBC2b4r5wZPmMTc6T5lGx6r48E/pub" title="show the slides">Slides</a>)
                      </li>
                    </ul>
                  </li>          
                  <li>
                    <a href="https://www.meetup.com/fr-FR/paris-typescript/">Paris TypeScript Meetup</a> 2020, Paris, France (online)
                    <ul>
                      <li>
                        <a href="https://www.youtube.com/live/SfvFu7cyNZk?si=NxZA7PkMYF88EDT-&t=420" title="show the video">Serverless made easy for web developers, with WarpJS</a>
                        [<abbr title="english">en</abbr>]
                      </li>
                    </ul>
                  </li>          
                  <li>
                    <a href="https://www.meetup.com/fr-FR/BrestJS/">BrestJS Meetup</a> 2018, Brest, France
                    <ul>
                      <li>
                        <a href="https://docs.google.com/presentation/d/e/2PACX-1vRPXeMkc3JfpzBVMbISZXeshGNiprFDfPxvJ6wChOW3qnjehoaD9wGS15m_YGaihV3Gni4Z3oWqOH4b/pub" title="show the slides">"Nuxt 2.0 - Universal Vue.js Applications"</a>
                      </li>
                    </ul>
                  </li>          
                  <li>
                    <a href="https://www.meetup.com/fr-FR/Vuejs-Nantes/">Vue.js Nantes Meetup</a> 2018, Nantes, France
                    <ul>
                      <li>
                        <a href="https://docs.google.com/presentation/d/e/2PACX-1vSDcRTuy85VFClUmdH7Ryw9nZnuu8EtZZrmwpZBpwiKKN4fPhnrrO0-7PR9ok5aIGJ_Kqt0TcCJqVmT/pub" title="show the slides">"Nuxt.js - Universal Vue.js Applications"</a>
                      </li>
                    </ul>
                  </li>
                  <li>
                    <a href="https://www.breizhcamp.org">BreizhCamp Conference</a> 2018, Rennes, France
                    <ul>
                      <li>
                        <a href="https://docs.google.com/presentation/d/e/2PACX-1vR_cnC9AoX-hrGS9jyCHAmn4W8Cds2iL7NUGq7y2fTAuWQS4CiNsV9GYH7S1EsezkniSxcKF_9uZeQF/pub" title="show the slides"><span lang="fr">"Nom de Zeus, j'ai typé mon Vanilla JS !"</span></a>
                        (<a href="https://github.com/NicoPennec/tscheck-demo" title="view source code">source code on GitHub</a>)
                      </li>
                      <li>
                        <a href="https://www.youtube.com/watch?v=_7-uB04niws&list=PLzZ0f2KT2ZROn2h2DKpm531Vqip82U9eT" title="show the video"><span lang="fr">Node.js et les 3 coquillages</span></a>
                        [<abbr title="french">fr</abbr>]
                        (<a href="https://docs.google.com/presentation/d/e/2PACX-1vSrym1ZiZdTpEPI_XEpdWHMYlD-uJAzo61qZ7o1zYb5suWfeSQzR8DGWNTD7wpDFS3IqxWCCfKLZTOr/pub">slides</a>)
                      </li>
                    </ul>
                  </li>
                  <li>
                    <a href="https://chtijs.francejs.org/">Chti.js Meetup</a> 2017, Lille, France
                    <ul>
                      <li>
                        <a href="https://docs.google.com/presentation/d/1lUjjTBYEY8TaeWlpvMel6H33rb7d_gixsHpl8nhd2aw/pub" title="show the slides">"Nuxt.js - Universal Vue.js Applications"</a>
                        [<abbr title="english">en</abbr>]
                      </li>
                    </ul>
                  </li>
                  <li>
                    <a href="https://www.ovh.com/fr/blog/sentry-ouvrez-chasse-aux-bugs/">OVH Meetup</a> 2017, Lille, France
                    <ul>
                      <li>
                        <a href="https://www.youtube.com/watch?v=5kPWr1IYVhg&t=0s&list=PLzZ0f2KT2ZROn2h2DKpm531Vqip82U9eT" title="show the video"><span lang="fr">"Sentry, La chasse aux bugs est ouverte !"</span></a>
                        [<abbr title="french">fr</abbr>]
                        (<a href="https://docs.google.com/presentation/d/1GnNcwWokpuGDzF07qFXJibOpzIbEX6X6IQR04oLuIFE/pub">slides</a>)
                      </li>
                    </ul>
                  </li>
                  <li>
                    <a href="https://www.breizhcamp.org">BreizhCamp Conference</a> 2017, Rennes, France
                    <ul>
                      <li>
                        <a href="https://docs.google.com/presentation/d/1KBcAav2BhM9DQY5NMq0AOpvgNh9KutKSezmHUT02qK8/pub" title="show the slides"><span lang="fr">"Sentry, La chasse aux bugs est ouverte !"</span></a>
                        [<abbr title="french">fr</abbr>]
                      </li>
                    </ul>
                  </li>
                  <li>
                    <a href="https://www.breizhcamp.org">BreizhCamp Conference</a> 2015, Rennes, France
                    <ul>
                      <li>
                        <!--<span>"Angular 2, The Force Awakens"</span> / -->
                        <a href="https://www.youtube.com/watch?v=IWJqj9y5tO4&list=PLzZ0f2KT2ZROn2h2DKpm531Vqip82U9eT" title="show the video"><span lang="fr">"Angular 2, Le Réveil de la Force"</span></a>
                        [<abbr title="french">fr</abbr>]
                        (<a href="https://www.slideshare.net/NicoPennec/angular-2-le-reveil-de-la-force">slides</a>)
                      </li>
                      <li>
                        <!--<span>"45 Tools to Boost Your Front-End"</span> / -->
                        <a href="https://www.youtube.com/watch?v=D67WubvgGWM&list=PLzZ0f2KT2ZROn2h2DKpm531Vqip82U9eT" title="show the video"><span lang="fr">"45 outils pour doper votre front-end"</span></a>
                        [<abbr title="french">fr</abbr>]
                        (<a href="https://www.slideshare.net/NicoPennec/45-toolstoboostyourfrontend" title="show the slides">slides</a>)
                      </li>
                    </ul>
                  </li>
                  <li>
                    <a href="https://rennesjs.org" title="Rennes JavaScript User Group">RennesJS Meetup</a>, Rennes, France
                    <ul>
                      <li>
                        <a href="https://www.slideshare.net/NicoPennec/ng-conf-2015" title="show the slides">"Ng-Conf 2015 Report : AngularJS 1 & 2"</a>
                        [<abbr title="english">en</abbr>]
                      </li>
                      <li>
                        <a href="https://www.slideshare.net/NicoPennec/introduction-angularjs" title="show the slides">"Introduction à AngularJS"</a>
                        [<abbr title="french">fr</abbr>]
                      </li>
                    </ul>
                  </li>
                  <li>
                    <u>Flex User Group</u>, Rennes, France
                    <ul>
                      <li>
                        <a href="https://fr.slideshare.net/NicoPennec/flex-46-et-flash-builder-46" title="show the slides">"Flex 4.6 & Flash Builder 4.6"</a>
                        [<abbr title="french">fr</abbr>]
                      </li>
                      <li>
                        <a href="https://fr.slideshare.net/NicoPennec/prsentation-de-robotlegs" title="show the slides">"Présentation de Robotlegs"</a>
                        [<abbr title="french">fr</abbr>]
                      </li>
                    </ul>
                  </li>
                </ul>
              </div>
            </div>
          </section>

          <section id="follow-me" class="section--center mdl-grid mdl-grid--no-spacing mdl-shadow--2dp">
            <div class="mdl-card mdl-cell mdl-cell--12-col">
              <div class="mdl-card__supporting-text">
                <h4>
                  <i class="mdl-color-text--blue-grey-400 material-icons mdi-people" aria-hidden="true"><!--people--></i>
                  Follow Me
                </h4>
                <ul class="social">
                  <li><a href="https://www.linkedin.com/in/nicopennec">LinkedIn</a></li>
                  <li><a href="https://github.com/NicoPennec">GitHub</a></li>
                  <li><a href="https://stackoverflow.com/users/4328275/nicopennec">StackOverflow</a></li>
                  <li><a href="https://www.slideshare.net/NicoPennec">SlideShare</a></li>
                  <li><a href="https://www.instagram.com/nicopennec/">Instagram</a></li>
                  <li><a href="https://www.facebook.com/nicolas.pennec">Facebook</a></li>
                  <li><a href="https://x.com/NicoPennec">X (Twitter)</a></li>
                  <li><a href="https://medium.com/@NicoPennec">Medium</a></li>
                </ul>
              </div>
            </div>
          </section>

        </div>
      </main>

    </div>

    <script src="vendor/raven/3.27.0/raven.min.js"></script>
    <script src="vendor/material-design-lite/material.min.js"></script>
    <script src="vendor/loadcss/0.1.7/loadCSS.min.js"></script>
    <script>
      Raven.config('https://cdf67a30b325483893c7d843765a6cf2@sentry.io/158789').install();

      var ss=loadCSS('https://fonts.googleapis.com/icon?family=Material+Icons');
      onloadCSS(ss,function(){document.body.classList.add('mdi--loaded');});
    </script>
    <noscript><link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet"></noscript>

    <script>
      (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
      (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
      m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
      })(window,document,'script','//www.google-analytics.com/analytics.js','ga');
      ga('create', 'UA-63811497-1', 'auto');
      ga('send', 'pageview');
    </script>

    <script async defer src="https://buttons.github.io/buttons.js"></script>

  </body>
</html>

A propos d'Outiref

Contact / Signaler un bug

FAQ

Crédits et Mentions Légales

Audit SEO par Abondance

Suivez nous sur...

Un site du Réseau Abondance

Agence SEO Neper
Formations SEO NEPER
Googlefight
Cabinet de conseil en IA - Neper AI
La météo du SEO
Définitions SEO