Rémi Scandella

Web developer

Biography

I am Rémi, I am 30 . I studied mathematics at university for 4 years and I am a web developer. I like to create fun experiences on the internet.

My interest for geeky stuff started very early — my passion for video games developed as soon as I could hold my brother's Sega MegaDrive controller. Then, a passion for the internet manifested itself as soon as I got access to it, when I was 11. I was fascinated by the possibility to create my own website, accessible by anyone, anywhere.

My third passion is science. I've always been fascinated by physics, but I chose to study mathematics instead. In the end, I want to focus on web development.

After having developed many projects on the web since 2006 — mainly personal projects, with no desire to share them — I have decided to do it professionally.

Don't hesitate to contact me, whatever the reason! :)

My skill set

HTML
CSS
PHP
SQL
JavaScript
TypeScript
2006 2008 2010 2021

Personal projects

This website icon

This website

My personal website and portfolio

This website on a smartphone
This website on a PC

You are on this website right now. Its goal is to showcase my web development skills and the projects I have developed.

The why and the how (in French)

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.

Photo de moi 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é.