PhineX Lab | Portfolio Step 4

الخطوة ٤

قسم الـ Hero المذهل

القسم الأكثر أهمية في الـ Portfolio! سنضيف نص متدرج وحلقة دوّارة وعناصر عائمة.

المهام

للـ #hero: min-height: 100vh، display: flex، align-items: center، justify-content: center، gap: 60px

للـ .hero-title: أضف تأثير النص المتدرج:
background: linear-gradient(135deg, #fff, #c9d1d9, var(--neon));
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;

للـ .avatar-ring: أضف conic-gradient مع animation: spinRing 10s linear infinite

للـ .floating-badge: أضف position: absolute و animation: floatBadge 3s ease-in-out infinite

💡 Gradient Text: background-clip: text مع text-fill-color: transparent تجعل لون الخلفية يظهر عبر حروف النص — مميزة جداً!

alexmorgan.dev / portfolio