LOADING EXPERIENCE
⟨ البداية ⟩
✦ دورة احترافية مدفوعة في تطوير الويب SKILVEX

سكيلفكس — حيث يبدأ
مشوارك البرمجي.

دورة احترافية متكاملة في تطوير المواقع بإشراف مباشر وتتبع شخصي لكل طالب.

سجّل الآن تعرف علينا

// المسارات

مسارات الدورة

🌐
مسار الواجهات الأمامية
Front-End Development
  1. HTML & CSS — أساسيات بناء الصفحات
  2. Bootstrap — تصميم متجاوب واحترافي
  3. JavaScript — البرمجة والتفاعلية
  4. React.js (أساسي) — بناء واجهات ديناميكية
  5. React.js (متقدم) — تطبيقات متكاملة
سجّل الآن ←
⚙️
مسار الواجهات الخلفية
Back-End Development
  1. SQL (أساسي) — قواعد البيانات
  2. SQL (متقدم) — استعلامات معقدة
  3. PHP — برمجة الخادم
  4. API — ربط الأنظمة
  5. Laravel (أساسي) — إطار العمل
  6. Laravel (متقدم) — مشاريع متكاملة
سجّل الآن ←

← اسحب للتنقل →

// المميزات

كيف تعمل الدورة؟

📹
متابعة عبر الزوم

تسليم التاسكات يتم عبر جلسات زوم مع مشاركة الشاشة للمراجعة المباشرة.

💬
مجموعة واتساب حصرية

متابعة يومية ودعم مستمر عبر مجموعة واتساب تضم جميع طلاب البرمجة.

✅
نظام التاسكات

بعد كل مرحلة تتلقى تاسك عملي تطبق فيه ما تعلمته تحت إشراف المدرب مباشرة.

🎯
نشاطات تفاعلية

نشاطات دورية متنوعة تشمل 29 موضوعاً يختارها الطلاب عبر تسويط جماعي.

// أرقامنا

الدورة بالأرقام

0 مستويات Front-End
0 مستويات Back-End
0 نشاط تفاعلي
0 قسط الدورة

// الطلاب

ماذا يقول طلابنا

★★★★★

"أفضل استثمار قمت به، المتابعة الشخصية غيّرت طريقة تعلمي كلياً."

👨
محمد العمريFront-End · طالب
★★★★★

"نظام التاسكات أجبرني على التطبيق الفعلي وليس فقط المشاهدة."

👩
سارة الزهرانيBack-End · طالبة
★★★★★

"من الصفر إلى بناء مشاريع كاملة في وقت قياسي."

👨
عبدالله القحطانيFull-Stack · طالب

// الانطلاق

ابدأ رحلتك
البرمجية اليوم.

انضم إلى دورة Skilvex واكتسب مهارات تطوير المواقع من الصفر حتى الاحتراف بإشراف مباشر.

سجّل الآن — 125$ تواصل معنا
done'); }); } }); })(); /* ── Shockwave on zone transitions ──────────────────────────── */ (function () { var lastZone = 0; function emitShockwave() { var sw = document.createElement('div'); sw.className = 'shockwave'; document.body.appendChild(sw); setTimeout(function () { if (sw.parentNode) { sw.parentNode.removeChild(sw); } }, 700); } ScrollTrigger.create({ trigger: '#scrollCont', start: 'top top', end: 'bottom bottom', onUpdate: function (self) { var pct = self.progress; var cur = 0; for (var zi = zones.length - 1; zi >= 0; zi--) { if (pct >= (zones[zi].zPos / TOTAL_Z) - 0.04) { cur = zi; break; } } if (cur !== lastZone) { lastZone = cur; emitShockwave(); } } }); })(); /* ── Portal sucked particles (zone 6) ───────────────────────── */ (function () { var pp = document.getElementById('portalPts'); if (!pp) { return; } var ppCols = ['#a78bfa', '#22d3ee', '#f472b6', '#fbbf24']; for (var i = 0; i < 18; i++) { var p=document.createElement('div'); p.className='portal-particle' ; var angle=Math.random() * 360; var dist=40 + Math.random() * 48; var sx=Math.cos(angle * Math.PI / 180) * dist + '%' ; var sy=Math.sin(angle * Math.PI / 180) * dist + '%' ; var col=ppCols[Math.floor(Math.random() * ppCols.length)]; p.style.cssText='--sx:' + sx + ';--sy:' + sy + ';' + '--sd:' + (2 + Math.random() * 3) + 's;' + 'background:' + col + ';box-shadow:0 0 6px ' + col + ';' + 'top:50%;left:50%;animation-delay:' + (-(Math.random() * 3)) + 's' ; pp.appendChild(p); } })(); /* ── Ambient audio — Web Audio API ──────────────────────────── */ (function () { var btn=document.getElementById('audioBtn'); if (!btn) { return; } var ctx=null, playing=false; var gain, osc1, osc2, osc3; function buildAudio() { ctx=new (window.AudioContext || window.webkitAudioContext)(); gain=ctx.createGain(); gain.gain.value=0; gain.connect(ctx.destination); /* Three oscillators: deep drone, mid tone, high shimmer */ osc1=ctx.createOscillator(); osc1.type='sine' ; osc1.frequency.value=55; osc2=ctx.createOscillator(); osc2.type='sine' ; osc2.frequency.value=110; osc3=ctx.createOscillator(); osc3.type='sine' ; osc3.frequency.value=220; var g1=ctx.createGain(), g2=ctx.createGain(), g3=ctx.createGain(); g1.gain.value=0.18; g2.gain.value=0.08; g3.gain.value=0.04; osc1.connect(g1); g1.connect(gain); osc2.connect(g2); g2.connect(gain); osc3.connect(g3); g3.connect(gain); osc1.start(); osc2.start(); osc3.start(); /* Slow LFO modulation on osc2 frequency */ var lfo=ctx.createOscillator(); lfo.frequency.value=0.08; var lfoG=ctx.createGain(); lfoG.gain.value=8; lfo.connect(lfoG); lfoG.connect(osc2.frequency); lfo.start(); } btn.addEventListener('click', function () { if (!ctx) { buildAudio(); } if (ctx.state==='suspended' ) { ctx.resume(); } playing=!playing; gain.gain.cancelScheduledValues(ctx.currentTime); gain.gain.linearRampToValueAtTime(playing ? 0.55 : 0, ctx.currentTime + 1.5); btn.textContent=playing ? '🔊' : '🔇' ; btn.setAttribute('aria-label', playing ? 'إيقاف الصوت' : 'تشغيل الصوت' ); }); })(); /* ── Performant Custom Cursor ──────────────────────────────────── */ if (!isMob) { var curO=document.getElementById('curO'); var curI=document.getElementById('curI'); var mX=window.innerWidth / 2, mY=window.innerHeight / 2; var oX=mX, oY=mY; var LERP=0.12; var curHoverEls='a,button,.ppod,.fpanel,.tpod,.btn-p,.btn-g,.dot-nav button' ; document.addEventListener('mousemove', function (e) { mX=e.clientX; mY=e.clientY; curI.style.transform='translate3d(' + mX + 'px, ' + mY + 'px, 0)' ; }, { passive: true }); (function rafLoop() { oX +=(mX - oX) * LERP; oY +=(mY - oY) * LERP; curO.style.transform='translate3d(' + oX + 'px, ' + oY + 'px, 0)' ; requestAnimationFrame(rafLoop); })(); document.addEventListener('mouseover', function (e) { if (e.target.closest(curHoverEls)) { document.body.classList.add('cursor-hover'); } }, { passive: true }); document.addEventListener('mouseout', function (e) { if (e.target.closest(curHoverEls)) { document.body.classList.remove('cursor-hover'); } }, { passive: true }); document.addEventListener('mouseleave', function () { curO.style.opacity='0' ; curI.style.opacity='0' ; }); document.addEventListener('mouseenter', function () { curO.style.opacity='1' ; curI.style.opacity='1' ; }); } /* ══════════════════════════════════════════════════════════════ MOBILE — VERTICAL HYPERSPACE ENGINE Runs only on < 768px devices ══════════════════════════════════════════════════════════════ */ if (isMob) { /* ── Reduced motion guard ──────────────────────────────────── */ var prefersReduced=window.matchMedia('(prefers-reduced-motion: reduce)').matches; /* ── 1. Show hyperspace background ────────────────────────── */ var hs=document.getElementById('hyperspace'); if (hs) { hs.style.display='block' ; } /* ── 2. Inject 40 CSS star streaks (DOM only, no RAF) ──────── */ if (hs && !prefersReduced) { var STREAK_N=40; var streakCols=['#a78bfa', '#22d3ee' , '#f472b6' , '#ffffff' , '#a78bfa' , '#ffffff' ]; for (var si=0; si < STREAK_N; si++) { var sk=document.createElement('div'); sk.className='star-streak' ; var skLeft=Math.random() * 100; var skH=40 + Math.random() * 80; /* 40–120 px tall */ var skDur=1.2 + Math.random() * 2.8; /* 1.2–4s */ var skDel=-(Math.random() * skDur); /* negative=pre-started */ var skCol=streakCols[Math.floor(Math.random() * streakCols.length)]; var skOp=0.3 + Math.random() * 0.7; sk.style.cssText='left:' + skLeft + '%;' + 'top:0;' + 'height:' + skH + 'px;' + 'background:linear-gradient(to bottom,' + skCol + ',transparent);' + 'opacity:' + skOp + ';' + '--sd:' + skDur + 's;' + '--dl:' + skDel + 's;' + 'box-shadow:0 0 3px ' + skCol + ';' ; hs.appendChild(sk); } } /* ── 3. GSAP zone reveals — scale + rotateX (mobile feel) ── */ if (!prefersReduced && typeof gsap !=='undefined' ) { /* Override y-shift reveals with 3D card materialize */ var mZones=['#z2i', '#z3i' , '#z4i' , '#z5i' , '#z6i' ]; gsap.set(mZones, { autoAlpha: 0, scale: 0.5, rotateX: 15, transformOrigin: '50% 50%' }); mZones.forEach(function (sel, mi) { var zId=sel.replace('#', '' ); var zData=zones.filter(function (z) { return z.id===zId; })[0]; if (!zData) { return; } var tPeak=(zData.zPos / TOTAL_Z) * TL_DUR; var tIn=tPeak - 0.35; var tOut=tPeak + 0.55; tl.to(sel, { autoAlpha: 1, scale: 1, rotateX: 0, duration: 0.5, ease: 'back.out(1.2)' }, tIn); if (mi < mZones.length - 1) { tl.to(sel, { autoAlpha: 0, scale: 0.88, rotateX: -8, duration: 0.32, ease: 'power2.in' }, tOut); } }); /* Stats: stagger fall from above */ var tStats=(2600 / TOTAL_Z) * TL_DUR - 0.3; tl.from('.spod', { autoAlpha: 0, y: -40, scale: 0.85, stagger: 0.15, duration: 0.4, ease: 'power3.out' }, tStats); } /* ── 4. Word-by-word hero title reveal (mobile) ─────────────── */ (function () { if (prefersReduced) { return; } var lines=[ document.getElementById('z1L1'), document.getElementById('z1L2') ]; lines.forEach(function (line) { if (!line) { return; } /* replace char spans with word spans for mobile */ var rawTxt=line.textContent; /* if already split into .ch spans, get raw text */ if (line.querySelector('.ch')) { rawTxt=Array.from(line.querySelectorAll('.ch')) .map(function (c) { return c.textContent; }).join(''); line.innerHTML='' ; } else { line.textContent='' ; } rawTxt.split(' ').forEach(function (word, wi) { if (!word) { return; } var s = document.createElement(' span'); s.className='ch' ; s.style.cssText='display:inline-block;opacity:0;' + 'transform:translateY(20px);' + 'transition:opacity 0.4s ease ' + (0.5 + wi * 0.12) + 's,' + 'transform 0.4s ease ' + (0.5 + wi * 0.12) + 's;' ; s.textContent=word; line.appendChild(s); /* space between words */ if (wi < rawTxt.split(' ').length - 1) { line.appendChild(document.createTextNode(' \u00A0')); } }); }); /* Trigger reveal after short delay */ setTimeout(function () { document.querySelectorAll('#z1H1 .ch').forEach(function (s) { s.style.opacity='1' ; s.style.transform='translateY(0)' ; }); }, 100); })(); /* ── 5. Swipe carousel for study paths ──────────────────────── */ (function () { var carousel=document.getElementById('pathsCarousel'); var dotsWrap=document.getElementById('pathsDots'); if (!carousel || !dotsWrap) { return; } var slides=Array.from(carousel.querySelectorAll('.path-slide')); var dots=Array.from(dotsWrap.querySelectorAll('.path-dot')); var cur=0; var total=slides.length; var touchStartX=0; var touchStartY=0; var swiping=false; function goTo(idx, dir) { if (idx===cur) { return; } slides[cur].classList.remove('active'); dots[cur].classList.remove('on'); cur=(idx + total) % total; slides[cur].classList.add('active'); slides[cur].classList.remove('flip-in'); /* Force reflow to re-trigger animation */ void slides[cur].offsetWidth; slides[cur].classList.add('flip-in'); dots[cur].classList.add('on'); } /* Dot nav */ dots.forEach(function (dot) { dot.addEventListener('click', function () { goTo(+dot.dataset.pi, 1); }); }); /* Touch events */ carousel.addEventListener('touchstart', function (e) { touchStartX=e.touches[0].clientX; touchStartY=e.touches[0].clientY; swiping=true; }, { passive: true }); carousel.addEventListener('touchend', function (e) { if (!swiping) { return; } swiping=false; var dx=e.changedTouches[0].clientX - touchStartX; var dy=e.changedTouches[0].clientY - touchStartY; /* Only respond if horizontal swipe> 40px and more horizontal than vertical */ if (Math.abs(dx) > 40 && Math.abs(dx) > Math.abs(dy)) { goTo(dx > 0 ? cur - 1 : cur + 1, dx > 0 ? -1 : 1); } }, { passive: true }); /* Keyboard accessibility */ dotsWrap.addEventListener('keydown', function (e) { if (e.key === 'ArrowLeft' || e.key === 'ArrowDown') { goTo(cur + 1, 1); } if (e.key === 'ArrowRight' || e.key === 'ArrowUp') { goTo(cur - 1, -1); } }); /* Auto-advance every 4s when zone is visible */ var autoTimer = null; function startAuto() { clearInterval(autoTimer); autoTimer = setInterval(function () { goTo(cur + 1, 1); }, 4000); } function stopAuto() { clearInterval(autoTimer); } carousel.addEventListener('touchstart', stopAuto, { passive: true }); carousel.addEventListener('touchend', startAuto, { passive: true }); startAuto(); })(); } /* end isMob */ /* ── IntersectionObserver: pause animations on off-screen zones ── */ (function () { if (!('IntersectionObserver' in window)) { return; } var freezeObs = new IntersectionObserver(function (entries) { entries.forEach(function (entry) { entry.target .querySelectorAll('.cpt,.ring,.star-streak,.portal-particle') .forEach(function (el) { el.style.animationPlayState = entry.isIntersecting ? 'running' : 'paused'; }); }); }, { threshold: 0, rootMargin: '100px' }); zoneEls.forEach(function (z) { freezeObs.observe(z); }); window.addEventListener('beforeunload', function () { freezeObs.disconnect(); }, { once: true }); })(); /* ── Memory cleanup on navigation ───────────────────────────── */ window.addEventListener('beforeunload', function () { ScrollTrigger.getAll().forEach(function (t) { t.kill(); }); gsap.globalTimeline.clear(); }, { passive: true }); console.log('[Skilvex] ✅ Engine ready — optimized build'); })();