Portfolio احترافي

تحية طيبة،

أنا محمد رشاد، مطور واجهات أمامية (Front-End Developer) أؤمن بأن البرمجيات الجيدة لا تُقرأ فقط، بل تُعاش.

عندما تزور موقعي الشخصي, فأنت لا ترى مجرد صفحة تعريفية، بل ترى معملًا تفاعليًا لمهاراتي. دعني آخذك في جولة سريعة لأبرز ما أقدمه فيه، لأثبت لك أنني لست مجرد كاتب أكواد، بل شريك تقني يضيف قيمة حقيقية لمشروعك:

1. تجربة تصفح غامرة (Immersive UX)

مؤشر مخصص (Custom Cursor):

يتكون من نقطة حمراء وحلقة متتبعة، مع تأثير تضخّم عند المرور فوق الروابط والأزرار. يعمل فقط على الأجهزة المزودة بفأرة ويحترم تفضيلات تقليل الحركة (prefers-reduced-motion).

عناصر مغناطيسية (Magnetic Effect):

عند تحريك الفأرة فوق الأزرار أو البطاقات، تتحرك هذه العناصر بسلاسة باتجاه المؤشر، مما يمنح الشعور بالتفاعل الفيزيائي واللمسة العصرية.

شبكة كونية (Constellation Canvas):

خلفية متحركة بنقاط مترابطة، تتفاعل مع حركة الماوس وتتغير كثافتها بالقرب من المؤشر. تم تحسين الأداء بتقسيم النقاط حسب المنطقة المرئية فقط، مع دعم اللمس للأجهزة اللوحية.

2. نظام سرد تمريري متقدم (Pinned Scrollytelling)

تثبيت المشاريع في واجهة عرض كاملة الشاشة:

عند التمرير عبر قسم "الأعمال"، يتم تثبيت المحتوى مؤقتاً وتنتقل المشاريع الواحدة تلو الأخرى بانزلاقات محسوبة، مع تأثيرات انتقالية (ترجمة، تغيير الشفافية، تكبير/تصغير) مضبوطة بدقة باستخدام دوال رياضية (smoothstep) لضمان سلاسة الحركة.

حساب ديناميكي لارتفاع الشاشة:

يُحسب الطول الإجمالي لقسم التثبيت بناءً على عدد المشاريع ومدد المكوث والانتقال (HOLD_VH و TRANS_VH) ليتناسب مع أي ارتفاع شاشة.

تصميم متجاوب للشاشات الصغيرة:

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

فهرس المشاريع الديناميكي:

يظهر رقم المشروع الحالي بتنسيق "01 / 06" في الزاوية، محدّثاً تلقائياً أثناء التمرير.

3. تخصيص لكل مشروع (Project Theming)

لكل مشروع من المشاريع الستة، تم تعريف سمة لونية وخلفية فريدة باستخدام تدرجات وخلفيات مركبة (radial & linear gradients، أنماط متكررة) لتعكس هويته.

4.العربية والإنجليزية

يتم تبديل اللغة بنقرة واحدة، مع تغيير اتجاه الصفحة (RTL/LTR) وتعيين سمة lang و dir بشكل ديناميكي.

تمت ترجمة جميع المحتويات، بما في ذلك أوصاف المشاريع التفصيلية، بدقة واحترافية.

5. تأثيرات حركية ذكية ومحسّنة

تشويش الاسم (Scramble Effect):

عند تحميل الصفحة، يظهر اسم "Mohammad Rashad" بتأثير تشويش عشوائي للحروف يتلاشى تدريجياً ليستقر على النص النهائي، مع توقيت مختلف لكل كلمة (first name, last name) لإضفاء طابع سينمائي.

كشف العناصر عند التمرير (Scroll Reveal):

باستخدام Intersection Observer، تظهر العناصر بتأثير انزياح وصعود تدريجي، مع دعم خاصية التباعد الزمني (stagger) للقوائم.

التنقل الداخلي السلس:

روابط الأقسام تستخدم scrollIntoView مع تجنب السلوك الافتراضي في بيئة file://، وتتعامل مع تفضيلات المستخدم لتقليل الحركة.

6. شريط تنقل متكيف

يظهر الشريط بعد تأخير بسيط مع انزلاق لطيف.

يتغير لون الخلفية والشفافية عند التمرير (يُصبح معتماً مع حد سفلي).

يختفي تلقائياً عند المرور فوق قسم المشاريع (عندما تكون لوحة التثبيت نشطة) لتجنب إعاقة التجربة البصرية، ويعود للظهور بعد مغادرة القسم.

7. إمكانية الوصول (Accessibility)

احترام تام لتفضيلات prefers-reduced-motion عبر تعطيل جميع الحركات والإنتقالات، وتحويل تأثير التثبيت إلى عرض ثابت.

دعم التنقل عبر لوحة المفاتيح مع تركيز مرئي واضح (:focus-visible).

استخدام عناصر HTML الدلالية (<header>، <section>، <nav>، إلخ) لتحسين قراءة الشاشات لذوي الحاجات الخاصة.

دعم RTL للغة العربية مع تحسين الخطوط (استخدام Cairo للعربية و Inter للإنجليزية).

8. أداء محسّن (Performance)

لا تبعيات خارجية – الموقع خفيف جداً، زمن التحميل الأولي لا يتجاوز بضعة ميلي ثوانٍ.

تحسين الرسم على Canvas: يتم رسم الروابط والنقاط فقط للمنطقة المرئية من المستند مع مساحة عازلة، مما يقلل العمليات الحسابية بشكل كبير عند التمرير.

تقليل عدد النقاط في الشبكة الكونية بناءً على أبعاد الشاشة (بين 250 و 3000 نقطة) لتحقيق توازن بين الجمال والأداء.

9. جودة الكود

الكود مُنظّم في دالة ذاتية التنفيذ (IIFE) لتجنب التلوث العمومي.

استخدام 'use strict' لضمان كتابة كود آمن.

تعليقات وافية (بالإنكليزية) توضح كل قسم ووظيفة، مما يسهل الصيانة والتطوير.

خلاصة القيمة

هذا الموقع هو أكثر من مجرد صفحة ويب؛ إنه معرض لمهاراتي التقنية، ودليل على أنني:

أصمم تجارب غامرة: مع مراعاة تفاصيل التفاعل، والاستجابة، وإمكانية الوصول.

أفكر في الأداء: من خلال تحسين التحميل، وتقليل العمليات غير الضرورية، وتطبيق أفضل الممارسات.

أدير محتوى متعدد اللغات: بسهولة ومرونة.

كل هذا بأدوات الويب الأساسية فقط.