script.js

const translations={ar:{name:"محمود عبدالله",nav_home:"الرئيسية",nav_about:"عني",nav_skills:"المهارات",nav_projects:"المشاريع",nav_experience:"الخبرة",nav_contact:"تواصل معي",welcome:"مرحباً بكم في ملفي الشخصي",hero_desc:"بخبرة تمتد لأكثر من 11 عاماً، أقدم حلولاً بصرية مبتكرة تبني هويات رقمية قوية وتضمن لعلامتك التجارية التميز والصدارة على منصات التواصل.",view_work:"شاهد أعمالي",download_cv:"تحميل السيرة الذاتية",about_title:"نبذة عني",about_desc:"مصمم جرافيك متخصص في بناء الهويات البصرية وتصميمات السوشيال ميديا، بخبرة تمتد لأكثر من 11 عاماً في تحويل الأفكار إلى واقع بصري ملموس. شغفي يكمن في ابتكار تصاميم فريدة تجمع بين الجمال والوظيفة، مع التركيز على إبراز الرسالة التسويقية لكل علامة تجارية بأفضل صورة ممكنة.",years_exp:"سنوات خبرة",creative:"إبداعي",creative_desc:"أفكار مبتكرة وغير تقليدية",precise:"دقة",precise_desc:"اهتمام بأدق تفاصيل التصميم",harmonious:"متناسق",harmonious_desc:"تناسق ألوان وهوية قوية",professional:"احترافي",professional_desc:"تسليم في الموعد وجودة عالية",skills_title:"مهارات التصميم",skills_desc:"الأدوات والبرامج التي أتقنها لتقديم أفضل الحلول البصرية",design_tools:"برامج التصميم الأساسية",specialties:"مجالات التخصص",branding:"تصميم الهوية البصرية (Branding)",social_media:"تصاميم السوشيال ميديا",photo_editing:"تعديل الصور ودمجها",projects_title:"أعمالي المميزة",projects_desc:"نماذج من تصاميمي الإبداعية في مختلف المجالات",branding_design:"تصميمات البراندنج",branding_desc:"بناء استراتيجية بصرية شاملة تشمل النظم اللونية، الخطوط المخصصة، وكتيب معايير العلامة التجارية.",social_design:"تصاميم سوشيال ميديا",social_desc:"حملة إعلانية لمنصات التواصل الاجتماعي لزيادة التفاعل وبناء حضور رقمي قوي.",booth_design:"تصميمات الـ Booth",booth_desc:"تصميم منصات العرض والمعارض التجارية بأسلوب عصري يضمن استغلال المساحات وتجسيد الهوية.",view_more:"مشاهدة المزيد على Behance",experience_title:"الخبرة العملية",experience_desc:"عقد من الإبداع في صياغة الهويات البصرية",job1_title:"مصمم مطبوعات",job1_company:"تطوير وتنفيذ الهوية البصرية باحتراف",job1_desc:"متخصص في تصميم كافة أنواع المطبوعات (كروت – بروشورات – فلايرات – بانرات – باكدچينج)، مع الالتزام بالهوية البصرية، مواعيد التسليم، ومعايير الطباعة الاحترافية.",job2_title:"مصمم جرافيك أول (Senior)",job2_company:"وكالة إبداع متكاملة",job2_desc:"تطوير أكثر من 100 هوية تجارية ناجحة، التخصص في الدمج الرقمي المتقدم (Manipulation)، وتصميم واجهات المستخدم البصرية الأكثر تفاعلية.",job3_title:"مصمم جرافيك (Junior)",job3_company:"بداية الرحلة الإبداعية",job3_desc:"تأسيس المهارات في المطبوعات والتصاميم التجارية الأساسية، وإتقان أدوات Adobe Photoshop و Illustrator لخدمة العملاء المحليين.",contact_title:"تواصل معي",contact_desc:"لدي مشروع في بالك؟ دعنا نتحدث عنه!",contact_info:"معلومات التواصل",contact_text:"لا تتردد في التواصل معي لأي استفسار أو فرصة عمل. أنا متاح دائماً للمناقشة والتعاون في مشاريع جديدة.",email_label:"البريد الإلكتروني",phone_label:"الهاتف",location_label:"الموقع",location:"القاهرة، مصر",follow_me:"تابعني على",form_name:"الاسم",form_email:"البريد الإلكتروني",form_subject:"الموضوع",form_message:"الرسالة",send_message:"إرسال الرسالة",copyright:"جميع الحقوق محفوظة",typing_texts:["مصمم جرافيك","مصمم سوشيال ميديا"]},en:{name:"Mahmoud Abdalla",nav_home:"Home",nav_about:"About",nav_skills:"Skills",nav_projects:"Projects",nav_experience:"Experience",nav_contact:"Contact Me",welcome:"Welcome to my portfolio",hero_desc:"With over 11 years of experience, I provide innovative visual solutions that build strong digital identities and ensure your brand stands out and leads on social platforms.",view_work:"View My Work",download_cv:"Download CV",about_title:"About Me",about_desc:"A graphic designer specializing in building visual identities and social media designs, with over 11 years of experience turning ideas into tangible visual reality. My passion lies in creating unique designs that combine beauty and functionality, focusing on highlighting the marketing message for each brand in the best possible way.",years_exp:"Years Experience",creative:"Creative",creative_desc:"Innovative and unconventional ideas",precise:"Precise",precise_desc:"Attention to the smallest design details",harmonious:"Harmonious",harmonious_desc:"Color harmony and strong identity",professional:"Professional",professional_desc:"On-time delivery with high quality",skills_title:"Design Skills",skills_desc:"Tools and software I master to deliver the best visual solutions",design_tools:"Essential Design Tools",specialties:"Areas of Expertise",branding:"Visual Identity Design (Branding)",social_media:"Social Media Designs",photo_editing:"Photo Editing & Compositing",projects_title:"Featured Works",projects_desc:"Samples of my creative designs in various fields",branding_design:"Branding Designs",branding_desc:"Building a comprehensive visual strategy including color systems, custom fonts, and brand guidelines.",social_design:"Social Media Designs",social_desc:"Advertising campaigns for social platforms to increase engagement and build a strong digital presence.",booth_design:"Booth Designs",booth_desc:"Designing exhibition stands with a modern style that ensures optimal space utilization and brand embodiment.",view_more:"View More on Behance",experience_title:"Work Experience",experience_desc:"A decade of creativity in crafting visual identities",job1_title:"Print Designer",job1_company:"Professional Visual Identity Development",job1_desc:"Specialized in designing all types of prints (business cards, brochures, flyers, banners, backdrops), adhering to visual identity, delivery deadlines, and professional printing standards.",job2_title:"Senior Graphic Designer",job2_company:"Full-Service Creative Agency",job2_desc:"Developed over 100 successful brand identities, specialized in advanced digital compositing (Manipulation), and designed highly interactive visual user interfaces.",job3_title:"Junior Graphic Designer",job3_company:"Beginning of the Creative Journey",job3_desc:"Established skills in prints and basic commercial designs, mastering Adobe Photoshop and Illustrator tools to serve local clients.",contact_title:"Contact Me",contact_desc:"Have a project in mind? Let's talk about it!",contact_info:"Contact Information",contact_text:"Feel free to reach out for any inquiries or job opportunities. I'm always available for discussion and collaboration on new projects.",email_label:"Email",phone_label:"Phone",location_label:"Location",location:"Cairo, Egypt",follow_me:"Follow Me",form_name:"Name",form_email:"Email",form_subject:"Subject",form_message:"Message",send_message:"Send Message",copyright:"All Rights Reserved",typing_texts:["Graphic Designer","Social Media Designer"]}};

let currentLang='ar',typingInterval,textIndex=0,charIndex=0,isDeleting=!1;
const typingElement=document.getElementById('typing-text');

function toggleLanguage(){currentLang='ar'===currentLang?'en':'ar';const e=document.body,t=document.getElementById('lang-text');'en'===currentLang?(e.setAttribute('lang','en'),e.setAttribute('dir','ltr'),t.textContent='العربية'):(e.setAttribute('lang','ar'),e.setAttribute('dir','rtl'),t.textContent='English'),updateContent(),restartTypingEffect()}

function updateContent(){document.querySelectorAll('[data-translate]').forEach(e=>{const t=e.getAttribute('data-translate');translations[currentLang][t]&&(e.textContent=translations[currentLang][t])}),document.querySelectorAll('[data-translate-placeholder]').forEach(e=>{const t=e.getAttribute('data-translate-placeholder');translations[currentLang][t]&&(e.placeholder=translations[currentLang][t])})}

function restartTypingEffect(){clearInterval(typingInterval),type()}

function type(){const e=translations[currentLang].typing_texts[textIndex];isDeleting?typingElement.textContent=e.substring(0,charIndex-1):typingElement.textContent=e.substring(0,charIndex+1),isDeleting?charIndex--:charIndex++;let t=isDeleting?50:100;!isDeleting&&charIndex===e.length?(t=2e3,isDeleting=!0):isDeleting&&0===charIndex&&(isDeleting=!1,textIndex=(textIndex+1)%e.length,t=500),typingInterval=setTimeout(type,t)}

const contactForm=document.getElementById('contact-form'),status=document.getElementById('form-status'),btn=document.getElementById('submit-btn'),emailInput=document.getElementById('user-email');

contactForm.addEventListener('submit',async e=>{e.preventDefault();const t='mhmoudabdalla52@gmail.com';if(emailInput.value.trim().toLowerCase()===t.toLowerCase())return status.innerText='ar'===currentLang?'⚠️ عفواً، يرجى كتابة بريدك الإلكتروني الخاص بك وليس بريد صاحب الموقع.':'⚠️ Please enter your own email, not the site owner\'s email.',status.className='text-center font-bold mt-4 text-yellow-500',status.classList.remove('hidden'),void emailInput.focus();btn.disabled=!0,btn.innerText='ar'===currentLang?'جاري الإرسال...':'Sending...';const a=new FormData(e.target);fetch(e.target.action,{method:'POST',body:a,headers:{Accept:'application/json'}}).then(e=>{e.ok?(status.innerText='ar'===currentLang?'✅ تم الإرسال بنجاح!':'✅ Sent successfully!',status.className='text-center font-bold mt-4 text-green-500',status.classList.remove('hidden'),contactForm.reset()):(status.innerText='ar'===currentLang?'❌ حدث خطأ، حاول مرة أخرى.':'❌ An error occurred, please try again.',status.className='text-center font-bold mt-4 text-red-500',status.classList.remove('hidden'))}).catch(()=>{status.innerText='ar'===currentLang?'❌ مشكلة في الاتصال.':'❌ Connection problem.',status.classList.remove('hidden')}).finally(()=>{btn.disabled=!1,btn.innerText=translations[currentLang].send_message})});

const canvas=document.getElementById('particles-canvas'),ctx=canvas.getContext('2d');
let particles=[];

function resizeCanvas(){canvas.width=window.innerWidth,canvas.height=window.innerHeight}

class Particle{constructor(){this.x=Math.random()*canvas.width,this.y=Math.random()*canvas.height,this.size=3*Math.random()+1,this.speedX=.5*Math.random()-.25,this.speedY=.5*Math.random()-.25,this.opacity=.5*Math.random()+.2}update(){this.x+=this.speedX,this.y+=this.speedY,this.x>canvas.width&&(this.x=0),this.x<0&&(this.x=canvas.width),this.y>canvas.height&&(this.y=0),this.y<0&&(this.y=canvas.height)}draw(){ctx.fillStyle=`rgba(99, 102, 241, ${this.opacity})`,ctx.beginPath(),ctx.arc(this.x,this.y,this.size,0,2*Math.PI),ctx.fill()}}

function initParticles(){particles=[];for(let e=0;e<40;e++)particles.push(new Particle)}

function animateParticles(){ctx.clearRect(0,0,canvas.width,canvas.height),particles.forEach(e=>{e.update(),e.draw()}),particles.forEach((e,t)=>{particles.slice(t+1).forEach(t=>{const a=Math.sqrt((e.x-t.x)**2+(e.y-t.y)**2);if(a<100){ctx.strokeStyle=`rgba(99, 102, 241, ${.1*(1-a/100)})`,ctx.lineWidth=1,ctx.beginPath(),ctx.moveTo(e.x,e.y),ctx.lineTo(t.x,t.y),ctx.stroke()}})}),requestAnimationFrame(animateParticles)}

function reveal(){document.querySelectorAll('.reveal').forEach(e=>{const t=window.innerHeight,a=e.getBoundingClientRect().top;a<t-150&&e.classList.add('active')}),document.querySelectorAll('.skill-bar').forEach(e=>{const t=e.getBoundingClientRect();t.top<window.innerHeight&&t.bottom>0&&(e.style.width=e.getAttribute('data-width'))})}

document.getElementById('mobile-menu-btn').addEventListener('click',function(){document.getElementById('mobile-menu').classList.toggle('hidden')});

document.querySelectorAll('a[href^="#"]').forEach(e=>{e.addEventListener('click',function(e){e.preventDefault();const t=document.querySelector(this.getAttribute('href'));t&&(t.scrollIntoView({behavior:'smooth',block:'start'}),document.getElementById('mobile-menu').classList.add('hidden'))})});

const cloudBase='https://res.cloudinary.com/dzx6czfvn/image/upload/v1770382078/',albums={manipulation:[`${cloudBase}3_1_e3zu2z.webp`,`${cloudBase}3_2_tfkayc.webp`,`${cloudBase}3_3_eun8kd.webp`,`${cloudBase}3_4_evqcfu.webp`,`${cloudBase}3_5_iobx0n.webp`,`${cloudBase}3_6_dxd4vh.webp`,`${cloudBase}3_7_lbbcmv.webp`,`${cloudBase}3_8_mn3cl1.webp`],social:[`${cloudBase}1_1_earppc.webp`,`${cloudBase}1_2_cv9cem.webp`,`${cloudBase}1_3_ianugu.webp`,`${cloudBase}1_4_pdoibb.webp`,`${cloudBase}1_5_xz9z92.webp`,`${cloudBase}1_6_dptk4x.webp`,`${cloudBase}1_7_xlkjx8.webp`,`${cloudBase}1_8_c7f1vz.webp`,`${cloudBase}1_9_aiyjr6.webp`,`${cloudBase}1_10_l2n9de.webp`,`${cloudBase}1_11_tlnjov.webp`,`${cloudBase}1_12_igzptc.webp`,`${cloudBase}1_13_i9ucsl.webp`,`${cloudBase}1_14_p58jl3.webp`,`${cloudBase}1_15_qt5hv6.webp`,`${cloudBase}1_16_lfzbhd.webp`,`${cloudBase}1_17_ga03np.webp`,`${cloudBase}1_18_gspyaj.webp`,`${cloudBase}1_19_yrrlm2.webp`,`${cloudBase}1_20_pwtzg2.webp`,`${cloudBase}1_21_botdr4.webp`,`${cloudBase}1_22_rupakb.webp`],typography:[`${cloudBase}2_1_enqmdz.webp`,`${cloudBase}2_2_kszyyp.webp`,`${cloudBase}2_3_ak7slb.webp`,`${cloudBase}2_4_fernxoj.webp`,`${cloudBase}2_5_g8lo6b.webp`,`${cloudBase}2_6_cboi6h.webp`,`${cloudBase}2_7_hxksag.webp`,`${cloudBase}2_8_g7jgsj.webp`,`${cloudBase}2_9_cwloaf.webp`,`${cloudBase}2_10_ufsbvm.webp`,`${cloudBase}2_11_paseau.webp`,`${cloudBase}2_12_vhkn8r.webp`,`${cloudBase}2_13_byszy0.webp`,`${cloudBase}2_14_n8idou.webp`,`${cloudBase}2_15_hrejia.webp`,`${cloudBase}2_16_dfmg8b.webp`,`${cloudBase}2_17_lxxn8j.webp`]};

let albumImages=[],currentIndex=0;
const modal=document.getElementById('image-modal'),modalImg=document.getElementById('modal-img'),counter=document.getElementById('image-counter');

document.querySelectorAll('.open-album').forEach(e=>{e.addEventListener('click',e=>{e.preventDefault();const t=e.target.closest('.open-album').dataset.album;albumImages=albums[t],openAlbum(0)})});

function openAlbum(e){currentIndex=e,updateModalImage(),modal.classList.remove('hidden'),modal.classList.add('flex'),document.body.style.overflow='hidden'}

function updateModalImage(){modalImg.style.opacity='0.3';const e=new Image;e.src=albumImages[currentIndex],e.onload=()=>{modalImg.src=e.src,counter.innerText=`${currentIndex+1} / ${albumImages.length}`,modalImg.style.opacity='1'}}

document.getElementById('next-btn').onclick=()=>{currentIndex=(currentIndex+1)%albumImages.length,updateModalImage()};

document.getElementById('prev-btn').onclick=()=>{currentIndex=(currentIndex-1+albumImages.length)%albumImages.length,updateModalImage()};

function closeAlbum(){modal.classList.add('hidden'),document.body.style.overflow='auto'}

document.getElementById('close-modal').onclick=closeAlbum;

modal.onclick=e=>{e.target===modal&&closeAlbum()};

document.onkeydown=e=>{modal.classList.contains('hidden')||('ArrowRight'===e.key&&document.getElementById('next-btn').click(),'ArrowLeft'===e.key&&document.getElementById('prev-btn').click(),'Escape'===e.key&&closeAlbum())};

window.addEventListener('resize',()=>{resizeCanvas(),initParticles()});

window.addEventListener('scroll',reveal);

type();

resizeCanvas();

initParticles();

animateParticles();

reveal();