Portfolio Écosystème

Vision du projet

L’objectif n’était pas seulement de créer un portfolio esthétique, mais de construire un produit complet capable de présenter mon profil, centraliser mes contenus, administrer les données et créer un lien direct entre visibilité publique et pilotage interne.

Pour un recruteur, ce projet montre concrètement ma capacité à penser un sujet comme un écosystème logiciel : conception de l’interface publique, structuration des APIs, modélisation des données, outils d’administration et prise en compte des usages sur plusieurs environnements.

Les briques de l’écosystème

Ce que ce projet démontre

• Expérience multi-interface

  Le projet relie une surface publique, un back-office desktop et une application mobile autour d’une même base fonctionnelle.

  Application concrète dans un produit réel

• Architecture cohérente

  Les modèles métier, les contenus et les flux sont organisés de façon homogène pour éviter les duplications et maintenir une logique claire.

  Application concrète dans un produit réel

• Événements et feedback

  Les notifications push permettent de faire remonter certains événements importants, comme les nouveaux messages ou les téléchargements du CV.

  Application concrète dans un produit réel

• Prise en compte produit

  Consentement aux cookies, mentions légales, gestion documentaire, administration des données et séparation entre usages publics et privés.

  Application concrète dans un produit réel

Architecture et logique produit

Lecture détaillée du projet

Surface publique

Plateforme web : vitrine, contenus et conversion

La partie web publique a pour objectif de présenter le profil, l’expertise et les projets de manière claire, professionnelle et exploitable par des recruteurs techniques comme non techniques.

Front-end et expérience utilisateur

Le front est conçu avec Next.js et React autour d’une logique éditoriale : hero, pages de contenu, catalogue de projets, fiches détaillées, page de contact, mentions légales et parcours de navigation cohérents. Le travail porte autant sur la structure du contenu que sur la qualité visuelle, la lisibilité et l’expérience responsive.

Design, UI et perception produit

L’interface a été pensée comme une véritable identité de portfolio, avec une direction visuelle cohérente, des sections rythmées, une hiérarchie typographique claire et des composants réutilisables. L’objectif est de donner une perception professionnelle, et non celle d’un simple template assemblé.

SEO et accessibilité

Les pages publiques intègrent des titres, des descriptions, des URL propres, un sitemap, des règles robots, des métadonnées Open Graph, des pages détaillées pré-rendues et des contenus structurés pour faciliter le crawl et l’indexation. Le site prend aussi en compte les mentions légales, la confidentialité et le consentement aux cookies.

Couche métier

Backend API : structure, données et logique métier

La couche backend permet de transformer le portfolio en produit administrable. Elle gère les données, la validation, les ressources, l’authentification et certains comportements applicatifs, comme les notifications.

Organisation et modélisation

Le backend est structuré par domaines fonctionnels : projets, messages, documents, tags, authentification et push tokens. Chaque domaine repose sur une séparation claire entre modèles, requêtes, schémas de validation, services métier et typage TypeScript.

Administration et stockage

Les projets, images, CV et métadonnées sont gérés via l’API puis stockés entre MongoDB et Vercel Blob. Cela permet de manipuler des contenus réellement dynamiques tout en gardant une présentation publique stable et optimisée.

Documentation et exposition technique

L’API dispose aussi d’une documentation accessible publiquement, ce qui permet de montrer la façon dont les endpoints sont exposés, organisés et pensés pour des usages desktop, mobile ou d’administration.

Voir la documentation API

Back-office desktop

Application desktop : administration et confort d’usage

La version desktop montre la capacité à concevoir un outil interne plus opérationnel, avec une expérience d’administration plus dense et plus confortable que sur mobile.

Pilotage des contenus

L’application desktop permet de gérer les projets, les tags, les messages reçus et les documents. Elle répond à un vrai besoin d’administration, avec des écrans orientés consultation, édition, suppression et mise à jour.

Logique produit et ergonomie

Le desktop n’est pas seulement une duplication du site. C’est une interface de travail, plus adaptée à la productivité, à la gestion fine des données et à certains parcours d’édition plus complets.

Electron, React et Vite

Cette partie du projet illustre ma capacité à étendre une logique web vers un environnement desktop, tout en conservant une cohérence d’architecture, de composants et de services API.

Usage mobile

Application mobile : consultation et administration nomade

La partie mobile prolonge le projet dans un contexte d’usage différent : consultation rapide, administration mobile et réception d’informations en situation de mobilité.

React Native et Expo

L’application mobile a été pensée comme une extension logique de l’écosystème. Elle montre la capacité à adapter les parcours, les composants et la navigation à des usages plus compacts et plus mobiles.

Notifications et contexte temps réel

L’intégration des notifications push permet de transformer la relation au projet : un événement important peut être remonté sans passer par le site ou l’application desktop.

Vision cross-platform

Cette partie souligne une capacité à concevoir un même produit sur plusieurs surfaces, avec des priorités différenciées selon le support et le contexte utilisateur.

Conception, design et positionnement

Ce projet ne repose pas uniquement sur la technique. Il mobilise aussi des compétences de conception, de design, d’organisation de contenu et de positionnement SEO. L’objectif était de faire de ce portfolio un outil professionnel, lisible, utile et convaincant.

Stack et technologies

Intérêt pour un recruteur

Ce projet est intéressant dans une logique de recrutement, car il ne montre pas seulement ma capacité à intégrer une interface. Il montre aussi que je sais construire un produit cohérent, penser les flux de données, organiser un backend, créer des surfaces d’administration et faire dialoguer plusieurs applications autour d’un même besoin.