Фраза «потом переведём на арабский» звучит безобидно, пока не выясняется, что «потом» нужно переставить меню, пересмотреть отступы и разобраться, почему номер телефона ведёт себя как самостоятельное живое существо.
Арабская версия: сохранённый снимок от 2 сентября 2026 года. Здесь можно сравнить направление текста и расположение элементов с английским интерфейсом выше.
В Connection.me английская, русская и арабская версии заложены в структуру сайта. Английский находится в корне, русский — в /ru, арабский — в /ar. У страниц есть определённые адреса и связи между языками. Переключатель должен вести к соответствующей странице, а не каждый раз возвращать посетителя к началу знакомства.
На экране «Connection Middle East — первый экран» сохранены настоящие материалы и оформление проекта.
Connection Middle East — первый экран
Архивный интерфейс · демонстрационные данные
Где сайту нужен React
Основа — Astro с готовыми страницами. React используется отдельными интерактивными участками: шапкой, вкладками, формой обращения. Статья об услуге не обязана становиться приложением целиком только потому, что рядом есть кнопка.
На экране «Connection Middle East — внутренний раздел» сохранены настоящие материалы и оформление проекта.
Connection Middle East — внутренний раздел
Архивный интерфейс · демонстрационные данные
Содержимое редактируется через Pages CMS поверх Git. Это позволяет менять согласованные тексты без правки разметки. Для владельца бизнеса такая возможность обычно важнее названия библиотеки, хотя в техническом кейсе библиотеки перечислять почему-то приятнее.
Заявка уходит в отдельный обработчик Cloudflare Worker. Здесь проходит полезная граница: показать форму и принять обращение — две разные обязанности. Поля нужно проверить на сервере, ошибки вернуть понятным способом, а отправку считать успешной по ответу обработчика, не по красоте нажатой кнопки.
Connection Middle East — контактный раздел
Архивный интерфейс · демонстрационные данные
Три языка умножают мелочи
Длинный русский заголовок проверяет высоту карточки. Арабский — направление и смешанные строки. Переведённая подпись кнопки — ширину мобильного экрана. canonical и языковые ссылки должны соответствовать реальным адресам, а не абстрактному списку доступных языков.
Мне интересно делать сайты для бизнеса, который существует между языками. Здесь разработчик сталкивается с задачами дизайнера, а дизайнер — с серверной логикой. И если работа сделана нормально, посетителю вообще не придётся замечать, сколько профессий понадобилось, чтобы он спокойно отправил одну заявку.
Масштаб проекта
В Connection Middle East нужно было связать несколько направлений услуг и информацию о двенадцати юрисдикциях. Поэтому структура страниц, три языка, SEO-контент и обработка обращений проектировались вместе.
В реализации я использовал Astro, отдельные интерактивные компоненты React, TypeScript и Tailwind. Pages CMS и GitHub отвечают за контент, Cloudflare Workers — за заявки, Resend — за доставку писем. Большинство страниц выдаётся готовым HTML.
Я прошёл с AI-инструментами весь путь: от структуры продукта и UX до реализации, организации SEO и размещения сайта. Ниже — сохранённый экран проекта из моего портфолио.
В Connection.me я прошёл путь от структуры и UX до реализации и размещения. Три языка потребовали проверки порядка элементов, длинных подписей и смешения направлений текста. Английские экраны показывают сохранённую версию проекта; отдельный арабский пример нужен для наглядного разбора RTL.
Посмотреть Connection Middle East.
Экраны и записи проекта
Связанные истории: Shuklina Consulting · Сайт Modern Medicine.
@nevsky_alexander
В Instagram — Дубай без парадного фасада: семья, город, находки и то, что происходит между проектами. В Threads — мысли вслух о дизайне и AI, на YouTube — видео, которым тесно в сторис. Подписывайтесь там, где вам удобнее: будем на связи