تجربة ج — الدفتر

الفصل ١

نبذة عني

باختصار: من أنا، وين أشتغل، مبادئي، والخدمات اللي أقدّمها.

سنين+٥

مشاريع+١٢

عملاء+١٠

مقالات٨

أنا ضيف الله أحمد الفروي، مهندس برمجيات ساكن في الرياض. شغلي اليومي React و Next.js و TypeScript و Tailwind. إذا احتجت أشتغل مشروع كامل لوحدي أو الباك إند، أستخدم Laravel.

أهتم بالـأداء وقابلية الاستخدام ودعم اللغة العربية من البداية، مو فكرة تتذكّر آخر شي. هذا اللي يخلّي الواجهة تصمد ولا تنكسر بعد أول سنة.

وين أنا

الرياض، السعودية

الساعة عندنا

—

~/مبادئ.json

أُسلّم:تحديثات صغيرة · باستمرار · بوضوح
مسؤول عن:الواجهات · الربط مع الـAPI · نطاق المشروع
أحب:الوضوح · الأداء · قابلية الوصول
ما أحب: المناسبات المزدحمة · العشوائية عمومًا
أختبر على:بيانات حقيقية · مستخدمين حقيقيين
أُؤمن:الكود الواضح والتوثيق الجيد لهما نفس الأهمية

// خدمات

تطوير front-end
React, Next.js, TypeScript, Tailwind.
شغل Full-Stack
Laravel, PHP, MySQL, Supabase.
تنفيذ التصاميم
تصاميم pixel-perfect في كود نظيف.
هندسة النظام والـUI
أنظمة components واستراتيجية رندرنغ.
تشغيل المنتج
متطلبات، تحليل، UML، سكوب.
SEO و أداء
Schemas، Core Web Vitals، ترتيب أعلى.

الفصل ٢

ألبوم الشغل

شغل إنتاج — front-end وتطبيقات Full-Stack. كل مشروع بطاقة في الألبوم، اضغط أي وحدة وافتحه.

رقم ٠٠1

Miyar

Next.jsContext APITailwindcssAPI integaration

A website for investing company

٢٠٢٤افتحه ←

رقم ٠٠2

Get ADX

React.jsHTML5Tailwind CSSCSS3

Dashboard to manage permissions and media content across locations and screens

٢٠٢٥افتحه ←

رقم ٠٠3

Try ADX

React.jsJavaScriptTailwind CSSResponsive Design

A landing page for ADX that showcase the statistics of the company and act as a portfolio

٢٠٢٥افتحه ←

رقم ٠٠4

دار عنبر | DAR ANBAR

Next.jsReact.jsJavaScriptCSS3

A bilingual (Arabic-first / English), RTL-aware digital flagship for a Saudi oud & perfume house. Statically generated, self-hosted fonts, heavy on scroll-driven motion.

٢٠٢٦افتحه ←

رقم ٠٠5

Sadagaat Dashboard

React.jsTypeScriptShadcn UIContext API

A comprehensive admin dashboard for a UK-based charitable organization, enabling complete website management and content control.

٢٠٢٤افتحه ←

رقم ٠٠6

ثمار | Thimar

Next.jsReact.jsTypeScriptTailwind CSS

A concept marketing site for a fictional Shariah-compliant micro-investment platform, built to showcase front-end, motion, RTL, and design-system engineering.

٢٠٢٦افتحه ←

رقم ٠٠7

Samra Roastery · محمصة سمراء

Next.jsTypeScriptCSS3Tailwind CSS

Bilingual (Arabic-first, RTL) marketing site for a Saudi specialty-coffee roastery. Next.js App Router, statically generated per locale.

٢٠٢٦افتحه ←

رقم ٠٠8

Mutlaq Studio · استوديو مطلق

Next.jsReact.jsTypeScriptCSS3

A bilingual (AR/EN, RTL-first) marketing site for a Riyadh architecture studio. Type-led, near-monochrome, with kinetic variable-font headlines and scroll-drawn architectural line-work.

٢٠٢٦افتحه ←

رقم ٠٠9

NeelainCom

LaravelVue.jsMySQLTailwindcss

A Q&A platform similar to StackOverflow for college community knowledge sharing.

٢٠٢٤افتحه ←

رقم ٠10

Food Menu App

Next.jsFirebaseTailwindcss

A scalable restaurant menu application with admin dashboard.

Courses Dashboard Template Build with Tailwind CSS, vite, vue 3, and chart.js shapes with RTL Languages Support.

٢٠٢٤افتحه ←

رقم ٠12

Image Editor

React.jsNext.jsTypeScriptHTML5

Image Editor to edit image orientation, or adding texts or qr codes

٢٠٢٥افتحه ←

الفصل ٣

الأدوات اللي أشتغل فيها

اللي أستخدمها يوميًا، وبقية العدّة. مُعلّمة (✓) = على ظهر يدي. غير مُعلّمة = أنا لسّا في الطريق (وأقول الصدق في الحالتين).

النجوم

React (Next.js + RSC)
TypeScript
Tailwind CSS
accessibility · WCAG
دعم RTL / LTR

الـfront-end

HTML, CSS, JavaScript
Vue.js
React Query
Zustand
Framer Motion · GSAP
dnd-kit, i18next

الباك إند

PHP / Laravel
MySQL
Supabase
Firebase
Edge / Serverless

العدّة

Git, GitHub
VS Code, Postman
Vercel, Vite
npm, pnpm
NestJS (قيد التعلّم)

الفصل ٤

وين راحت الساعات

صفحات سيرة ملصقة — كل ورقة محطّة على الطريق.

١١/٢٠٢٤ — لين الحينالحين

مطوّر front-end

ADX · الرياض

أشتغل على منصة digital signage كاملة — محاكي حملات، أداة قوائم تشغيل بالسحب والإفلات، ولوحة إدارة شاملة.

✓بنيت محاكي حملات اسمه 'Try ADx' يكتشف نسبة العرض على الارتفاع من جهة العميل ويعرض الوسايط فورًا فوق رسوم مخصّصة.
✓سويت أداة قوائم تشغيل وإنشاء وسايط بالسحب والإفلات، مع تحرير صور داخل البراوزر وصانع قوالب باستخدام dnd-kit.
✓وفّرت دعم العربي RTL والإنجليزي LTR عبر i18next، والتزمت بـ WCAG وHTML دلالي في كل المنصة.
✓وصّلت مشغّل اللافتات على الويب بستة APIs لمايكرو سيرفسز (محتوى، جدولة، تحليلات، أجهزة، يوزرز، وسايط) مع مزامنة واسترداد.
✓بنيت لوحة الإدارة الأساسية مع نظام صلاحيات RBAC لأكثر من ٨ أدوار وأذونات مربوطة بالموقع.

ReactNext.jsTypeScriptZustandReact QueryTailwind CSSdnd-kiti18next

رقم ٠1

٠١/٢٠١٨ — لين الحينالحين

مطوّر Full-Stack — مستقل

فريلانس

تطبيقات ويب كاملة في مجالات مختلفة — front-end يقود وأمتد للباك إند، نُشرت على Vercel و Digital Ocean.

✓سلّمت أكثر من ٥ تطبيقات ويب كاملة من الفكرة لين النشر.
✓طلّعت نتايج Lighthouse فوق ٩٠ (مثلاً Miyar Capital) عن طريق dynamic imports و code splitting وتحسين الصور وتحليل DevTools.
✓نزّلت زمن تحميل الصفحات ٣٠–٤٠٪ عبر شغل Core Web Vitals، وارتفع ترتيب البحث.
✓بنيت RESTful APIs بـ Laravel و MySQL بـ uptime ٩٩٫٥٪.
✓شحنت موشن وتفاعلات دقيقة بـ CSS animations و Framer Motion و GSAP.

ReactNext.jsTypeScriptLaravelMySQLSupabaseFramer MotionGSAP

رقم ٠2

٠٥/٢٠٢٠ — ١١/٢٠٢٤

مطوّر front-end

Meraki UI Lab

سويت أنظمة components قابلة لإعادة الاستخدام، سهلة الوصول، بهوية بصرية ثابتة لفرق منتج cross-functional.

✓رفعت زيارات الموقع ٢٠٪ خلال ٦ أشهر، بتحسين سرعة التحميل ووضوح المحتوى.
✓شحنت أكثر من ١٥٠ component قابل لإعادة الاستخدام بهوية موحّدة، ونزل زمن التطوير ٣٥٪.
✓طبّقت دعم RTL على ١٠٠٪ من المكوّنات مع HTML دلالي و ARIA، وارتفع تفاعل المستخدم العربي ٢٧٪.
✓سلّمت واجهات بنسبة رضا عملاء ٩٥٪ ضمن فريق cross-functional من ٤ أشخاص.

React.jsTailwindCSSJavaScriptHTML5CSS3WCAG

رقم ٠3

الفصل ٥