Yann LE FLOHIC

Création d'une plateforme web multilingue avec espace d'administration sur-mesure pour les modifications du site partie client.

Conception d'un wireframe haute fidélité pour une landing page de cinéma sous Figma.

Développement de maquettes d'une première version de mon portfolio dans le cadre des situations d'apprentissage et d'évaluation du BUT MMI.

Intégration web HTML CSS JS avec templating d'une maquette Figma. Architecture et nomenclature propre avec BEM CSS.

Création d'une maquette Figma, puis développement d'un site landing page fictif pour la promotion du festival RockEnSeine.

Création d'un jeu type Space Invaders en Python.

J'ai réalisé ce site web lors d'un projet web de cours. Nous devions créer un site type "site de streaming" avec la possibilité de noter un film, laisser des commentaires, ajouter des favoris etc... L'API avec les films a été également réalisée à la main, nous avions une BDD SQL avec MySQL à créer. Ce projet a été réalisé étape par étape au travers de 19 itérations.

J'ai réalisé ce petit projet Frontend mentor comme projet de cours en utilisant TailwindCSS V4 avec un maximum de grid.

J'ai réalisé ce petit composant sur Frontend mentor pour m'exercer à développer avec un CSS BEM. Je l'ai réalisé au tout début de mon apprentissage.

J'ai réalisé ce petit composant sur Frontend mentor pour m'exercer à développer avec un CSS BEM ainsi que les bases de JavaScript. Je l'ai réalisé au tout début de mon apprentissage.

J'ai réalisé ce site Click&Collect en m'inspirant de du site DJI (ce site n'a pas été copié sur DJI!, les noms et images sont libres de droits et inventés ou récupérés depuis Unsplash). Il s'agissait de maquetter sur Figma un site de Click&Collect avec Back-office fonctionnel, permettant de 'monitorer' le site : ajout/supression de produits, catégories, codes promo, etc... Ce projet a été réalisé en grande partie à l'aide de Claude suite à une installation rigoureuse préalable avec les fichiers et dossiers AGENTS.md et .agents/skills &rules.

J'ai créé à l'aide de mon assistant IA Claude Code un Obsidian complet, comme une sorte de cerveau, une architecture complète pour référencer tout ce que j'ai fait : mes projets personnels détaillés, mes projets de cours (SAés)... J'y ai détaillé les difficultés que j'ai rencontrés, tout ce que j'ai pu réaliser en expliquant bien à chaque fois les objectifs. Le but était de pouvoir avoir un "lieu de stockage" pour tout mon parcours et mes projets, pour avoir un portfolio complet et détaillé qui référence juste mes projets expliqués en détail. Après la création assistée par Claude du coffre Obsidian, j'ai dû apprendre à utiliser et installer l'outil Quartz pour transformer ce vault Obsidian en un site.

Pour ce projet, l'idée était totalement différente, j'ai voulu tester les compétences de l'IA en les poussant un petit plus que d'habitude et surtout voir ses limites en l'utilisant DIFFÉREMMENT de ce que j'ai l'habitude de faire. J'ai établi un cahier des charges, un DA simple (très très simple, OUI OUI... je sais) et des consignes strictes au niveau de l'attendu. Mais AUCUNE consigne sur la façon de développer l'outil, enfin si, une : "propose moi un plan de ce qui correspondrait le mieux selon toi au niveau de la stack pour la réalisation". Ça a été hyper intéressant de faire ce test, et j'ai été plutôt impressionné et je suis content d'avoir essayé d'une façon différente.

Ce projet est encore un test complet à l'IA (Claude), sauf que ce coup ci j'ai fait les choses de façon différente. Je lui ai imposé la structure, la stack technique et je lui ai laissé faire pour ce qui est du code en suivant mes AGENTS.md et .agents/. C'est un outil de veille technologique CSS, Design, IA, etc... Il s'agit d'un PWA (progressive web-app) hébergé sur Vercel, installable donc sur téléphone. Je l'utilise personnellement au quotidien, pour suivre les news et les changements. L'actualité se met à jour chaque lundi matin et du nouveau contenu est ajouté.