Fabian Thiry, développeur web créatif à Charleroi, Namur, Wavre, Nivelles, Mons, Liège, Bruxelles orienté React - Javascript - ThreeJS - Wordpress

Développeur créatif basé à Charleroi en Belgique et spécialisé dans la création de fonctionnalités web sur-mesure et d'expériences utilisateurs inédites, je travaille principalement avec des outils tels que React et/ou Wordpress selon les besoins du projet. Je dispose également de compétences accrues dans la conception de médias visuels & 3D, ainsi que dans le traitement d'images. Des films aux jeux vidéos, de la musique aux effets visuels, tous ces médias ont le pouvoir de susciter des émotions profondes. C’est là que ma passion pour la technologie, l’audiovisuel et l’art digital y ont pris racine. Le web dans son ensemble est un terrain parfait pour partager des “Good Vibes” à travers des expériences digitales uniques et pouvoir faire usage d’une multitude d’effets visuels et musicales visant à créer une ambiance originale.

Projets

Action Job Etudiant

  • site web
  • ux/ui
  • wordpress
  • php

Présentation

Réalisation d'un thème sous wordpress pour la Fédération InforJeunes visant à fournir aux étudiants une plateforme pour les aider à trouver leur premier job.

Analyse

Mes tâches consistaient principalement à analyser l'ancien site web, détecter ses défauts et y apporter des solutions à la fois pratiques et esthétiques. Ensuite, vint la phase de production du nouveau site web à partir d'un thème vierge et de la mise en place des nouvelles fonctionnalités et d'un design plus moderne et épuré.

Animalia

  • site web
  • ux/ui

Présentation

Réalisation d'un design pour la vitrine d'un parc animalier fictif.,La mise en page a été conçue afin de privilégier l'accès à l'achat de billets en ligne tout en mettant en lumière les atouts et l'activité de l'enseigne.

Arcis Avocats

  • site web
  • ux/ui
  • wordpress

Présentation

Arcis Belgique est un cabinet d'avocats situé en région namuroise. Hélène & Coralie, toutes deux avocates au Barreau de Namur, ont fait appel à moi pour la réalisation d'un site vitrine afin de mieux communiquer leurs services et sublimer leur présence en ligne de façon à devenir un cabinet de référence dans la région.

Solution

Nous nous sommes associés pour concevoir ensemble une interface élégante et soignée, réfléchir à l'accessibilité aux informations et aux fonctionnalités à mettre en place pour fournir à la fois à l'utilisateur une expérience moderne et dynamique, à la fois aux clientes pour une simplicité d'utilisation de leur plateforme en ligne. Elles bénéficient également de fonctionnalités entièrement conçues sur-mesure et alignées selon leurs besoins et usages.

Administration

Grâce à un module d'administration, Coralie et Hélène ont accès à l'édition de leurs contenus. Contrairement à beaucoup d'autres utilisateurs de Wordpress, la société Arcis se complait d'une totale indépendance quant à l'inutilité à recourir vers des ressources externes au profit de meilleurs performances et un meilleur rendement.

Point de vue technique

Un système de gestion de contenu tel que Wordpress peut très rapidement se montrer gourmand en ressources. Heureusement, le thème développé pour Arcis a été conçu de manière à optimiser les performances et réduire drastiquement le nombre de requêtes nécessaires pour son fonctionnement. Les scripts sont compilés et fusionnés en un minimum de fichiers et les images converties en un format réduit tout en conservant la qualité initiale.,La bibliothèque des outils et des blocks customisés font partie intégrante du projet et la combinaison des fonctionnalités de Wordpress mêlée aux fonctionnalités du framework React apportent une réelle touche de dynamisme et un vaste choix de possibilités.

Astroboy

  • application
  • react
  • 3D

Présentation

Astroboy est un personnage qui explore le cosmos, et entièrement réalisé sous Blender dans le but d' animer un modèle 3D dans un environnement web.,Afin de rendre possible les différentes animations aléatoires, le personnage a été riggé. Autrement dit, relié à une armature, une sorte de squelette représentant chaque mouvement possible d'un objet 3D quelconque.

Modélisation

L'entièreté du personnage est tout d'abord modelé à partir de formes primitives. Chaque 'vertex', autrement appelé point vecteur, qui compose l'ensemble du personnage est aligné dans l'espace selon des coordonnées par rapport aux axes tridimensionnels (x,y,z).,Chaque partie du modèle 3D reçoit ensuite des matériaux spécifiques qui contiennent les informations liées à la couleur, la manière dont la lumière interagit dessus, etc ...

Création du cosmos

L'univers autour du personnage est aussi réalisé à partir de formes en 3D auxquels ont été appliquées des textures et des effets bien spécifiques selon le rendu souhaité.

Intégration sous React

Une fois la scène composée, la scène est intégrée au coeur d'une application web. Ce que vous voyez ci-dessous représente par-exemple une partie des fonctions qui lancent aléatoirement chaque animation liée au personnage.

Cadavre Exquis

  • application
  • react
  • jeu

Présentation

Inventé au cours du 20ème siècle, ce jeu de création collaboratif trouve ses origines dans les mouvements surréalistes de l'époque et se joue traditionnellement sur papier. Mais ça, c'était jusqu'à aujourd'hui.,En effet, une nouvelle version entièrement numérique a vu le jour pour adapter ce jeu avec les technologies modernes.

Conception

L'ensemble de l'application a été réalisé sous React et par la création d'illustrations vectorielles qui adoptent un style qui se veut volontairement horrifique tout en gardant un trait unique et surtout enfantin.

Histoire

Le système de jeu a été conçu de manière à orienter les joueurs vers une catégorie grammaticale aléatoire tout en gardant une cohérence pour mener à bien l'histoire.,Les joueurs peuvent également faire usage du générateur de contenus depuis une bibliothèque d'idées originales stockés dans un fichier JSON.

Bande-son

Une bande son originale spécialement composée pour l'application s'exécute en parallèle afin d'apporter plus d'immersion au sein de l'environnement de jeu.

Déroulement

À tour de rôle, chaque joueur écrit un partie d'histoire tout en évitant d'en dévoiler le contenu à l'autre joueur. Une fois la partie terminée, les joueurs auront la possibilité de révéler les parties d'histoire qu'ils ont crée. Ce qui donne lieu à un contexte décalé.,Bien que l'application s'adapte pour tous types de supports, la tablette numérique ou le smartphone restent les supports à privilégier pour faciliter l'échange de l'écran de l'un à l'autre joueur.

DataSemantics

  • application
  • data
  • identity

Présentation

DataSemantics est un outil intelligent et automatisé de cartographie, d'exploration et d'exploitation de données, qui permet d'identifier et de maîtriser jusqu'à 100% des données importées depuis plusieurs sources simultanément (Ex: bases de données, fichiers Excel, etc...).,L'objectif de ma collaboration consistait à rejoindre une équipe de développeurs déjà en place afin de proposer des solutions graphiques et fonctionnelles par le biais d'une interface soignée et minutieusement réfléchie.

Identité visuelle

Le logo de DataSemantics dispose de 2 significations :,- l'une est la représentation de deux flèches inversées en référence au principe de la rétro-ingénierie dont il est question ici ;,- l'autre, la lettre S de « Sémantique ».,Le choix des tons orangés n'est pas laissé au hasard. La couleur orange véhicule des valeurs de communication et de créativité.

Analyse & Développement

Tout d'abord, j'ai établi une série de schémas et plans techniques visant à associer des connecteurs logiques entre différents concepts et développer des modules permettant d'exploiter au mieux l'outil et améliorer l'utilisabilité générale du produit.

Intégration des modules

Ensuite, j'ai repensé l'interface utilisateur en mettant l'accent sur la clarté, la convivialité et l'intuitivité. J'ai revu l'organisation des fonctionnalités et des options afin de les rendre plus accessibles et de permettre aux utilisateurs de trouver rapidement les outils dont ils ont besoin. J'ai également simplifié les flux de travail, éliminant les étapes superflues et rationalisant les processus complexes. Du prototypage à l'intégration front-end, mon travail a permis à DataSemantics d'évoluer vers une interface élégante et d'en faire une solution de premier choix dans le domaine de l'analyse des données.

Dolphin Expedition

  • site web
  • react
  • graphisme

Présentation

Dolphin Immersive Expedition est un webdocumentaire innovant et exclusif, conçu entièrement avec React. Offrant une expérience interactive et immersive, il plonge les utilisateurs dans l'univers fascinant des dauphins tout en exploitant pleinement les capacités modernes du développement web.

Objectifs

Réalisé en étroite collaboration avec l'association Cetasea, dont la mission est de développer un réseau européen de refuges pour les mammifères marins menacés, ce webdocumentaire offre une immersion captivante dans l'univers des océans. À travers le regard fascinant du dauphin, l'une des créatures les plus intelligentes et sociales du monde marin, le contenu de la plateforme aborde les défis environnementaux majeurs, tels que la pollution des océans, la surpêche et les effets du changement climatique. Plus qu'un simple documentaire animalier, il soulève des questions essentielles sur la préservation des écosystèmes marins et la cohabitation entre l'homme et la faune aquatique, tout en mettant en lumière les actions concrètes entreprises par Cetasea pour protéger ces espèces en danger.

Réalisation

L'interface est conçue pour être à la fois dynamique et immersive, intégrant des illustrations 2D et 3D entièrement réalisées pour les besoins de ce projet. Ces visuels sont enrichis par une variété d'animations fluides et interactives, visant à capter l'attention et à renforcer l'immersion du spectateur. Chaque élément graphique et chaque animation sont soigneusement pensés pour offrir une expérience visuelle engageante, tout en favorisant une navigation fluide et intuitive. L'objectif est de créer un environnement interactif qui plonge véritablement le spectateur au cœur de l'expérience, en stimulant à la fois l'aspect visuel et l'interactivité.

Elise & Sab

  • site web
  • ux/ui
  • wordpress

Présentation

Représentation graphique d'un site web destiné à la promotion d'un salon gourmand.

Gutenthree

  • wordpress
  • 3D

Présentation

Gutenthree est une extension réalisée par mes soins pour une intégration au sein de l'éditeur Gutenberg de Wordpress qui permet de créer des formes primitives et manipuler une scène 3D sans aucune connaissance en programmation. Oubliez les barrières techniques et plongez dans le monde de la création 3D de manière simple et intuitive.,Avec une prévisualisation en temps réel, personnalisez l'apparence de votre objet 3D en ajustant par-exemple la position ou l'orientation de la caméra et/ou de l'objet lui-même, ou bien la ou les lumière(s) à diffuser pour votre scène.,L'extension permet également l'import de fichier en provenance d'un logiciel externe tel que Blender, Cinema4D ou 3DSMax.

Hom&Ga

  • branding
  • print

Présentation

Création de divers supports de communication imprimés pour une massothérapeute indépendante, dans le cadre de la promotion de ses services. Parmi ces réalisations figurent notamment un triptyque détaillant l'ensemble de ses prestations, conçu pour offrir une présentation claire et attractive de son activité, ainsi que des bons à valoir, personnalisés pour fidéliser sa clientèle. Ces supports ont été pensés pour refléter l'image professionnelle et bienveillante de la massothérapeute, tout en étant visuellement harmonieux et en respectant les codes esthétiques de son domaine d'expertise.

Kobimo

  • site web
  • ux/ui
  • wordpress

Présentation

Sébastien souhaitait la mise en place d'un catalogue de biens à vendre et à louer au sein d' une interface soignée et colorée avec un attrait pour le dessin. L'entièreté du site a été conçu sous Wordpress depuis un thème vierge et conçu de manière à lui permettre d'administrer et personnaliser son site par le biais de fonctionnalités sur-mesure et adaptées pour son propre usage.,En outre, Sébastien peut ajouter, mettre à jour et supprimer ses annonces en parfaite autonomie.

Ousam Photography

  • site web
  • ux/ui
  • wordpress

Présentation

Ousam photography présente le travail d'un photographe belge par le biais d' une mise en page à la fois structurée et épurée mettant en lumière ses réalisations.,Mon intervention sur ce projet s'est porté sur la création d'un thème crée de A à Z, ainsi qu'au développement de certaines fonctionnalités sur-mesure. Le choix des couleurs et de la typographie ont, quant à eux, été adaptés sur base de l'identité visuelle choisi et propre à l'artiste.

Auto-édition

En choisissant de passer par un professionnel, Ousam profite de fonctionnalités avancées et conçus sur-mesure dont l'éditeur Wordpress ne dispose pas nativement.,Pour se faire, j'ai développé pour lui des blocks Wordpress entièrement personnalisables et adaptés selon ses besoins, le tout compilé dans un même fichier javascript afin de limiter le nombre d'appels et ainsi améliorer les performances du site.,Le client est en outre dans la possibilité d' ajouter, éditer et supprimer chaque catégorie de photographies et d'y insérer ses images en toute autonomie. Il peut également modifier les textes, le style et les images de chacune des pages de son site.

PS5 Redesign

  • site web
  • ux/ui

Présentation

Ce concept de mise en page fictif a été élaboré dans le but de mettre en avant de manière percutante un produit à vocation commerciale, en mettant en lumière ses arguments de vente clés. Les points forts et les caractéristiques uniques du produit sont habilement intégrés dans ce projet, captivant ainsi l'attention de l'audience cible.

ThreeForce (3D)

  • application
  • react
  • 3D
  • threeJS
  • Blender

Présentation

ThreeForce est un concept expérimental visant à intégrer des objets en 3D dans un environnement web.,L'intégration de ces scènes 3D est le fruit de recherches avancées et complexes dont l'objectif consiste à automatiser et simplifier le processus d'intégration par le biais de scripts pré-établis.,Développé sous React, le composant à lui seul est capable de traiter une série de propriétés en JSON pour modifier les attributs de la scène, simplifier l'ajout de scripts externes, ainsi que d'associer un maillage à un gabarit spécifique permettant un large choix de possibilités comme, par-exemple, de contraindre un élément de la scène à un environnement soumis aux lois de la physique ou de modifier la colorimétrie d'un élément de la scène. Et bien plus encore.

Environnement HDR

Les scènes 'Robot' et 'Golden Valley' présentent une particularité remarquable en termes de gestion de la lumière. Les surfaces de l'objet réagissent à leur environnement en reflétant les informations transmises par une image HDR. En d'autres termes, au lieu de simplement renvoyer une lumière de base, l'objet est capable de capturer et de refléter fidèlement les nuances subtiles de luminosité et de couleur présentes dans son environnement et de saisir un large éventail d'intensités lumineuses, des zones les plus sombres aux plus lumineuses, offrant ainsi une reproduction plus réaliste de la scène qui contribue à une expérience visuelle plus immersive et authentique dans un contexte 3D.

Modélisation

L'ensemble de mes réalisations sont principalement modélisées et animées sous Blender et converties en fichier GLB exploitables par la librarie ThreeJS qui est le moteur de rendu derrière les scripts de ThreeForce.

A la pointe du développement

Ne nous leurrons pas. L'utilisation de ThreeForce requiert tout de même une compréhension avancée dans la technologie React et la structure d'un objet en 3D.,La réalisation de ces scripts me permettent aujourd'hui de gagner en rapidité et en efficacité pour mes prochains développements 3D pour le web.

Tiffany Hair Stylist

  • site web
  • ux/ui
  • wordpress

Présentation

Réalisation d'un design pour la vitrine d'un salon de coiffure fictif.,La mise en page vise à instaurer une atmosphère accueillante et de confiance pour la clientèle potentielle, mettant en avant l'authenticité de l'établissement et le professionnalisme de son équipe.

TrackMath

  • application
  • react

trackmath