# هوية قتيبة محمد — مرجع الموقع

## الفكرة
تصفح مشاريعي وخبراتي واسلوبي وبصمتي. هذه الهوية ليست طبقة منفصلة عن الموقع؛ هي توثيق لما يظهر في الكود فعلا: وضوح تقني، هدوء بصري، وأعمال تتكلم بالدليل.

## الشعار
استخدم رمز Q الأخضر مع النقطة الذهبية كعلامة أساسية. تتوفر تشكيلتان مرنتان من الملفات المرفقة:
- النسخة الخضراء على خلفية بيضاء: `Asset 1@288x.webp`
- النسخة البيضاء على الخلفية الخضراء: `Asset 2@288x.webp`

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

## الألوان
- Forest Green `#1E5C3A`: اللون الأساسي والأفعال المهمة.
- Deep Green `#163F28`: الخلفيات الداكنة والنصوص العميقة.
- Warm Gold `#A8896A`: الإشارات، الأرقام، والحالات المميزة.
- Green Light `#E8F2EC`: الأسطح الهادئة والحالات النشطة.
- Off White `#F7F6F2`: خلفية الموقع.
- Surface `#FFFFFF`: البطاقات والنوافذ.
- Text `#183027`: النص الأساسي.

## الخطوط
Cairo للعربية والعناوين والنصوص، وInter للاتينية والأرقام والشيفرات. التزم بالخطوط المحملة في `app/layout.tsx` ولا تستبدلها بخط عام.

## الباترنز
شبكة المربعات هي النمط البصري المستخرج من هيرو الصفحة الرئيسية. استخدمها في الهيرو والمساحات الواسعة، بحجم شبكة `36px` وشفافية منخفضة. هي تضيف عمقا تقنيا هادئا ولا يجب أن توضع خلف نص صغير أو عنصر تفاعلي بطريقة تقلل الوضوح.

## المكونات والتأثيرات
الأزرار، الروابط، البطاقات، الشارات، النوافذ، التنقل، النماذج، معرض المشاريع، الإحصاءات، الجداول، وبطاقات المهارات. استخدم حدودا رقيقة، أسطحا بيضاء، ظلالا محدودة، و`backdrop-blur-md` للتنقل عند التمرير. الحركة بين `200–300ms`، مع `fade-in-up`، وتكبير صور المشاريع إلى `1.05`، واحترام `prefers-reduced-motion`.

## قاعدة الكتابة والبصمة
قتيبة مهندس برمجيات وممارس للذكاء الاصطناعي ومفكر منتج ومدرب مهارات رقمية. يشرح التقنية بوضوح، يعرض القيمة من خلال ما بنى وكيف فكر، ويكتب كخبير قريب وواثق دون مبالغة.

### الصفات الأساسية
- **واضح:** ابدأ بالفكرة، استخدم لغة بسيطة، واشرح المصطلح عندما يكون ضروريا.
- **مباشر:** ادخل إلى النقطة واحذف المقدمات الطويلة والحشو والعبارات العامة.
- **عملي:** اربط الكلام بمثال أو قرار أو مشروع أو نتيجة يمكن فهمها.
- **إنساني:** اكتب كخبير قريب يستمع ويشرح، لا كواجهة تقنية باردة.
- **واثق دون مبالغة:** دع الدليل يسبق الادعاء، ولا تعد بما لا يمكن إثباته.
- **فضولي ومتطور:** اعرض ما تعلمناه وما سنحسنه؛ البصمة تتطور مع كل تجربة.

### طريقة شرح المشروع
1. ابدأ بالمشكلة أو الحاجة.
2. اشرح ما تم بناؤه ولماذا.
3. أظهر القرارات والتحديات بصدق.
4. اختم بالنتيجة والتعلم والخطوة التالية.

لا تخترع خبرات أو عملاء أو أرقاما. اشرح لماذا اتخذت القرار، واجعل التقنية تخدم القصة لا تستبدلها.

### قائمة المراجعة قبل النشر
- هل الفكرة واضحة من أول قراءة؟
- هل يخدم كل سطر القارئ أو القصة؟
- هل يوجد دليل بدل الادعاء؟
- هل النبرة دافئة ومهنية بلا تصنع؟
- هل يمكن حذف شيء دون فقدان المعنى؟

## المبدأ الأساسي
**أظهر التفكير خلف العمل، لا العمل وحده.**

`Think → Understand → Design → Build → Learn → Improve`

## الملفات المرجعية
- `/brand/design.md`: شرح الهوية وقاعدة الكتابة.
- `/brand/tokens.json`: القيم القابلة للاستهلاك برمجيا.
- `/brand/manifest.json`: خريطة الاكتشاف والأصول.
- `/icon.svg`: الرمز المستخدم حاليا في الموقع.
- ملفات الشعار المرفقة: التشكيلة الخضراء والبيضاء.