تقييم موقعي الشخصي

عمل جيد، ومشروع ممتاز! ما شاء الله

الصفحة تعمل بشكل جيد جدًا، وهنا بعض الملاحظات البسيطة التي ستساعدك على جعلها أفضل حتى:

• قم بإضافة سكريبت start ليتم تشغيل المشروع في وضع production بدلًا من وجود سكريبت dev فقط، لأن مواقع الإستضافة مثل Vercel و Netlify و Heroku تعتمد عليه لتشغيل المشروع.
• تناسق الألوان جيد للغاية في أغلب الصفحة، ولكن لون النص الأصفر على خلفية بيضاء (في قسم services) يجعل النص صعب القراءة not legible، يمكنك إستخدام أداة إختيار الألوان في أدوات المطورين Dev Tools في المتصفح لمساعدك على إختيار ألوان ذات مقروئية أكبر، أنظر الصور التالية:
  
• عند فتح القائمة الجانبية sidebar وإختيار أحد الأقسام، لا يتم إغلاق القائمة بشكل تلقائي، ولكن يجب أن يتم الضغط على علامة X لإغلاقها يدويًا، وقد يربك هذا الأمر بعض المستخدمين.
• حاول أن تجعل كل العناصر في الصفحة متوازية من ناحية اليسار لجعل الشكل متانسق أكثر:
  
• روابط وسائل التواصل الإجتماعي لا تعلم في زيل الصفحة Footer
• حاول ضغط الصور الموجودة في الموقع الخاص بك، لأن بعض الصور حجمها كبير للغاية (أكبر من 250KB)
• قم بإضافة عنصر meta لوصف الموقع في رأس الصفحة Head

  <meta name="description" content="Put your description here.">

   

• قم بإضافة نص بديل alt في الصور التي تستخدمها في الموقع، ليعمل المستخدم ماهية هذه الصورة إن فشل تحميلها أو كان يستخدم أجهزة خاصة مثل Screen Reader، مزيد من المعلومات عن هذا الموضوع تجدها في هذه المقالة:

ماشاء الله 💜

بتاريخ 3 ساعات قال سامح أشرف:

عمل جيد، ومشروع ممتاز! ما شاء الله

الصفحة تعمل بشكل جيد جدًا، وهنا بعض الملاحظات البسيطة التي ستساعدك على جعلها أفضل حتى:

• قم بإضافة سكريبت start ليتم تشغيل المشروع في وضع production بدلًا من وجود سكريبت dev فقط، لأن مواقع الإستضافة مثل Vercel و Netlify و Heroku تعتمد عليه لتشغيل المشروع.
• تناسق الألوان جيد للغاية في أغلب الصفحة، ولكن لون النص الأصفر على خلفية بيضاء (في قسم services) يجعل النص صعب القراءة not legible، يمكنك إستخدام أداة إختيار الألوان في أدوات المطورين Dev Tools في المتصفح لمساعدك على إختيار ألوان ذات مقروئية أكبر، أنظر الصور التالية:
  
• عند فتح القائمة الجانبية sidebar وإختيار أحد الأقسام، لا يتم إغلاق القائمة بشكل تلقائي، ولكن يجب أن يتم الضغط على علامة X لإغلاقها يدويًا، وقد يربك هذا الأمر بعض المستخدمين.
• حاول أن تجعل كل العناصر في الصفحة متوازية من ناحية اليسار لجعل الشكل متانسق أكثر:
  
• روابط وسائل التواصل الإجتماعي لا تعلم في زيل الصفحة Footer
• حاول ضغط الصور الموجودة في الموقع الخاص بك، لأن بعض الصور حجمها كبير للغاية (أكبر من 250KB)
• قم بإضافة عنصر meta لوصف الموقع في رأس الصفحة Head

  
  <meta name="description" content="Put your description here.">

   

• قم بإضافة نص بديل alt في الصور التي تستخدمها في الموقع، ليعمل المستخدم ماهية هذه الصورة إن فشل تحميلها أو كان يستخدم أجهزة خاصة مثل Screen Reader، مزيد من المعلومات عن هذا الموضوع تجدها في هذه المقالة:

 

ازاي اقلل الحجم

بتاريخ 19 ساعات قال Mohamed Montaser3:

ازاي اقلل الحجم

توجد الكثير من المواقع التي تقدم خدمة ضغط الصورة مجانًا، أبحث عن "Optimize Images Online"، هنا بعض المواقع التي توفر هذه الخدمة مجانًا:

• tinypng
• imagecompressor
• kraken

بتاريخ 2 ساعات قال سامح أشرف:

توجد الكثير من المواقع التي تقدم خدمة ضغط الصورة مجانًا، أبحث عن "Optimize Images Online"، هنا بعض المواقع التي توفر هذه الخدمة مجانًا:

• tinypng
• imagecompressor
• kraken

مازال الحجم كبير

بتاريخ 18 ساعات قال Mohamed Montaser3:

مازال الحجم كبير

بالنسبة للصور فحاول أن تقوم بقصها Crop وتصغيرها Resize بحيث يكون حجم الصورة مطابق لحجمها في الصفحة نفسها (أي لا تقوم بتحجيم الصور عبر width و height بل قم بتغير مقاسات الصورة نفسها عبر أي برنامج لتحرير الصور).

إن كنت تستعمل webpack فحاول أن تقوم بعمل build بوضع production:

webpack --mode production --optimization-minimize