Portfolio Website
تفاصيل العمل
1. موقع الويب هذا هو معرض أعمال شخصي حديث وتفاعلي، صمم لعرض مهاراتي وخبراتي في تطوير الويب. يهدف إلى تقديم تجربة مستخدم سلسة وجذابة للعملاء المحتملين والزملاء، مع التركيز على الأداء الأمثل والتصميم المتجاوب.
2. دوري في المشروع:
مطور ويب كامل (Full-Stack Developer)، ومصمم واجهة المستخدم وتجربة المستخدم (UI/UX Designer). كنت مسؤولاً عن جميع جوانب تطوير هذا الموقع، من التصميم الأولي وتحليل المتطلبات إلى بناء الواجهتين الأمامية والخلفية ونشر المشروع.
3. التقنيات المستخدمة:
•لغات البرمجة: HTML5, CSS3, JavaScript (ES6+), PHP 8.0+
•أطر العمل/المكتبات: Vanilla JS (لتعزيز الأداء), PHPMailer (لإدارة البريد الإلكتروني).
•الواجهة الخلفية (Backend): PHP 8.0+، نظام توجيه (Custom Router) خاص.
•تنسيق البيانات: JSON (لإدارة المحتوى).
•أخرى: Intersection Observer API, CSS Animations (Hardware-Accelerated).
4. المميزات الرئيسية والوظائف:
•عناصر تفاعلية:
oانتقالات سلسة (Smooth Scroll Transitions) بين أقسام الموقع.
oنظام رسوم متحركة للصور (Image Animation System) لعرض الصور بأسلوب جذاب.
•تصميم متجاوب: مُحسّن بالكامل ليعمل بشكل مثالي على جميع أحجام الشاشات والأجهزة.
•تحسينات الأداء:
oاستخدام Intersection Observer API لتحسين الرسوم المتحركة القائمة على التمرير.
oرسوم متحركة مدعومة بالعتاد (Hardware-Accelerated) لتحقيق 60 إطارًا في الثانية بسلاسة تامة.
oدعم لتقليل الحركة (Reduced Motion Support) لاحترام تفضيلات المستخدم.
oتحميل كسول للصور (Lazy Loading) لتحميل الصور أثناء التمرير فقط، مما يحسن وقت التحميل الأولي.
•نظام تصميم متكامل:
oنظام ألوان متناسق (Primary: #FFCB74, Background: #111111, Text: #F6F6F6).
oنظام طباعة واضح باستخدام خط Inter مع مقياس معياري (Modular Scale) لضمان سهولة القراءة.
•وظائف الواجهة الخلفية:
oتوجيه مخصص (Custom Router) لإنشاء عناوين URL نظيفة وصديقة لمحركات البحث.
oوظيفة بريد إلكتروني آمنة باستخدام PHPMailer.
5. التحديات والحلول:
واجهت تحديًا في تحقيق أقصى أداء وسلاسة للرسوم المتحركة على مختلف الأجهزة والمتصفحات. قمت بحل ذلك بالاعتماد بشكل أساسي على Vanilla JavaScript وCSS Animations المدعومة بالعتاد، وتطبيق Intersection Observer API لتحسين كفاءة الرسوم المتحركة القائمة على التمرير، مما أدى إلى تجربة مستخدم سريعة وسلسة (60fps) دون الحاجة لأطر عمل ضخمة.
6. الروابط:
•رابط المشروع الحي: https://duxelite.net/port...
•رابط الكود (GitHub): [متاح عند الطلب]