Portfolio
Le site que vous êtes en train de voir actuellement. (développé en 2,5 jours) (~30 heures)
Le Défi
Créer un portfolio moderne permettant à la fois de montrer mes compétences, mes projets et la veille technologique que j'ai mise en place.
L'éditeur et le stockage de données
Pour la première version de mon site, j'ai décidé de ne pas utiliser de méthode complexe et d'utiliser un format JSON pour stocker ma veille technologique et mon portfolio, une approche valide pour de petits volumes de données en lecture seule.
Étant donné qu'éditer une page de projet dans un fichier JSON est peu pratique, j'ai utilisé Claude Code pour me créer un CRUD simple me permettant de visualiser le résultat final en temps réel.
UX
Pour l'ergonomie de mon site, j'ai décidé de me limiter à 3 pages principales et 2 pages secondaires. En effet, utiliser une unique "landing page" n'est ni pratique ni scalable, et se limiter à un petit nombre de pages permet de ne pas perdre l'utilisateur.
Design du site
Pour la direction artistique, je me suis inspiré du style Liquid Glass (Apple), qui combine l'aspect du verre dépoli avec la fluidité de l'eau. J'ai aussi utilisé des couleurs inspirées par le style Frutiger Aero.
<svg style="display: none">
<filter id="glass-distortion" x="0%" y="0%" width="100%" height="100%" filterUnits="objectBoundingBox">
<feTurbulence type="fractalNoise" baseFrequency="0.01 0.01" numOctaves="1" seed="5" result="turbulence" />
<feGaussianBlur in="turbulence" stdDeviation="3" result="softMap" />
<feSpecularLighting in="softMap" surfaceScale="5" specularConstant="1" specularExponent="100"
lighting-color="white" result="specLight">
<fePointLight x="-200" y="-200" z="300" />
</feSpecularLighting>
<feDisplacementMap in="SourceGraphic" in2="softMap" scale="150" xChannelSelector="R" yChannelSelector="G" />
</filter>
</svg>
Ce site - qui est le premier que je publie - m'a permis d'appliquer beaucoup des connaissances théoriques que j'ai emmagasinées durant ma formation. Cela me permettra de créer des projets plus complexes à l'avenir.