PhineX Lab | Portfolio Step 6

الخطوة ٦

أشرطة المهارات المتحركة

سنضيف أشرطة تقدم تستخدم CSS Custom Properties لتحديد النسبة بشكل ذكي.

المهام

للـ .skills-grid: display: grid، grid-template-columns: 1fr 1fr، gap: 24px

للـ .skill-bar: height: 5px، background: rgba(255,255,255,.06)، border-radius: 100px، overflow: hidden

للـ .skill-fill: height: 100%، width: 0%، background: linear-gradient(to right, var(--neon), #00cc88)، transition: width 1.2s ease

للـ .skill-fill.animated: width: var(--pct) — هذه تقرأ الـ CSS Variable من الـ HTML تلقائياً!

💡 CSS Custom Properties في HTML:
style="--pct:90%" في الـ HTML يمرر قيمة للـ CSS التي تقرأها بـ var(--pct) — طريقة ذكية جداً!

alexmorgan.dev / portfolio