120تصميم بورتفوليو
معرض البورتفوليو
شخصيات، وقصص تمرير، وآلات تفاعلية، وعوالم كاملة — مدينة تُبنى، ومجموعة شمسية، ومتحف، وبورصة — كل واحد منها ملف HTML واحد مصنوع يدوياً.
- HTML
- CSS
- Canvas
- Three.js
- GSAP
- Web Audio
معرض المواقع
معرض المواقع
مواقع صمّمتها وبنيتها لأفراد وشركات ومحلات. كل واحد منها يبدأ من صاحبه، لا من قالب جاهز.
-
آية راضي
استراتيجية علامة شخصية للخبراء والاستشاريين
- الفكرة
- أول ما يُفتح الموقع يجري بحث أمامك: نتائج متشابهة تبهت، واسم واحد يصعد بأفعالها الثلاثة «يفتكرك، يثق فيك، يختارك». وحلقات Inside-Out، برنامجها مرسوماً كدوائر، صارت تفتح صفحة منهجها.
- دراسة حالة «قبل وبعد» معروضة كملف LinkedIn حقيقي
- فحص للفجوة يسمّي أول فجوة عندك ويفتح رسالة جاهزة
- علامتها في صفحة واحدة: الرسالة والجوانب والصوت والألوان
- Arabic + English
- RTL
- JSON-LD
- llms.txt
-
محمد الحبارة
رئيس التعلّم وتطوير القدرات، مترو الرياض
- الفكرة
- الوصول إلى رصيف: لوحة مغادرة تقلب اسمه ودوره ووجهته «الجاهزية التشغيلية»، وقطار صغير يمرّ على محطات عمله، ثم تنفتح أبواب الرصيف على الصفحة. وخلف كل صفحة خريطة مترو حيّة.
- صفحة لكل برنامج من برامجه: النطاق والدور والتواريخ والأثر
- فوتر على شكل خط مترو، والصفحة الحالية هي المحطة المضيئة
- مُختبر على كل المقاسات، وبالوضعين، وباللمس، وبمعايير الوصول
- Arabic + English
- RTL
- Dark mode
- Playwright
-
ليال جمعة
كاتبة CV وخبيرة LinkedIn وعلامة شخصية
- الفكرة
- صنعتها هي الافتتاحية: قلم أحمر يشدّ سطراً في سيرة ذاتية نموذجية، ثم تنطوي الورقة طائرةً ورقية تطير على خريطة منقّطة إلى حيث وصل عملاؤها، وتنفتح على ملفها الحقيقي. بلا صور: علامة قلم، وسيرة في صفحة واحدة، ورسالة تكتب نفسها.
- أداة لفحص عنوان LinkedIn
- قصص العملاء على خريطة بالأماكن التي وصلوا إليها
- رسالة أولى جاهزة ببضع ضغطات
- Arabic + English
- WebGL
- RTL
- llms.txt
-
سلام اقسيمي
العلامة الشخصية وصناعة المحتوى على LinkedIn
- الفكرة
- المنشور الذي يصل: جملتها الافتتاحية تكتب نفسها في منشور، ثم تنشره، فيرتفع من بين المنشورات وتطفو التفاعلات وتنتشر الدوائر، ثم تطير شرارة إلى زر الحجز. وخلف كل صفحة خيوط وشرارات.
- قصتها على المسرح كباجات فعاليات حقيقية تنقلب بين السنوات
- صفحة لكل فعالية تحدّثت فيها أو قدّمتها
- للجوال أولاً، بشريط سفلي يشبه التطبيقات وزر للحجز
- Arabic + English
- RTL
- Dark mode
- Canvas
-
توحيد ملقط
مصممة منتجات UI/UX
- الفكرة
- البورتفوليو ملف تصميم لا يتوقّف عن العمل: عند الدخول تصمّم الواجهة نفسها أمامك، مهارةً تلو الأخرى — البحث، والهيكل، والخط، والألوان، والنموذج التفاعلي.
- افتتاحية يعيد فيها شريط أدواتها كل مرحلة من مراحل التصميم
- مجموعة مشاريع تُسحب واحداً تلو الآخر، وكل بطاقة تفرد شاشاتها
- صفحة لكل مشروع، فيها دراسة الحالة كاملة شاشةً شاشة
- Arabic + English
- 3D
- RTL
- Dark mode
-
منذر الأشقر
مدير مشاريع أول وممثل للمالك
- الفكرة
- أول الصفحة ورقة رسم هندسي: واجهة برج ترسم نفسها طابقاً بعد طابق، ومنحنى إنجاز يتأخّر عن المخطّط ثم يلحقه ويبلغ الاكتمال، وختم «تم التسليم» يستقر.
- صفحة لكل مشروع كبير
- الإنجليزية والعربية، لكل منهما مسارها
- بيانات منظّمة وllms.txt لمحركات البحث ومساعدات الذكاء الاصطناعي
- English + Arabic
- JSON-LD
- llms.txt
-
عثمان المشاقبة
قائد تقنية، ERP وحوكمة تقنية المعلومات، الرياض
- الفكرة
- خيوط تدخل متشابكة من بداية السطر، وتخرج مسارات مستقيمة مرتّبة بعد أن تمرّ خلف صورته، كما يرتّب العملية قبل أن يؤتمتها. وفي رأس كل صفحة شريط منها يزداد استقامةً كلما نزلت في الصفحة.
- كل برنامج من برامجه في مكانه على مقياس إصدارات Odoo، ويُفتح بلمسة
- عدسة تمرّ على عملية واضحة وأخرى مرتبكة لتُظهر ما تكبّره التقنية
- اختر موضوعاً فيُفتح البريد وعنوانه والتحية جاهزان
- Arabic + English
- RTL
- Dark mode
- Canvas
-
د. حمد الذيابي
قائد في الذكاء الاصطناعي والتحول الرقمي بالقطاع الحكومي
- الفكرة
- التقارب: مسارات ذهبية تعبر سماء نجد ليلاً وتلتقي كلها عند صورته، والضوء يسري فيها، كما تتفق الشبكات على مسار واحد، وهو موضوع الدكتوراه التي أعدّها. وشُرفات نجدية تحدّ كل قسم.
- سؤال الدكتوراه مرسوماً كمخطط تبدّل فيه بين BGP التقليدي وSDN
- مسيرة يخرج خطها الذهبي مع كل ابتعاث ثم يعود إلى الوطن
- مُختبر على كل المقاسات، وباللغتين، وبالوضعين
- Arabic + English
- RTL
- Dark mode
- JSON-LD
-
مازن العبيدي
المدير العام لتقنية المعلومات والتحول الرقمي
- الفكرة
- الطبقات: في أول الصفحة ألواح متساوية القياس تطفو بعضها فوق بعض، صناديق خوادم وقواعد بيانات في الأسفل وهدف في الأعلى، ونبضات ذهبية تصعد بين الطبقات. وفي الرئيسية تتراكب أدواره بالطريقة نفسها، كلٌّ موسوم بطبقته، وضوء يصعد من أول دور له إلى اليوم.
- كل مجال خبرة يذكر أين مارسه قبل أن يقوده
- أفكار من الميدان: مقالات قصيرة كتبها عن إدارة التقنية
- نموذج رسالة يفتح بريداً جاهزاً يراجعه الزائر قبل الإرسال
- Arabic + English
- RTL
- Dark mode
- llms.txt
-
أيمن العواد
مدير مكتب إدارة المشاريع، حوكمة المحافظ والبرامج
- الفكرة
- مرسوم على الكتان: خلف الصفحة خارطة طريق لمحفظة مشاريع ترسم نفسها بالحبر، أشرطة مهام وخطوط ترابط ومعالم على شكل معيّن، وخط حالة أحمر ينزاح ببطء عبر الخطة. الكتان والحبر من غلاف حسابه على LinkedIn، والأحمر الداكن من شماغه.
- أربعة مشاريع، كلٌّ منها قصة: التكليف، والتعقيد، وكيف قاده، والنتيجة
- نبذة تنفيذية قصيرة وأخرى طويلة، جاهزتان للنسخ للمنظّمين والإعلام
- برنامجه القيادي مساراً مؤرّخاً، وحدةً بعد وحدة
- English
- Dark mode
- JSON-LD
- llms.txt
-
TechSpark كرم
صانع محتوى صغير ومستكشف، يحبّب الأطفال بالتقنية
- الفكرة
- سماء ليلية لمحبّ صغير للتقنية: كلمات مثل HTML وJS وRobots وGaming تنزل خلف الصفحة، وشارة TechSpark تتوهّج في المنتصف، وآلة كاتبة تكتب بالتناوب: TechSpark Karam، ومتعة البرمجة، والأجهزة الرائعة، وتقنية المستقبل.
- إنجازاته على بطاقات: أول موقع بناه، ومرحلة في الألعاب، وجائزة في الفن الرقمي
- يوتيوب وتيك توك وإنستغرام الخاصة به في مكان واحد
- مصمّم لجمهور صغير: خط كبير وألوان زاهية وحركة مرحة
- English
- HTML
- CSS
- JavaScript
-
بطولات چامبت
منصّة بطولات لنادي شطرنج في الدمام
- الفكرة
- أسود النادي وذهبه، مبنيّان كمنتج كامل: بطولات قادمة بمقاعد متبقية مباشرة، وتسجيل كضيف، وأرشيف للبطولات السابقة.
- إيصالات التحويل تُفحص تلقائياً عبر مسار ذكاء اصطناعي في n8n
- العربية والإنجليزية والأوردو
- لوحة إدارة للبطولات والمعرض والتسجيلات
- Next.js
- React
- Prisma
- MySQL
- n8n
-
البدر للنقليات
نقل وخدمات لوجستية ومقاولات، المدينة المنورة
- الفكرة
- البدر هو القمر في تمامه، لذلك يبدأ الموقع ليلًا: خطوط الطريق الثلاثة في الشعار تنساب وتصعد إلى القمر، ثم ينطوي الليل في قمر الواجهة فوق المدينة المنورة، وأُحد في الأفق، وأضواء المدينة، وآثار أضواء السيارات ممتدة على الطريق السريع. وفي الأسفل أضواء تسري على مسارات الطرق، وشاحنة تنتقل من خطوة إلى خطوة.
- طلب عرض سعر تُملأ فيه رسالة واتساب أثناء الكتابة
- كل خدمة مرسومة رسمًا هندسيًا على شبكة تخطيط
- وعلى الجوال يعمل كتطبيق: شريط سفلي وطلب عرض سعر على ثلاث خطوات
- Arabic
- Canvas
- Mobile first
-
أريبيان أكسس
استشارات تأسيس الأعمال، الرياض
- الفكرة
- مبنيّ على شعارهم: موجتان بلونين، الشركة وعميلها، تمضيان معًا. تنسابان في الواجهة وترسمان نفسيهما عبر مراحل العمل، فوق نقشة النجوم المحفورة على زجاج استقبال مكتبهم في الملز، ونقاط ضوء تسري على خطوطها. وصورة الاستقبال الحقيقية تقترب ببطء بجانب بطاقة زجاجية تتنقّل بين مراحل التأسيس.
- مفتاح للمستثمر الأجنبي ورائد الأعمال المحلي والشركة القائمة، لكلٍّ منها خدماته
- طلب استشارة على ثلاث خطوات يفتح واتساب والرسالة جاهزة
- شارة حيّة بتوقيت الرياض تبيّن إن كان المكتب مفتوحًا أو مغلقًا
- Arabic + English
- RTL
- Dark mode
-
إخوان السعودية
خدمات حجاج الداخل، مكة المكرمة والقصيم
- الفكرة
- من القصيم إلى المشاعر. نجمة ذهبية ثمانية الرؤوس ترسم نفسها، وتظهر التلبية كلمة كلمة، ثم تنفتح الصفحة من قلب النجمة. والواجهة مشهد حيّ لجبال عرفات وخيام منى والكثبان، تحت شمس فجر تشرق في الوضع الفاتح، وهلال ونجوم وأضواء الخيام في الوضع الداكن.
- بطاقة رحلة تتنقّل فيها نقطة من القصيم إلى مكة ومنى وعرفات ومزدلفة
- عدّ تنازلي حيّ ليوم عرفة بتقويم أم القرى
- نموذج تقييم يعرض البطاقة أثناء الكتابة ويرسلها على واتساب
- Arabic
- Mobile first
- JSON-LD
-
الحماية الكاملة
أنظمة إنذار الحريق والإطفاء، خميس مشيط
- الفكرة
- الموقع لوحة تحكم لإنذار الحريق. كل قسم منطقة لها مصباحها، يومض بلون كهرماني أثناء الفحص ثم يستقر أخضر حين تصل إليه، وشاشة LCD في الترويسة تعرض اسم المنطقة. وخلف الواجهة شبكة رشاشات يجري فيها التدفق مرورًا بمقاييس الضغط، وطلب الفحص بطاقة معلّقة، وتاريخ الشركة لوحة بيانات معدّات محفورة.
- طلب زيارة فحص على بطاقة من ثلاث خطوات تفتح واتساب والرسالة جاهزة
- مصباح حيّ يبيّن إن كان المعرض مفتوحًا الآن
- صور رفوف المعرض الحقيقية، تُفتح كل منها بملء الشاشة
- Arabic
- Dark mode
- llms.txt
-
خياط برستيج VIP
خياط ثياب رجالية، الخبر
- الفكرة
- على المقاس: طبشورة الخياط ترسم باترون الثوب، والمتر يقيسه، والدرزة تُغلقه، ثم يملؤه القماش ليصير الثوب المعلّق، بجانب كتالوج عيّنات قماش ثلاثي الأبعاد.
- جهّز ثوبك — الياقة والكم والجيب والأزرار والقماش — ويصل اختيارك مع الحجز
- حجز على ثلاث خطوات يفتح واتساب والرسالة جاهزة
- فاتح افتراضياً، مع زر قمر للوضع الداكن
- Arabic + English
- 3D
- Mobile first
-
الريم الخروف المشوي
خروف مشوي على الفحم، الخبر
- الفكرة
- جمر حيّ: تبدأ الصفحة ليلاً ثم يتّقد الفحم. جمر وشرر يتصاعد من الفحم الحقيقي في الصورة، ونور دافئ يرتعش على الخروف، والعنوان يتوهّج ثم يبرد. وعلى الجوال يعمل كتطبيق: شريط سفلي وطلب على خطوات.
- الطلب يصل جاهزاً على واتساب المحل
- معرض صور وتقييمات Google
- وضع فاتح وداكن
- Arabic
- Canvas
- Mobile first
بعيداً عن أعمال العملاء: معرض تصاميم بورتفوليو، بُنيت لتوسيع ما يمكن أن يكونه موقع شخصي.
تريد موقعاً لا يشبه إلا صاحبه؟
أرسل لي ملفك على LinkedIn أو رابط محلك على خرائط Google، وأخبرك بما سأبنيه.
لنبدأ الحديث