CINXE.COM
Benjamin Piouffle
<!DOCTYPE html> <html lang="en"> <head> <meta content="text/html; charset=utf-8" http-equiv="Content-Type" /> <meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" name="viewport" /> <meta name="description" content="Full stack developer" /> <meta name="keywords" content="Elixir,Phoenix,React,Pacific" /> <meta name="author" content="Benjamin Piouffle" /> <meta name="og:title" content="Benjamin Piouffle" /> <meta name="og:description" content="Fullstack Elixir / ReactJS developer and civic tech enthusiast" /> <meta name="og:type" content="website" /> <meta name="og:url" content="https://benjamin.piouffle.com" /> <meta name="google-site-verification" content="9hzf94tdSi4_cNeRMoZkMOpJBfaAV5A1GIjOPpAoISs" /> <title>Benjamin Piouffle</title> <link href="https://fonts.googleapis.com/css?family=Goudy+Bookletter+1911" rel="stylesheet" type="text/css" /> <link href="https://fonts.googleapis.com/css?family=Arvo" rel="stylesheet" type="text/css" /> <link href="main.css" rel="stylesheet"></head> <body> <header class="fixed noselect" id="header"> <div class="content"> <div id="logo"> <a href="#slide-presentation"> <img align="left" alt="Benjamin Piouffle Avatar" id="profilePicture" src="img/benjaminpiouffle.jpg" width="52" height="52" /> <h1>Benjamin Piouffle</h1> </a> </div> <div id="navContainer"> <nav id="nav"> <ul id="menu"> <li><a href="#slide-presentation">About me</a></li> <li><a href="#slide-education">Education</a></li> <li><a href="#slide-skills">Skills</a></li> <li><a href="#slide-work">Work</a></li> <li><a href="#slide-projects">Projects</a></li> <li><a href="#slide-contact">Contact</a></li> <li class="external"> <a href="https://blog.benjamin.piouffle.com" target="_blank"> Blog <img src="img/new_tab.svg" height="16" alt="" style="vertical-align: sub" /> </a> </li> </ul> </nav> <div class="hidden" id="menuScrollProgress"></div> <div id="responsiveMenuContainer"></div> </div> </div> </header> <div class="parallax"> <div class="slide" id="slide-presentation"> <div class="content"> <h2>About me</h2> <p class="description" itemscope="" itemtype="https://data-vocabulary.org/Person" > My name is <span itemprop="name">Benjamin Piouffle</span>, I'm a fullstack developer who graduated from the French engineering school <span itemprop="affiliation"><b>Epitech</b></span >. I also studied for one year at the <span itemprop="affiliation" ><b>California State University of Long Beach (USA)</b></span >. <br /> <br /> I am currently working full-time as a CTO for the Open Finance Consortium, a nonprofit developing <a href="https://opencollective.com" target="_BLANK" >Open Collective</a >, an open-source platform that helps communities achieve financial sustainability.<br /><br /> I am also the founder of <a href="https://captainfact.io">CaptainFact</a>, a French nonprofit organization developing open-source and collaborative, real-time fact-checking tools for citizens, media organizations, and educational institutions. <br /> <br /> <strong>I am not available for hire.</strong> </p> </div> </div> <div class="slide" id="slide-education"> <div class="content"> <h2>Education</h2> <div class="description_container"> <div class="description"> <div class="experienceBlock"> <span class="timePeriod">2017</span> <p> UDN: <a href="https://www.colibris-lemouvement.org/projets/luniversite-colibris/mooc-gouvernance-partagee" >MOOC</a > about organic governance (holocracy, self-sovereignty...) <br /> edX: <a href="https://courses.edx.org/courses/course-v1:ASUx+MCO425x+2T2015/course/" >MOOC</a > about media literacy, by Arizona State University </p> </div> <div class="experienceBlock"> <span class="timePeriod">October 2011 – August 2016</span> <img alt="Epitech" class="experienceLogo" src="img/logo_epitech.png" /> <h3 class="experienceTitle"><b>Epitech</b> (France)</h3> <p> First year: C, UNIX systems, security, SQL <br /> Second year: C++, Web security, network <br /> Third year: Advanced C++, Java, business science <br /> Fifth year: Artificial intelligence, evolution programming, personal projects </p> </div> <div class="experienceBlock"> <span class="timePeriod">October 2014 – June 2015</span> <img alt="CSULB" class="experienceLogo" src="img/logo_csulb-color.jpg" /> <h3 class="experienceTitle"> <b>California State University of Long Beach</b> (USA) </h3> <p> First semester: English <br /> Second semester: Security, Java, Operating Systems, Web Design </p> </div> </div> </div> </div> </div> <div class="slide" id="slide-skills"> <div class="content"> <h2>Skills</h2> <div class="description"> <h3>Favorite Technologies</h3> <hr /> <div class="col"> <h4>Software programming</h4> <div class="row"> <img alt="Elixir" class="skillLogo" height="75px" src="img/icons_skills/elixir.png" title="Elixir" /> <img alt="Python" class="skillLogo" height="75px" src="img/icons_skills/python.svg" title="Python" /> <div class="skillText">NodeJS</div> <div class="skillText">C#</div> </div> </div> <div class="col"> <h4>Operating systems / Platforms</h4> <div class="row"> <img alt="GNU/Linux" class="skillLogo" height="75px" src="img/icons_skills/gnulinux.png" title="GNU/Linux" /> <img alt="Arduino" class="skillLogo" height="75px" src="img/icons_skills/arduino.png" title="Arduino" /> </div> </div> <div class="col"> <h4>Databases & query languages</h4> <div class="row"> <img alt="PostgreSQL" class="skillLogo" height="75px" src="img/icons_skills/postgresql.svg" title="PostgreSQL" /> <img alt="GraphQL" class="skillLogo" height="75px" src="img/icons_skills/graphql.svg" title="GraphQL" /> </div> </div> <div class="col"> <h4>Web programming</h4> <div class="row"> <img alt="Phoenix Framework" class="skillLogo" height="75px" src="img/icons_skills/phoenix.png" title="Phoenix Framework" /> <img alt="React.js" class="skillLogo" height="75px" src="img/icons_skills/react.svg" title="React.js" /> </div> </div> <div class="col"> <h4>Tools</h4> <div class="row"> <img alt="Git" class="skillLogo" height="75px" src="img/icons_skills/git.png" title="Git" /> <img alt="Docker" class="skillLogo" height="75px" src="img/icons_skills/docker.png" title="Docker" /> </div> </div> <h3>Languages</h3> <hr /> <div class="col"> <div class="row"> <div class="skillText">French (native)</div> <div class="skillText">English (fluent)</div> <div class="skillText">Italian (basic)</div> </div> </div> <h3>Others</h3> <hr /> <div class="col"> <div class="row"> <div class="skillText">Project Management</div> <div class="skillText">Agile / Scrum</div> <div class="skillText">Holacracy</div> <div class="skillText">Remote work</div> </div> </div> </div> </div> </div> <div class="slide" id="slide-work"> <div class="content"> <h2>Work Experience</h2> <div class="description"> <div class="experienceBlock"> <span class="timePeriod">November 2018 - Present</span> <img alt="OpenCollective" class="experienceLogo" height="75" src="img/OpenCollective.svg" /> <h3 class="experienceTitle"> <b>Open Collective</b> – Fullstack Developer </h3> <p>Main technologies: NodeJS, GraphQL, Apollo, React</p> </div> <div class="experienceBlock"> <span class="timePeriod">January 2017 - Present</span> <img alt="CaptainFact" height="75" class="experienceLogo" src="img/CaptainFact.svg" /> <h3 class="experienceTitle"> <b>CaptainFact</b> – Fullstack Developer </h3> <p> Main technologies: Elixir, Phoenix, Absinthe, GraphQL, Apollo, React, Redux, WebExtension </p> </div> <div class="experienceBlock"> <span class="timePeriod">September 2015 – September 2016</span> <img alt="Factset" class="experienceLogo" src="img/factset.png" style="margin-top: 8px" /> <h3 class="experienceTitle"> <b>Factset</b> – Fullstack Developer </h3> <p>Main technologies: C++, C#, Python</p> </div> <div class="experienceBlock"> <span class="timePeriod">September 2013 – June 2014</span> <img alt="Numvision" class="experienceLogo" src="img/numvision.png" style="margin-top: 8px" /> <h3 class="experienceTitle"> <b>Numvision</b> – Java / J2EE Developer </h3> <p> Numvision is a company located in the south of France that provides files backup and synchronisation solutions for companies. My work mainly consisted of improving the main company's product "Numsync", creating a REST API and automatizing the build of mobile applications. <br /> <br /> Main technologies: Java / J2EE, REST API, Android and IOS builds </p> </div> <div class="experienceBlock"> <span class="timePeriod">July 2012 – December 2012</span> <img alt="EFrogg" class="experienceLogo" src="img/efrogg.png" /> <h3 class="experienceTitle"> <b>EFrogg</b> – Web Developer Internship </h3> <p> Internship at EFrogg, a web agency. Development of a SEO analysis tool and work on various websites. <br /> <br /> Main technologies: HTML, Javascript, JQuery, PHP, MySQL </p> </div> </div> </div> </div> <div class="slide" id="slide-projects"> <div class="content" style="max-width: 850px"> <h2>Projects</h2> <div class="project description"> <h3> <a href="https://captainfact.io">CaptainFact.io</a> </h3> <br /> <iframe width="780" height="438.75" src="https://www.youtube-nocookie.com/embed/Qq3cars_Dxs?rel=0" frameborder="0" allow="encrypted-media" allowfullscreen ></iframe> <br /><br /> <p> Internet is filled with rich and abundant data. Information travels fast and we don't have the time to check that everything we see and hear is correct.<br /> <strong>CaptainFact</strong> is a social platform that allows people to debate and help each other to verify that data by sourcing it, voting and chatting about facts. <br /><br /> Technologies: Elixir, Phoenix, GraphQL, React, Redux, WebExtension </p> </div> <div class="project description"> <h3><a href="https://etsidemain.nc">Et si demain...</a></h3> <br /> <iframe width="780" height="438.75" src="https://www.youtube-nocookie.com/embed/rMwvVKs7W4k" frameborder="0" allow="encrypted-media" allowfullscreen ></iframe> <br /><br /> <p> <strong>Et si demain...</strong> is a citizen debate platform designed to facilitate discussions about New Caledonia's 2018 independence referendum. The platform features short videos (under 30 seconds) where speakers present individual arguments, ideas, or questions. A team of journalists verifies and sources the citizens' contributions, ensuring all arguments are fact-based. <br /><br /> The project was conceived during Noumea's first Hackathon by a team consisting of two journalists, a motion designer, and myself as the developer. It has since evolved to involve two news organizations and launched to the public in January 2018. <br /><br /> Technologies: React, GatsbyJS, GraphQL </p> </div> <div class="project description"> <h3> <a href="https://github.com/Betree/democracy-watcher" >Democracy Watcher</a > </h3> <br /> <p> This project aims to provide a set of tools to monitor a democratic entity. This entity can be a country, a city council or your organization. You can get a preview of the front-end with fake data on <a href="https://democracywatcher.netlify.com/">this link</a>. <br /> <br /> Technologies: ES6, React </p> </div> <div class="project description text-center"> More on <a href="https://github.com/Betree"> Github </a> </div> </div> </div> <div class="slide" id="slide-contact"> <div class="content"> <h2>Contact</h2> <div class="description_container"> <div class="contact-icons-container"> <a class="contactIconContainer" class="hidden_email" href="mailto:Please activate Javascript to see my real email" id="contactFormButton" > <img alt="Email" class="contactIcon" src="img/icons_social/mail.png" /> </a> <a class="contactIconContainer" class="hi-icon hi-icon-effect-8" href="https://github.com/Betree" target="_BLANK" ><img alt="Github" class="contactIcon" src="img/icons_social/github.png" /></a> <a class="contactIconContainer" href="https://www.linkedin.com/in/benjaminpiouffle" target="_BLANK" ><img alt="Linkedin" class="contactIcon" src="img/icons_social/linkedin.png" /></a> </div> </div> <div id="contact_text"></div> </div> </div> </div> <script type="text/javascript" src="main.js"></script></body> </html>