I created a website to participate in a local competition and won first place

✨ نبذة عن المشروع

"قدوتي من بلدي" هي منصة تعليمية تفاعلية تهدف إلى إبراز النماذج الملهمة من محافظة سوهاج، وربط قصص نجاحهم بمسارات تعليمية عملية تساعد الشباب على السير في نفس الطريق.

الفكرة لا تعتمد فقط على عرض المحتوى، بل على تحويل الإلهام إلى خطة فعلية قابلة للتطبيق.

? هدف المشروع

تحويل قصص النجاح من مجرد إلهام إلى مسارات تعليمية واضحة

تمكين الشباب في المناطق محدودة الموارد

إنشاء بيئة تعليمية تفاعلية تعتمد على التجربة وليس التلقين

بناء مجتمع رقمي من "القدوات المحلية"

? الفكرة الأساسية (Core Concept)

بدلًا من:

“تعلم البرمجة”

نقدم:

“هذا أحمد من سوهاج تعلم البرمجة بهذه الطريقة… وهذه نفس الخطوات يمكنك اتباعها”

? الربط بين:

القصة الواقعية

المسار التعليمي

الأدوات

النتائج

?️ هيكل الموقع (Site Architecture)

1. ? الصفحة الرئيسية (Home)

Hero Section (Copywriting قوي)

عرض المجالات

اقتباسات محفزة

اختبار تفاعلي (من قدوتك؟)

CTA واضح

2. ? صفحة المجالات (Fields)

تقسيم حسب التخصص:

تطوير مواقع

ذكاء اصطناعي

تسويق رقمي

ريادة أعمال

كل مجال يحتوي على:

نماذج قدوات

مسارات تعليمية

3. ? صفحة القدوات (Role Models)

تصميم شبيه بمنصات الكورسات (Cards UI)

كل كارت يحتوي:

صورة

اسم

نبذة

عند الضغط → صفحة التفاصيل

4. ? صفحة "قدوة الشهر"

عرض تفصيلي:

صورة كبيرة

قصة كاملة (Storytelling)

إنجازات

رسالة تحفيزية

5. ? صفحة المساعد الذكي (AI Guide)

نموذج تفاعلي

يحدد المسار المناسب للمستخدم بناءً على:

الاهتمامات

المهارات

الهدف

يعرض توصيات تعليمية

6. ? صفحة "كن أنت القدوة"

نموذج إرسال:

القصة

الإنجازات

الروابط

لاختيار نماذج جديدة

7. ? صفحة التواصل (Contact)

نموذج تواصل

جاهز للربط مع Backend أو Google Forms

? التصميم (UI/UX)

? فلسفة التصميم:

Minimal + Inspirational

أبيض = نقاء + وضوح

ألوان مميزة لكل قسم (Visual Identity)

? نظام الألوان:

Primary: #FFFFFF

Secondary:

أزرق: #1D3557

بنفسجي: #9B5DE5

أخضر: #2A9D8F

ذهبي: #F4A261

⚙️ التقنيات المستخدمة (Tech Stack)

? Frontend:

HTML5 (Semantic Structure)

CSS3 (Flexbox + Grid + Animations)

JavaScript (DOM Manipulation + Interactivity)

✨ Libraries:

AOS (Animate On Scroll)

Google Fonts (Cairo)

? التفاعلات (Interactivity)

✅ Quiz: "من قدوتك؟"

✅ AI Suggestion Form

✅ Hover Effects على الكروت

✅ Scroll Animations

✅ Dynamic Content Rendering (JS)

? SEO Optimization

Meta Tags (Title, Description, Keywords)

Semantic HTML

Content Copywriting optimized

سرعة تحميل عالية (Lightweight)

✍️ Copywriting Strategy

استخدام لغة تحفيزية مباشرة

التركيز على:

الألم (عدم وجود فرص)

الحل (قدوات حقيقية)

النتيجة (مسار واضح)

? نقاط القوة في المشروع

فكرة مبتكرة (ربط القدوة بالمسار)

محتوى عربي محلي أصيل

قابل للتوسع (Scalable)

تجربة مستخدم تفاعلية

مناسب للمسابقات والمشاريع الريادية