معرض أعمالي الشخصي

استكشف معرض الأعمال الشخصي الذي صممته بعناية، أنا حسين الإدريسي، مطور ويب Full Stack من المغرب. تعرّف على تفاصيل دمج Vue.js و Nuxt.js و Three.js، وعلى استخدام صيغ الصور من الجيل الجديد، وجرّب أداءً حصل على تقييم Google Page Speed بلغ 94 في الأداء، و 96 في سهولة الوصول، و 100 كاملة في كلٍّ من أفضل الممارسات و SEO.

معرض أعمالي الشخصي

مرحبًا بك في معرض أعمالي الشخصي، جولة شاملة في مهاراتي وإبداعي في تطوير الويب. يشهد هذا المشروع على إتقاني لـ Vue.js و Nuxt.js و Three.js، ويجمعها في تجارب ويب تفاعلية وجذابة بصريًا.

نظرة على المشروع

تعمقت في هذا المعرض في تفاصيل تطوير الويب، وواجهت تحديات معقدة، ودمجت تقنيات حديثة. أبرز ميزات المشروع وجوانبه:

التقنيات المستخدمة

Vue.js و Nuxt.js: استفدت من قوة Vue.js و Nuxt.js لتطوير واجهة أمامية سلسة وعرض المحتوى الديناميكي بكفاءة.
Three.js: استخدمت Three.js للنمذجة ثلاثية الأبعاد (3D)، فأضاف بُعدًا تفاعليًا جذابًا إلى تجربة المستخدم.
Tailwind CSS: ضمنت تصميمًا متجاوبًا ومتسقًا بصريًا بإطار CSS القائم على الأصناف المساعدة (utility-first).

تحسين الأداء

حقق الموقع 95 في Google Page Speed Insights للأداء، و 96 لسهولة الوصول، و 100 كاملة لكلٍّ من أفضل الممارسات و SEO. وراء هذه النتيجة عدة أساليب للتحسين:

صيغ الصور من الجيل الجديد: استخدمت صيغتي AVIF و WebP مع Nuxt Image لتحسين جودة الصور وتقليل زمن التحميل.
تقسيم الكود (Code Splitting): طبّقت أساليب تقسيم الكود لتسريع التحميل والعرض، وضمان تجربة استخدام سلسة.
التحميل الكسول للصور (Lazy Loading): أجّلت تحميل الصور غير الضرورية، فتحسّن الأداء أكثر.

قائمة التدوينات في الصفحة الرئيسية: عندما تتجاوز 60% من الصفحة أثناء التمرير، يُرسَل طلب لجلب قائمة التدوينات ديناميكيًا، فتبقى التجربة سلسة وفعّالة.

تجربة قراءة تفاعلية

أضفت ميزات تفاعلية لتحسين تجربة القراءة:

طلبات يطلقها التمرير: عندما تصل إلى 90% من المقال أثناء التمرير، يُطلَب المقالان التالي والسابق، ليكون الانتقال بين المقالات سلسًا.
موجات ألفا: استمتع بقراءة مركّزة مع تشغيل موجات ألفا أثناء تصفح المقالات، فهي تساعد على التركيز والانتباه.