Mathis.Dev freelance · Paris
Demander un devis
Toutes les réalisations
MaintenuApplication webDate :30 septembre 2026

Portfolio

Portfolio personnel conçu comme une véritable application : vitrine publique, demande de devis, espace client, suivi de projet, gestion commerciale et CMS intégré pour administrer mes réalisations.

  • Next.js
  • TypeScript
  • Prisma
  • MySQL
  • Tailwind CSS
  • Full-stack
Vue abstraite de la landing page du portfolio.

Plus qu’un portfolio

À l’origine, le site répond à un besoin assez classique : présenter mon activité, mes services et mes réalisations. Mais au fil de son évolution, il est devenu une application complète autour de mon activité freelance.

La partie publique reste la porte d’entrée, mais elle est désormais reliée à tout un ensemble d’outils : demande de devis, authentification, espace client, suivi des projets, documents commerciaux, gestion des utilisateurs et administration des réalisations.

L’objectif est d’avoir un seul environnement dans lequel un prospect peut découvrir mon travail, devenir client puis suivre son projet sans rupture entre les différentes étapes.

Vue abstraite de la landing page du portfolio.
La partie publique présente mon activité, mes services et mes réalisations.

Du visiteur au prospect

Le portfolio sert aussi de point d’entrée commercial. Plutôt que de limiter la prise de contact à un simple formulaire libre, un parcours de demande de devis permet de structurer les informations nécessaires à la compréhension du besoin.

Le prospect peut ainsi préciser son projet et transmettre les éléments utiles dès le premier échange, ce qui évite une partie des allers-retours habituels et facilite la qualification de la demande.

Vue abstraite du parcours de demande de devis du portfolio.
La demande de devis transforme la prise de contact en un parcours structuré.

Des accès adaptés au contexte

L’application possède plusieurs mécanismes d’authentification selon l’usage. Une connexion classique permet d’accéder aux espaces nécessitant un compte, tandis qu’un système de magic link simplifie l’accès lorsque l’utilisateur doit rejoindre rapidement son espace sans gérer un mot de passe supplémentaire.

L’authentification fait ainsi partie du parcours plutôt que d’être traitée comme une page isolée du reste de l’expérience.

Vue abstraite de l’interface de connexion classique.
Connexion classique.
Vue abstraite du parcours de connexion par magic link.
Accès simplifié par magic link.

Un espace dédié à chaque client

Une fois connecté, le client ne retrouve pas simplement une liste de fichiers ou quelques messages. Son espace centralise les informations nécessaires pour comprendre où en est son projet et retrouver rapidement ce qui le concerne.

Le tableau de bord donne une vue d’ensemble avant d’accéder au suivi détaillé : informations du projet, avancement, échéances, ressources et éléments commerciaux restent regroupés dans le même environnement.

Vue abstraite du tableau de bord proposé aux clients.
Le tableau de bord client centralise les projets et les informations importantes.

Suivre un projet sans multiplier les outils

Chaque projet possède son propre espace de suivi. Il rassemble les informations générales, les différentes étapes, les tâches, les mises à jour et les ressources utiles au même endroit.

L’objectif est de donner au client suffisamment de visibilité pour comprendre l’avancement du travail sans devoir retrouver une information perdue dans une succession de mails ou de messages.

Vue abstraite de l’interface de suivi détaillé d’un projet.
Le suivi de projet réunit avancement, étapes, données et ressources dans une seule vue.

Le commercial intégré au projet

Le suivi opérationnel et le suivi commercial ne sont pas séparés artificiellement. Les devis, factures et documents associés restent liés au projet correspondant.

Le client peut ainsi retrouver les documents qui concernent une mission, consulter leur statut et conserver une vision claire de la partie commerciale sans passer par un autre outil.

Vue abstraite de l’espace regroupant les devis, factures et informations commerciales d’un projet.
Les devis et factures restent directement rattachés au projet concerné.

Le même flux côté gestion

Les demandes envoyées depuis le portfolio ne disparaissent pas dans une boîte mail. Elles remontent dans une interface dédiée qui permet de les consulter et de les intégrer au reste du processus commercial.

Cela crée une continuité entre la partie publique et les outils internes : un visiteur formule une demande, celle-ci devient exploitable dans l’administration, puis peut donner naissance à une relation client et à un projet suivi dans la même application.

Vue abstraite de l’interface interne de gestion des demandes de devis.
Les demandes reçues depuis le site public sont centralisées dans l’administration.

Gérer les utilisateurs et leurs accès

L’administration comprend également une gestion des utilisateurs afin de contrôler les comptes, leurs informations, leurs rôles et leur accès aux différentes parties de l’application.

Cette couche permet notamment de relier correctement les utilisateurs aux projets et d’adapter les possibilités offertes selon leur rôle.

Vue abstraite de l’interface d’administration des utilisateurs.
Les comptes, rôles et accès sont administrés depuis une interface dédiée.

Un portfolio qui administre ses propres réalisations

Les études de cas visibles sur le site ne sont pas des pages écrites directement dans le code. J’ai développé un système de gestion de contenu dédié aux réalisations, afin de pouvoir créer, organiser, enrichir et publier les projets depuis l’administration.

La liste des réalisations permet d’obtenir une vue globale du contenu disponible et d’accéder aux différents outils d’édition.

Vue abstraite de l’interface permettant de gérer les réalisations du portfolio.
Les réalisations sont administrées directement depuis le portfolio.

Composer la grille visuellement

Un grid manager permet d’organiser la manière dont les réalisations apparaissent dans la galerie publique.

L’ordre et la mise en avant des projets peuvent ainsi être ajustés depuis une interface visuelle plutôt que d’être définis en dur dans le frontend. La gestion éditoriale reste donc indépendante de la structure technique de la page.

Vue abstraite du gestionnaire de grille utilisé pour organiser les réalisations.
Le grid manager permet de piloter visuellement l’organisation des projets présentés.

Construire une étude de cas bloc par bloc

L’éditeur de réalisations fonctionne comme un petit CMS spécialisé. Une étude de cas peut être construite à partir de plusieurs types de contenus : textes riches, images, grilles, chiffres clés, citations, extraits de code, contenus embarqués, encarts ou séparateurs.

Cette approche permet de conserver une structure de données commune tout en laissant suffisamment de liberté pour raconter des projets très différents sans recréer une page spécifique à chaque fois.

Vue abstraite de l’éditeur permettant de construire une étude de cas à partir de différents blocs de contenu.
L’éditeur de contenu permet de construire chaque réalisation à partir de blocs réutilisables.

Du contenu administré au rendu public

Une fois publiée, la réalisation est transformée en une véritable étude de cas côté public. Les différents blocs définis dans l’administration deviennent une page structurée, cohérente avec le reste du portfolio et adaptée au contenu du projet.

Le système sépare ainsi la donnée éditoriale de sa présentation, ce qui permet de faire évoluer l’apparence du portfolio sans devoir reconstruire manuellement toutes les réalisations.

Vue abstraite d’une page publique présentant une réalisation du portfolio.
Le résultat public est généré à partir du contenu configuré dans l’éditeur.

Un outil construit autour de mon activité

Ce projet a progressivement évolué d’un simple site de présentation vers un environnement qui regroupe plusieurs besoins que j’avais auparavant intérêt à traiter séparément.

La partie publique présente mon travail et récupère les demandes entrantes. L’espace client assure ensuite le suivi des missions et des documents commerciaux. Enfin, l’administration me permet de gérer les utilisateurs, les demandes et le contenu affiché sur le site.

Le principal intérêt du projet réside dans cette continuité : le portfolio, l’acquisition commerciale, le suivi client et la gestion de contenu utilisent la même application et les mêmes données, plutôt qu’un assemblage de services indépendants.

site public
1
espace client
1
back-office
1
CMS intégré
1

D'autres réalisations

MaintenuApplication web

Pinz

Une application web et mobile qui facilite l'intégration sociale des étudiants internationaux en leur permettant de découvrir, rejoindre et partager des activités organisées autour d'eux.

  • Next.js
  • TypeScript
  • Prisma
  • MySQL
  • Tailwind CSS
  • PWA
Date
21 sept. 2026
pinz.fr
LivréSite vitrine

Eye's Prod

Développement du site vitrine d'EYES PROD à partir d'une maquette Figma, avec intégration responsive, mise en production et amélioration mesurable de sa visibilité sur Google.

  • Next.js
  • TypeScript
  • Tailwind CSS
  • Responsive Design
  • SEO
Date
15 sept. 2025
eyes-prod.fr
En coursApplication web

Yabara

Plateforme de recrutement pensée pour la Côte d’Ivoire, reliant talents et entreprises autour d’offres d’emploi, de profils professionnels, de candidatures, de recherche de talents et d’outils de suivi du recrutement.

  • React
  • Vite
  • Express
  • MySQL
  • Full-stack
Date
24 juin 2026
yabara.co
Voir toute la sélection