انتقل للمحتوى
علي هيثم·TECH·يردّ خلال أقل من ساعة
  • الرئيسيةابدأ من هنا
  • الأعمالدراسات حالة، مشاريع
  • الخدماتما الذي سأبنيه لك
  • المدونةمقالات، سلاسل
  • التدريبدورات، مختبرات، دورات
  • عنّيالمهندس وراء هذا الموقع
تسجيل الدخولابدأ مشروع
علي هيثم · TECH
  • الرئيسية↗
  • الأعمال↗
  • الخدمات↗
  • المدونة↗
  • التدريب↗
  • عنّي↗
تسجيل الدخولابدأ مشروع
متاح
علي هيثم·TECH

استوديو هندسي. دمشق، GMT+3.

aliyosef.online

الاستوديو

  • الأعمال
  • المدونة
  • التدريب
  • عنّي
  • تواصل معي

البوابة

  • تسجيل الدخول
  • فتح تذكرة دعم
  • متابعة مشروع
  • حسابي

مصادر

  • الوثائق
  • حالة الأنظمة
  • سجلّ التغييرات
  • حزمة العلامة
  • الخصوصية
  • الشروط

النشرة

ملاحظات تقنية وأخبار، أسبوعياً. بدون حشو.

مجاني. إلغاء الاشتراك متى ما حبيت.

تابعني على
© 2026 علي هيثم يوسف. جميع الحقوق محفوظة.مبنيّ يدويًا بـ React 19.آخر نشر · 2026-05-08كل الأنظمة تعمل
مشروع 112024–2025مصمّم ومطوّر

علي عوموم

موقع شخصيّ للمدير التنفيذيّ لشركة CyberV. تنسيق تحريريّ ثنائيّ اللغة، خلفيّة Laravel، مصمّم للمقالات وحجوزات المحاضرات لا لسرد سيرة ذاتيّة.

الدورمصمّم ومطوّر
السنة2024–2025
التقنياتLaravel, Tailwind, Alpine.js
مباشرaliomuom.cyberv.tech↗
نظرة

عن المشروع.

موقع شخصيّ للمدير التنفيذيّ لشركة CyberV، صُمّم ليُقرأ كموقع كاتب ناشر لا كصفحة سيرة ذاتيّة. النظام خلفيّة Laravel بتنسيق تحريريّ ثنائيّ اللغة، مهيّأ للمقالات المطوّلة وحجوزات المحاضرات. صمّمت الموقع وبنيته من ألفه إلى يائه، مع انتباه دقيق للتنضيد العربيّ، وإيقاع القراءة، وكيف تحمل صورة غلاف كلّ مقال الثقل البصريّ للصفحة الرئيسيّة.

التحدّي

ما الذي وجدناه.

الرئيس التنفيذيّ لـCyberV احتاج موقعًا شخصيًّا يُقرأ كمقاليّ منشور، لا كسيرة ذاتيّة — تخطيط تحريريّ ثنائيّ، حجوزات مهامّ، كتابة مطوّلة كمركز ثقل.

المقاربة

ما الذي فعلناه.

باك-إند Laravel + تخطيط تحريريّ ثنائيّ. مصمّم للمقالات المكتوبة أوّلًا، حجوزات المهامّ ثانيًا، صفحة «عنّي» ثالثًا. الطباعة العربيّة موزونة بنفس عناية الإنجليزيّة.

النتيجة

ما الذي أصبح.

سطح مقالة شخصيّ يُقرأ كعمود مجلّة. استفسارات المهامّ توجَّه عبر نموذج مهيكل.

القطاععلامة شخصيّة تنفيذيّة
النوعموقع شخصيّ تحريريّ
المدّةشهران
الفريقمنفرد · مصمّم + مطوّر
المُلكيّة

دوري الفعليّ في هذا المشروع.

منفرد · 100٪ — تصميم + باك-إند Laravel + تخطيط تحريريّ ثنائيّ + نموذج حجوزات مهامّ. زوّد العميل المقالات + الاتّجاه؛ كلّ شيء آخر لي.

  • 01

    مصمّم (تحريريّ)

    إيقاع قراءة عمود مجلّة. طباعة عربيّة + لاتينيّة مقترنة بعناية. صور أغطية المقالات تحمل الوزن البصريّ للصفحة الرئيسيّة.

  • 02

    مهندس باك-إند (Laravel)

    نموذج مقالة ثنائيّ، تدفّق مسوّدة → نشر، خطّ صور غلاف، صندوق حجوزات مهامّ.

  • 03

    مهندس أداء

    طباعة قراءة بدرجة تحريريّة ثقيلة على وزن الخطوط؛ تقطيع web-font أبقى أوّل رسم دون ثانية.

في الإنتاج

الأرقام التي تهمّ.

  • مقالاتنوع المحتوى المركزيّلا «منشورات مدوّنة» — مقالات. إيقاع قراءة مختلف، بيانات وصفيّة مختلفة، عرض مختلف.
  • ثنائيّتكافؤ ar/enكلّ مقالة يمكن نشرها بأيّ لغة أو كلتيهما؛ لا تُترجم آليًّا أبدًا.
  • <1sأوّل رسممجموعة فرعيّة من web-font (لاتينيّ فقط) + سلسلة احتياط عربيّ؛ صورة بطل lazy-loaded.
  • مهيكلحجوزات مهامّالنموذج يلتقط تاريخ الحدث، حجم الجمهور، الموضوع؛ يوجَّه إلى صندوق المساعد.
لماذا كانت هذه المهمّة صعبة

ما الذي كان معطّلاً فعلاً.

معظم مواقع الرؤساء التنفيذيّين سير ذاتيّة استعراضيّة — زخرفة، قوائم جوائز، معارض صور. الرئيس التنفيذيّ لـCyberV يكتب جدّيًّا عن القيادة والهندسة، وأراد موقعًا يحترم ذلك. المطلوب موقع، حين يهبط عليه أحد، يجعله يريد أن يقرأ — لا أن يمرّر ليجد زرّ «اتّصل».

التحدّيات الهندسيّة

المساحة الصعبة من المشروع.

  • 01طباعة تحريريّة تمسك الانتباه عبر مقالات 1500 كلمة في كلتا العربيّة والإنجليزيّة.
  • 02انضباط صورة غلاف — كلّ مقالة لها واحدة، وهي تحمل الوزن البصريّ للصفحة الرئيسيّة.
  • 03نموذج حجوزات مهامّ يلتقط الحقول المهيكلة المطلوبة (تاريخ، جمهور، موضوع) دون أن يشعر معاملاتيًّا.
مشاكل صعبة محلولة

انتصارات هندسيّة تستحقّ التسمية.

01

إيقاع قراءة ثنائيّ

نصّ الجسم العربيّ يحتاج line-height +1.85؛ اللاتينيّ يحتاج 1.55. صمّمت إعدادي إيقاع قراءة، يُبدَّلان حسب اللغة، يشاركان نفس شبكة المقالة.

02

وزن صورة الغلاف

كلّ غلاف مقالة بطل على الرئيسيّة عند تمييزه. نسبة مصوّر مهنيّ (3:2)، srcset لـretina، blur-up placeholder للاتّصالات البطيئة.

البنية المعماريّة

كيف يتشابك النظام.

01 — الحافّة

طبقة الحافّة

CloudflareCDN · DNSحافّات عالميّة
02 — التطبيق

طبقة التطبيق

Laravel 11PHP 8.3 · Bladeنموذج مقالة، نموذج حجوزات مهامّ، سطح محرّر
فرونت Tailwindطباعة تحريريّةإيقاع قراءة بدرجة مجلّة؛ ازدواج serif + sans
03 — البيانات

طبقة البيانات

MySQL 8DB واحدةمقالات، حجوزات، كتل محتوى
لماذا هذه التقنيّات

القرارات وراء كلّ اختيار.

Laravel عوضًا عن CMS headless

  • موقع مقالات لمؤلّف واحد لا يحتاج خدمة CMS منفصلة. Laravel + مدير Filament كافٍ.
  • سطح المحرّر يبقى على نفس نطاق الموقع العلنيّ، بنفس تسجيل الدخول.

طباعة تحريريّة عوضًا عن Tailwind عامّ

  • مقياس Tailwind العامّ مناسب لـSaaS. لموقع كتابة، يحتاج المقياس ضبطًا يدويًّا لكلّ لغة.
  • نصّ الجسم العربيّ هو مشكلة تصميم بحدّ ذاتها بإجاباتها الخاصّة.
الدروس المستفادة

ما علّمنا إيّاه هذا البناء.

  • حين يكون المحتوى هو المنتج، الطباعة هي المنتج. اقضِ الوقت.
  • الثنائيّة ليست «ترجمة السلاسل». بل نظاما إيقاع قراءة يتقاسمان شبكة واحدة.
صور

من داخل المشروع.

تابع القراءة
الحالة السابقةأدوارالحالة التاليةأصل للتقييم العقاريّ
لنبنِ معًا

تريد شيئًا مماثلًا؟

أتلقّى عددًا محدودًا من الالتزامات كلّ ربع. حدّثني عمّا تفكّر فيه.

لنبدأ الحديث→