MABSTUDIO ACCUEIL SERVICES PROJETS CONTACT
INTRO
04
// SELECTED WORKS

CASE
STUDIES

01 La Fringale Site Vitrine
02 Bastien Brunier Portfolio
03 BathTrack SaaS B2B
04 AgentFlow Service IA
Scroll
01 — Site Vitrine

LA FRINGALE

Pizzeria artisanale — Granville, Normandie

HTMLCSSJavaScriptGSAP

Contexte

La Fringale est une pizzeria artisanale a Granville. Le site devait refleter l'authenticite et la chaleur du lieu — pizzas au feu de bois, ambiance familiale, produits locaux.

Role

Web Designer
Developpeur Front-End
Direction Artistique

Annee

2026

Mood Board

Fond#FAF7F2
Vert Olive#4A7C3F
Terre Cuite#C4713B
Dore#B89A5A
Texte#1C1915
Subtil#8A7F72

Palette inspiree de la terre, du four a bois et de l'huile d'olive. Le creme chaud evoque l'authenticite. Le vert olive et la terre cuite rappellent les ingredients frais et la cuisson traditionnelle.

Fonctionnalites Cles

01

Design Organique

Palette chaude, typographie rustique, photos grand format.

02

Menu Interactif

Navigation fluide entre les categories avec GSAP.

03

Mobile-First

80% du trafic mobile. Consulte en marchant dans la rue.

04

Performance

Chargement < 2s. HTML/CSS/JS pur, pas de framework.

Stack Technique

Frontend

  • HTML5 Semantique
  • CSS3 Custom Properties
  • JavaScript Vanilla
  • GSAP + ScrollTrigger

Design

  • Palette organique (6 couleurs)
  • Typographie serif + sans-serif
  • Grille responsive fluid
  • Animations micro-interaction

Deploiement

  • Netlify (Hosting)
  • Compression images WebP
  • SEO local Granville
  • Google Maps embed
↓ Continuez pour le projet suivant
02 — Portfolio

BASTIEN BRUNIER

Monteur video — Showreel & Projets

HTMLCSSJavaScript

Contexte

Portfolio pour un monteur video freelance. Design cinematique — format 21:9, transitions fluides, le contenu video est roi.

Role

Web Designer
Developpeur Front-End
Direction Artistique

Annee

2026

Mood Board

Fond#0C0C0C
Surface#161616
Accent#6B8CFF
Texte clair#D5D4C8
Blanc#FFFFFF

Le noir place le contenu video au centre. Le bleu lavande apporte une touche creative sans distraire du travail de montage.

Fonctionnalites Cles

01

Design Cinematique

Format large, fond noir profond, typographie minimaliste.

02

Showreel Immersif

Hero video plein ecran, lecture automatique.

03

Galerie Projets

Chaque projet avec sa video, son contexte, son role.

04

Contact Direct

Formulaire epure, liens reseaux sociaux.

Stack Technique

Frontend

  • HTML5 Semantique
  • CSS3 + Custom Properties
  • JavaScript Vanilla
  • Video API HTML5

Design

  • Layout cinematique 21:9
  • Palette monochrome + accent
  • Typographie minimaliste
  • Micro-animations hover

Deploiement

  • Netlify (Hosting)
  • Video embed optimise
  • SEO freelance monteur
  • Performance Lighthouse 90+
↓ Continuez pour le projet suivant
03 — SaaS B2B

BATHTRACK

Suivi qualite des bains de traitement de surface

Next.jsFastAPIPostgreSQLTailwind CSS

Contexte

Les ateliers de traitement de surface gerent leurs bains chimiques sur Excel et papier. BathTrack digitalise tout : saisie mobile en 10 secondes, alertes automatiques, rapports audit ISO en 1 clic.

Role

Lead Developer Full-Stack
Architecture API
UX/UI Design

Annee

2026 — En test chez ArcelorMittal et Mecachrome

Mood Board

Fond#FFFFFF
Accent#2563EB
Texte#1A1A1A
Conforme#22C55E
Alerte#F59E0B
Danger#EF4444

Le bleu sur fond blanc reflete l'univers industriel. Les couleurs semantiques (vert/ambre/rouge) communiquent l'etat d'un bain sans lire un texte.

Fonctionnalites Cles

01

Saisie Mobile

10 secondes au bord du bain. Tactile, gants, ecrans mouilles.

02

Alertes Temps Reel

SMS/email si un parametre derive. Escalade a 30 min.

03

Rapports Audit

PDF ISO 9001 et Nadcap en 1 clic. Tracabilite complete.

04

Multi-Tenant

Espaces isoles par atelier. Roles, facturation par site.

Stack Technique

Frontend

  • Next.js 14 + TypeScript
  • Tailwind CSS
  • Shadcn/UI
  • React Hook Form + Zod
  • Recharts

Backend

  • FastAPI (Python)
  • PostgreSQL
  • SQLAlchemy ORM
  • JWT + RBAC
  • WeasyPrint (PDF)

Infrastructure

  • Netlify (Frontend)
  • Railway (API)
  • Neon (PostgreSQL)
  • Brevo (SMS/Email)
↓ Continuez pour le projet suivant
04 — Service IA

AGENTFLOW

Agents IA autonomes pour entreprises

PythonNode.jsPostgreSQLTelegram API

Contexte

Les PME veulent automatiser prospection, CRM, monitoring — mais les frameworks IA sont trop techniques. AgentFlow : des agents IA cle en main qui travaillent 24/7 et reportent via Telegram.

Role

Architecte Systeme
Developpeur Agents IA
Infrastructure & DevOps

Annee

2026 — En production, 5 agents actifs

Mood Board

Fond#0A0A0A
Accent#2563EB
Cards#1A1A1A
Texte#FFFFFF
Actif#22C55E

Noir profond et bleu electrique — l'univers tech et IA. Le vert "actif" signale les agents en fonctionnement. Dark mode natif.

Fonctionnalites Cles

01

5 Agents Autonomes

Rebecca (prospection), Arina (CRM), Thomas (dev), Manuel (monitoring), JARVIS (orchestration).

02

Telegram Native

Pas de dashboard. Les agents reportent directement sur Telegram.

03

Event-Driven

Les agents se reveillent a la demande. Architecture a evenements.

04

Infra Proprietaire

Serveur dedie, 33 agents en parallele, retry automatique.

Stack Technique

Agents

  • Python 3.12
  • Claude API (Anthropic)
  • Playwright (Scraping)
  • Telegram Bot API
  • Cron scheduling

Backend

  • Node.js + Express
  • PostgreSQL (Neon)
  • Redis (Cache + Queue)
  • JWT Authentication

Landing Page

  • HTML/CSS/JS
  • GSAP Animations
  • Netlify (Deploy)
  • PostHog (Analytics)