Marc Fairbrother

Festival Scope Pro

• Chef de projet
• Designer UX & UI
• Développeur front-end

Festival Scope Pro est un service de VOD utilisé par plus de 10 000 professionnels travaillant dans l'industrie du cinéma chaque année.

Une sélection de titres à la recherche d'opportunités de diffusion et de visibilité supplémentaire sont rendus disponibles en ligne en partenariat avec plus de 100 festivals de cinéma et d'institutions du monde entier.

• Prise en charge de la gestion d'une application legacy à partir de 2014 et suivi de l'implémentation de nouvelles fonctionnalités.
• Supervision de la réécriture du code-base à partir de 2016 afin de permettre des synergies avec les autres projets de la société.
• Coordination d'une équipe de designers et de développeurs pour lancer de nouvelles versions des applications web et iOS en 2019.
• Conception et développement de parties de l'interface utilisateur et d'un gabarit de newsletter responsive.
• Suivi des bugs, triage et recettage, et correction de problèmes front-end.
• Recherche et supervision de l'implémentation de services permettant l'amélioration de la qualité de streaming et l'optimisation du workflow vidéo.

• Outils & technos :
• Figma
• Twig
• SCSS
• JavaScript
• Git
• GitLab
• Trello
• Email Octopus

ArteKino Festival

• Chef de projet
• Designer UX & UI
• Développeur front-end

Lancé par Arte France Cinéma et Festival Scope en 2016, ArteKino Festival est un festival de cinéma en ligne réunissant chaque année dix long-métrages récents disponibles au visionnage pour 50 000 spectateurs de l'Union Européenne

À la fin de chaque édition du festival, un film est récompensé d'un prix du public discerné selon les votes effectués en ligne par les spectateurs.

• Collaboration avec les principaux porteurs du projet pour établir un cahier des charges initial et définir de nouvelles fonctionnalités à chaque nouvelle édition.
• Gestion des équipes de design et de développement chargées de la création des applications web, iOS et Android.
• Conception et développement de parties de l'interface et création de protoypes fonctionnels permettant de valider les parcours et l'expérience utilisateur.
• Suivi de bugs, triage et recettage.
• Formation de chefs de projet junior pour leur déléguer la gestion du service à partir de l'édition 2019 du festival.

• Outils & technos :
• Figma
• HTML
• CSS
• JavaScript
• GitLab
• Trello
• Mailchimp

Festival Scope

• Chef de projet
• Designer UX & UI

Festival Scope est un service de VOD diffusant des films sélectionnés dans des festivals de cinéma internationaux, permettant aux spectateurs du monde entier de participer virtuellement aux événements et offrant une visibilité supplémentaire à des films aux opportunités de distribution limitées.

• Collaboration avec les porteurs du projet pour rédiger un cahier des charges.
• Supervision d'une équipe de designers et de développeurs pour livraison d'une première version de l'application en 2016 et de nouvelles versions au fil des mois.
• Création de wireframes et de maquettes pour une application mobile et suivi de son développement.
• Recherche de synergies possibles entre les différentes applications de la société utilisant un même code-base.
• Conception et développement de gabarits de newsletters responsives et formation du personnel chargé de leur envoi.
• Suivi de bugs, triage et recettage.

• Outils & technos :
• Gimp
• Inkscape
• HTML
• CSS
• GitLab
• Trello
• Mailchimp

Kanban Vue JS

• Développeur
• Designer UX & UI

Un tableau de type Kanban inspiré par Trello avec une interface permettant de glisser et déposer les listes et tickets.

Développé en suivant la méthodologie test-driven development (TDD).

• Développement d'une application CRUD permettant de créer, afficher, modifier et supprimer les listes et les tickets.
• Utilisation de Vuex pour gérer l'état de l'application et de l'API Web Storage pour enregistrer les données.
• Écriture de tests unitaires avec la suite de test Jest en suivant la méthodologie TDD.
• Mise en place de la validation et du nettoyage des données des formulaires côté client.
• Implémentation d'une interface permettant le glisser-déposer avec les événements drag, dragover et dragend.

• Outils & technos :
• Figma
• HTML
• SCSS
• JavaScript
• Vue.js
• Vuex
• Vuelidate
• DOMPurify
• Jest
• Git
• GitHub
• Netlify

Memory Vanilla JS

• Développeur
• Designer UX & UI

Un jeu de Memory traditionnel dans lequel un joueur humain et un joueur ordinateur essaient tour par tour de retrouver le plus grand nombre de paires.

Si un joueur découvre une paire, il joue de nouveau. La partie se termine une fois que toutes les paires ont été découvertes.

• Implémentation d'un système par tour pour permettre à l'humain ou à l'ordinateur de jouer.
• Création d'une base de connaissances pour permettre à l'ordinateur de savoir quelles cartes ont été révélées et quelles cartes sont hors jeu car la paire a été découverte.
• Implémentation d'une stratégie pour l'ordinateur qui commence son tour en cherchant une paire parmi les cartes révélées. Si une paire existe, l'ordinateur retourne ces cartes, sinon il retourne une carte inconnue et vérifie de nouveau si une carte correspondante a déjà été révélée.
• Développement d'animations JS et CSS pour accompagner les interactions de retournement de carte et de mélange en début de partie.
• Utilisation de modules ES et de SCSS pour organiser le code de l'application en des fichiers plus concis et faciles à gérer.

• Outils & technos :
• Figma
• HTML
• SCSS
• JavaScript
• ES Modules
• Parcel
• Git
• GitHub
• Netlify

Metronome Vanilla JS

• Développeur
• Designer UX & UI

Un métronome JavaScript avec contrôles accessibles pour modifier le tempo, le nombre de pulsations et pour activer ou désactiver les contre-temps.

L'API Web Audio a été utilisée pour générer les clics du métronome avec différentes fréquences pour marquer la première pulsation d'un cycle, les pulsations normales et les contre-temps.

• Utilisation de fonctions asynchrones et de récursion pour construire la logique basique du métronome et permettre la modification du tempo sans devoir annuler un intervalle ou redémarrer le métronome.
• Utilisation de prototypes JS pour créer des oscillateurs à différentes fréquences et pouvant être démarrées ou éteintes via des méthodes attachées.
• Développement d'animations et de contrôles de formulaire accessibles.

• Outils & technos :
• HTML
• CSS
• JavaScript
• Git
• GitHub
• Netlify

Into the FrancoVerse

• Développeur
• Designer UX & UI

Un projet de data visualisation explorant la filmographie colossale de Jess Franco.

Mon objectif était d'apprendre les bases du framework Vue.js et à animer des SVG.

• Design inspiré de la mise en page de vieux lobby cards et d'éléments graphiques d'affiches et livres vintage pour retrouver l'ambiance des films les plus connus de Franco.
• Développement d'un graphique en utilisant un SVG et des animations JavaScript avec des données conservées dans un object JavaScript.
• Développement d'un système de filtres pour mettre à jour le graphique selon les options sélectionnées.
• Les options disponibles pour chaque filtre sont mises à jour selon les autres options sélectionnées pour éviter de retourner aucun résultat.
• Il est prévu de revoir et optimiser le code avec l'expérience acquise en programmation.
• Il est prévu de revoir le design de la liste de films et ajouter une carte pour visualiser les lieux de tournage récurrents, ainsi que d'héberger les données sur un serveur et utiliser GraphQl pour charger les données nécessaires sur le client.

• Outils & technos :
• Vue.js
• SCSS
• JavaScript
• HTML
• Git
• GitHub
• Netlify