MatgordFR· projets & démos

MatgordFR · développeur indépendant

Je construis
de vrais produits.
Et je le prouve.

Kalvyx — un bot Discord propulsé par l'IA — et mon site perso tournent en production. À côté, cinq démos front-end montrent le savoir-faire jusqu'au moindre pixel : quatre en HTML, CSS et JavaScript purs, et une pièce WebGL calculée en temps réel — toutes sans CDN, polices auto-hébergées et graphismes faits main.

En production

Ce qui tourne, pour de vrai.

Mon site personnel et Kalvyx — en production, mis à jour en continu.

Aperçu du site personnel de MatgordFR — MatgordOS

Site personnelEn ligne

MatgordOS

Mon site perso, « MatgordOS » : un bureau navigable qui raconte qui je suis, mes bots, mes sites et ma boutique de prompts. Codé à la main, auto-hébergé sur mon VPS.

  • MatgordOS
  • SPA sans framework
  • Auto-hébergé
Visiter ↗
Aperçu de Kalvyx — bot Discord propulsé par l'IA Claude

Bot Discord · IAEn ligne

Kalvyx

Un bot Discord tout-en-un, propulsé par Claude (Anthropic) : une vraie IA en français dans ton serveur, plus modération, niveaux, tickets… avec son site et son tableau de bord. En prod, tous les jours.

  • Propulsé par Claude
  • Site + dashboard
  • FR / EN
Visiter ↗

Savoir-faire front-end

Quatre sites, une matière.

Personas et données 100 % fictifs — une vitrine de savoir-faire, pas de vrais produits. Chacune a sa propre identité ; clique une carte pour l'ouvrir en vrai.

Aperçu du site Essor — tableau de bord CRM avec analytics de MRR

Tableau de bord · CRM / SaaS

Essor

Un CRM avec de vraies analytics de MRR : waterfall du revenu, ARPU, LTV, churn, quick ratio. Cinq vues, thème clair et sombre, courbes SVG dessinées à la main.

  • Fraunces + Space Grotesk
  • Waterfall MRR
  • Clair / sombre
Ouvrir la démo → Code
Aperçu du site Pouls — page produit, tableau de statut vivant

Landing produit · SaaS

Pouls

Un outil de surveillance et de page de statut. Tableau de bord vivant (latence, uptime), tarifs mensuel/annuel qui basculent, FAQ dépliable — la totale d'une vraie page produit.

  • Space Grotesk + Mono
  • Board temps réel
  • Pricing + FAQ
Ouvrir la démo → Code
Aperçu du site Sillage — studio de direction artistique, éditorial

Portfolio · studio créatif

Sillage

Un studio de direction artistique. Mise en page éditoriale, curseur sur mesure, et une affiche riso générée en direct — unique — pour chaque projet du portfolio.

  • Instrument Serif
  • Curseur custom
  • Art génératif
Ouvrir la démo → Code
Aperçu du site Forno — pizzeria napolitaine, ambiance braise

One-pager · restauration

Forno

Une pizzeria napolitaine au feu de bois. Ambiance « braise », four vivant, et une cuisson interactive de 90 secondes où la pizza se tache de léopard sous vos yeux.

  • Bricolage + Fraunces
  • SVG animé
  • Cuisson interactive
Ouvrir la démo → Code
Aperçu d'Interférence — une matière de verre iridescent violet et bleu calculée en temps réel

Pièce WebGL · temps réel

Interférence

Une matière de verre iridescent, calculée image par image dans le navigateur. La couleur n'est pas peinte : elle naît de l'épaisseur du film et de l'angle du regard. Le scroll transforme la matière, la souris la fait tourner.

  • three.js vendorisé
  • Shaders GLSL faits main
  • 0 CDN · CSP stricte
Ouvrir la démo → Code

Le parti pris, sur les démos

  • Zéro dépendance. Pas de framework, pas de librairie, pas de CDN. Du HTML/CSS/JS à la main.
  • Polices auto-hébergées. Aucune requête tierce, aucun pisteur — tout est servi depuis le site.
  • Graphismes dessinés. Icônes, illustrations et graphiques en SVG écrit à la main.
  • Léger & rapide. Chaque démo pèse ~100 Ko, se charge d'un coup, sans build.
  • Accessible. Navigation clavier, focus visible, prefers-reduced-motion respecté.
  • Responsive. Du grand écran au mobile, sans débordement.