بورتفوليو عباس قرعاني

نظرة عامة على البنية

graph LR
    A["تطبيق أحادي الصفحة<br/>Vite + React"] --> B["shadcn/ui فوق Radix"]
    A --> C[Tailwind CSS v4]
    A --> D["أقسام framer-motion"]
    A --> E["react-hook-form + Zod"]
    A --> F[TanStack Query]
    A --> G[Vercel]

موقع بورتفوليو بتكليف، سُلّم على هيئة تطبيق React من صفحة واحدة. كان المطلوب واضحًا — عرض خلفية العميل وأعماله بوضوح، وسرعة في التحميل، وقراءة مريحة على الهاتف — فجاء البناء بسيطًا عن قصد: صفحة واحدة مقسومة إلى أقسام، تُستخدم فيها الحركة لتوجيه الانتباه لا للزينة.

المكوّنات مأخوذة من shadcn/ui فوق عناصر Radix الأساسية، ما يبقي العناصر التفاعلية متاحة للجميع افتراضيًا. ويتحقق نموذج التواصل عبر Zod من خلال react-hook-form قبل أي إرسال.

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

• تخطيط من صفحة واحدة بأقسام تظهر بحركة
• مكوّنات تفاعلية متاحة مبنية على عناصر Radix الأساسية
• نموذج تواصل بتحقق قائم على المخططات ورسائل خطأ ضمن الحقول
• طباعة وتخطيط متجاوبان بدءًا من شاشات الهاتف
• منشور على Vercel برابط عام مباشر

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

• الواجهة الأمامية: React، TypeScript، Vite، Tailwind CSS v4
• المكوّنات: shadcn/ui، Radix UI، framer-motion
• النماذج: react-hook-form، Zod
• الاستضافة: Vercel