الصفحة الرئيسية>المتعلقة بالبرمجة>شفرة المصدر الأخرى
تنزيل

موقعي الشخصي

تم تصميم موقع الويب الخاص بمحفظتي الشخصية ليكون مبسطًا ونظيفًا مع تضمين ميزات مثل منشورات مدونة MDX مع عدد مرات المشاهدة، وتبديل الوضع المظلم، وقائمة الترس، وصفحة حول، والمزيد.

مكدس التكنولوجيا

الخلفية:

  • Next.js / تايب سكريبت
  • MDX / Contentlayer (مشاركات المدونة)
  • PlanetScale (قاعدة البيانات)
  • بريزما (ORM)

الواجهة الأمامية:

  • Tailwind CSS (التصميم)
  • أساسيات الجذر (مكونات واجهة المستخدم مقطوعة الرأس)
  • ألوان جذرية لواجهة المستخدم (نظام الألوان)
  • فريمر موشن (رسوم متحركة)

ابدء

تأكد من تثبيت Node.js v18.17.0+ على جهازك.

  1. تثبيت التبعيات : npm install
  2. متغيرات البيئة : انسخ .env.example إلى .env.local جديد
  3. إعداد قاعدة البيانات : راجع إعداد قاعدة البيانات
  4. إعداد Prisma : npm install @prisma/client (إذا لم تكن قد قمت بذلك بالفعل)، ثم قم بتشغيل npx prisma generate .
  5. ابدأ التطوير : npm run dev ، سيؤدي هذا تلقائيًا إلى إنشاء ملفات .contentlayer وبدء تشغيل خادم تطوير Next.js.

إعداد قاعدة البيانات

  • قم بالتسجيل للحصول على حساب PlanetScale
  • إنشاء قاعدة بيانات جديدة في PlanetScale
  • قم بتحديث متغير البيئة DATABASE_URL في ملف .env.local الخاص بمشروعك باستخدام سلسلة الاتصال المقدمة من PlanetScale

النشر

يمكن نشر هذا المشروع بسرعة في Vercel. ما عليك سوى ربط حساب Vercel الخاص بك بمستودع GitHub الخاص بك، وسيقوم Vercel تلقائيًا ببناء تطبيقك ونشره مع كل دفعة جديدة إلى الفرع الرئيسي.

قم بإضافة متغيرات المشروع .env إلى إعدادات مشروع Vercel الخاص بك.

يوسع
معلومات إضافية
تطبيقات ذات صلة
نوصي لك
أخبار ذات صلة الكل