Le site que vous explorez
Septembre 2026 – aujourd'hui · Personnel · en ligne
Le site que vous avez sous les yeux, pensé comme un produit à part entière : décor 3D en temps réel, assistant IA qui répond à partir du contenu, console intégrée, palette de commandes, projets filtrables avec vues et « j'aime », deux langues et un tableau de bord privé.
Visite guidée
Chaque fonctionnalité est expliquée, montrée, et surtout à portée de clic : les boutons ci-dessous l'ouvrent pour de vrai, ici même.
0 / 15
essayées
01 · Explorer autrement
Poser une question, taper une commande ou chercher en deux lettres : à chacun sa manière.
Posez une question en français ou en anglais : il répond à partir du contenu du site, écrit sa réponse mot à mot et cite les projets sous forme de liens qui les ouvrent.
Où : Bouton « Demander à l'IA », en bas à droite de chaque page
karim@mko:~$ p
24 commandes pour tout piloter au clavier : lister les projets, en ouvrir un, changer la langue ou le ciel, interroger l'assistant. Historique, complétion avec Tab, et quelques surprises.
Où : Bouton « >_ » de la barre du haut
Deux lettres suffisent pour aller à une section, ouvrir un projet ou un stage, copier l'e-mail ou changer de langue. Tout se fait avec les flèches et Entrée.
Où : Champ « Rechercher » de la barre du haut
02 · Un décor vivant
Le fond et le logo sont calculés en direct dans le navigateur. Ils réagissent, puis se font oublier.
Rendus réels du logo, capturés sur le siteFaites-le tourner à la souris, cliquez pour le briser, changez sa matière (cristal, glace, holographique, obsidienne, chrome) ou regardez-le en vue éclatée.
Où : En haut de l'accueil, avec sa barre de réglages
Le fond suit l'heure de Tunis : plus clair le jour, une lueur violette à l'aube et au crépuscule, plus profond la nuit. Toujours dans les couleurs de la marque.
Où : Derrière toutes les pages ; l'heure s'affiche en pied de page
Un bouton ralentit en douceur tout le décor jusqu'à l'arrêt, sans toucher aux transitions utiles. Le choix est retenu, et le réglage « réduire les animations » de l'appareil est respecté d'office.
Où : Icône en forme de vague, dans la barre du haut
Coupé par défaut. Une fois activé, de légers sons accompagnent les ouvertures de pages, les clics importants et le logo qui se brise.
Où : Icône haut-parleur, dans la barre du haut
03 · Les projets
Des cartes qui s'ouvrent en pleine page, des filtres qui se combinent, et des compteurs bien réels.
Mobile, web, IoT, IA, puis la technologie exacte : les deux filtres se combinent et les cartes glissent à leur nouvelle place. La galerie se parcourt aux flèches, à la souris ou au doigt.
Où : Section « Projets » de l'accueil
Chaque projet s'ouvre depuis sa carte et y retourne en se fermant. À l'intérieur : maquettes 3D des écrans, étude de cas, chiffres, architecture et captures. Chaque page a aussi sa propre adresse à partager.
Où : Vous y êtes : cette page en est une
Chaque page compte ses visites et ses « j'aime », anonymement. Le cœur réagit tout de suite, puis le serveur confirme.
Où : Sous le titre de chaque projet, et au bas de chaque carte
04 · Compétences et parcours
Rien n'est listé sans preuve : chaque technologie renvoie aux projets et aux stages où elle a servi.
Les technologies principales sont des étoiles, reliées quand un projet les utilise ensemble. Un clic sur l'une d'elles filtre la galerie de projets.
À quoi elle sert, qui l'a créée, et surtout dans quels projets et quels stages je l'ai utilisée. Les fiches se parcourent aux flèches.
Où : Un clic sur n'importe quelle technologie des compétences
Le calendrier des contributions de l'année et la répartition des langages, lus sur GitHub et dessinés sur un seul canevas.
Où : Sous la constellation
Chaque stage ouvre sa page : la mission, ce qui a été livré, les technologies, et une présentation de l'entreprise avec ses sources.
Où : Section « Expérience »
05 · Deux langues, un contact simple
Le site se lit en français comme en anglais, et la carte de contact tient dans un téléphone.
Tout le site change de langue à la volée, l'adresse suit, et chaque langue est référencée séparément par les moteurs de recherche.
Où : Bouton FR / EN de la barre du haut
Un QR code à scanner ou un bouton pour m'ajouter directement à vos contacts, la copie de l'e-mail en un clic et un formulaire pour écrire sans quitter la page.
Où : Section « Contact », en bas de l'accueil
06 · Sur tous les écrans
Ce n'est pas la version ordinateur rétrécie : sur téléphone, l'assistant devient un panneau qui monte du bas, la galerie se fait glisser au doigt, les réglages du logo tiennent dans un bouton et la console occupe tout l'écran.
Sur téléphone
07 · En coulisses
Derrière le site, un espace réservé me montre ce que les visiteurs regardent : visites, projets les plus vus, provenance, appareils. Les captures ci-dessous viennent de ce tableau de bord, avec ses vrais chiffres.
Accès privé, protégé par mot de passe
Anonyme par conception
Aucun cookie, aucune adresse IP conservée : seulement des compteurs par jour.
Fait maison
Les mesures, les graphiques et l'export sont développés dans le site, sans outil de suivi tiers.
Utile pour décider
Savoir quels projets attirent le plus aide à choisir ce qu'il faut mettre en avant.
08 · Son histoire
De la première identité visuelle à cette page, les grandes étapes du site.
09 · Sous le capot
Tests automatiques
Un robot ouvre le site dans un vrai navigateur et vérifie les parcours essentiels à chaque modification.
Référencement soigné
Adresses propres par langue, plan du site, données structurées et image de partage générée pour chaque projet.
Navigation au clavier
Palette, console, pages et fiches se pilotent sans souris, avec Échap pour refermer.
Sécurité par défaut
En-têtes de protection sur toutes les pages, limites de débit, et aucune donnée personnelle stockée.
Une 3D qui se ménage
La scène ajuste sa finesse à l'appareil et se met au repos dès qu'elle n'est plus visible.
Un contenu facile à faire vivre
Ajouter un projet, c'est compléter un fichier : la galerie, l'assistant et la console suivent.
En chiffres
0
langues, chacune avec ses propres adresses
0
commandes dans la console intégrée
0
matières pour le logo 3D
0
pages de projets et de stages
Étude de cas
Un portfolio ressemble souvent à un CV mis en page. Je voulais l'inverse : un site que l'on explore, où l'on peut poser une question, ouvrir une console ou changer la matière du logo, tout en restant simple à lire pour quelqu'un qui n'a que deux minutes.
Interface
Serveur
Données
Services reliés
Interface
Serveur
Données
Services reliés
01
Un contenu, plusieurs portes d'entrée
Les projets, les stages et les compétences vivent dans un seul fichier par langue. La galerie, l'assistant IA, la console et la palette de commandes lisent tous la même source : ajouter un projet le rend disponible partout.
02
Un assistant qui ne sait que ce que dit le site
L'assistant répond uniquement à partir du contenu du portfolio, cite les projets sous forme de liens cliquables et écrit sa réponse mot à mot, comme une vraie conversation.
03
Une 3D qui s'adapte à l'appareil
La scène ajuste seule sa finesse à la puissance de la machine, se met au repos quand une page la recouvre, et un bouton permet de calmer toutes les animations d'ambiance.
04
Des statistiques respectueuses
Les visites sont comptées de façon anonyme, sans cookie ni adresse IP conservée, et consultées depuis un tableau de bord privé.
Captures d'écran (12)
Un mot sur ce projetUn mot sur ce projet
Une question, un avis, une idée ?
Écrivez-moi directement d'ici. Votre message n'est pas publié : je suis le seul à le lire.
Privé : jamais affiché sur le site