Full Stack DeveloperSystèmes et outils numériques

Des plateformes, des simulateurs et des outils numériques qui transforment des processus complexes en expériences claires et précises.

Faites défiler pour commencer le voyage

(01) À propos

Curiosité, rigueur et amour des petits détails.

Une expérience de terrain alliée à un développement de bout en bout : de la compréhension du besoin, en passant par la conception et le design, jusqu'à un système en production qui tourne chaque jour.

Développement Full Stack complet : interfaces rapides et accessibles, back-end et bases de données en temps réel, sécurité et permissions, jusqu'au déploiement et à la maintenance continue de systèmes en ligne.

Derrière chaque projet, la même question : comment rendre simple ce qui est complexe, sans renoncer à la précision ?

  • 31Projets
  • 08Systèmes en production
  • 14Cours et simulateurs
  • 12Langues d'interface
(02) Projets

Projets choisis

Plateformes en production, simulateurs professionnels, guides et projets personnels : une sélection des dernières années.

01 / 05

Plateformes

Des systèmes en production

02 / 05

Simulations et formation

Le savoir professionnel, rendu interactif

03 / 05

IA

Guides et outils pour l'ère de l'IA

04 / 05

Sites de marque

Une présence numérique pour les entreprises

05 / 05

Expériences

Projets personnels et explorations

01 / 31

(03) Approche

Méthode

01

Comprendre le processus

Étudier le travail tel qu'il se fait vraiment : qui sont les utilisateurs, ce qui les ralentit et quelles règles s'appliquent.

02

Concevoir

Définir le périmètre, le modèle de données et les parcours avant la première ligne de code.

03

Développement Full Stack

React et TypeScript côté client, Node.js et Cloud Functions côté serveur, Firestore en temps réel ; la 3D quand elle apporte de la valeur ; l'IA comme partenaire tout au long du projet.

04

Vérifier et lancer

Tests automatisés, accessibilité et performance, puis amélioration continue à partir de l'usage réel.

(04) Technologies

Outils et technologies

Frontend

React · TypeScript · Astro · Vite · Tailwind · GSAP · Motion

3D / Games

Three.js · React Three Fiber · Babylon.js · Phaser

Backend

Firebase · Cloud Functions · Netlify Functions · Node.js

Quality

Playwright · Vitest · Accessibility · PWA

AI

Claude · Claude Code · Midjourney · Prompt Engineering

(05) Contact

Contact

© 2026 Dan Touitou

Full Stack Developer · Systèmes et outils numériques

Des plateformes, des simulateurs et des outils numériques qui transforment des processus complexes en expériences claires et précises.

  • Portfolio
  • 2026
  • Défiler
(01) À propos
Dan Touitou
Dan Touitou©2026

Curiosité, rigueur et amour des petits détails.

Une expérience de terrain alliée à un développement de bout en bout : de la compréhension du besoin, en passant par la conception et le design, jusqu'à un système en production qui tourne chaque jour.

Développement Full Stack complet : interfaces rapides et accessibles, back-end et bases de données en temps réel, sécurité et permissions, jusqu'au déploiement et à la maintenance continue de systèmes en ligne.

Derrière chaque projet, la même question : comment rendre simple ce qui est complexe, sans renoncer à la précision ?

  • 0131Projets
  • 028Systèmes en production
  • 0314Cours et simulateurs
  • 0412Langues d'interface
(02) Projets

Projets choisis

Plateformes en production, simulateurs professionnels, guides et projets personnels : une sélection des dernières années.

01 / 05

Plateformes

Des systèmes en production · 4 projets

Capture d'écran: D-Safety
04

D-Safety

Un site de marque pour un cabinet de conseil en sécurité (conseil, formation et supervision), avec une mise en page épurée, une navigation fluide et un formulaire de contact ciblé.

React · Vite · Tailwind · Netlify Forms

02 / 05

Simulations et formation

Le savoir professionnel, rendu interactif · 12 projets

Capture d'écran: Guide Git interactif
08

Guide Git interactif

53 commandes Git animées pas à pas, avec un terminal en direct et un graphe de commits synchronisé, plus un labo où chaque action met à jour le dépôt en temps réel.

React · TypeScript · Motion · Tailwind

Capture d'écran: CCNA Academy
09

CCNA Academy

Un cours réseau complet pour la certification CCNA : 19 leçons, un terminal Cisco IOS simulé et des démonstrations visuelles du Subnetting, des VLAN et du Spanning Tree.

React · SVG Animation · PWA

Capture d'écran: F12 · Guide DevTools
10

F12 · Guide DevTools

Un guide complet des Chrome DevTools : chaque panneau, un glossaire, des raccourcis, des scénarios de débogage et un labo interactif, avec un chapitre consacré à la sécurité.

JavaScript · Tailwind · Interactive Lab

Capture d'écran: Cours de sécurité interactif
11

Cours de sécurité interactif

Un cours de sécurité par niveaux, chacun débloqué après un défi (sécurité incendie, équipements de protection et matières dangereuses), qui se termine par un examen et un certificat.

JavaScript · Gamification · Tailwind

Capture d'écran: Rayonnements non ionisants
12

Rayonnements non ionisants

Un guide approfondi des rayonnements non ionisants et de leur réglementation, avec un labo interactif : calculateurs de loi en carré inverse et de DAS, et simulateur de distance de sécurité des antennes.

JavaScript · Calculators · Quiz

Capture d'écran: Rayonnements ionisants
13

Rayonnements ionisants

Un cours de radioprotection (de l'atome au blindage et à la dosimétrie), avec un tableau périodique interactif et un calculateur de débit de dose.

JavaScript · PWA · Quiz

Capture d'écran: Sécurité laser
14

Sécurité laser

Un cours de sécurité laser : physique, effets sur l'œil et la peau, classes de danger et limites d'exposition, avec un calculateur de classification.

JavaScript · PWA · Calculators

Capture d'écran: Systèmes de détection incendie
15

Systèmes de détection incendie

Un guide des systèmes de détection et d'extinction incendie selon la norme israélienne 1220, avec un simulateur de centrale pour la logique d'intégration et de déclenchement.

JavaScript · Simulator · Quiz

Capture d'écran: NFPA 72
16

NFPA 72

Un guide du code NFPA 72 : carte des chapitres, dispositifs d'alarme, communication d'urgence et essais, avec une démo d'imagerie thermique et un calculateur d'intensité des flashs.

JavaScript · SVG · Calculators

03 / 05

IA

Guides et outils pour l'ère de l'IA · 4 projets

Capture d'écran: Le guide complet de ChatGPT
18

Le guide complet de ChatGPT

Une partie d'une série de guides d'IA en hébreu : des fondamentaux aux agents autonomes, sur un design system commun à toute la série.

HTML · Tailwind · Design System

Capture d'écran: Le guide complet de Gemini
19

Le guide complet de Gemini

Le premier guide de la série : Gemini, des premiers pas jusqu'au travail avec des agents.

HTML · Tailwind

Capture d'écran: Chroma Canvas
20

Chroma Canvas

Une galerie de créations générées par IA, chacune avec son prompt complet et son outil, servie par une chaîne de traitement d'images qui produit des tailles adaptatives et des aperçus flous.

Vanilla JS · sharp · Netlify · Masonry

04 / 05

Sites de marque

Une présence numérique pour les entreprises · 7 projets

Capture d'écran: NOA Event Design
21

NOA Event Design

Un site de marque pour la décoration de tables d'événements : un film d'ouverture à l'arrivée, une galerie qui défile latéralement au fil du scroll comme une promenade le long d'une table dressée, une visionneuse plein écran et un contact direct par WhatsApp.

React · Vite · Framer Motion · RTL

Capture d'écran: Serenity Ice Cream
22

Serenity Ice Cream

Un site pour un glacier artisanal à Eilat : carte des parfums, histoire de la marque et commande directe, avec SEO local, aperçus de partage soignés et contraste des couleurs vérifié.

HTML · CSS · SEO · Schema.org

Capture d'écran: Adam Zaid · Finances familiales
23

Adam Zaid · Finances familiales

Une page d'atterrissage pour un conseiller en finances familiales, avec un carrousel d'ouverture animé et un parcours de contact simplifié.

React · Framer Motion · Swiper · Tailwind

Capture d'écran: Cabinet d'avocats
24

Cabinet d'avocats

Une page d'atterrissage pour un cabinet d'avocats en droit civil, commercial et en licences d'entrepreneurs, avec un menu d'accessibilité intégré et des animations au défilement.

HTML · Tailwind · AOS · Accessibility

Capture d'écran: POV · Animations pour événements
25

POV · Animations pour événements

Une page d'atterrissage pour une entreprise d'animations événementielles (photomaton rétro, spectacles et murs d'expérience), avec un effet de confettis à l'envoi.

HTML · JavaScript · AOS · Canvas

Capture d'écran: NT · Métrés
26

NT · Métrés

Un site de marque responsive pour un technicien du bâtiment : estimations, métrés et facturation de projets, avec un menu d'accessibilité.

React · Vite · Tailwind

Capture d'écran: Outil de métrés
27

Outil de métrés

Un outil de travail pour les métrés : projets, postes, remises et statuts, modèles, export Excel et devis imprimables, entièrement dans le navigateur, sans serveur.

JavaScript · LocalStorage · CSV · Print

05 / 05

Expériences

Projets personnels et explorations · 4 projets

Capture d'écran: Jeu de plateforme rétro
29

Jeu de plateforme rétro

Un jeu de plateforme rétro, un voyage d'Eilat à Jérusalem avec cinématiques, boutique et progression synchronisée dans le cloud. Tous les graphismes et la musique sont générés par le code.

Phaser 3 · Python · PWA · Netlify Blobs

Capture d'écran: Bibliothèque numérique
30

Bibliothèque numérique

Une bibliothèque numérique au style vintage en deux ailes : une bibliothèque de livres avec étagères, lecteur PDF à pages tournantes, recherche et notes exportées vers Word, et une vidéothèque où les vidéos de cours apparaissent comme des cassettes et se lisent sur une télé rétro. Fonctionne hors ligne et s'appuie sur plus de 260 tests.

Vanilla JS · PDF.js · Video · Service Worker · Playwright

Capture d'écran: Royaume de Netanya
31

Royaume de Netanya

Une fiche d'encyclopédie fictive sur le « Royaume de Netanya » : drapeau, armoiries, cartes, un hymne avec sous-titres synchronisés et un passage entre l'hébreu, l'anglais et une langue inventée.

HTML · CSS · Audio · i18n

(03) Approche

Méthode

  1. 01

    Comprendre le processus

    Étudier le travail tel qu'il se fait vraiment : qui sont les utilisateurs, ce qui les ralentit et quelles règles s'appliquent.

  2. 02

    Concevoir

    Définir le périmètre, le modèle de données et les parcours avant la première ligne de code.

  3. 03

    Développement Full Stack

    React et TypeScript côté client, Node.js et Cloud Functions côté serveur, Firestore en temps réel ; la 3D quand elle apporte de la valeur ; l'IA comme partenaire tout au long du projet.

  4. 04

    Vérifier et lancer

    Tests automatisés, accessibilité et performance, puis amélioration continue à partir de l'usage réel.

(04) Technologies

Outils et technologies

Frontend

  • React
  • TypeScript
  • Astro
  • Vite
  • Tailwind
  • GSAP
  • Motion

3D / Games

  • Three.js
  • React Three Fiber
  • Babylon.js
  • Phaser

Backend

  • Firebase
  • Cloud Functions
  • Netlify Functions
  • Node.js

Quality

  • Playwright
  • Vitest
  • Accessibility
  • PWA

AI

  • Claude
  • Claude Code
  • Midjourney
  • Prompt Engineering
(05) Contact

Contact