«Luego lo traducimos al árabe» parece inocente hasta descubrir que ese «luego» exige reordenar el menú, revisar espacios y entender por qué el teléfono se comporta como un ser vivo independiente.
Versión árabe: instantánea guardada del 2 de septiembre de 2026. Permite comparar dirección y disposición con la interfaz inglesa de arriba.
En Connection.me el inglés, ruso y árabe forman parte de la estructura. Inglés en la raíz, ruso en /ru y árabe en /ar. Las páginas tienen direcciones definidas y vínculos entre idiomas. El selector debe llevar a la equivalente, no devolver siempre al visitante al principio.
La pantalla «Connection Middle East — primera pantalla» conserva contenido y diseño reales.
Connection Middle East — primera pantalla
Interfaz archivada · datos de demostración
Dónde necesita React el sitio
La base es Astro con páginas listas. React se usa en zonas interactivas: cabecera, pestañas y formulario. Un artículo de servicio no tiene que convertirse entero en aplicación solo porque haya un botón al lado.
La pantalla «Connection Middle East — sección interna» conserva contenido y diseño reales.
Connection Middle East — sección interna
Interfaz archivada · datos de demostración
El contenido se edita con Pages CMS sobre Git, sin tocar el marcado. Para el dueño del negocio suele ser más importante que el nombre de una biblioteca, aunque enumerarlas en un caso técnico resulte por alguna razón más agradable.
La solicitud va a un procesador independiente en Cloudflare Worker. Mostrar el formulario y recibir una consulta son responsabilidades distintas. Hay que validar campos en servidor, devolver errores claros y determinar el éxito por la respuesta, no por lo bonito del botón pulsado.
Connection Middle East — sección de contacto
Interfaz archivada · datos de demostración
Tres idiomas multiplican los detalles
Un título ruso largo pone a prueba la altura de la tarjeta; el árabe, la dirección y las líneas mixtas; un botón traducido, el ancho móvil. canonical y los enlaces de idiomas deben corresponder a direcciones reales, no a una lista abstracta.
Me interesa crear sitios para negocios entre varios idiomas. El desarrollador se encuentra con problemas de diseñador, y el diseñador con lógica de servidor. Si se trabaja bien, el visitante ni nota cuántas profesiones hicieron falta para enviar tranquilamente una solicitud.
Alcance del proyecto
Connection Middle East debía conectar varios servicios e información sobre doce jurisdicciones. Por eso se diseñaron juntos la estructura, los tres idiomas, el contenido SEO y las consultas.
Usé Astro, componentes React interactivos separados, TypeScript y Tailwind. Pages CMS y GitHub gestionan contenido, Cloudflare Workers consultas y Resend correos. La mayoría de páginas se sirve en HTML listo.
Con herramientas AI recorrí todo el proceso: estructura de producto, UX, implementación, SEO y alojamiento. Abajo hay una pantalla guardada del proyecto en mi portfolio.
En Connection.me trabajé desde estructura y UX hasta implementación y alojamiento. Tres idiomas exigieron revisar orden, etiquetas largas y direcciones mixtas. Las pantallas inglesas muestran una versión guardada; el ejemplo árabe separado explica visualmente RTL.
Pantallas y grabaciones del proyecto
Historias relacionadas: Shuklina Consulting · El sitio de Modern Medicine.
@nevsky_alexander
En Instagram, Dubái más allá de la postal: familia, ciudad, descubrimientos y la vida entre proyectos. En Threads, ideas en voz alta sobre diseño e IA. En YouTube, vídeos que necesitan más espacio que una historia. Sígueme donde te sientas más a gusto y seguimos en contacto