Valentin Ledrapier Développeur
web & multimédia
/

Anamorph
unity
Ensemble, dessinons 2015
webgl
Générateur de bonnes résolutions
webgl
Digging Into Hip Hop
webgl
Splash
arduino
dokkuboard
webapp
Voile Banque Populaire
site web
Maze
unity
Investigator
nodejs
Valentin
Ledrapier
chargement en cours...
Valentin Ledrapier Développeur web & multimédia
Compétences
Projets
CV
Contact

Compétences

  • Maîtrise du javascript moderne (ES6/ES7), de ses principaux frameworks, librairies, et outils de développement.
  • Conception et développement d’expériences multimédia interactives 2D et 3D (WebGL, Unity), jeux vidéos et installations interactives.
  • Conception d'interfaces utilisateur, UX et prototypage sur tous supports (desktop, tablette, mobile).
  • Intégration HTML, CSS et préprocesseurs, SEO et responsive design.
  • Développement back avec nodejs et ses principaux frameworks web, bases de données NoSQL et relationnelles.
  • Versioning, mise en place des tests, d’outils de CI/CD, déploiement automatisé avec docker.

Projets

WebGL/Digging Into Hip Hop

D.I.H.H. est un site web interactif permettant de découvrir des disques en fouillant dans des caisses de vinyles en trois dimensions.

Le site propose, à travers une navigation expérimentale, d’explorer et d’écouter une sélection de titres de Hip Hop des années 90. Le projet a pour principal but d’offrir une expérience nouvelle de découverte musicale sur Internet. En réutilisant les codes de la culture du crate digging (la recherche de perles rares perdues dans d’immenses bacs de vinyles), le site web tente d’offrir une expérience aussi imprévisible que chez un disquaire.

Développé en WebGL en utilisant la librairie Three.js, D.I.H.H. est aussi compatible sur les mobiles et tablette modernes.

Le coeur du projet est open source et accessible sous la forme d’une librairie javascript, distribuée sous licence MIT: github.com/risq/cratedigger.

> À découvrir ici: dihh.io

Unity/Anamorph

Anamorph est une installation permettant de confronter le visiteur à son double numérique, généré à partir de ses propres données sociales. Le but de ce projet est de personnifier l’identité numérique de l’utilisateur en lui créant un avatar unique et abstrait, représentant son utilisation des réseaux sociaux et d’internet. Par diverses interactions, le visiteur devra tenter de déchiffrer cette silhouette pour essayer d’en apprendre plus sur sa propre identité numérique, et sur l’image qu’il renvoie sur Internet.

L’installation est un “photomaton”, détourné, où le miroir est remplacé par un écran projeté. L’utilisateur s’assoit et se connecte sur ses réseaux sociaux via une application web. Son “double numérique” est généré en trois dimensions et projeté face à lui, à taille réelle. Grâce à une Kinect, la silhouette reproduit ses mouvements tel un miroir, en temps réel. En sortant, le visiteur récupère un carton imprimé de son avatar et peut l’utiliser pour se connecter sur le site Internet dédié.


Mobile/Lexmark Cartridge Collection Program

Développée à Oz Conseil, LCCP est une application mobile permettant de faciliter le retour de cartouches usagées auprès de Lexmark, dans le cadre du Lexmark Cartridge Collection Program. Ce programme a pour objectif de récupérer, réutiliser ou recycler les cartouches Lexmark vides afin de diminuer les déchets et les ressources consommées. L’application est développée en javascript avec Cordova.


Web/Voile Banque Populaire

En 2016, Banque Populaire a fait appel à l'agence Oz Conseil pour réaliser le nouveau site web de sponsoring Voile Banque Populaire. Conçu pour tous les supports (web, tablette et mobile), il permet d'accéder à toutes sortes d'actualités et d'informations liées à la voile, mais aussi des contenus vidéos et des banques d'images.


Arduino/Splash

Splash est un projet interactif et collaboratif permettant de peindre à plusieurs, via un smartphone, sur une toile suspendue.

L’installation est composée d’une toile, suspendue à l’horizontale par quatre fils. Chacun de ces fils est relié à un moteur, permettant d’incliner la toile librement sur deux axes : l’installation reproduit en temps réel les mouvements d’un téléphone, via l’accéléromètre. Au-dessus de celle-ci est placé un réservoir de peinture, lui aussi actionné par un moteur.

L’application est divisée en deux parties. L’une permet de contrôler le débit de la peinture, et la seconde les mouvements de la toile. La première n’est accessible que sur le lieu de l’installation : l’utilisateur voit donc la peinture tomber sur la toile. La deuxième est utilisée à distance. L’utilisateur voit la toile grâce à une caméra placée au-dessus de celle-ci. Grâce à l’accéléromètre de son téléphone, il contrôle cette dernière et dirige le tracé de la peinture.


Web/Michelin Formula E

Michelin FIA-E (AutoRacingLive) est un site web relayant la compétition FIA Formula E, championnat de formules électriques organisé par la FIA, fédération internationale de l’automobile.

À l’occasion du premier championnat, Michelin souhaite relayer l’univers de cette course à travers un dispositif digital live. Le site permet de suivre la course, d'accéder aux tableaux des scores et consulter des actualités, vidéos et contenus multimédia en rapport avec la compétition, le tout en direct pendant les courses.


Unity/Maze [WIP]

Maze est un jeu d’aventure et de survie dans un labyrinthe. Il s’agit d’un projet expérimental traitant de la génération procédurale et, plus généralement, du genre du rogue like ou du procedural death labyrinth.

Placé dans un immense labyrinthe, généré de manière procédurale à chaque partie, le joueur devra explorer et trouver la sortie. Pour cela, il devra déclencher un certain nombre d’événements et accomplir des “quêtes” pour débloquer de nouvelles zones et progresser dans le niveau.

En plaçant des repères, il pourra petit à petit s’approprier le labyrinthe et utiliser à son avantage les pièges et obstacles pour se débarrasser des ennemis qui le traquent.


nodejs/Investigator

Investigator est un outil de debug experimental pour nodejs. Proposant une interface interactive totalement en ligne de commandes, il permet le logging et l'inspection de toutes sortes de requêtes ou d'opérations asynchrones.

Investigator utilise un système de logging sous forme de noeuds. Les noeuds peut être imbriqué afin de pouvoir hiérarchiser chaque opération, synchrone ou non, du processus.

Un inspecteur permet aussi l'inpection d'objets javascript directement depuis le terminal, à la manière des outils de développement navigateur.


WebGL/Ensemble, dessinons 2015

Ensemble, dessinons 2015 a été développé à l’occasion de la nouvelle année 2015 pour Oz Conseil. Il s’agit d’un mini-jeu de course développé en WebGL. A la fin de la course, le joueur voit son tracé affiché, vu de dessus, puis ceux de tous les autres joueurs se superposent, laissant apparaître “2015”. Le jeu fonctionne sur tous les navigateurs modernes, smartphones et tablettes.


WebGL/Générateur de bonnes résolutions

Développé à Oz Conseil, le Générateur de Bonnes Résolutions a été créé pour la nouvelle année 2016. Il s'agit d'un mini site web générant des "bonnes résolutions" aléatoires en secouant une boule à neige. Le site utilise Pixi.js (librairie 2D utilisant un moteur de rendu webgl ou canvas) et fonctionne aussi sur mobile et tablette.


WebApp/dokkuboard [WIP]

Toujours en développement, dokkuboard est une application web permettant de contrôler et "monitorer" un serveur dokku (self-hosted PAAS, à la Heroku, basé sur docker). L'application repose sur un serveur node.js qui communique avec l'instance de dokku par ssh et met à disposition une API HTTP. L'application web, développée en vuejs, permet d'intéragir via cette API, de suivre l'état des containers en temps réel, de lancer des commandes dokku et même de démarrer des sessions ssh directement depuis le navigateur.

Le but de ce projet est de fournir une interface de gestion complète, accessible et simple d'utilisation à dokku, qui ne bénéficie pour l'instant d'aucune autre interface que la ligne de commande.


Objet connecté/Youka

Projet de 1ère année Gobelins, Youka consiste en une plante connectée, symbolisant, par sa croissance, le développement des relations entre les employés d’une entreprise.

L’arrosage et l’éclairage sont gérés de façon automatisée mais dépendent directement des actions effectuées par les utilisateurs. Le projet a vocation d’impliquer davantage les employés dans leurs relations professionnelles.