DOCUMENTATION TECHNIQUE & ASSISTANCE

Foire Aux Questions (FAQ)

Tout comprendre sur le fonctionnement interactif, la sphère 3D Three.js, l'hébergement haute disponibilité Failover, le menu contextuel et l'accessibilité de klemz.live.

/
🌐

Sphère Terrestre 3D & Télémétrie F1

La sphère 3D est propulsée par Three.js et accélérée matériellement par WebGL à 60 images par seconde. Les continents ne sont pas une texture bitmap statique, mais une matrice géodésique de points extraite des données cartographiques réelles de Natural Earth.

Chaque point géographique (lat/lon) est converti en coordonnées cartésiennes tridimensionnelles. Les satellites orbitent selon des lois kepleriennes et les flux de données réseau (arcs géodésiques Bézier) simulent les transferts de paquets en temps réel avec détection des nœuds face à la caméra.

Three.js WebGL Natural Earth 60 FPS fluide

Les circuits (Monaco, Spa, Monza, Silverstone, Suzuka, Le Mans, Laguna Seca...) illustrent la passion de Klemz pour la Formule 1, le Simracing et l'ingénierie de pointe.

Les liaisons lumineuses animées matérialisent le projet phare F1 Telemetry Hub : les flux de télémétrie UDP 60 Hz capturés sur circuit sont acheminés et centralisés vers le Homelab France pour être stockés en base time-series (InfluxDB) et affichés dans Grafana.

En cliquant sur n'importe quel circuit (sur le globe ou via les étiquettes), la fiche technique s'ouvre avec le bouton « ⚡ Simuler la télémétrie en direct ».

Ce tableau de bord interactif simule un tour chronométré en 3 secteurs avec :

  • Compteur de vitesse instantané (pointes à plus de 350 km/h à Monza).
  • Compte-tours numérique et rampe de LEDs shift-light dynamiques (vert, ambre, rouge, violet).
  • Jauges physiques d'accélérateur (Throttle) et de frein (Brake) montrant les phases d'attaque et de décélération aux virages clés.
  • Chrono delta en temps réel jusqu'au meilleur tour (Purple Lap).
  • Rotation libre : Cliquez et glissez sur la sphère avec la souris ou au doigt.
  • Clic gauche sur un nœud : Ouvre la fiche technique complète avec records officiels ou architecture Docker.
  • Bouton 🎯 Focus France : Recentre la vue sur la France avec déploiement radial des projets et des circuits phares.
  • Bouton ⏸️ Rotation : Active ou suspend la rotation automatique de la planète.
  • Double-clic sur le globe : Recentre instantanément la caméra sur le profil Klemz.
  • Défilement tactile mobile intelligent : Le balayage vertical continue de faire défiler la page normalement, tandis que le balayage horizontal fait pivoter la Terre.
☁️

Hébergement, Haute Disponibilité & Failover

Le site repose sur une architecture hybride haute disponibilité. Il est distribué sur le réseau mondial Anycast de Cloudflare Pages (plus de 300 points de présence dans le monde) avec certificat SSL/TLS 1.3 automatisé, couplé au cluster physique Proxmox VE 8.2 du Homelab de Klemz.

Cette approche offre le meilleur des deux mondes : un chargement instantané en bordure de réseau (Edge) et une passerelle sécurisée vers les machines virtuelles locales pour les projets en direct.

Le script live-status.js analyse les en-têtes HTTP de la connexion en temps réel pour déterminer la source active du contenu.

Lorsque le serveur physique du Homelab est en veille ou en maintenance nocturne, le système applique un Failover automatique : la distribution bascule sur Cloudflare Pages. Le badge informe les visiteurs avec une totale transparence technique.

Le bouton « ⚡ Mesurer la latence » disponible dans les fiches projets et profil envoie une requête fetch anti-cache horodatée vers le cluster avec l'API performance.now().

Le script calcule le délai aller-retour réel (RTT) en millisecondes et qualifie la liaison (optimale < 35ms, bonne < 80ms, normale) tout en vérifiant le protocole actif (HTTP/2 Multiplexé) et le chiffrement AES-256 / TLS 1.3.

Le site utilise une chaîne d'intégration et de déploiement continus (CI/CD) liée au dépôt GitHub privé. Chaque commit poussé sur la branche main déclenche un build automatisé sur Cloudflare Pages, qui purge le cache Edge mondial et déploie la nouvelle version en moins de 25 secondes.

🧭

Navigation, Transitions & Menu Contextuel

Un clic droit n'importe où sur le site ouvre un menu contextuel cybernétique multi-pages :

  • Sur la sphère 3D : Détection raycast du circuit ou du projet pour accéder aux fiches techniques, centrer la vue 3D ou lancer la télémétrie.
  • Sur une carte de projet : Accès direct au dossier technique, à la démo interactive ou au code source GitHub.
  • Sur le fond de page : Raccourcis vers toutes les rubriques, bascule thème, haut de page et paramètres.
  • Organisation en onglets compacts : Les options sont réparties par onglets (Action, Pages, Outils) pour rester légères et aérées.

Le menu contextuel peut être fermé de plusieurs façons instantanées :

  • Un simple clic droit en dehors du menu le retire immédiatement.
  • Un clic gauche n'importe où sur la page le masque.
  • La touche Échap (Escape) du clavier le referme.
  • Le défilement (scroll) de la page le congédie automatiquement.

Si vous avez besoin d'utiliser les fonctions natives du navigateur (Inspecter l'élément, Enregistrer l'image sous, Traduire...), maintenez la touche Shift enfoncée pendant votre clic droit (Shift + Clic Droit). Le menu personnalisé s'efface au profit du menu système de votre navigateur.

Le script page-transitions.js intercepte la navigation interne pour offrir une expérience fluide sans saut visuel :

  • Une micro-barre cyan/émeraude se charge en haut de page à l'initialisation du clic.
  • Un fondu enchaîné doux (Cross-fade en 180ms) estompe le contenu avant l'affichage de la page suivante.
  • L'événement pageshow assure la compatibilité avec le BFCache (Back-Forward Cache) pour que les retours arrière ne restent jamais bloqués.
⚙️

Thèmes, Accessibilité & Préférences

Vous pouvez basculer de thème à tout moment :

  • Via le menu contextuel (clic droit > onglet Outils > Bascule Thème).
  • Dans le panneau de configuration (icône engrenage dans le header).
  • La palette chromatique de la sphère 3D s'ajuste dynamiquement en temps réel (océans clairs et continents bleu profond en mode jour ; matrice néon cyber en mode nuit).

Le modal de réglages (icône engrenage ⚙️) permet de personnaliser :

  • Taille de texte : Normal, Agrandie (+15%), Extra-large (+30%).
  • Fort contraste : Renforce la lisibilité selon les critères WCAG AAA.
  • Police accessible : Active une typographie optimisée pour le confort de lecture.
  • Réduction des animations : Désactive les effets de particules et mouvements rapides pour les personnes sensibles.
  • Soulignement des liens : Met en évidence tous les éléments interactifs.

Vos préférences (thème, taille de police, position du dock du header, accessibilité) sont conservées dans le localStorage de votre propre navigateur. Aucune donnée n'est envoyée ni stockée sur un serveur distant, garantissant une confidentialité totale.

🔒

Sécurité, Données & Confidentialité

Non, aucun cookie publicitaire ni traceur commercial (Google Analytics, Meta Pixel, etc.) n'est présent sur klemz.live.

La mesure d'audience est assurée par Umami Analytics, un outil open-source respectueux de la vie privée, hébergé dans l'Union Européenne et 100% conforme au RGPD sans dépôt de cookies ni profilage d'adresses IP.

Le formulaire de la page contact.html ne repose sur aucun serveur d'envoi SMTP exposé. Il utilise un Cloudflare Worker serveurless couplé à l'API de Resend.

Les requêtes sont chiffrées en HTTPS avec limitation de débit (Rate Limiting anti-flood) et validation des données d'entrée côté worker pour bloquer tout spam ou injection malveillante.

Le projet openSIO utilise un serveur Ollama auto-hébergé sur GPU local exécutant des modèles de langage open-weight (Mistral 7B / Llama 3).

Toutes les requêtes des étudiants sont traitées directement sur l'infrastructure physique du Homelab. Aucune question, quiz ou métrique d'apprentissage n'est transmise à OpenAI ou à un fournisseur cloud tiers, préservant la souveraineté numérique.

Vous avez une autre question technique ?

Je réponds volontiers aux questions sur l'architecture, la virtualisation Proxmox ou les projets BTS SISR.

Me poser une question →