Salih Bawarith
موقع شخصي ثنائي اللغة لصالح باوارث، مدير عمليات أغذية ومشروبات في الرياض، وخبير قهوة مختصة، وخطاط عربي. تُقرأ مسيرته كـ«منحنى تحميص» للقهوة، مع معارض لخطوطه ومناسباته. صمّمتُه وبنيتُه بـ HTML وCSS وJavaScript، وأُطلق في 2026.
- HTML
- CSS
- JavaScript
- RTL
- Bilingual
- SEO
- GitHub Pages
- دوري
- الفكرة والتصميم والبناء
- التاريخ
- 2026
- الحالة
- متاح الآن
نبذة
موقع تعريفي شخصي ثنائي اللغة (عربي وإنجليزي، RTL) لصالح باوارث: مدير عمليات أغذية ومشروبات مقيم في الرياض، وخبير قهوة مختصة، وخطّاط عربي. يعرض الموقعُ مسيرته المهنية على شكل «منحنى تحميص» قهوة: منحنًى يُرسَم مع التمرير بمسارات متضافرة للأدوار العديدة التي تولّاها في آنٍ واحد، إلى جانب معارض لأعماله في الخطّ العربي وأعماله وفعالياته.
دوري
صمّمت الموقع وبنيته بالكامل: فكرة «منحنى التحميص»، والتصميم ثنائي اللغة بدعم RTL، والمعارض. كل المحتوى موجود في ملف JavaScript واحد للبيانات، ليتمكّن صالح من تحديث خطّه الزمني وصوره وأعماله الخطّية دون لمس أي HTML.
قراركل المحتوى في ملف بيانات JavaScript واحد، فيحدّث صالح مسيرته ومعارضه دون أن يلمس HTML.
ما أُطلق
- خط زمني للمسيرة على شكل «منحنى تحميص»: منحنًى يُرسَم مع التمرير بمسارات متضافرة للأدوار المتزامنة.
- ثنائي اللغة بالكامل عربي/إنجليزي مع زر لتبديل اللغة وانعكاس كامل للاتجاه (RTL).
- معرض للخطّ العربي ومعرض ألبومات للأعمال والفعاليات: شبكة + عارض صور، مع تحميل الصور والفيديو عند الطلب.
- مرشّحات حسب الفئة وترقيم «عرض المزيد» لتتوسّع المعارض.
- بنية تعتمد على البيانات: كل المحتوى في ملف JS واحد، فيُحدَّث دون تعديل HTML.
- مبني من الصفر بـ HTML/CSS/JS بدون أي أدوات بناء، إضافةً إلى تحسين محركات البحث ونطاق مخصّص على GitHub Pages.
قرارات تجربة المستخدم
- تقديم المسيرة المهنية على شكل «منحنى تحميص» بدلًا من قائمة نقاط: تقرأ تصاعُد الزخم عبر الزمن، لا التواريخ فقط.
- مسارات متضافرة تجعل الأدوار المتزامنة واضحة بلمحة واحدة بدل دمجها في عمود واحد.
- المعارض تُحمّل الصور وصور الفيديو المصغّرة عند الطلب، مع ترقيم «عرض المزيد»، ليبقى الأرشيف الكبير سريعًا على الجوال.
- كل لقطة شاشة وصورة تُفتح في عارض ملء الشاشة يمكن التنقّل بينها بالسحب.
- متوافق مع لوحة المفاتيح وقارئات الشاشة (إدارة التركيز، وإغلاق بمفتاح Escape، وعناوين ARIA)، مع تعطيل كل الحركة عند تفعيل
prefers-reduced-motion.
التحليلات
أداة Umami (صديقة للخصوصية وبلا كوكيز) مع طبقة تتبّع مخصّصة كتبتها: أحداث مُسمّاة لكل نقرة ولعمق التمرير، إضافةً إلى «نبضة» ظهور تُرسل مشاهدات صفحة دورية ليُبلّغ الموقع أحادي الصفحة عن مدة زيارة حقيقية. كل استدعاء محميّ، فلا يُعطِّل حظرُ المتتبّع أو بطؤه الصفحةَ أبدًا.
ما يستحق نظرة أقرب
أكثر فكرة تعجبني هي «منحنى التحميص»: قراءة المسيرة المهنية كأنها منحنى تحميص قهوة، بالزمن على الأسفل والزخم يتصاعد، ومسارات متضافرة تُظهر الأدوار المتداخلة. يحوّل السيرة الذاتية العادية إلى قصة، بلغتين، دون أي إطار عمل أو أدوات بناء.
قرارالمسارات المتضافرة تُبقي الأدوار التي تولّاها في الوقت نفسه مقروءة، بدل دمجها في عمود واحد.
لقطات الشاشة
