بورتفوليو لمصمم تعليمي، القاهرة
أدهم طارق
بورتفوليو متصمم كرحلة طيران: الزائر بيركب بكارت صعود، وبيتنقل بين محطات الخبرة. ومعاه لوحة تحكم بالعربي بتعدّل كل كلمة فيه.
- النوع
- بورتفوليو شخصي
- اللغات
- إنجليزي وعربي من اليمين للشمال
- لوحة التحكم
- ١٢ قسم بالعربي
- الأمان
- تحقق بخطوتين
- الاستضافة
- Cloudflare Pages
الفكرة
أغلب البورتفوليوهات بتتقري زي CV. هنا الزائر بيعيش التجربة: بيسحب كارت الصعود جوه جهاز القراءة عشان يدخل، وبعدها بيلاقي شباك طيارة لو قفله الموقع بيتحول لوضع ليلي ويعرض شغل الفريلانس.
الفكرة مناسبة لشغل صاحبها نفسه: هو بيصمم تعليم الناس بتمارسه، مش بتقراه بس. وكل مشروع ليه صفحة بتبدأ بالمشكلة اللي الشركة شافتها، وسببها الحقيقي، وبعدها الحل والنتايج.
التعليم اللي بيتمارس، مش اللي بيتقري بس.
جولة في الموقع
اضغط على أي صورة عشان تشوفها كبيرة.
-
البوابة
كارت صعود FOLIO AIR باسم صاحب الموقع. الزائر بيسحبه للقارئ، والشاشة بتقول READY ثم WELCOME. وفي زرار تخطّي لأي حد مستعجل.
-
الرحلة
شريط جانبي بالاسم والمدينة والوقت المحلي، شباك طيارة بسماء حية، الأرقام، و"خطة الرحلة" بخط بيترسم بين كل شركة والتانية.
-
بالعربي
نسخة عربية كاملة على /ar/، والاتجاه بيتظبط قبل ما الصفحة تظهر، فمفيش ولا لحظة الصفحة بتبان مقلوبة.
-
صفحة المشروع
المشكلة وسببها، النتايج، الأدوات، سلايدز بتتفتح كبيرة، ديمو تفاعلي، فيديو، وزرار "جرّبه بنفسك".
المميزات
شباك = وضع ليلي
قفل الشباك بيحوّل الموقع لليل ويعرض شغل الفريلانس، وفتحه بيرجّع الخبرة.
فورم تواصل محمي من السبام
حقل مخفي للبوتات، ووقت أدنى قبل الإرسال، و٥ رسايل في الساعة بس من نفس الجهاز.
إحصائيات من غير تتبّع
عدد الزيارات بيتسجّل يوم بيوم من غير كوكيز ولا IP، والبوتات وزيارات صاحب الموقع مش بتتحسب.
جاهز لجوجل باللغتين
عنوان ووصف وصورة مشاركة لكل صفحة، وربط العربي بالإنجليزي، وخريطة للموقع بتتعمل لوحدها.
CV للتحميل
زرار تحميل الـ CV، ونسخة عربي اختيارية.
التعديل بيظهر فوراً
أي حفظ من لوحة التحكم بيظهر على الموقع على طول، من غير رفع جديد.
لوحة التحكم
لوحة بالعربي على /admin بتعدّل كل جزء في الموقع، وكل خانة نصّها عربي ونصّها إنجليزي جنب بعض. الحفظ بزرار أو Ctrl+S، وفي تنبيه لو في تعديلات مش محفوظة.
اللقطات دي من نسخة تجريبية ببيانات وهمية: الرسايل والإحصائيات مش حقيقية.
- تحقق بخطوتين بتطبيق Authenticator
- ١٠ أكواد طوارئ
- قفل بعد ٨ محاولات غلط
- خروج من كل الأجهزة التانية
- آخر ٢٠ نسخة محفوظة
- نسخة احتياطية كل أسبوع
الصفحة الرئيسية
الاسم، المدينة، اللغات، الجمل الأساسية، وبيانات كارت الصعود.
- كل خانة بالعربي والإنجليزي جنب بعض
الخبرة والفريلانس
كل الشركات في قايمة واحدة.
- إضافة وترتيب بالأسهم
- إخفاء من غير مسح
تفاصيل الشركة
اللوجو وألوانه، المشاريع، والأنشطة اللي فيها "جرّبه بنفسك".
صفحة المشروع
المشكلة والنتايج واقتباس العميل، والسلايدز.
- ارفع PDF أو صور والمتصفح بيحوّلهم لسلايدز WebP بنفسه
- تختار السلايدز اللي تظهر
- رفع فيديو أو ديمو HTML
الرسايل
كل رسايل فورم التواصل في مكان واحد، بعلامة للي متقراش.
- تعليم كمقروء أو مسح
الإحصائيات
زيارات يومية، أكتر المشاريع اتفتحت، الزوار جايين منين، الدول، اللغة، وأكتر الأفعال: تحميل CV، تواصل، واتساب.
- فترات من ٧ أيام لسنة
- لينك بـ utm_source بيوضّح مصدر أي لينك اتشارك
الأمان
تفعيل التحقق بخطوتين بكود QR، وأكواد الطوارئ، والخروج من باقي الأجهزة.
وعلى الموبايل كمان
اللوحة كلها شغالة على الموبايل.
الإتاحة
موقع يقدر يستخدمه الكل: باللمس أو بالكيبورد أو بقارئ الشاشة، ولأي حد طالب حركة أقل.
- لغة واتجاه كل صفحة بيتحددوا قبل ما تظهر.
- كارت الصعود بيشتغل بالكيبورد (Enter أو Space)، وفي زرار تخطّي حقيقي، وباقي الصفحة مقفول لحد ما الزائر يدخل.
- شباك الطيارة زرار بيقول حالته لقارئ الشاشة، وبيشتغل بالأسهم.
- النوافذ المنبثقة بتاخد الفوكس وترجّعه للمكان اللي فتحها، وبتتقفل بـ Esc.
- السلايدز عليها وصف زي "اسم المشروع، سلايد ٣ من ١٢".
- أخطاء الفورم بتتقري، والفوكس بيروح للخانة الغلط.
- عند تقليل الحركة: السما بتقف، وكل الانتقالات بتتلغي.
تحت الغطاء
- صفحة واحدة HTML وCSS وJavaScript، ومعاها Cloudflare Functions وتخزين KV وقاعدة D1 للإحصائيات.
- السلايدز WebP بنسخ مصغّرة ٤٨٠ بكسل، بتتحمّل لما توصلها، والسما بتقف لما متبقاش ظاهرة.
- نسخة احتياطية من المحتوى بتتحفظ على GitHub كل يوم حد، وأي تعديل في الكود بينزل على الموقع لوحده.
عايز موقع زي ده لمشروعك؟
احكيلنا عن مشروعك على واتساب، ونقولك نبدأ منين.