StreamGrid
Suivre plusieurs streams Twitch en même temps, dans une seule fenêtre, sans jongler entre des dizaines d'onglets.
Heetstudio
UI DesignUX DesignDéveloppementProjet personnel
Concevoir son propre outil, c'est le meilleur test de cohérence.
Rôle
Designer & Développeur
Durée
En cours
Année
2026
Tech stack
5 technologies
01Le projet
Ce que ce projet raconte.
Ce portfolio est à la fois une vitrine et un terrain d'expérimentation. Chaque composant a été pensé pour être réutilisable, chaque animation justifiée par l'usage. Le design system repose sur un pipeline Figma → tokens CSS, avec un mode sombre géré nativement via des variables sémantiques.
composants sur mesure30+
tokens issus de Figma100%
librairie UI tierce0
Accès au projet
Technologies
FigmaReact 19Tailwind v4MotionVite
02La démarche
Comment le projet a pris forme.
01
Design System
Tous les composants partent de tokens définis dans Figma (couleurs, typographie, espacement, border-radius) et exportés directement en variables CSS. Le dark mode est géré à un seul endroit — les composants n'ont jamais besoin de connaître le thème.
02
Composants animés
Motion (ex Framer Motion) est utilisé pour les animations de scroll, les transitions de page et les micro-interactions. Le WordScroll utilise une CSS animation native mesurée au pixel près pour éviter tout saut à la boucle.
03
Architecture
React 19 avec Vite, Tailwind v4 en mode JIT, alias de chemins stricts. Les données (projets, expériences, outils) sont découplées dans src/data pour pouvoir faire évoluer le contenu sans toucher aux composants.
04À voir aussi
D'autres projets à découvrir.
