“We’ll translate it into Arabic later” sounds harmless until “later” means rearranging the menu, rethinking spacing and figuring out why a phone number behaves like an independent living creature.
Arabic version: a saved snapshot from 2 September 2026. You can compare text direction and element placement with the English interface above.
Connection.me builds English, Russian and Arabic into its structure. English is at the root, Russian under /ru and Arabic under /ar. Pages have defined URLs and relationships across languages. The switch must lead to the corresponding page, not send visitors back to the beginning every time.
The “Connection Middle East — first screen” view preserves the project’s real material and design.
Connection Middle East — first screen
Archived interface · demo data
Where the website needs React
The foundation is Astro with ready-made pages. React is used in separate interactive areas: the header, tabs and enquiry form. An article about a service does not need to become an entire application just because there is a button beside it.
The “Connection Middle East — internal section” view preserves the project’s real material and design.
Connection Middle East — internal section
Archived interface · demo data
Content is edited through Pages CMS on top of Git. This lets approved copy change without editing markup. To a business owner, that is usually more important than a library’s name, although listing libraries in a technical case somehow feels more enjoyable.
An enquiry goes to a separate Cloudflare Worker handler. This is a useful boundary: displaying a form and receiving an enquiry are different responsibilities. Fields need server-side validation, errors need clear responses and success is determined by the handler’s reply, not the appearance of a pressed button.
Connection Middle East — contact section
Archived interface · demo data
Three languages multiply the details
A long Russian heading tests card height. Arabic tests direction and mixed-script lines. A translated button label tests mobile width. canonical and language links must match real URLs, not an abstract list of available languages.
I enjoy building websites for businesses that exist between languages. Developers encounter design problems, and designers meet server logic. Done properly, visitors never have to notice how many professions were needed for them to send one enquiry calmly.
Project scope
Connection Middle East needed to connect several service areas and information about twelve jurisdictions. Page structure, three languages, SEO content and enquiry handling were therefore designed together.
I used Astro, separate interactive React components, TypeScript and Tailwind. Pages CMS and GitHub manage content, Cloudflare Workers handles enquiries and Resend delivers email. Most pages are served as ready HTML.
With AI tools I covered the whole path, from product structure and UX to implementation, SEO organisation and hosting. Below is a saved project screen from my portfolio.
In Connection.me I worked from structure and UX through implementation and hosting. Three languages required checks of element order, long labels and mixed text directions. The English screens show a saved version; a separate Arabic example provides a visual explanation of RTL.
Project screens and recordings
Related stories: Shuklina Consulting · The Modern Medicine website.
@nevsky_alexander
On Instagram: Dubai beyond the postcard — family, the city, discoveries and life between projects. On Threads: thinking out loud about design and AI. On YouTube: videos that need more room than a story. Follow me wherever you feel at home, and let’s keep in touch