Screenshot page Portfolio
Site web

Portfolio

Site web pour présenter mes projets (vous y êtes 😁)

Technologies

Astro Tailwind CSS SEO
Cliquez pour découvrir

À propos

Mon portfolio est une vitrine personnelle conçue pour présenter mes réalisations tout en reflétant mon identité créative et mes choix esthétiques.

Contexte et objectif

Ce portfolio a pour objectif principal de mettre en valeur mes projets à travers un design et un ton qui incarnent ma personnalité et mes sensibilités créatives. Au-delà de la simple présentation de mes réalisations, ce site constitue également une démonstration concrète de ma démarche de conception : chaque choix visuel et chaque interaction reflètent ma vision du design web et ma capacité à créer une expérience utilisateur cohérente et mémorable.

Design

J’ai opté pour le neo-brutalism, un style contemporain qui me tient particulièrement à cœur. Cette approche design se caractérise par des ombres portées prononcées, des bordures marquées et une palette de couleurs affirmée, créant une identité visuelle forte et reconnaissable.

La palette chromatique se limite volontairement à deux couleurs principales : une teinte neutre pour les fonds qui assure la lisibilité, et une couleur signature pour les éléments interactifs et le logo, garantissant une cohérence visuelle immédiate à travers l’ensemble du site.

Les animations sont pensées pour être fonctionnelles plutôt que décoratives. Elles accompagnent principalement les interactions utilisateur pour transmettre des informations visuelles claires : une ombre portée accentuée au survol d’un bouton signale explicitement sa cliquabilité, renforçant ainsi l’affordance des éléments interactifs. Cette approche minimaliste des animations maintient l’attention sur le contenu tout en guidant intuitivement la navigation.

Dimension technique

Le portfolio est développé avec Astro, un framework moderne optimisé pour la performance, associé à Tailwind CSS pour une gestion efficace et modulaire du styling. L’ensemble du projet est écrit en TypeScript, garantissant une meilleure maintenabilité et une détection précoce des erreurs.

La gestion des formulaires est assurée côté serveur avec l’implémentation d’un système de captcha, protégeant ainsi le site contre les soumissions automatisées malveillantes tout en préservant une expérience utilisateur fluide.

L’un des défis techniques majeurs a été la mise en place d’une architecture événementielle pour gérer les interactions avec la carte de contact. Cette approche permet une expérience utilisateur cohérente : quel que soit l’endroit où l’utilisateur se trouve sur le site, un clic sur “Contact” déclenche une animation de retournement de la carte. Sur mobile, cette interaction repositionne automatiquement la carte au centre de l’écran. Cette solution basée sur l’émission et l’écoute d’événements personnalisés assure une communication fluide entre les différents composants de l’application, tout en maintenant un code découplé et facilement extensible.

Screenshot page Prompt Crafter
Application web

Prompt Crafter

application web pour créer des prompts pour les IA (en cours de développement)

Technologies

Nuxt Vue.js LangGraph & LangChain
Cliquez pour découvrir

À propos

Prompt Crafter est une application web dédiée à la création de prompts optimisés pour les intelligences artificielles. Cet outil de prompt engineering s’inspire directement de Prompt Cowboy.

Contexte et objectif

L’application permet aux utilisateurs de saisir un “lazy prompt” - une simple phrase ou idée brute - que le système transforme automatiquement en un prompt complet et performant, optimisé pour maximiser l’efficacité des interactions avec l’IA.

Ce projet me permet de démontrer mes compétences en développement web et en intelligence artificielle, en présentant une série de fonctionnalités simples sur lesquelles je peux itérer rapidement et efficacement.

Design

L’interface utilisateur privilégie la fluidité et l’intuitivité, avec des interactions soigneusement pensées pour faciliter la navigation et des animations qui dynamisent l’expérience utilisateur.

L’une des caractéristiques essentielles du design d’applications web ou mobiles est l’affordance : la fonction d’un élément (comme un bouton pour envoyer un message) doit être immédiatement évidente pour l’utilisateur, au premier regard. Cette approche réduit la frustration et garantit une prise en main naturelle de l’application.

Dimension technique

Le projet est développé avec Nuxt, un framework qui permet de construire le frontend (la partie visible) avec Vue.js, l’un des outils majeurs pour le développement d’interfaces web modernes. Le backend est également géré par ce même framework. Bien qu’une application plus complexe nécessiterait un backend séparé, cette architecture unifiée réduit la complexité initiale et accélère le temps de développement, permettant de livrer un produit fonctionnel plus rapidement.

Le traitement des interactions avec l’IA est assuré par LangChain/LangGraph, un standard de l’industrie pour les applications basées sur l’intelligence artificielle générative.

Screenshot page Ialo.bzh
Landing Page

IAlo.bzh

Services d'IA éthiques

Technologies

Astro Tailwind CSS JavaScript SEO
Cliquez pour découvrir

À propos

IAlo.bzh est un service qui aide les petites et moyennes entreprises à gagner du temps sur les tâches répétitives grâce à des assistants IA, en mettant en œuvre des solutions éthiques et responsables hébergées en Europe.

Contexte et objectif

Pour lancer le service, une landing page était nécessaire : un site dédié à présenter l’offre et à inciter à l’action. L’enjeu était de rendre l’offre accessible et rassurante pour un public de TPE/PME bretonnes, souvent éloignées de ces technologies.

Design

Le site adopte une esthétique épurée avec une palette de couleurs sobres et apaisantes dans un dark theme moderne. L’interface privilégie les espaces blancs généreux qui donnent de la respiration au contenu et facilitent la lecture. Le design met l’accent sur la clarté et la hiérarchie visuelle avec une typographie lisible et bien structurée.

Des animations scroll reveal apportent du dynamisme à la navigation, révélant progressivement les sections au fur et à mesure du défilement pour maintenir l’engagement de l’utilisateur.

L’objectif : inspirer le calme et la confiance face à un sujet qui peut sembler complexe ou intimidant.

Architecture de l’information

La page suit une architecture narrative verticale classique : un slogan accrocheur en hero, suivi de sections thématiques bien délimitées (services, processus détaillé en 5 étapes, formations, valeurs éthiques). Le contenu est organisé de manière progressive pour guider l’utilisateur naturellement dans sa découverte du service, du problème à la solution, jusqu’à l’appel à l’action final.

Ancrage territorial

Une photographie du phare de Saint-Mathieu ancre visuellement le service dans son territoire breton, renforçant la proximité et l’authenticité de l’approche.