Portfolio, première version
Obsiwebs V1
Première version de mon portfolio : une page unique en HTML, CSS et JavaScript sans framework, avec une scène de volcan animée en Canvas servant à la fois d'identité visuelle et de démonstration technique.
Le projet
Avoir une présence en ligne à mon nom plutôt qu'un CV en PDF, et me forcer à produire quelque chose de fini et public. Le choix du tout-manuel était délibéré : comprendre ce que font les frameworks avant de les utiliser.
Développée et retravaillée sur environ sept mois, d'octobre 2025 à mai 2026, en 48 enregistrements successifs.
Elle a servi obsiwebs.com jusqu'en mai 2026, date à laquelle la V2 a repris le domaine. Elle reste consultable comme jalon.
Fonctionnalités
- Scène de volcan animée en Canvas : système de particules avec durée de vie et gravité, fumée en dégradés flous, coulée de lave
- Formulaire de contact fonctionnel sans serveur, avec gestion des états d'envoi, de succès et d'erreur réseau
- Détection de la section active au défilement, écrite à la main
- Page unique responsive, thème sombre
Les difficultés rencontrées
L'animation du volcan tournait très bien sur mon ordinateur, et rendait le site inutilisable sur téléphone : défilement saccadé, batterie qui chauffe. En cherchant d'où venait le coût, j'ai compris que je faisais une erreur de raisonnement : j'avais choisi un nombre de particules fixe, comme si tous les appareils avaient la même puissance et la même surface à couvrir. Or une animation plein écran redessine à chaque image l'ensemble de ses particules : le coût dépend à la fois du nombre de particules et de la taille de la zone. Sur un écran de téléphone, je faisais donc travailler un processeur bien plus modeste sur autant d'éléments que sur un écran de bureau, pour une surface trois fois plus petite. J'ai remplacé la constante par un calcul proportionnel à la largeur de l'écran (quarante particules par tranche de quatre cents pixels), avec un plafond pour éviter que les très grands écrans ne repartent dans l'excès inverse. La densité visuelle reste la même partout, mais la charge s'adapte à l'appareil.
Ce que j'en ai retiré
- Construire un site complet sans framework, et manipuler l'API Canvas pour animer une scène.
- Tester sur un vrai téléphone, pas seulement en réduisant la fenêtre du navigateur : le rendu adapté ne dit rien de la puissance de calcul disponible.
- La V1 m'a montré ses propres limites, et chaque version suivante est née de là. Elle m'a appris le Canvas et le JavaScript sans filet, mais la stack était trop simple et le visuel trop limité pour refléter ce que je savais faire, d'où la V2, avec une base plus solide et une présentation plus large de mes compétences.
- Puis en travaillant la V2, j'ai constaté qu'elle parlait de mes projets sans parler de moi, d'où cette V3, pensée pour être complète sur mon profil et pas seulement sur mes livrables.