Portfolio project

عادل محمد عادل محمد

اصنع موقعك الشخصي من الصفر

رحلة عملية ممتعة لبناء منزلك الرقمي على الإنترنت، من أول سطر كود وحتى النشر.

عن المشروع

هل حلمت يوماً أن يكون لك "منزل رقمي" خاص بك على الإنترنت؟
ليس مجرد حساب على فيسبوك أو لينكد إن، بل موقع حقيقي يحمل اسمك، تعرض فيه مهاراتك، وتتحكم في كل لون وزاوية فيه!

في هذا المشروع التعليمي، لن نضيع الوقت في النظريات المملة. سنرتدي قبعة المطورين ونبدأ فوراً في بناء موقع معرض أعمال شخصي (Portfolio) كامل واحترافي. هذا الموقع سيكون بطاقة تعارفك الرقمية أمام العالم وأصحاب العمل.

ماذا ستتعلم في نهاية هذا المشروع؟

1

HTML Structure

كيف تبني الهيكل العظمي لأي صفحة ويب بشكل صحيح ومنظم.

2

CSS Styling

فن تنسيق المواقع واختيار الألوان والخطوط الجذابة.

3

Responsive Design

كيف تجعل موقعك يبدو رائعاً على جميع الشاشات.

4

Deployment

رفع موقعك على الإنترنت مجاناً ليراه الجميع.

ماذا تحتاج لتبدأ؟

جهاز كمبيوتر
برنامج VS Code
مشروبك المفضل
ساعة أسبوعياً

خارطة طريق المشروع

متاح الآن

الأسبوع الأول: الهيكل العظمي (HTML)

سنتعلم الأساسيات، ونقوم ببناء الهيكل "الخام" لصفحتك.

اضغط للبدء
قريباً

الأسبوع الثاني: ألوان وحياة (CSS)

وداعاً للشاشة البيضاء المملة! سنتعلم كيف نلون الخلفيات وننسق النصوص.

قريباً

الأسبوع الثالث: اللمسات الاحترافية

كيف نجعل الموقع متجاوباً (Responsive) ليعمل على جميع الشاشات.

قريباً

الأسبوع الرابع: النشر (Deployment)

لحظة الحقيقة! سنقوم برفع ملفاتنا ليصبح لك رابط حقيقي.




function initializeIntersectionObserver(elements,options={threshold:0.1,rootMargin:'0px 0px -50px 0px'}){const observer=new IntersectionObserver((entries)=>{entries.forEach(entry=>{if(entry.isIntersecting){entry.target.style.opacity='1';entry.target.style.transform='translateY(0)'}})},options);elements.forEach(el=>{el.style.opacity='0';el.style.transform='translateY(30px)';el.style.transition='opacity 0.6s ease, transform 0.6s ease';observer.observe(el)})} function initializeSmoothScrolling(){document.querySelectorAll('a[href^="#"]').forEach(anchor=>{anchor.addEventListener('click',function(e){e.preventDefault();const target=document.querySelector(this.getAttribute('href'));if(target){target.scrollIntoView({behavior:'smooth',block:'start'})}})})} function initializeLazyLoading(images){const imageObserver=new IntersectionObserver((entries,observer)=>{entries.forEach(entry=>{if(entry.isIntersecting){const img=entry.target;img.src=img.dataset.src||img.src;img.classList.remove('lazy');imageObserver.unobserve(img)}})});images.forEach(img=>{img.dataset.src=img.src;img.classList.add('lazy');imageObserver.observe(img)})} function debounce(func,wait){let timeout;return function executedFunction(...args){const later=()=>{clearTimeout(timeout);func(...args)};clearTimeout(timeout);timeout=setTimeout(later,wait)}} document.addEventListener('DOMContentLoaded',()=>{initializeSmoothScrolling();initializeLazyLoading(document.querySelectorAll('img'));initializeHeroSection();initializeFeaturedLessons();initializeBeginnersGuide();initializeRecentProjects();initializeNewsletter();initializeFAQ();initializeLatestArticles()})