DRIME est un lecteur vidéo responsive, multilingue, interactif et encapsulable sans cookies, composé de deux applications principales : le lecteur Drime, associé au format vidéo DRIME, et l'éditeur de vidéos Drime.

Le format .drime est un format JSON qui permet de lire les vidéos dans toutes les langues souhaitées par le client, avec sous-titres, voix-off et habillages dynamiques adaptés à chaque langue. Ce format utilise un seul fichier vidéo, réduisant ainsi les coûts de stockage et l'empreinte écologique. Peu importe le nombre de langues, une seule vidéo est hébergée, avec un fichier Drime unique par projet.


1/ Le player Drime et le format de fichier .drime :

- Pour les professionnels/clients :

Mise en ligne de tutoriels vidéo optimisés pour toutes les résolutions d’écran, permettant une diffusion en plusieurs langues grâce à la voix-off, aux sous-titres et aux habillages dynamiques, avec commandes vocales. Les tutoriels/notices peuvent être découpés en étapes pour une lecture pas à pas.

En plus de la bibliothèque de vidéos accessible sur le site DRIME, le client peut encapsuler ses vidéos ou sa bibliothèque complète sur son site web via des iframes, référencées par Google.

Le tableau de bord offre des « indicateurs intelligents », la gestion des droits utilisateurs, des iframes et QR codes personnalisés, ainsi que des habillages dynamiques pour les vidéos.


- Pour les utilisateurs :

Une plateforme de lecture vidéo adaptée à leur résolution d’écran, avec options de lecture en mode « pas à pas » ou continue, commandes vocales, réglage du son, taille et présence des sous-titres, et choix de langue. Par défaut, les vidéos sont diffusées dans la langue du navigateur, ou en anglais à défaut.

Projets menés :

- Développement de chaque nouvelle fonctionnalité : FrontEnd + BackEnd,
- Refonte du lecteur : ajout du réglage persistant du son et des sous-titres, animations CSS et Lotties sur les boutons, création du compteur d’étape, amélioration des commandes vocales,
- Refonte de la page d’accueil avec animations Lotties et création du menu,
- Patch du système de création de vidéos, avec installation d’un job pour la gestion de vidéos multilingues, suivi d’une refonte complète pour une scalabilité accrue,
- Création d'un nouveau type de bibliothèque + refonte de l’ancien modèle pour une adaptation aux designs personnalisés,
- Création des « indicateurs intelligents » : tableau de bord, classement, graphiques, moyennes et pourcentages,
- Refonte du système de gestion des droits et favoris, avec moteur de recherche par email,
- Création de générateurs d’iframe et de QR codes personnalisés : logo, bannière, menu, filtres, langue forcée, indicateur intelligent copie du code,
- Création du générateur de QR code personnalisées : couleur, couleur de fond, taille, format, indicateur intelligent en fournissant la ligne de code necessaire à l'integration par le client,
- Refonte des pages d'erreurs, pages statiques (tarifs, mentions légales, politique de confidentialité), pages d’inscription et de connexion,
- Refonte des pages d’inscription et de connexion,
- Mise en place d'un habillage dynamique multilingue des vidéos,
- Tableau de bord super admin permettant de gérer les types d'habillages et de modifier directement le code des fichiers JSON des animations,
- Création d'une deuxième landing page.

Technologies utilisées :

Figma, Ruby on Rails, Vanilla JS, ES6, jQuery, JSON, HTML, CSS, SCSS, PostgreSQL, SQL, Heroku, AWS, Git.

2/ L'éditeur de vidéos au format Drime :

L’éditeur de vidéos Drime permet aux clients de créer des diaporamas multilingues, responsives, interactifs et encapsulables en sélectionnant des effets de transition. En connaissant les médias à utiliser et les textes à associer, la création et la mise en ligne de vidéos en plusieurs langues est rapide et efficace.

Les clients peuvent intégrer la vidéo sur leur site via iframe, une ligne de code, ou l'afficher en vitrine sur le site Drime.

Projets menés :

- Paramétrage et déploiement du projet sur Heroku et GitHub,
- Création d’une troisième landing page avec des animations avancées (parallaxe, effets d’apparition),
- Mise en place de l’éditeur de vidéos Drime : FrontEnd + BackEnd,
- Création des pages statiques de l’application,
- Développement de l’espace Super Admin pour la gestion des clients et de leurs projets,
- Création de l’espace client avec options pour lister, créer, modifier, dupliquer, publier et supprimer des projets,
- Automatisation du stockage en lecture/écriture des fichiers Drime sur AWS,
- Gestion des projets utilisateurs et des statuts (temporaire, brouillon, publié) des vidéos,
- Paramétrage du projet : choix du montage, des habillages et du focus choisi pour le mode responsive,
- Prévisualisation en temps réel des effets et paramétrages multilingues,
- Génération et personnalisation de la voix-off via l’API Azure Text to Speech,
- Possibilité de modifier un mot ou une expression pour en changer la prononciation sur la voix-off,
- Création et paramétrage de l'ajout de nouvelles langues,
- Paramétrage des traductions avec Azure Translate et personnalisation manuelle,
- Prévisualisation et sauvegarde du projet avant publication en ligne,
- Transfert du projet sur GitLab, Docker, et AWS en collaboration avec un architecte indépendant.

Technologies utilisées :

Figma, Ruby on Rails, Vanilla JS, ES6, jQuery, JSON, HTML, CSS, SCSS, PostgreSQL, SQL, Heroku, AWS, Azure APIs, Git, GitHub, GitLab, Docker.

Pickaden est une jeune start-up parisienne qui propose un logiciel SaaS permettant :

- Pour les professionnels :

Optimisation et gestion de leurs plannings de garde, réception, acceptation ou refus des demandes de garde en ligne faites par les parents en fonction des places disponibles en temps réel, mise en ligne de leur profil, etc.

- Pour les parents :

Un moteur de recherche des places disponibles en temps réel dans les établissements du réseau autour de l’adresse recherchée, possibilité de faire des demandes en ligne aux établissements sélectionnés, création de profil avec tableau de bord, etc.

Projets menés :

- Sur chaque nouvelle fonctionnalité développé : Front-End + BackEnd,
- Débogage du MVP de base,
- Amélioration de la responsivité sur une grande partie du site,
- Refonte totale d'une partie fondamentale : fonctionnement et design de la barre de recherche pour une meilleure expérience utilisateur, avec ajout de filtres et recherche automatique à la validation d’un filtre,
- Installation de plugins JavaScript : carrousel de logos sur la page d’accueil et recherche par mots-clés sur la page d’aide (incluant la création de la page),
- Développement de l’espace parent et gestion des envois de demandes par les parents,
- Mise en place de l’espace gestionnaire,
- Gestion de l'envoi d'e-mails,
- Amélioration de l’interface d'administration de base, ajout de nouvelles fonctionnalités,
- Tests système avec Capybara,
- Amélioration des temps de chargement, notamment en optimisant les images,
- Préparation pour le passage de Woonies à Pickaden,
- Requêtes SQL sur la plateforme KPI.

Technologies utilisées :

Photoshop, Illustrator, Figma, Ruby on Rails, JavaScript, HTML/CSS, PostgreSQL, SQL, Heroku, Git, GitHub, AWS, Sendinblue, WordPress.

Petite application en React.js.

Affiche une liste d'appartements avec une carte Google Maps. Lorsqu'un utilisateur clique sur un appartement, un marqueur rouge apparaît sur la carte.

Technologies utilisées :

React.js, HTML/CSS, Git, GitHub.

Petite application en React.js.

Générateur de GIFs utilisant l'API de Giphy. L'utilisateur tape une requête dans le champ de recherche, et les GIFs correspondants apparaissent dans la liste de droite. Quand l'utilisateur clique sur un GIF, celui-ci apparaît dans l'écran de gauche sous le champ de recherche.

Technologies utilisées :

React.js, HTML/CSS, Git, GitHub.

Application Rails de publication et de recherche de petites annonces.

En tant qu'utilisateur, je peux :

- M'inscrire,
- Me connecter,
- Aller sur la page d'accueil,
- Consulter la liste des annonces publiées,
- Accéder à la page d'une annonce pour voir tous les détails.

En tant qu'administrateur, je peux :

- M'inscrire,
- Me connecter,
- Aller sur la page d'accueil,
- Consulter la liste des annonces (publiées et non publiées),
- Publier une annonce pour la rendre visible à tous les utilisateurs,
- Accéder à la page d'une annonce pour voir tous les détails.

Technologies utilisées :

Figma, Ruby on Rails, JavaScript, HTML/CSS, PostgreSQL, SQL, Heroku, Git, GitHub.

Développement de l’application Rails « Ciné-Talks » en cours : une plateforme mettant en relation des « speakers » avec des salles de cinéma et des distributeurs afin de faciliter la création d’événements autour d’un film (débats, discussions avec un acteur, un auteur, des intervenants transversaux, des associations, etc.).

Technologies utilisées :

Figma, Ruby on Rails, JavaScript, HTML/CSS, PostgreSQL, SQL, Git, GitHub.

Assistance au professeur lors de son cours du matin. Aide, déblocage et correction des étudiants sur leurs exercices du matin et de l’après-midi, ainsi que clarification du cours si besoin.

Technologies utilisées :

HTML5, CSS3, Bootstrap, CSS Grid, design de composants, UI/UX.

Mentorat lors de l'événement Rails Girls Saint-Étienne. Accompagnement des participants pour l'installation de leur environnement de développement et la création d'une petite application Rails via le scaffold.

Technologies utilisées :

Ruby on Rails, HTML/CSS, PostgreSQL, Git.

Développement en Vue.js d'une fonctionnalité (non déployée) pour une application web existante, marcelle.mobi, pendant deux jours.

Fonctionnalité : Ajout d'un filtre "lieux de tournage de films" à proximité sur la carte.

En tant qu'utilisateur, je peux :

- Afficher les "lieux de tournage de films" à proximité,
- Cliquer sur le marqueur personnalisé pour accéder au lien vers le film,
- Cliquer sur le lien pour voir les informations sur le film,
- Cliquer sur le bouton "voir sur la carte" pour être redirigé directement vers la page Google Maps du lieu de tournage.

Travail en équipe de 5 développeurs issus d'écoles, de niveaux et de stacks différents :

- 2 étudiants en JAVA (Wild code school)
- 2 futurs étudiants (le Wagon Marseille)
- moi-même alumni du Wagon Marseille (Ruby/Rails/JS).

Technologies utilisées :

Illustrator, Vue.js, HTML/CSS, Heroku, Git, GitHub.

Application Rails - Planificateur de voyage : permet de planifier un voyage en sélectionnant des activités en fonction des préférences de l’utilisateur, qui peut également ajuster le « pourcentage de mystère » pour dévoiler ou masquer certaines activités.

En tant qu'utilisateur, je peux :

- M'inscrire,
- Me connecter,
- Créer un nouveau voyage,
- Indiquer mes préférences pour le type d'activités,
- Choisir des activités dans une liste d'activités par type,
- Personnaliser mes voyages avec des moments de fête,
- Choisir le niveau de mystère,
- Visualiser mon voyage étape par étape,
- Voir la liste des activités par étape,
- Mettre à jour mes voyages,
- Consulter ma liste de voyages.

Projet réalisé en équipe de 4 personnes, avec une refonte graphique effectuée par mes soins.

Technologies utilisées :

Figma, Ruby on Rails, JavaScript, HTML/CSS, PostgreSQL, SQL, Heroku, Git, GitHub.

Application Rails de réservation d’activités sportives, culturelles, etc... :

En tant qu'utilisateur, je peux :

- M'inscrire,
- Me connecter,
- Aller sur la page d'accueil,
- Consulter la liste des activités ou rechercher des activités par type ou localisation,
- Accéder à la page d’une activité avec tous les détails,
- Réserver des activités depuis la page de l'activité,
- Consulter ma liste de réservations (filtrable par type d’activités) et suivre leur statut,
- Contacter le propriétaire via un message dans l'application.

En tant que vendeur, je peux :

- Accéder aux mêmes fonctionnalités que les utilisateurs,
- Créer une nouvelle activité (cliquer sur l’avatar du menu pour accéder à la session vendeur)
- Consulter ma liste d'activités ou rechercher mes activités par type ou localisation,
- Supprimer mes activités,
- Consulter la liste de réservations de mes activités (filtrable par type) et suivre leur statut,
- Changer le statut des réservations de mes activités avec les boutons « accepter » et « refuser »,
- Contacter les acheteurs par message dans l'application.

Projet de base réalisé en équipe de 5 personnes, puis repris par mes soins pour une refonte complète du site et l'ajout de fonctionnalités.

Technologies utilisées :

Figma, Ruby on Rails, JavaScript, HTML/CSS, PostgreSQL, SQL, Heroku, Git, GitHub.

"Mister Cocktails" est une application Rails basée sur un C.R.U.D.

Créer ou consulter des recettes de cocktails.

En tant qu'utilisateur, je peux :

- Accéder à la liste de toutes les recettes de cocktails,
- Ajouter, supprimer et mettre à jour une recette de cocktail,
- Choisir les ingrédients dans la liste,
- Ajouter ou supprimer une dose,
- Ajouter des avis, mais sans pouvoir les supprimer.

Technologies utilisées :

Figma, Ruby on Rails, JavaScript, HTML/CSS, PostgreSQL, SQL, Heroku, Git, GitHub.