personal portfolio

الـ Tech Stack والهندسة اللي ورا الموقع ده بتتقسم كالتالي:

?️ الـ Tech Stack (الأدوات المستخدمة)

1. الـ Framework والأساس

Next.js (React): ده العصب بتاع الموقع. مش معمول بـ HTML عادية عشان الـ Performance والـ SEO. Next.js بيخلي الموقع يفتح في لمح البصر وبيعمل Optimization للصور تلقائي، فالموقع بيبقى طلقة حتى لو عليه جرافيكس كتير.

TypeScript: عشان الكود يبقى نضيف ومنظم، وما يطلعش فيه Errors غلسة وإنت شغال، ويسهل عليك وأنت بتبني الـ Components.

2. الـ Styling والـ UI (الشياكة والـ Design)

Tailwind CSS: ده اللي اتعمل بيه الديزاين كله من غير وجع دماغ الـ CSS القديم.

Glassmorphic UI: التأثير بتاع "الـزجاج الضبابي" أو الـ Frosted Glass اللي موجود في الـ Header وفي الكروت بتاعة الـ Skills، معمول بالـ backdrop-blur بتاعة Tailwind مع تظبيط الـ Opacity (الشفافية) للحواف.

الـ Glow والـ Gradients: الكلام المنور زي "Code" و "Intelligence" معمول بـ CSS Gradients واخدة تأثير الـ Glow عن طريق drop-shadow أو box-shadow نيون، ومقصوصة على مقاس الكلام بالـ bg-clip-text.

3. الـ Animations والحركة

Framer Motion: دي بقى السحر كله! هي اللي مسؤولة عن الـ Fade-in وأنت بتعمل Scroll، والحركة الانسيابية لما تقف بالماوس (Hover) على الـ Buttons، والـ Nodes اللي بتتحرك حوالين صورتك (AI/ML, Security, Embedded Systems).

React Particles / Three.js: الشبكة والـ Grid اللي في الخلفية اللي فيها نقط وخطوط بتتحرك وبتتفاعل مع حركة الماوس دي بتتعمل بـ Libraries خفيفة مخصصة للـ Particle Effects عشان ما تتقلش الجهاز.