Connection.me：阿拉伯语版本从翻译之前就开始

“以后再翻译成阿拉伯语”听起来无害，直到发现这个“以后”需要重排菜单、重新检查间距，并弄清电话号码为什么像个独立生命体一样不听话。

阿拉伯语版本：保存于2026年9月2日的快照。这里可以对比它与上方英语界面的文字方向和元素布局。

Connection.me 的英语、俄语和阿拉伯语版本从一开始就纳入网站结构。英语在根目录，俄语在 /ru，阿拉伯语在 /ar。每个页面有明确地址和语言关联。切换器应跳到对应页面，而不是每次都把访客带回最初的介绍页。

“Connection Middle East——首屏”保留了项目真实内容和设计。

Connection Middle East——首屏

归档界面 · 演示数据

网站哪里需要 React

基础是提供现成页面的 Astro。React 用于独立交互区域：页头、标签页、咨询表单。一篇服务文章不必因为旁边有个按钮，就整体变成应用。

“Connection Middle East——内页”保留了项目真实内容和设计。

Connection Middle East——内页

归档界面 · 演示数据

内容通过 Git 之上的 Pages CMS 编辑，可以不改标记就调整已确认文案。对企业主而言，这通常比库的名字更重要，尽管不知为何，技术案例里列库名更让人开心。

请求交给独立的 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 网站。