موقع المحفظة الشخصية

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

يعرض موقع المحفظة الشخصية هذا مهاراتي ومشاريعي وخبرتي المهنية في تصميم حديث ومتجاوب. مبني بـ Nuxt 3 و Vue.js، يستفيد من أحدث تقنيات الويب لإنشاء تجربة مستخدم سريعة وقابلة للوصول وجذابة بصرياً.

الميزات الرئيسية

• تصميم متجاوب: تخطيط متجاوب بالكامل يعمل بسلاسة عبر أجهزة سطح المكتب والأجهزة اللوحية والهواتف المحمولة
• الوضع المظلم/الفاتح: تفضيل السمة القابل للتبديل من قبل المستخدم والذي يستمر عبر الجلسات
• إدارة المحتوى: إدارة المحتوى القائمة على Markdown باستخدام Nuxt Content
• تصفية المشاريع الديناميكية: تصفية المشاريع حسب الفئة أو التقنية
• مكونات واجهة المستخدم المتحركة: رسوم متحركة وانتقالات دقيقة لتجربة مستخدم جذابة
• محسن لمحركات البحث: علامات meta والبيانات المنظمة وإنشاء خريطة الموقع لرؤية أفضل لمحركات البحث
• مركز على الأداء: أصول محسنة وتحميل كسول وتقسيم كود فعال

التنفيذ التقني

هندسة الواجهة الأمامية

الموقع مبني على Nuxt 3، والذي يوفر قدرات العرض من جانب الخادم لتحسين الأداء وتحسين محركات البحث. Vue.js يشغل مكونات واجهة المستخدم التفاعلية، بينما Tailwind CSS يمكن التصميم السريع بنهج utility-first.

<template>
  <div class="project-card">
    <img :src="project.image" :alt="project.title" class="project-image" />
    <div class="project-details">
      <h3>{{ project.title }}</h3>
      <p>{{ project.description }}</p>
      <div class="tech-stack">
        <span v-for="tech in project.techStack" :key="tech">{{ tech }}</span>
      </div>
    </div>
  </div>
</template>

إدارة المحتوى

جميع بيانات المشروع ومنشورات المدونة ومحتوى الصفحة تتم إدارتها من خلال ملفات Markdown باستخدام Nuxt Content. يوفر هذا النهج طريقة بسيطة ولكن قوية لتحديث الموقع دون لمس قاعدة الكود.

تحسينات الأداء

• تحسين الصور مع التحويل التلقائي إلى WebP
• تقسيم الكود لتقليل وقت التحميل الأولي
• استخراج CSS الحرج للمحتوى above-the-fold
• التحميل الكسول للمكونات والصور خارج الشاشة

تحديات التطوير

كان أحد التحديات الرئيسية هو تنفيذ مكون الشعاع المتحرك الذي يربط أيقونات التقنية في قسم البطل. تطلب هذا تنسيقاً دقيقاً لمسارات SVG ورسوم JavaScript المتحركة لإنشاء تأثير جذاب بصرياً يعمل عبر أحجام الشاشات المختلفة.

النتائج

يحقق موقع المحفظة الشخصية نقاط Lighthouse تزيد عن 95 في جميع الفئات (الأداء وإمكانية الوصول وأفضل الممارسات وتحسين محركات البحث). يتم تحميله بسرعة ويوفر تجربة مستخدم سلسة ويعرض عملي ومهاراتي بفعالية.

الدروس المستفادة

عزز هذا المشروع أهمية البدء بنظام تصميم قوي قبل التنفيذ. كما سلط الضوء على فوائد استخدام إطار عمل حديث مثل Nuxt لبناء تطبيقات ويب عالية الأداء مع تجربة مطور ممتازة.