mirsazzathossain.me

mirsazzathossain.me

هذا هو الكود المصدري لموقعي الشخصي mirsazzathossain.me. موقع المحفظة الأكاديمية هذا هو التواجد الشامل والجاذبية عبر الإنترنت يعرض مهاراتي وإنجازاتي وخبراتي في مجال دراستي. لقد قمت ببناء موقع الويب باستخدام Next.js ، وهو إطار JavaScript شائع للغاية يسمح بإنشاء تطبيقات ويب تم إنشاؤها بشكل ثابت. لضمان تصميم حديث ومهني ، استخدمت CSS Tailwind ، وهو إطار CSS الأول ، وكان مستوحى من موضوع الأضواء من واجهة المستخدم Tailwind. تتم إدارة محتوى موقع الويب الخاص بي بمساعدة ContentLayer ، وهي منصة تبسط إنشاء المحتوى وإدارته ، ويتم كتابته في تنظيم وتنسيق فعال. تتميز منشورات المدونة على موقع الويب الخاص بي بنظام تعليق مدعوم من GISCUS ، وهو منصة مناقشة قائمة على Github ، مما يسمح بالاتصال التفاعلي والتعليقات من جمهوري. بالإضافة إلى ذلك ، قمت بدمج Spotify Web API لعرض أغنيتي التي تم تشغيلها مؤخرًا على الموقع الإلكتروني واستخدمت الرموز من Heroicons لتعزيز النداء المرئي لموقعي. يتم استضافة موقع الويب الخاص بي على Vercel ، وهو منصة سحابة موثوقة لاستضافة مواقع ثابتة ووظائف بدون خادم ، مما يضمن الوصول السلس والسريع لجميع المستخدمين. بشكل عام ، أعتقد أن موقع الويب الخاص بي الأكاديمي يوضح تفاني في البقاء على اطلاع دائم بالتقنيات الحديثة ويعرض وجودًا ديناميكيًا ومذهلًا عبر الإنترنت.

باختصار ، المكدس التقني لموقع الويب هو كما يلي:

• الإطار: Next.js
• التصميم: Tailwind CSS
• الرموز: البطل
• المحتوى: تخفيض
• إدارة المحتوى: ContentLayer
• النشر: Vercel
• التعليقات: الجيسكو

ملخص

• app/* : لقد استخدمت NEXT.JS هيكل دليل app الجديد. يحتوي هذا الدليل على التطبيق الرئيسي.
• components/* : يتم تخزين جميع المكونات المخصصة في هذا الدليل.
• content/* : يحتوي هذا الدليل على جميع محتويات ContentLayer.
• public/* : يحتوي هذا الدليل على جميع الأصول الثابتة للموقع.
• public/content/* : يحتوي هذا الدليل على جميع المحتويات الثابتة للموقع. على سبيل المثال المشاريع ، والخبرات ، والتعليم ، إلخ.
• styles/* : لقد استخدمت CSS Tailwind للتصميم. يحتوي هذا الدليل على الأنماط العالمية CSS CSS وبعض الأنماط المخصصة للموقع.
• utils/* : يحتوي هذا الدليل على بعض وظائف الأداة المساعدة.

استنساخ و forking

إذا كنت ترغب في استنساخ أو مفترق هذا المستودع ، فيرجى التأكد من إزالة content والأدلة public لأنها تحتوي على محتوى شخصي وأصوله الشخصية. يمكنك إضافة المحتوى الخاص بك وأصولك في content والأدلة public على التوالي.

استنساخ المستودع عن طريق تشغيل الأمر التالي.

git clone https://github.com/mirsazzathossain/mirsazzathossain.me.git
# or
git clone [email protected]:mirsazzathossain/mirsazzathossain.me.git

يمكنك إزالة content والأدلة public عن طريق تشغيل الأوامر التالية.

rm -rf content
rm -rf public

أضف المحتوى الخاص بك وأصولك في content والأدلة public على التوالي.

تثبيت

تثبيت التبعيات عن طريق تشغيل الأمر التالي.

npm install
# or
yarn install

أخيرًا ، قم بتشغيل الأمر التالي لبدء خادم التطوير.

npm run dev
# or
yarn dev

افتح http: // localhost: 3000 مع متصفحك لرؤية النتيجة.

ملاحظة : يجب عليك إنشاء ملف .env في دليل الجذر وإضافة متغيرات البيئة التالية للحصول على تكامل Spotify.

SPOTIFY_CLIENT_ID=yourspotifyclientid
SPOTIFY_CLIENT_SECRET=yourspotifyclientsecret
SPOTIFY_REFRESH_TOKEN=yourspotifyrefreshtoken

يمكنك الحصول على SPOTIFY_CLIENT_ID و SPOTIFY_CLIENT_SECRET من لوحة معلومات Devely Developer. يمكنك الحصول على SPOTIFY_REFRESH_TOKEN من وحدة تحكم Web Web API.

إلهام

لقد استخدمت مواقع الويب التالية كمصدر إلهام لبناء هذا الموقع.

• ديلبا - ديلبا
• لي روبنسون - Leerob.io
• مانو أرورا - مانوارورا
• Tailwind NextJS Blogn Blog

أنماط الموقع مستوحاة من تصميم SPOTLIGHT SHONE بواسطة Tailwind UI.