Je suis Rémi, j'ai 30 ans. J'ai un bac+4 en mathématiques et je suis développeur web. J'aime créer des expériences ludiques et dynamiques sur internet.
Ma vie de geek a commencé dès le plus jeune âge ; ma passion pour les jeux vidéo est née dès que j'ai su manier la manette de la Sega MegaDrive de mes frères. Ensuite, c'est une passion pour internet qui s'est manifestée dès que j'y ai eu accès, à mes 11 ans. J'étais fasciné par la possibilité de créer mon propre site internet, accessible par tout le monde, partout.
Ma troisième passion, c'est la science. Passionné par la physique, j'ai cependant préféré m'orienter vers des études de mathématiques. Finalement, c'est au développement web que je souhaite consacrer mon temps.
Après avoir développé plusieurs projets sur le web depuis 2006 — souvent des projets personnels, sans désir de les partager — j'ai décidé d'en faire mon métier.
N'hésitez pas à me contacter, quelle qu'en soit la raison ! :)
Solaire est une application web qui simule un système planétaire dans un style minimaliste. Une étoile et ses planètes sont générées procéduralement, ainsi que leurs lunes et anneaux, permettant l'existence d'un grand nombre de systèmes différents.
Le pourquoi du comment
Solaire a été inspiré à la fois par ma fascination pour l'astronomie et par des projets comme No Man's Sky. Avec Solaire, mon but était d'utiliser mes connaissances en développement web pour créer une expérience contemplative simple : un système planétaire dans un style minimaliste, différent à chaque visite.
Deux exemples de systèmes planétaires générés aléatoirement
Pour cela, j'utilise Javascript pour générer différents objets : une étoile, ses planètes, leurs lunes et leurs anneaux. Chaque objet a des propriétés déterminées aléatoirement : taille, vitesse, couleur, etc. Chaque objet est ensuite animé pour donner vie au système planétaire.
La première version de Solaire utilisait le langage PHP pour générer un système sur le serveur à chaque visite. Mais j'ai voulu faire de Solaire une application web qui puisse être installée sur téléphone ou PC et fonctionner sans connexion internet ; j'ai donc converti la génération du système en JavaScript pour pouvoir générer une infinité de systèmes à la demande sans jamais contacter le serveur.
Quelques planètes générées aléatoirement
En développant Solaire, j'ai déterminé qu'elle devait avoir deux utilités principales :
la plus simple, un but contemplatif : observer un système planétaire
mais aussi découvrir de nouvelles choses à chaque visite
Pour rendre l'observation du système plus intéressante, j'ai décidé de donner accès à diverses options d'affichage qui peuvent changer son apparence.
Options d'affichage
Prenons l'exemple des ombres des planètes. La longueur de chaque ombre n'est pas aléatoire, elle est calculée selon la distance de la planète à l'étoile et la taille de celle-ci.
Une lune qui passe dans l'ombre d'une planète produisait à l'origine une ombre plus sombre (les deux ombres superposées s'additionnaient). J'ai décidé de corriger ce phénomène pour qu'une lune passant dans l'ombre d'une planète cesse d'être éclairée par l'étoile.
La superposition des ombres (première image) n'a pas lieu. À la place, un astre qui traverse l'ombre d'un autre astre n'est plus éclairé et ne produit donc pas sa propre ombre (deuxième image)
Pour arriver à cet effet visuel en CSS uniquement, j'ai dû utiliser une petite astuce : les ombres ne sont pas attachées aux planètes, mais elles vivent dans leur propre plan. Chaque ombre est d'un noir opaque, et c'est leur conteneur commun qui est transparent. Ainsi, une ombre opaque superposée à une autre ombre opaque reste opaque, puis la transparence du conteneur lui est appliquée (observé sur la deuxième image ci-dessus).
De plus, le mouvement des ombres des lunes a bénéficié d'une attention particulière. À l'origine, les lunes tournaient simplement autour de leur planète, et leur ombre était donc parallèle à celle de leur planète. Une telle approximation paraît raisonnable lorsqu'on imagine un véritable système planétaire, mais les planètes et les distances de Solaire sont beaucoup plus grandes (par rapport à la taille de l'étoile) que dans la réalité. Les ombres des lunes donnaient donc l'impression d'être incorrectement alignées (première image ci-dessous).
Les ombres des lunes n'étaient à l'origine pas alignées avec l'étoile (première image), mais elles le sont désormais (deuxième image)
Pour corriger l'alignement des ombres, j'ai dû effectuer quelques calculs mathématiques pour déterminer l'animation exacte que l'on s'attend intuitivement à voir appliquée aux ombres des lunes, qui est en réalité la combinaison de trois animations :
la rotation de la lune autour de sa planète, à vitesse constante
l'oscillation de l'ombre selon la position de la lune par rapport à sa planète
la variation de longueur de l'ombre selon la distance de la lune à l'étoile
Après avoir programmé en CSS une animation correspondant au résultat mathématique attendu, les ombres des lunes sont maintenant correctement alignées selon la direction de leur éclairage (deuxième image ci-dessus).
Quant à la découverte de nouvelles choses à chaque visite, j'ai décidé d'incorporer un "carnet de découvertes" qui listerait les astres particuliers découverts lors de l'exploration de différents systèmes. Cette fonctionnalité est inspirée des "succès" que l'on débloque dans certains jeux vidéo en découvrant ou accomplissant certaines choses.
Le carnet de découvertes
La présence d'un tel carnet de découvertes m'a donné deux idées :
donner une description de chaque découverte, pour donner un côté légèrement éducatif / informatif à Solaire et susciter la curiosité du visiteur envers des phénomènes astronomiques réels
sauvegarder le système dans lequel chaque découverte a été faite, afin de pouvoir le visiter à nouveau n'importe quand
Concevoir ce système de sauvegarde de systèmes a permis non seulement de rendre chaque système revisitable, mais aussi de permettre à n'importe qui de partager un système avec quelqu'un d'autre en donnant son adresse (via un bouton de partage). Ainsi, chaque système peut être partagé pour que n'importe qui d'autre puisse visiter ce système exact.
L'adresse du système de l'image ci-dessus est "85398025394613800" : c'est simplement un nombre. Chaque système est généré ainsi, à partir d'un simple nombre. Pour garantir qu'une adresse génère toujours le même système, ce nombre est utilisé comme "graine" dans un générateur de nombres pseudo-aléatoires Mersenne-Twister, qui génère chaque donnée du système planétaire.
Toutes ces fontionnalités étant accessibles via des boutons sur l'interface, j'ai aussi placé un bouton (en forme d'œil) qui permet de cacher cette interface, afin que si le visiteur le désire, il puisse observer le système planétaire sans distraction. De plus, afin que le visiteur puisse zoomer sur le système sans que l'interface elle-même ne grossisse, j'ai dû développer ma propre fonctionnalité de zoom (utilisable avec la molette de la souris, ou en pinçant / écartant deux doigts sur écran tactile) plutôt que de me reposer sur celle incluse par défaut dans le navigateur du visiteur.
Ce module JavaScript (aussi disponible en PHP) permet de manipuler des couleurs, en extrayant plusieurs de leurs propriétés (teinte, saturation, luminosité, etc.) afin de pouvoir les utiliser et les modifier à la volée.
Le pourquoi du comment
Dans plusieurs projets présentés sur ce portfolio, j'ai fait en sorte que l'interface s'adapte à la couleur de certains éléments. C'est le cas du portfolio lui-même, où chaque projet est associé à une couleur, et cliquer sur un projet ouvre une fenêtre de cette couleur-là. C'est aussi le cas de Solaire, où l'application s'adapte à la couleur de l'étoile.
En développant ces projets et en jouant avec les couleurs, j'ai eu envie d'utiliser un outil qui me permettrait de convertir une couleur, à la volée, d'un format à un autre (par format, j'entends un format supporté par CSS, comme RGB - pour rouge / vert / bleu - ou HSL - pour teinte / saturation / luminosité). Je me suis dit qu'il serait intéressant de développer cet outil moi-même ; c'est ainsi qu'est né Colori.
Colori est disponible en tant que module JavaScript ou PHP, sans dépendance, et j'espère l'avoir rendu suffisamment simple pour pouvoir être utilisé même par un développeur débutant. Pour en démontrer les capacités, j'ai développé une interface qui utilise Colori pour faire fonctionner un convertisseur de couleurs.
L'interface s'adapte à la couleur entrée dans le convertisseur
J'ai aussi rédigé une documentation qui renseigne sur toutes les fonctions intégrées à Colori. Par exemple, la fonction invert permet d'obtenir le négatif d'une couleur ; la fonction blend permet de fusionner deux couleurs, c'est-à-dire de déterminer quelle couleur on observerait si on superposait une couleur semi-transparente par-dessus une autre couleur. Plusieurs autres fonctions sont disponibles, je vous invite à consulter la documentation pour les voir toutes.
Pour adapter l'interface à la couleur entrée, j'ai d'abord tenté de concevoir l'interface avec des couleurs au format HSL. Ainsi, je pouvais changer la valeur de teinte des couleurs tout en conservant la même saturation et luminosité. Mon but était, par exemple, de pouvoir passer l'interface entière du rouge au jaune. Malheureusement, j'ai découvert que ce ne serait pas aussi simple.
En effet, dans l'espace de couleurs HSL, deux couleurs avec la même valeur de luminosité n'ont pas réellement la même luminosité perçue. Voici deux images de l'interface en rouge et en jaune, mettant en avant ce problème.
L'ancienne interface, utilisant des couleurs HSL, montre clairement que les couleurs jaunes paraissent plus claires que les couleurs rouges, même lorsqu'elles ont la même valeur de luminosité
Pour régler ce problème, il m'a fallu concevoir l'interface avec des couleurs dans un autre espace de couleurs, qui conserve la luminosité perçue lorsqu'on change la teinte. J'ai d'abord choisi l'espace LCH. Il conserve bien les luminosités perçues en changeant la teinte, mais il présente un léger problème pour les teintes bleues. En effet, en conservant la même teinte bleue mais en variant la luminosité, la teinte dérive vers le violet.
Avec des couleurs LCH, l'interface "bleue" prend une teinte violette
Finalement, j'ai choisi l'espace de couleurs OKHSL. Tout comme LCH, il conserve ls luminosités perçues, mais il résout aussi le décalage vers le violet observé avec LCH.
La nouvelle interface, utilisant des couleurs OKLCH, conserve mieux les luminosités perçues et la teinte du bleu
OKLCH commence à être supporté par les navigateurs web, mais ce n'était pas le cas il y a quelques années quand je l'ai ajouté à Colori.
L'interface s'adapte aussi au thème choisi par l'utilisateur : clair ou sombre, selon le réglage de l'appareil ou le choix fait via le sélecteur de thème.
Le thème clair et le thème sombre
J'utilise des techniques similaires pour changer la couleur des sections sur ce portfolio sur lequel vous lisez ces mots, ainsi que dans mes autres projets.
Regardons plus en détail la partie "Démonstration" de l'interface de présentation de Colori. Il s'agit d'un convertisseur de couleurs : l'utilisateur entre une couleur dans un format supporté par CSS (par exemple "red" ou "#FF0000"), et le convertisseur affiche cette couleur dans tous les autres formats.
Toutes ces valeurs représentent la couleur rouge dans différents formats
L'utilisateur peut aussi choisir une couleur via un sélecteur de couleur, qui propose de manipuler individuellement chaque valeur des couleurs, dans plusieurs formats.
Le sélecteur de couleur, ici dans le format OKLCH, affichant donc les valeurs de luminosité (L), chroma (C), teinte (H) et opacité
Les fonctions de modification de couleur (comme invert et blend mentionnées plus tôt) peuvent aussi être testées via ce convertisseur. Il suffit de les saisir, dans une syntaxe proche de celle de JavaScript, pour observer le résultat.
L'inverse du rouge, c'est le cyan, aussi appelé "aqua" en CSS
J'ai fait en sorte que les fonctions puissent être enchaînées, permettant de calculer des couleurs complexes via ce convertisseur.
L'inverse de l'inverse du rouge... c'est le rouge
Remarquez l'alignement des titres avec leur section, et l'ombre allongée qu'ils projettent.
Le titre "Documentation" est précisément aligné avec le haut de sa section
Cet effet visuel particulier, qui est obtenu suite à une mesure précise de la police utilisée, est une idée que je souhaite implémenter depuis longtemps. Un effet semblable se trouvait déjà sur un prototype de portfolio développé il y a quelques années.
Une première idée de design pour mon portfolio utilisait un effet similaire
J'ai longtemps souhaité trouver une place à cet effet en-dehors de ce prototype, et je suis content que ce soit chose faite grâce à Colori.
Le Shinydex est une application web permettant d'enregistrer sa collection de Pokémon chromatiques (une variante très rare de chaque créature qu'on trouve dans les jeux vidéo de la série Pokémon) et de la partager avec ses amis.
Le pourquoi du comment
À l'origine, j'ai créé le Shinydex pour partager ma collection de Pokémon chromatiques avec un ami. À l'époque, ce projet s'appelait le Rémidex puisqu'il n'était pas utilisable par d'autres personnes. Le Rémidex, puis le Shinydex, est un peu mon projet "fil rouge" qui m'a suivi pendant de nombreuses années ; je l'ai recréé et amélioré plusieurs fois à mesure que mon ambition grandissait.
La première version du Rémidex, simple page web
C'était d'abord une simple page web qui présentait ma collection. Puis j'ai voulu transformer cette page web pour qu'elle se rapproche le plus possible d'une application mobile. J'ai commencé par lui donner un design suivant Material Design de Google. J'en ai ensuite fait une PWA qui pouvait être installée et fonctionner hors-ligne. Les données de ma collection étaient sauvegardées dans une base de données MySQL, et l'application en gardait une copie locale pour fonctionner hors-ligne.
L'évolution des anciennes versions du Rémidex
J'ai voulu rendre l'application utilisable par d'autres personnes, d'abord en leur permettant de l'utiliser sur leur mobile, sans se synchroniser à la base de données (qui n'était pas encore conçue pour gérer de multiples utilisateurs). Puis j'ai finalement décidé de recréer l'application à nouveau, en ouvrant l'intégralité des fonctionnalités à tout le monde, et en en ajoutant de nouvelles. C'est à ce moment-là que j'ai renommé le projet Shinydex, puisqu'il n'avait plus de raison de porter mon nom.
La version actuelle du Shinydex, ouverte à tous
Le Shinydex est une recréation totale du Rémidex en repartant de zéro, aussi bien pour la partie front-end que back-end. Son design actuel est basé sur la dernière version de Material Design. L'application est divisée en 4 sections principales :
La liste des Pokémon chromatiques de l'utilisateur,
le Pokédex, liste de tous les Pokémon qui existent,
la liste des chasses en cours, c'est-à-dire des Pokémon que l'utilisateur est en train de rechercher,
la liste d'amis.
La liste des Pokémon chromatiques de l'utilisateur s'ouvre au lancement de l'application, avec une petite animation qui fait glisser les cartes vers le haut l'une après l'autre. Si l'utilisateur est connecté, un cercle apparaît autour du bouton paramètres en haut à droite de l'écran pendant la sauvegarde de ses données.
L'animation d'ouverture de l'application
Lorsqu'un nouvel utilisateur ouvre l'application, il n'y a aucun Pokémon à afficher. L'utilisateur est cependant accueilli par un message l'invitant à se connecter avec son compte Google. C'est totalement optionnel, mais cela permet de sauvegarder ses données dans une base de données (MariaDB) en ligne, et ainsi d'utiliser l'application sur plusieurs appareils ou de partager sa liste de Pokémon avec ses amis.
La page d'accueil de l'application pour un nouvel utilisateur
Le bouton flottant "+" en bas à droite de l'écran permet d'ajouter un Pokémon. La barre de recherche en bas de l'écran permet de rechercher des Pokémon en saisissant le nom de leur espèce (par exemple "Pikachu") ou le surnom que leur a donné l'utilisateur.
Le Pokédex montre chaque Pokémon sous la forme d'une petit icône. L'intérêt d'un Pokémon chromatique est le fait qu'il ait une couleur différente de son apparence normale. Puisque certaines personnes préfèrent ne pas connaître les couleurs d'un Pokémon chromatique avant de l'avoir trouvé, les icônes des Pokémon que l'utilisateur ne possède pas sont grisées. Lorsque le Pokémon a été ajoué au Shinydex par l'utilisateur, l'icône prend les couleurs du Pokémon chromatique.
Certains Pokémon possèdent plusieurs formes différentes, chacune ayant sa propre version chromatique. Pour ces Pokémon, de petits indicateurs circulaires sont placés au-dessus de leur icône, pour indiquer le nombre de formes et si elles sont possédées ou non par l'utilisateur.
Le Pokédex, liste de tous les Pokémon qui existent
Cliquer sur l'icône d'un Pokémon ouvre une page montrant chacune de ses formes et permettant de comparer ses apparences chromatique et normale. Un bouton permet aussi d'ajouter directement le Pokémon à la liste des chasses en cours.
La page montrant les images du Pokémon apparaît avec une animation qui l'agrandit depuis de l'icône du Pokémon sur laquelle l'utilisateur a cliqué
La barre de recherche en bas de l'écran permet de rechercher des Pokémon en saisissant le nom de leur espèce (par exemple "Pikachu") ou le numéro qu'ils portent dans le Pokédex (par exemple "25" pour Pikachu).
Puisqu'il existe plus de 1000 Pokémon à l'heure actuelle, le Pokédex doit afficher plus de 1000 icônes. Charger 1000 images différentes prend beaucoup trop de temps, donc j'ai écrit un script en PHP qui rassemble toutes les icônes sur une même image. Ainsi, il n'y a qu'une seule grande image à charger, ce qui est beaucoup plus rapide. Additionnellement, la liste des icônes est virtualisée, afin que seules les icônes actuellement affichées à l'écran soient chargées. Un système similaire est utilisé pour chaque section de l'application.
La liste des chasses en cours montre les Pokémon que l'utilisateur est en train de rechercher dans les jeux vidéo Pokémon. Il peut y indiquer l'espèce du Pokémon, sa forme (s'il en a plusieurs), le jeu dans lequel il le chasse, la méthode qu'il utilise pour le trouver, et le nombre de rencontres effectuées jusqu'à présent (en effet, un Pokémon ayant très peu de chances d'être chromatique, il faut en rencontrer un grand nombre pour que le hasard nous offre cette chance).
Les liste des Pokémon que l'utilisateur est en train de chasser
Lorsqu'il a enfin trouvé le Pokémon chromatique recherché, l'utilisateur peut cocher la case "Capturé". L'application va automatiquement entrer la date actuelle comme date de capture du Pokémon, et d'autres champs apparaissent pour entrer des informations supplémentaires sur la capture.
Avant que la case "Capturé" soit cochée, l'image du Pokémon est affichée avec ses couleurs normales. Au moment où la case "Capturé" est cochée, l'image prend les couleurs de l'apparence chromatique du Pokémon, et une petite animation se joue par-dessus cette image. Cette animation est inspirée des jeux vidéo Pokémon dans lesquels, quand un Pokémon chromatique apparaît, il est entouré de petites étoiles brillantes qui tournent autour de lui.
L'animation étoilée de l'image du Pokémon
La liste d'amis est, comme son nom l'indique, une liste des personnes que l'utilisateur a ajoutées comme ami. Pour ajouter une personne en ami, celle-ci doit s'être connectée au Shinydex, avoir choisi un pseudo public et avoir autorisé le partage de son profil dans les paramètres de l'application.
La liste d'amis (oui, je me suis ajouté moi-même en ami pour tester l'application)
Chaque carte montre le pseudo d'un ami, et en-dessous sont listées ses dernières trouvailles de Pokémon chromatiques. En cliquant sur la carte, la liste complète des Pokémon chromatiques de cet ami s'ouvre.
La page des paramètres de l'application permet de gérer les paramètres de sauvegarde des données et de partage du profil, mais aussi choisir le thème (clair ou sombre) et la langue de l'application.
La dernière version de Material Design colore l'interface des applications avec la couleur du fond d'écran de l'utilisateur. Le Shinydex essaie de suivre Material Design, mais c'est une application web, pas une application Android. Par conséquent, il est impossible pour le Shinydex de récupérer cette couleur. J'ai donc ajouté aux paramètres le choix de la teinte de l'interface, afin que l'utilisateur puisse choisir lui-même quelle couleur donner au Shinydex.
Démonstration de différentes teintes de l'interface du Shinydex
Le Shinydex utilise Colori, un autre de mes projets, pour générer la palette de couleurs de l'interface.
Pour gérer la langue de l'application, et pouvoir la changer sans devoir relancer l'appli, j'ai testé plusieurs façons de faire et, finalement, j'utilise un "Translation Observer" que j'ai développé. Il s'agit d'un Mutation Observer qui observe les changements de langue de la page et auquel chaque élément HTML personnalisé peut souscrire, afin que l'Observer lui communique ces changements en temps réel. Ajouter un tel Translation Observer directement à la spécification HTML est en cours de discussion par le WHATWG.
Je considère désormais que le Shinydex est complet et que toutes mes ambitions à son sujet ont été réalisées. Cependant, de nouveaux jeux vidéo Pokémon vont sortir, et je continuerai de maintenir l'application à jour avec les nouveaux Pokémon et méthodes de chasse contenus dans ces jeux. De plus, je suis sûr que j'aurai de nouvelles idées pour continuer de travailler sur ce projet, et qu'il continuera d'évoluer avec le temps.
CSSwitch est la représentation en CSS d'une Nintendo Switch, dont les manettes peuvent changer de couleur et être détachées. Il est aussi possible de jouer à des mini-jeux en allumant cette console virtuelle.
Le pourquoi du comment
Lorsque j'ai commencé à travailler sur le design de mon portfolio, je voulais placer sur la page d'accueil différentes illustrations représentant mes centres d'intérêt. J'ai eu l'idée de représenter une Nintendo Switch, puis de l'animer avec des manettes détachables.
Le design du portfolio a évolué, ne laissant plus de place à cette illustration. J'ai donc décidé de récupérer cette idée pour en faire un petit projet à part : une page web qui permettrait de visualiser une Nintendo Switch avec toutes les combinaisons de couleurs possibles pour les manettes. C'est ainsi qu'est né CSSwitch.
Grâce à HTML et CSS, j'ai dessiné une Nintendo Switch dans un style minimaliste, en me basant sur des images promotionnelles de la vraie console pour que les proportions soient proches de la réalité. J'ai aussi reproduit l'écran principal de la console, qui peut s'allumer en appuyant sur le bouton "Home".
L'allumage de la console
Ensuite, grâce à CSS et Javascript, j'ai programmé l'animation de détachement et d'attachement des manettes. J'y ai même joint le bruit caractéristique de l'attachement des manettes de la Switch. Cette animation est déclenchée au choix de la couleur des manettes, qui se fait en cliquant sur l'icône de manette sur le menu principal.
L'animation au choix de couleur des manettes
Avant que je décide de reproduire le menu de la console, le choix de couleur des manettes se faisait via un bouton situé sous la console sur la page web. Voici cette animation, parce que je l'aimais bien aussi.
L'ancienne animation, avant que je reproduise le menu de la console
Finalement, j'ai préféré pousser le concept jusqu'au bout et rassembler toutes les interactions dans le menu de la console.
J'ai aussi ajouté des mini-jeux, accessibles via le menu de la console. Ils sont représentés par les grosses icônes carrées alignées au centre du menu.
3 jeux sont disponibles pour le moment
Le premier de ces jeux est Boole and the Boulders, un jeu créé par skando et moi pour une game jam. On y contrôle une grenouille qui doit survivre le plus longtemps possible en esquivant des rochers qui tombent du ciel.
Il faut déplacer la grenouille pour esquiver les rochers qui tombent de plus en plus vite
Le deuxième jeu (qui n'en est pas vraiment un) est Solaire, un autre projet présenté sur ce portfolio. Je n'ai pas conçu Solaire avec l'idée d'en faire un jeu, mais après y avoir ajouté un carnet de découvertes inspiré des "succès" dans les jeux vidéo, j'ai pensé qu'il aurait sa place sur CSSwitch aussi.
Solaire génère procéduralement un système planétaire différent à chaque fois
Le dernier jeu est très simple : il faut appuyer sur un bouton au moment précis où on entend un son. Le jeu mesure le temps écoulé, en millisecondes, entre le son et le moment où le joueur appuie sur le bouton. Le but est d'être le plus rapide possible.
Il faut appuyer sur le gros bouton rouge lorsqu'un son retentit
Le bouton se désactive quelques secondes, pendant lesquelles aucun son ne peut retentir, si le joueur appuie trop tôt sur le bouton. Il est ainsi impossible d'appuyer sur le bouton en boucle en espérant tomber par hasard sur le bon moment.
CSSwitch choisit automatiquement de s'afficher en mode clair ou sombre selon les réglages de l'appareil de l'utilisateur. La langue la plus appropriée est aussi choisie entre le français et l'anglais.
CSSwitch en mode sombre et en anglais
D'autres mini-jeux seront peut-être ajoutés à l'avenir.
Ce site
Mon site personnel et portfolio
C'est sur ce site-même que vous vous trouvez actuellement. Il a pour rôle de présenter mes compétences en développement web et les projets que j'ai réalisés.
Le pourquoi du comment
Le design de mon portfolio est le résultat d'un challenge que je me suis posé :
mes autres projets récents ayant un style visuel assez plat et minimaliste, j'ai voulu tenter d'exagérer ce style encore plus en supprimant toute ombre et bordure ;
j'ai aussi voulu essayer de ne pas utiliser de fond blanc ou gris, mais plutôt d'utiliser majoritairement des couleurs vives.
Il me restait donc à jouer avec des surfaces rectangulaires colorées, des lignes droites, sans bordures et sans ombres, dans un style plutôt brutaliste. Sur mobile, une ligne oblique coupe la page en deux, plus ou moins penchée selon la taille de l'écran (pour ne pas prendre trop de place verticalement).
L'angle de cette ligne se retrouve dans différents éléments du site, comme ma photo ou la liste de mes projets.
L'effet oblique sur divers éléments du site, sur mobile
L'effet oblique n'est pas présent sur un écran large, où la ligne oblique prendrait trop de place verticalement pour maintenir un angle visible.
Mon but était aussi de rendre ce style "vivant" grâce à des animations lorsque le visiteur interagit avec les différents éléments du site.
Dans cette optique, la couleur de fond des liens de navigation s'étend légèrement au survol de la souris ; en cliquant dessus, cette couleur se répand sur tout l'écran, comme si le bouton lui-même contenait la section qu'il appelle et s'étendait jusqu'à remplir toute la fenêtre avant que la section apparaisse.
L'animation de changement de page (au ralenti)
Pour réaliser cette animation de manière fluide, j'utilise un "élément de transition" : pour donner l'impression que c'est le lien lui-même qui s'agrandit, lorsque le visiteur clique dessus, un rectangle coloré est créé et placé derrière le lien, prenant sa taille exacte. Une animation en deux parties simultanées est alors jouée :
le rectangle coloré est déplacé vers le coin supérieur gauche de la fenêtre
en même temps, l'échelle de ce rectangle est agrandie jusqu'à ce qu'il fasse lui-même la taille de la fenêtre
La combinaison de ces deux effets donne l'impression que le lien s'étend dans toutes les directions jusqu'à remplir la fenêtre entière.
De même, la section exposant les détails d'un projet du portfolio s'agrandit à partir du lien qui permet de l'ouvrir. Cette animation respecte la forme originale du bouton : rectangle sur PC, parallélogramme sur mobile.
L'animation d'ouverture d'un projet (au ralenti)
Cette animation utilise aussi des "éléments de transition" pour donner l'impression que le lien d'un projet s'agrandit, alors que ce n'est qu'une illusion.
Je suis très enthousiaste face à l'API View Transitions ajoutée à CSS récemment (mais pas encore supportée par tous les navigateurs à l'heure où j'écris ce texte), qui permet de faciliter la réalisation de ce genre d'animations sans forcément utiliser d'"éléments de transition" et qui fonctionnera même pour créer des transitions entre pages d'une MPA (application à plusieurs pages) à l'avenir ! J'ai conçu ce site en tant que SPA (application à une seule page) uniquement pour pouvoir animer les transitions entre les pages, donc j'ai très hâte que cette API soit terminée.
J'aimerais mentionner un élément qui ne fait plus partie du site aujourd'hui.
Le bouton pour m'envoyer un e-mail ouvre directement votre client e-mail. Initialement, j'avais créé une page avec un formulaire pour cela. L'envoi d'e-mail n'étant pas instantané et pouvant échouer, j'avais développé une animation qui indiquait le chargement puis le succès ou l'échec de l'envoi.
L'animation du bouton d'envoi d'e-mail
J'aime toujours cette idée de bouton qui se transforme, et je l'utiliserai probablement à nouveau dès que j'en aurai l'occasion.
Une grande partie des effets que j'ai mentionnés fonctionne grâce à JavaScript. Je me suis donc lancé le défi d'adapter le site, en faisant le moins de changements possibles, pour qu'il fonctionne même pour un visiteur qui aurait désactivé JavaScript (sans lesdits effets). Et c'est chose faite !
J'aimerais terminer en mentionnant la page d'erreur en cas de page introuvable que j'ai conçue. Je voulais quelque chose de visuellement très simple, et j'ai eu l'idée de représenter de la pluie (parce qu'une page introuvable, c'est triste ?).
L'animation de pluie en cas d'erreur "page introuvable"
J'avais initialement réalisé cet effet en positionnant des éléments aléatoirement avec JavaScript et en les animant avec CSS. J'ai recréé cette animation plus récemment en utilisant un Paint Worklet (pas encore supporté par tous les navigateurs), pour découvrir comment cette nouvelle API fonctionne.
Vous pouvez en voir un peu plus sur mes expérimentations avec cette API en jetant un œil au composant <artsy-block> que j'ai développé.
