oda-web

موقع بروفايل شخصي مبني بـ Next.js و Tailwind CSS.

---

هيكلة الملفات

src/
├── app/
│   ├── layout.tsx              # Root layout
│   ├── globals.css             # الأنماط العامة و CSS variables
│   ├── page.tsx                # صفحة البروفايل العامة
│   └── admin/
│       └── page.tsx            # لوحة التحكم
├── components/
│   ├── profile/
│   │   ├── LinkCard.tsx        # بطاقة الرابط
│   │   └── ProjectCard.tsx     # بطاقة المشروع
│   └── admin/
│       ├── ColorPicker.tsx     # اختيار ألوان الـ gradient
│       ├── IconPicker.tsx      # اختيار أيقونة من المكتبة أو رفع مخصصة
│       ├── ImageUploader.tsx   # رفع الصور (أفاتار / بانر)
│       ├── LinksManager.tsx    # إدارة الروابط
│       └── ProjectsManager.tsx # إدارة المشاريع
├── context/
│   └── ProfileContext.tsx      # Global state + localStorage
├── lib/
│   └── constants.ts            # القيم الافتراضية
└── types/
    └── index.ts                # TypeScript interfaces

---

الإعداد والتشغيل

npm install
npm run dev

---

إنشاء البروفايل

1. افتح الموقع وادخل إلى لوحة التحكم (تفاصيل في القسم التالي)
2. من قسم الصور — ارفع صورة الغلاف والصورة الشخصية
3. من قسم المعلومات الشخصية — أدخل الاسم والنبذة
   • لعرض النبذة كـ tags منفصلة، افصل بينها بـ · — مثال: Developer · Gamer · Student
4. من قسم هوية الموقع — خصّص اسم التبويب وأيقونة المتصفح (Favicon)
5. من قسم الألوان والمظهر — اختر ألوان الـ gradient واتجاهه
6. من قسم الروابط — أضف روابط حساباتك مع أيقونة لكل رابط
7. من قسم المشاريع — أضف مشاريعك مع صورة وتاغات وأيقونة
8. اضغط حفظ — كل البيانات تُحفظ في localStorage تلقائياً

---

الدخول إلى لوحة التحكم

اكتب /admin في شريط العنوان بعد رابط الموقع:

https://your-domain.com/admin

كلمة المرور الافتراضية: admin123

يُنصح بتغييرها فور الدخول الأول من قسم تغيير كلمة المرور في أسفل لوحة التحكم.