portfolio

OS Portfolio هي محفظة شخصية تفاعلية مبنية كتطبيق ويب يحاكي واجهة نظام macOS، مصممة لعرض المهارات، المشاريع، الخبرات، والشهادات بطريقة مبتكرة وجذابة. تحولت من صفحة بسيطة إلى نظام بيئي كامل يشمل نوافذ قابلة للسحب والتغيير حجمها، Dock تفاعلي، وشريط قوائم علوي، مع رسوم متحركة سلسة وتركيز على الأداء العالي. المنصة سهلة التخصيص، حيث يتم تخزين جميع البيانات في ملف واحد (constants/index.js)، مما يجعلها مثالية للمطورين الذين يريدون عرض أعمالهم بأسلوب احترافي وممتع.

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

نوافذ قابلة للسحب (Draggable Windows): دعم للسحب السلس، التركيز، والترتيب عبر z-index.

Dock تفاعلي: تضخيم أيقونات بناءً على الحركة (مثل macOS) مع رسوم متحركة فيزيائية.

شاشة الترحيب (Welcome Screen): رسوم متحركة للخطوط المتغيرة الوزن بناءً على حركة الفأرة.

Finder (عرض المشاريع): متصفح مشاريع يشبه Finder macOS، مع مجلدات فرعية، ملفات نصية، روابط، وصور.

Safari (دليل التطوير): متصفح مقالات مخصص لدليل التطوير الأمامي، مع تصفح صفحات.

Terminal (المهارات): عرض التقنيات في نمط ترمينال مع فئات وأيقونات.

Resume (السيرة الذاتية): عرض PDF مدمج داخل النافذة.

Contact (الاتصال): بطاقات روابط اجتماعية (GitHub، LinkedIn) مع رسوم متحركة.

عارض الصور والنصوص: نوافذ لعرض الصور والملفات النصية من المشاريع.

تصميم متجاوب: يدعم الهواتف، الأجهزة اللوحية، والحواسيب، مع رسالة تنبيه للشاشات الصغيرة.

شريط قوائم علوي: ساعة حية، روابط تنقل، وأيقونات نظامية.

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

الأساس: React 19، Vite للبناء السريع، React DOM.

التصميم: Tailwind CSS 4 مع مكونات مخصصة (Glassmorphism، لوحات ألوان HSL).

الحركات: GSAP للسحب، التضخيم، والرسوم المتحركة، مع @gsap/react.

إدارة الحالة: Zustand مع Immer لإدارة النوافذ، التركيز، والموقع.

الأدوات الإضافية: Lucide React للأيقونات، React Tooltip للتلميحات، React PDF لعرض السيرة الذاتية، Dayjs للساعة، Clsx للكلاسات الشرطية.

الخطوط: Georama (متغير الوزن)، Roboto Mono (للترمينال).

التطوير: ESLint للكود النظيف، Vercel للنشر.

الجمهور المستهدف:

المطورون والمصممون: لعرض أعمالهم ومهاراتهم بطريقة تفاعلية ومبتكرة.

رواد الأعمال والشركات: للبحث عن مطورين من خلال محافظ احترافية.

المهتمون بالتطوير الأمامي: للإلهام من التصميمات المستوحاة من macOS والرسوم المتحركة المتقدمة.

خطة التطوير المستقبلية:

المرحلة الأولى (مكتملة): بناء الهيكل الأساسي، النوافذ، الـDock، والرسوم المتحركة.

المرحلة الثانية (قيد التنفيذ): إضافة دعم للغات متعددة، تكامل API خارجية، وتحسين الأداء.

المرحلة الثالثة: توسيع ليشمل تطبيقات إضافية مثل لوحة تحكم أو تكامل وسائل التواصل.

النتائج المتحققة وقصص النجاح:

ساعدت في جذب فرص عمل جديدة للمطورين من خلال عرض تفاعلي يبرز المهارات بشكل فريد.

زادت من تفاعل الزوار مع المحتوى بنسبة عالية بفضل التصميم المبتكر والرسوم المتحركة.

حققت تقييمات إيجابية كمحفظة سهلة التخصيص، مما ساعد في بناء سمعة احترافية.

آراء المستخدمين:

"محفظة رائعة! التصميم المستوحى من macOS جعل عرض أعمالي أكثر جاذبية." - مطور ويب.

"سهلة التخصيص والنشر، أوصي بها لأي مطور يبحث عن تميز." - مصمم UI/UX.