تبدو عبارة «سنترجمه إلى العربية لاحقًا» بريئة، إلى أن يتّضح أن «لاحقًا» يعني إعادة ترتيب القائمة ومراجعة المسافات وفهم سبب تصرّف رقم الهاتف ككائن حي مستقل.
النسخة العربية: لقطة محفوظة بتاريخ 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، أفكار بصوت عالٍ عن التصميم والذكاء الاصطناعي. أما YouTube فللفيديوهات التي تحتاج مساحة أكبر من الستوري. تابعوني حيث يناسبكم، ولنبقَ على تواصل