Rémi Scandella

Développeur web

Biographie

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 ! :)

Mes compétences

HTML
CSS
PHP
SQL
JavaScript
TypeScript
2006 2008 2010 2021

Projets personnels

Icône de Ce site

Ce site

Mon site personnel et portfolio

Ce site sur smartphone
Ce site sur PC

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.

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é.