PhineX Lab | Portfolio Step 8

الخطوة ٨

JavaScript — الحياة والتفاعل

الخطوة الأخيرة والأروع! سنضيف تأثير الكتابة، انيميشن عند التمرير، وأشرطة المهارات المتحركة.

المهام

أكمل مصفوفة titles وأضف الوظائف: 'Full-Stack Developer'، 'UI/UX Designer'، 'Open Source Contributor'

اكتب وظيفة typeWriter(): إذا لم تكن deleting، أضف حرفاً بـ slice(0, cIdx+1). إذا وصلنا للنهاية اجعل deleting = true

أضف revealObserver: IntersectionObserver يضيف visible لعناصر .reveal عند ظهورها

أضف skillObserver: يضيف animated لعناصر .skill-fill عند وصول الـ .skill-category

💡 IntersectionObserver:

new IntersectionObserver((entries) => {

 entries.forEach(e => {

  if (e.isIntersecting) e.target.classList.add('visible');

 });

})

alexmorgan.dev / portfolio