« On traduira en arabe plus tard » semble anodin, jusqu’à ce qu’on découvre que « plus tard » signifie déplacer le menu, revoir les espacements et comprendre pourquoi le numéro de téléphone vit sa propre vie.
Version arabe : instantané conservé du 2 septembre 2026. On peut comparer le sens du texte et la disposition avec l’interface anglaise ci-dessus.
Dans Connection.me, l’anglais, le russe et l’arabe font partie de la structure. L’anglais est à la racine, le russe dans /ru et l’arabe dans /ar. Les pages ont des adresses définies et des liens entre langues. Le sélecteur doit ouvrir la page correspondante, pas recommencer chaque visite depuis le début.
L’écran « Connection Middle East — premier écran » conserve les vrais contenus et le design du projet.
Connection Middle East — premier écran
Interface archivée · données de démonstration
Là où le site a besoin de React
La base est Astro et ses pages prêtes à lire. React sert aux zones interactives : en-tête, onglets, formulaire. Un article sur un service n’a pas à devenir une application entière parce qu’il y a un bouton à côté.
L’écran « Connection Middle East — rubrique intérieure » conserve les vrais contenus et le design du projet.
Connection Middle East — rubrique intérieure
Interface archivée · données de démonstration
Le contenu se modifie via Pages CMS sur Git, sans toucher au balisage. Pour un dirigeant, c’est souvent plus important que le nom d’une bibliothèque, même si les énumérer dans un cas technique semble étrangement plus plaisant.
La demande part vers un gestionnaire Cloudflare Worker distinct. Frontière utile : afficher le formulaire et recevoir la demande sont deux responsabilités. Il faut valider côté serveur, rendre les erreurs compréhensibles et juger la réussite selon la réponse du gestionnaire, pas la beauté du bouton.
Connection Middle East — rubrique contact
Interface archivée · données de démonstration
Trois langues multiplient les détails
Un long titre russe teste la hauteur d’une carte. L’arabe teste le sens et les lignes mixtes. Un bouton traduit teste la largeur mobile. canonical et les liens de langues doivent correspondre aux vraies adresses, pas à une liste abstraite de langues.
J’aime créer pour des entreprises qui vivent entre plusieurs langues. Le développeur rencontre les problèmes du designer, et le designer la logique serveur. Si le travail est bien fait, le visiteur ne remarque même pas combien de métiers ont permis l’envoi tranquille d’une seule demande.
L’ampleur du projet
Connection Middle East devait relier plusieurs services et des informations sur douze juridictions. Structure des pages, trois langues, contenu SEO et traitement des demandes ont donc été conçus ensemble.
J’ai utilisé Astro, des composants React interactifs distincts, TypeScript et Tailwind. Pages CMS et GitHub gèrent le contenu, Cloudflare Workers les demandes, Resend les emails. La plupart des pages sont servies en HTML prêt.
Avec les outils AI, j’ai suivi tout le parcours : structure produit, UX, réalisation, organisation du SEO et hébergement. Voici un écran du projet conservé dans mon portfolio.
Dans Connection.me, j’ai travaillé de la structure et de l’UX à la réalisation et à l’hébergement. Trois langues ont imposé des contrôles d’ordre, de libellés longs et de directions mêlées. Les écrans anglais montrent une version conservée ; l’exemple arabe permet d’expliquer concrètement le RTL.
Écrans et enregistrements du projet
À lire aussi : Shuklina Consulting · Le site de Modern Medicine.
@nevsky_alexander
Sur Instagram, Dubaï au-delà de la carte postale : la famille, la ville, les trouvailles et la vie entre deux projets. Sur Threads, des réflexions à voix haute sur le design et l’IA. Sur YouTube, des vidéos qui ont besoin de plus de place qu’une story. Retrouvez-moi là où vous vous sentez bien, et gardons le contact