دراسة الحالةVercel - Production

أول بورتفوليو شخصي للمطور

بورتفوليو مطور حديث وresponsive مبني باستخدام Next.js، يحتوي على أقسام متحركة ومعرض مشاريع وتحسين SEO ومكونات UI نظيفة قابلة لإعادة الاستخدام.

معاينة مباشرة الكود المصدري

التقنيات الأساسية

Next.js
React
Tailwind CSS
Framer Motion

الأداء

Dynamic imports وتقسيم الكود لتقليل bundle size.
تحميل كسول للمكونات غير الحرجة.
تحسين الصور والأصول الثابتة.
استخدام next/font لتحسين الخطوط.

الأمان

نشر جاهز للإنتاج
حماية متغيرات البيئة

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

Hero Section مع مقدمة typewriter وأزرار CTA.

About Section مع bio متحرك وLottie animation.

Skills Section مع قائمة مهارات متحركة وتفاصيل ومؤشرات تقدم.

Projects gallery مع صفحات تفاصيل لكل مشروع.

Contact form متكامل عبر Web3Forms.

حركات Framer Motion وLottie عبر الواجهة.

بنية المشروع

app/
├── layout.js                # Root layout (SEO metadata, fonts, JSON-LD)
├── page.js                  # Home page (Hero, About, Skills, Projects, Contact)
├── globals.css              # Global styles and CSS variables
├── icon.png                 # Favicon
├── componentes/
│   ├── layout/              # Header, Footer
│   ├── sections/            # Hero, About, ProjectsList, ContactMe
│   └── ui/                  # Avatar, Skills, ProjectCard, DisableRightClick
├── services/                # Data layer (JSON + API helpers)
├── projects/[id]/page.js    # Dynamic project detail route
└── cv/                      # CV page
public/
├── images/                  # Project screenshots and photos
├── icons/                   # Tech SVG icons and Lottie animations
└── logo/                    # Site logo

استراتيجيات التطوير

App Router لبنية routing نظيفة ومكونات Server Components.
صفحات مشاريع ديناميكية عبر route segment [id].
مكونات UI قابلة لإعادة الاستخدام.
SEO metadata للصفحات الأساسية.

واجهة المستخدم