بناء موقع شركتك تحدي مختلف. مفيش بريف من عميل تمشي عليه. مفيش ديدلاين خارجي يفرض قرارات. كل اختيار بتاعك — يعني كل اختيار لازم يكون مقصود.

هنا كيف بنينا itqanlab.com، وليه اخدنا القرارات دي.

البداية بالاسم

الاسم جه قبل أي حاجة تانية. كنا عايزين حاجة:

  1. ليها معنى بالعربي — إحنا في القاهرة، والهوية العربية مهمة
  2. بتشتغل دوليًا — سهلة النطق وبتتحفظ للمتحدثين بالإنجليزية
  3. بتعكس قيمنا — مش بس إيه بنعمل، لكن إزاي بنعمله

"إتقان" كلمة عربية معناها التمكّن، الدقة، التميّز في الصنعة. كلمة ليها جذور عميقة في الثقافة العربية — فكرة إن الشغل لازم يتعمل بأعلى جودة ممكنة. "Lab" بتضيف البُعد التجريبي والتقني.

مع بعض: استوديو الإتقان بيقابل التجريب.

تصميم الهوية البصرية

نظام الألوان

أغلب وكالات التكنولوجيا بتروح للأزرق. آمن، بيوصّل ثقة، وبيتنسي. إحنا رحنا لـ الكهرماني (#d97706) كلون أساسي — دافي، واثق، ومستحيل يتلخبط مع المنافسين.

لكن ما وقفناش عند لون واحد. بنينا نظام ثيمات متعدد بخمس خيارات:

  • كهرماني (افتراضي) — دافي، واثق
  • أزرق — كلاسيكي، تقني
  • وردي — جريء، مميز
  • زمردي — منعش، نمو
  • بنفسجي — إبداعي، فاخر

الزوار يقدروا يغيّروا الثيم بحرية. تفاعل صغير بيوصّل حاجة مهمة: إحنا بنهتم بالتفاصيل، وبنبني حاجات أبعد من الحد الأدنى.

اختيارات الخطوط

اختيار الخط بيكشف قد إيه الفريق بيفكر في التصميم:

  • Outfit للعناوين — خط هندسي بدون حواف بشخصية. حديث من غير ما يبقى بارد.
  • Inter للنص الأساسي — المعيار في قراءة الشاشات. ما حاولناش نبقى أذكياء هنا؛ Inter بيشتغل وخلاص.
  • JetBrains Mono للأكواد — لأن لو هتعرض كود، لازم يبان كود.
  • IBM Plex Sans Arabic للنص العربي — مصمم خصيصًا للعربي على الشاشات. مش خط عربي متضاف كفكرة لاحقة — خط مبني لغرض محدد.

أربع خطوط بتبان كتير. لكن كل واحد ليه دور مختلف، وعمرهم ما بيتنافسوا مع بعض.

اختيار الـ Tech Stack

ليه Astro (ومش Next.js)

ده موقع تسويقي. محتاج يبقى سريع، صديق لمحركات البحث، وسهل الصيانة. مش محتاج:

  • Server-side rendering
  • API routes
  • حالة معقدة على الـ client
  • React runtime

Astro 5 بيدينا بالظبط اللي محتاجينه: مخرجات HTML ثابتة بصفر JavaScript افتراضيًا. المكونات بتترندر وقت البناء وبتتبعت كـ HTML عادي. لما نحتاج تفاعل (هيرو الـ Three.js، مبدّل الثيم)، بنضيفه جراحيًا — بس السكريبتات اللي الصفحة محتاجاها.

النتيجة: صفحات بتحمّل في ملي ثانية، درجات Lighthouse مثالية، وكود بسيط ومفهوم.

لو ده كان تطبيق ويب بمصادقة، ميزات لحظية، أو تفاعلات معقدة، كنا هنختار Next.js. لكن لموقع تسويقي، Astro هي الأداة الصح. كتبنا عن طريقة التفكير دي في إزاي تختار الـ Tech Stack المناسب.

باقي الـ Stack

  • HTML/CSS — لا Tailwind، لا CSS-in-JS. مجرد CSS custom properties منظمة و scoped styles. لموقع بالحجم ده، ده كل اللي محتاجه.
  • Vanilla JavaScript — لمبدّل اللغة، مبدّل الثيم، وأنيميشن السكرول. لا framework overhead لتفاعلات بسيطة في جوهرها.
  • Three.js — لهيرو الصفحة الرئيسية. بيتحمّل بشكل غير متزامن، مش بيعطّل الرندر.
  • GSAP — لأنيميشن السكرول. خفيف، كفء، ومُجرّب.

البنية التحتية

  • Dokploy (self-hosted) — تحكم كامل في خط النشر
  • GitHub auto-deploy — ادفع لـ main، الموقع بيتحدث تلقائيًا
  • Cloudflare — CDN وDNS وSSL. البروكسي مفعّل مع وضع Full SSL
  • Nixpacks — بيتعامل مع البناء بدون تعقيدات إعداد Docker

التكلفة الشهرية للاستضافة: عمليًا صفر غير الـ VPS اللي شغالين عليه أصلاً.

بناء الدعم ثنائي اللغة

ده كان من أمتع التحديات الهندسية. الموقع كان محتاج يدعم الإنجليزية والعربية مع:

  • تبديل لغة فوري — بدون إعادة تحميل الصفحة
  • تخطيط RTL كامل — مش بس اتجاه النص، لكن تخطيطات معكوسة
  • عربي بيبان طبيعي — مش مترجم، لكن مكتوب
  • كشف لغة النظام — كشف لغة المتصفح في أول زيارة

إزاي بيشتغل

كل عنصر قابل للترجمة بياخد خاصية data-i18n. موديول JavaScript واحد (i18n.js) فيه كل الترجمات في كائن بمفاتيح en وar. لما اللغة بتتبدل:

  1. كل عناصر data-i18n بتاخد النص المترجم
  2. عنصر <html> بياخد dir="rtl" (أو يرجع لـ ltr)
  3. التفضيل بيتحفظ في localStorage
  4. في أول زيارة، النظام بيكشف لغة المتصفح

المحتوى العربي مش ممرّر من Google Translate. كل نص اتكتب عشان يبان طبيعي بالعربي — قواعد سليمة، سياق ثقافي، ونبرة مناسبة. لما تقرأ النسخة العربية، المفروض تحس إن الموقع اتبنى عربي أولاً.

التعامل مع RTL

CSS custom properties و logical properties (زي margin-inline-start بدل margin-left) بتتعامل مع أغلب تخطيط RTL تلقائيًا. للحالات الخاصة زي أنيميشن الهيرو وتخطيطات الشبكة المحددة، بنستخدم سيلكتورات [dir="rtl"].

SEO من اليوم الأول

ما ركّبناش الـ SEO بعد الإطلاق. اتبنى في المعمارية من البداية:

البيانات المنظمة

كل نوع صفحة ليه JSON-LD schema خاص:

  • الصفحة الرئيسية: Organization + WebSite + FAQPage
  • مقالات المدونة: BlogPosting بالكاتب والناشر والتواريخ
  • المشاريع: CreativeWork بالمبتكر والصناعة والكلمات المفتاحية
  • صفحات الخدمات: Service بالمقدم والمنطقة المخدومة

ده مش بس لجوجل. البيانات المنظمة بتساعد أنظمة الذكاء الاصطناعي (ChatGPT، Perplexity، Google AI Overviews) تفهم وتستشهد بمحتواك صح.

Meta و Open Graph

كل صفحة ليها:

  • عنوان ووصف فريد (مش قوالب مولّدة تلقائيًا)
  • صورة Open Graph (SVG مخصص متحول لـ PNG)
  • رابط Canonical
  • بدائل Hreflang للغتين

الأداء كـ SEO

Core Web Vitals بتاعة جوجل بتأثر مباشرة على الترتيب. باختيار مخرجات Astro الثابتة بصفر JavaScript افتراضي، بنبدأ بميزة ضخمة:

  • LCP (Largest Contentful Paint): سريع، لأن مفيش framework hydration
  • CLS (Cumulative Layout Shift): أقل حاجة، لأن الخطوط محمّلة مسبقًا والصور ليها أبعاد
  • INP (Interaction to Next Paint): ممتاز، لأن التفاعلات vanilla JS خفيفة

التفاصيل التفاعلية

موقع تسويقي محتاج شخصية. القوالب بتبان قوالب لأنها بتفتقر التفاصيل المقصودة. هنا اللي ضفناه:

هيرو Three.js بالجسيمات

هيرو الصفحة الرئيسية مش صورة ثابتة أو تدرج لوني. ده حقل جسيمات 3D تفاعلي بيستجيب لحركة الماوس. بيتحمّل بشكل غير متزامن — الصفحة بتترندر فورًا، والكانفاس بيتهيّأ بعدها.

مؤشر مخصص

مؤشر نقطة + حلقة بيكبر لما يمر على عناصر تفاعلية. خفيف، لكن بيخلي الموقع يحسّسك إنه مصنوع يدويًا.

شريط تقدم السكرول

شريط تقدم رفيع أعلى نافذة العرض. مفيد في الصفحات الطويلة، وبيضيف إحساس بالزخم.

حفظ الثيم

لما تختار ثيم، بيتحفظ عبر الجلسات من خلال localStorage. ارجع بكره، وهيفتكر تفضيلك.

معمارية المحتوى

مقالات المدونة ودراسات حالة المشاريع هي ملفات Markdown مدارة من خلال Astro Content Collections. كل واحدة ليها schema معروف بـ TypeScript:

src/content/
  blog/
    building-itqanlab.md    ← بتقرأ ده
    choosing-tech-stack.md
    ...
  projects/
    itqanlab.md
    searchcraft.md
    ...

لا CMS. لا قاعدة بيانات. لا API. مجرد ملفات Markdown في Git repo. إضافة مقال جديد يعني إنشاء ملف بالـ frontmatter الصح والدفع لـ main.

للمشاريع، بندعم محتوى ثنائي اللغة: النص الإنجليزي هو Markdown عادي، والنص العربي هو HTML في حقل body_ar في الـ frontmatter. الاتنين بيترندروا على نفس الصفحة وبيتبدلوا مع مبدّل اللغة.

إيه اللي اتعلمناه

1. ابني موقعك زي مشروع عميل

مغري تقصّر في شغلك. ما تعملش كده. موقعك هو أول حاجة العملاء المحتملين بيشوفوها. لو حاسس إنه متسرّع أو قالب، ده اللي هيتوقعوه من الشغل معاك.

2. ثنائي اللغة أصعب مما يبان

دعم RTL مش بس direction: rtl. ده تخطيطات معكوسة، تكييف ثقافي للنصوص، اختيار خطوط بتشتغل للنظامين، واختبار كل مكون في الاتجاهين. حطّله وقت حقيقي.

3. الأداء ميزة

صفر JavaScript افتراضي مع تحميل سكريبتات جراحي مش بس اختيار تقني — ده اختيار بيزنس. المواقع السريعة بتحوّل أحسن، بتترتب أعلى، وبتحسّسك بالاحترافية.

4. الـ SEO معمارية، مش فكرة لاحقة

البيانات المنظمة، HTML الدلالي، علامات meta السليمة — دول لازم يبقوا في قوالب المكونات من اليوم الأول، مش يتركّبوا قبل الإطلاق.

5. التفاصيل بتتراكم

المؤشر المخصص، مبدّل الثيم، هيرو الجسيمات، شريط تقدم السكرول — كل واحد لوحده صغير. مع بعض، بيخلقوا الإحساس إن كل بكسل اتدرس. الإحساس ده هو اللي بيفصل الحِرَفية عن السلعة.

ده نوع الشغل اللي بنعمله لعملائنا. لو عايز موقع مبني بالمستوى ده من القصدية، كلّمنا.

مقالات متعلقة: شوف دراسة حالة مشروع إتقان لاب الكاملة واعرف عن نهجنا في الهوية البصرية وتطوير الويب.