!function(){"use strict";var e={mounted(){this.animPreloaderScreen(),window.addEventListener("load",(()=>this.initAnimation()))},methods:{animPreloaderScreen(){let e=0;const t=this.$refs.preloader;if(!t)return;const i=t.querySelector(".preloader-content"),s=[...document.images],o=s.length,n=()=>{t.setAttribute("style","--loading-percentage: 100%"),gsap.timeline().set(".hide-in-preloading",{autoAlpha:1}).to(i,{delay:.5,autoAlpha:0}).to(t,{y:"-100%",duration:1,ease:"expo.in"},"-=0.5").set(t,{autoAlpha:0})},a=()=>{e++,this.loadingPercentage=100/o*e<<0,t.setAttribute("style",`--loading-percentage: ${this.loadingPercentage}%`),e===o&&n()};o?s.forEach((e=>{const t=new Image;t.onload=a,t.onerror=a,t.src=e.src})):n()},initAnimation(){gsap.registerPlugin(ScrollTrigger),this.animBackTopScrollIndicator(),this.animStatisticsItems(),this.animSectionTextBox(),this.animAboutImage(),this.animSkillsItems(),this.animExperienceItemsTimeline(),this.animTestimonialsSectionTitle(),this.animTestimonialsItems(),this.animContactInfo(),this.animContactForm()},animBackTopScrollIndicator(){const e=this.$refs.scrollTopBtn;if(!e)return;const t=e.getAttribute("data-show-at"),i=e.querySelector("path"),s=i.getTotalLength();gsap.from(e,{ease:"none",duration:.3,autoAlpha:0,y:10,scrollTrigger:{trigger:"#app-inner",start:`${t}px top`,end:"bottom bottom",toggleActions:"play none none reverse"}}),gsap.set(i,{strokeDasharray:s,strokeDashoffset:s,scrollTrigger:{trigger:"#app-inner",start:`${t}px top`,end:"bottom bottom",onUpdate:e=>i.style.strokeDashoffset=s-e.progress*s}})},animStatisticsItems(){const e=gsap.utils.toArray(".statistics-section .statistics-items li");if(!e.length)return;const t=gsap.timeline({scrollTrigger:{trigger:".statistics-items",start:"top 82%",end:"top 50%",scrub:.3}});e.forEach(((e,i)=>{const s=0===i?"":"< +=0.2";t.from(e,{autoAlpha:0},s).from(e,{y:50},"<")}))},animSectionTextBox(){const e=gsap.utils.toArray(".text-box-inline");e.length&&e.forEach((e=>{gsap.timeline({scrollTrigger:{trigger:e,start:"top 85%",end:"top 35%",scrub:.3}}).from(e.querySelector(".subtitle"),{autoAlpha:0,top:50}).from(e.querySelector("h2"),{autoAlpha:0,y:50},"-=0.2").from(e.querySelectorAll("h2 ~ *"),{autoAlpha:0,y:50,stagger:.2},"-=0.2")}))},animAboutImage(){this.$refs.aboutSection&&gsap.timeline({scrollTrigger:{trigger:".about-section .about-img",start:"top 80%",end:"top 50%",scrub:.3}}).from(".about-section .about-img",{autoAlpha:0,scale:.5})},animSkillsItems(){const e=gsap.utils.toArray(".skills-section .skills-items ul");e.length&&e.forEach((e=>{const t=gsap.timeline({scrollTrigger:{trigger:".skills-section .skills-items",start:"top 85%",end:"top 35%",scrub:.3}});e.querySelectorAll("li").forEach(((e,i)=>{const s=0===i?"":"< +=0.2";t.from(e,{autoAlpha:0},s).from(e,{y:50},"<")}))}))},animExperienceItemsTimeline(){const e=this.$refs.experienceTimepath,t=gsap.utils.toArray(".experience-timeline .timeline-items li");let i,s,o;if((e||t.length)&&(o=gsap.timeline({scrollTrigger:{trigger:".experience-section .experience-timeline",start:"top 85%",end:"top 35%",scrub:.3}})),e){const t=gsap.utils.toArray(".experience-timeline .timepath span");i=gsap.timeline();const s=document.documentElement.dir,n="rtl"===s?"reverse":"from",a="rtl"===s?"from":"reverse",r={x:{from:"polygon(0% 0%, 0% 0%, 0% 100%, 0% 100%)",reverse:"polygon(100% 0%, 100% 0%, 100% 100%, 100% 100%)",to:"polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%)"},c:{from:"polygon(0% 0%, 0% 0%, 0% 0%, 0% 0%, 0% 75%, 0% 75%, 0% 75%, 0% 75%)",reverse:"polygon(100% 0%, 100% 0%, 100% 0%, 100% 0%, 100% 75%, 100% 75%, 100% 75%, 100% 75%)",to:{from:{st1:"polygon(0% 0%, 100% 0%, 100% 0%, 100% 0%, 100% 0%, 75% 25%, 75% 25%, 0% 25%)",st2:"polygon(0% 0%, 100% 0%, 100% 100%, 100% 100%, 75% 75%, 75% 75%, 75% 25%, 0% 25%)",st3:"polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%, 0% 75%, 75% 75%, 75% 25%, 0% 25%)"},reverse:{st1:"polygon(100% 0%, 0% 0%, 0% 0%, 0% 0%, 0% 0%, 25% 25%, 25% 25%, 100% 25%)",st2:"polygon(100% 0%, 0% 0%, 0% 100%, 0% 100%, 25% 75%, 25% 75%, 25% 25%, 100% 25%)",st3:"polygon(100% 0%, 0% 0%, 0% 100%, 100% 100%, 100% 75%, 25% 75%, 25% 25%, 100% 25%)"}}}},l=[...e.querySelectorAll(".line:nth-of-type(4n + 1)")],p=[...e.querySelectorAll(".line:nth-of-type(4n + 3)")],g=[...e.querySelectorAll(".semicircle:nth-of-type(4n + 2)")],m=[...e.querySelectorAll(".semicircle:nth-of-type(4n + 4)")];i.set(t,{autoAlpha:1}).set(l,{clipPath:r.x[n]}).set(p,{clipPath:r.x[a]}).set(g,{clipPath:r.c[n]}).set(m,{clipPath:r.c[a]}),t.forEach((e=>{l.includes(e)||p.includes(e)?i.to(e,{clipPath:r.x.to}):g.includes(e)?i.to(e,{clipPath:r.c.to[n].st1}).to(e,{clipPath:r.c.to[n].st2}).to(e,{clipPath:r.c.to[n].st3}):m.includes(e)&&i.to(e,{clipPath:r.c.to[a].st1}).to(e,{clipPath:r.c.to[a].st2}).to(e,{clipPath:r.c.to[a].st3})})),o.add(i)}t.length&&(s=gsap.timeline(),t.forEach((e=>{s.from(e,{autoAlpha:0}).from(e,{scale:.2},"<")})),o.add(s,"< +=0.5"))},animTestimonialsSectionTitle(){this.$refs.testimonialsSection&&gsap.timeline({scrollTrigger:{trigger:".testimonials-section .section-title",start:"top 90%",end:"top 40%",scrub:.3}}).from(".testimonials-section .section-title .subtitle",{autoAlpha:0,top:50}).from(".testimonials-section .section-title .title",{autoAlpha:0,y:50},"< +=0.2")},animTestimonialsItems(){if(!this.$refs.testimonialsSection)return;const e=gsap.utils.toArray(".testimonials-section .testimonials-item"),t=gsap.timeline({scrollTrigger:{trigger:".testimonials-section .testimonials-items",start:"top 75%",end:"top 25%",scrub:.3}});e.forEach(((e,i)=>{const s=0===i?"":"< +=0.2";t.from(e,{autoAlpha:0},s).from(e,{scale:.2},"<")}))},animContactInfo(){const e=gsap.utils.toArray(".contact-section .contact-info li");if(!e.length)return;const t=gsap.timeline({scrollTrigger:{trigger:".contact-section .contact-info",start:"top 80%",end:"top 50%",scrub:.3}});e.forEach(((e,i)=>{const s=0===i?"":"< +=0.2";t.from(e,{autoAlpha:0},s).from(e,{y:50},"<")})),t.from(".contact-section .contact-text .social li",{autoAlpha:0}).from(".contact-section .contact-text .social li",{y:50,stagger:.2},"<")},animContactForm(){this.$refs.contactForm&&gsap.timeline({scrollTrigger:{trigger:".contact-section .contact-form",start:"top 80%",end:"top 50%",scrub:.3}}).from(".contact-section .contact-form",{autoAlpha:0,scale:.7})}}};Vue.createApp({mixins:[e],data:()=>({careerStartDate:2010,copyrightStartDate:2021,appTheme:"light_theme",savedTheme:null,isPreloading:!0,notifications:[],ajaxLoading:[],startMinimizingHeaderAt:100,isHeaderBig:!0,lastScrollPosition:0,isHeaderHidden:!1,isAnyFocus:!1,isNavMenuOpen:!1,navLinks:[{url:"#hero",title:{en:"Home",ar:"الرئيسية"}},{url:"#about",title:{en:"About",ar:"من أنا"}},{url:"#skills",title:{en:"Skills",ar:"مهاراتي"}},{url:"#portfolio",title:{en:"Portfolio",ar:"أعمالي"}},{url:"#contact",title:{en:"Contact",ar:"اتصل بي"}}],skillsType:"",skillsItems:[{imgUrl:"https://via.placeholder.com/48",title:"HTML5"},{imgUrl:"https://via.placeholder.com/48",title:"CSS3"},{imgUrl:"https://via.placeholder.com/48",title:"JavaScript"},{imgUrl:"https://via.placeholder.com/48",title:"TypeScript"},{imgUrl:"https://via.placeholder.com/48",title:"jQuery"},{imgUrl:"https://via.placeholder.com/48",title:"Bootstrap"},{imgUrl:"https://via.placeholder.com/48",title:"Angular"},{imgUrl:"https://via.placeholder.com/48",title:"React"},{imgUrl:"https://via.placeholder.com/48",title:"Vue"},{imgUrl:"https://via.placeholder.com/48",title:"Firebase"},{imgUrl:"https://via.placeholder.com/48",title:"PugJS"},{imgUrl:"https://via.placeholder.com/48",title:"SASS"}],toolsItems:[{imgUrl:"https://via.placeholder.com/48",title:"Ajax"},{imgUrl:"https://via.placeholder.com/48",title:"Gulp"},{imgUrl:"https://via.placeholder.com/48",title:"Webpack"},{imgUrl:"https://via.placeholder.com/48",title:"Git (Github)"},{imgUrl:"https://via.placeholder.com/48",title:"Npm"},{imgUrl:"https://via.placeholder.com/48",title:"Command Line"},{imgUrl:"https://via.placeholder.com/48",title:"VS Code"},{imgUrl:"https://via.placeholder.com/48",title:"Trello"},{imgUrl:"https://via.placeholder.com/48",title:"ClickUp"},{imgUrl:"https://via.placeholder.com/48",title:"Slack"},{imgUrl:"https://via.placeholder.com/48",title:"Photoshop"},{imgUrl:"https://via.placeholder.com/48",title:"Adobe XD"}],experienceItems:[{date:"2010",companyName:{en:"Google Inc.",ar:"شركة جوجل"},jobTitle:{en:"Front-End Developer",ar:"مطور الواجهة الأمامية"},desc:{en:"Monitored technical aspects of the front-end delivery for projects.",ar:"مراقبة الجوانب الفنية لتطوير الواجهات الأمامية للمشاريع."}},{date:"2012",companyName:{en:"Facebook Inc.",ar:"شركة فيسبوك"},jobTitle:{en:"Full Stack Developer",ar:"مطوّر الويب المتكامل"},desc:{en:"Collaborate with creative and development teams on the execution of ideas.",ar:"تعاونت مع الفرق الإبداعية في تطوير وتنفيذ أفكار مبتكرة."}},{date:"2014",companyName:{en:"Envato Inc.",ar:"شركة انفاتو"},jobTitle:{en:"UI/UX Developer",ar:"مطور UI/UX"},desc:{en:"Converted Photoshop layouts to web pages using HTML, CSS, and JavaScript.",ar:"تم تحويل تخطيطات Photoshop إلى صفحات ويب باستخدام HTML و CSS و JavaScript."}},{date:"2016",companyName:{en:"Google Inc.",ar:"شركة جوجل"},jobTitle:{en:"Front-End Developer",ar:"مطور الواجهة الأمامية"},desc:{en:"Monitored technical aspects of the front-end delivery for projects.",ar:"مراقبة الجوانب الفنية لتطوير الواجهات الأمامية للمشاريع."}},{date:"2018",companyName:{en:"Facebook Inc.",ar:"شركة فيسبوك"},jobTitle:{en:"Full Stack Developer",ar:"مطوّر الويب المتكامل"},desc:{en:"Collaborate with creative and development teams on the execution of ideas.",ar:"تعاونت مع الفرق الإبداعية في تطوير وتنفيذ أفكار مبتكرة."}},{date:"2020",companyName:{en:"Google Inc.",ar:"شركة جوجل"},jobTitle:{en:"Front-End Developer",ar:"مطور الواجهة الأمامية"},desc:{en:"Monitored technical aspects of the front-end delivery for projects.",ar:"مراقبة الجوانب الفنية لتطوير الواجهات الأمامية للمشاريع."}},{date:"2022",companyName:{en:"Facebook Inc.",ar:"شركة فيسبوك"},jobTitle:{en:"Full Stack Developer",ar:"مطوّر الويب المتكامل"},desc:{en:"Collaborate with creative and development teams on the execution of ideas.",ar:"تعاونت مع الفرق الإبداعية في تطوير وتنفيذ أفكار مبتكرة."}},{},{}],portfolioItemsPage:1,itemsPerPage:7,filters:["All","HTML","Angular","Vue"],currentFilter:"All",portfolioArchiveName:"",allPortfolioItems:[{id:1,url:"single-portfolio.html?id=1",imgUrl:"https://via.placeholder.com/400x400",title:{en:"Lorem Ipsum Dolor 1",ar:"هنا عنوان المشروع 1"},date:{en:"April 2021",ar:"أبريل 2021"},desc:{en:"Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.",ar:"هذا النص هو مثال لنص يمكن أن يستبدل في نفس المساحة، لقد تم توليد هذا النص من مولد النص العربى، حيث يمكنك أن تولد مثل هذا النص أو العديد من النصوص الأخرى إضافة إلى زيادة عدد الحروف التى يولدها التطبيق. إذا كنت تحتاج إلى عدد أكبر من الفقرات يتيح لك مولد النص العربى زيادة عدد الفقرات كما تريد، النص لن يبدو مقسما ولا يحوي أخطاء لغوية، مولد النص العربى مفيد لمصممي المواقع على وجه الخصوص، حيث يحتاج العميل فى كثير من الأحيان أن يطلع على صورة حقيقية لتصميم الموقع. ومن هنا وجب على المصمم أن يضع نصوصا مؤقتة على التصميم ليظهر للعميل الشكل كاملاً، دور مولد النص العربى أن يوفر على المصمم عناء البحث عن نص بديل لا علاقة له بالموضوع الذى يتحدث عنه التصميم فيظهر بشكل لا يليق."},category:"HTML",tools:["HTML","PugJS","CSS","SCSS","JavaScript","Gulp","Bootstrap","AJAX","Vue","Firebase"],screenshots:{img1:{url:"https://via.placeholder.com/355x200",caption:{en:"caption 5",ar:"تسمية توضيحية 5"}},img2:{url:"https://via.placeholder.com/330x460",caption:{en:"caption 4",ar:"تسمية توضيحية 4"}},img3:{url:"https://via.placeholder.com/300x225",caption:{en:"caption 3",ar:"تسمية توضيحية 3"}},img4:{url:"https://via.placeholder.com/300x225",caption:{en:"caption 2",ar:"تسمية توضيحية 2"}},img5:{url:"https://via.placeholder.com/300x225",caption:{en:"caption 1",ar:"تسمية توضيحية 1"}}}},{id:2,url:"single-portfolio.html?id=2",imgUrl:"https://via.placeholder.com/530x300",title:{en:"Lorem Ipsum Dolor 2",ar:"هنا عنوان المشروع 2"},date:{en:"April 2021",ar:"أبريل 2021"},desc:{en:"Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.",ar:"هذا النص هو مثال لنص يمكن أن يستبدل في نفس المساحة، لقد تم توليد هذا النص من مولد النص العربى، حيث يمكنك أن تولد مثل هذا النص أو العديد من النصوص الأخرى إضافة إلى زيادة عدد الحروف التى يولدها التطبيق. إذا كنت تحتاج إلى عدد أكبر من الفقرات يتيح لك مولد النص العربى زيادة عدد الفقرات كما تريد، النص لن يبدو مقسما ولا يحوي أخطاء لغوية، مولد النص العربى مفيد لمصممي المواقع على وجه الخصوص، حيث يحتاج العميل فى كثير من الأحيان أن يطلع على صورة حقيقية لتصميم الموقع. ومن هنا وجب على المصمم أن يضع نصوصا مؤقتة على التصميم ليظهر للعميل الشكل كاملاً، دور مولد النص العربى أن يوفر على المصمم عناء البحث عن نص بديل لا علاقة له بالموضوع الذى يتحدث عنه التصميم فيظهر بشكل لا يليق."},category:"Angular",tools:["HTML","Slim","CSS","Less","JavaScript","TypeScript","TailwindCSS","AJAX","Angular","NodeJs","MongoDB"],screenshots:{img1:{url:"https://via.placeholder.com/355x200",caption:{en:"caption 5",ar:"تسمية توضيحية 5"}},img2:{url:"https://via.placeholder.com/330x460",caption:{en:"caption 4",ar:"تسمية توضيحية 4"}},img3:{url:"https://via.placeholder.com/300x225",caption:{en:"caption 3",ar:"تسمية توضيحية 3"}},img4:{url:"https://via.placeholder.com/300x225",caption:{en:"caption 2",ar:"تسمية توضيحية 2"}},img5:{url:"https://via.placeholder.com/300x225",caption:{en:"caption 1",ar:"تسمية توضيحية 1"}}}},{id:3,url:"single-portfolio.html?id=3",imgUrl:"https://via.placeholder.com/390x390",title:{en:"Lorem Ipsum Dolor 3",ar:"هنا عنوان المشروع 3"},date:{en:"April 2021",ar:"أبريل 2021"},desc:{en:"Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.",ar:"هذا النص هو مثال لنص يمكن أن يستبدل في نفس المساحة، لقد تم توليد هذا النص من مولد النص العربى، حيث يمكنك أن تولد مثل هذا النص أو العديد من النصوص الأخرى إضافة إلى زيادة عدد الحروف التى يولدها التطبيق. إذا كنت تحتاج إلى عدد أكبر من الفقرات يتيح لك مولد النص العربى زيادة عدد الفقرات كما تريد، النص لن يبدو مقسما ولا يحوي أخطاء لغوية، مولد النص العربى مفيد لمصممي المواقع على وجه الخصوص، حيث يحتاج العميل فى كثير من الأحيان أن يطلع على صورة حقيقية لتصميم الموقع. ومن هنا وجب على المصمم أن يضع نصوصا مؤقتة على التصميم ليظهر للعميل الشكل كاملاً، دور مولد النص العربى أن يوفر على المصمم عناء البحث عن نص بديل لا علاقة له بالموضوع الذى يتحدث عنه التصميم فيظهر بشكل لا يليق."},category:"Vue",tools:["HTML","PugJS","CSS","SCSS","JavaScript","Gulp","Materialize","AJAX","Vue","Firebase"],screenshots:{img1:{url:"https://via.placeholder.com/355x200",caption:{en:"caption 5",ar:"تسمية توضيحية 5"}},img2:{url:"https://via.placeholder.com/330x460",caption:{en:"caption 4",ar:"تسمية توضيحية 4"}},img3:{url:"https://via.placeholder.com/300x225",caption:{en:"caption 3",ar:"تسمية توضيحية 3"}},img4:{url:"https://via.placeholder.com/300x225",caption:{en:"caption 2",ar:"تسمية توضيحية 2"}},img5:{url:"https://via.placeholder.com/300x225",caption:{en:"caption 1",ar:"تسمية توضيحية 1"}}}},{id:4,url:"single-portfolio.html?id=4",imgUrl:"https://via.placeholder.com/340x510",title:{en:"Lorem Ipsum Dolor 4",ar:"هنا عنوان المشروع 4"},date:{en:"April 2021",ar:"أبريل 2021"},desc:{en:"Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.",ar:"هذا النص هو مثال لنص يمكن أن يستبدل في نفس المساحة، لقد تم توليد هذا النص من مولد النص العربى، حيث يمكنك أن تولد مثل هذا النص أو العديد من النصوص الأخرى إضافة إلى زيادة عدد الحروف التى يولدها التطبيق. إذا كنت تحتاج إلى عدد أكبر من الفقرات يتيح لك مولد النص العربى زيادة عدد الفقرات كما تريد، النص لن يبدو مقسما ولا يحوي أخطاء لغوية، مولد النص العربى مفيد لمصممي المواقع على وجه الخصوص، حيث يحتاج العميل فى كثير من الأحيان أن يطلع على صورة حقيقية لتصميم الموقع. ومن هنا وجب على المصمم أن يضع نصوصا مؤقتة على التصميم ليظهر للعميل الشكل كاملاً، دور مولد النص العربى أن يوفر على المصمم عناء البحث عن نص بديل لا علاقة له بالموضوع الذى يتحدث عنه التصميم فيظهر بشكل لا يليق."},category:"HTML",tools:["HTML","Slim","CSS","Less","JavaScript","TypeScript","TailwindCSS","AJAX","Angular","NodeJs","MongoDB"],screenshots:{img1:{url:"https://via.placeholder.com/355x200",caption:{en:"caption 5",ar:"تسمية توضيحية 5"}},img2:{url:"https://via.placeholder.com/330x460",caption:{en:"caption 4",ar:"تسمية توضيحية 4"}},img3:{url:"https://via.placeholder.com/300x225",caption:{en:"caption 3",ar:"تسمية توضيحية 3"}},img4:{url:"https://via.placeholder.com/300x225",caption:{en:"caption 2",ar:"تسمية توضيحية 2"}},img5:{url:"https://via.placeholder.com/300x225",caption:{en:"caption 1",ar:"تسمية توضيحية 1"}}}},{id:5,url:"single-portfolio.html?id=5",imgUrl:"https://via.placeholder.com/380x215",title:{en:"Lorem Ipsum Dolor 5",ar:"هنا عنوان المشروع 5"},date:{en:"April 2021",ar:"أبريل 2021"},desc:{en:"Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.",ar:"هذا النص هو مثال لنص يمكن أن يستبدل في نفس المساحة، لقد تم توليد هذا النص من مولد النص العربى، حيث يمكنك أن تولد مثل هذا النص أو العديد من النصوص الأخرى إضافة إلى زيادة عدد الحروف التى يولدها التطبيق. إذا كنت تحتاج إلى عدد أكبر من الفقرات يتيح لك مولد النص العربى زيادة عدد الفقرات كما تريد، النص لن يبدو مقسما ولا يحوي أخطاء لغوية، مولد النص العربى مفيد لمصممي المواقع على وجه الخصوص، حيث يحتاج العميل فى كثير من الأحيان أن يطلع على صورة حقيقية لتصميم الموقع. ومن هنا وجب على المصمم أن يضع نصوصا مؤقتة على التصميم ليظهر للعميل الشكل كاملاً، دور مولد النص العربى أن يوفر على المصمم عناء البحث عن نص بديل لا علاقة له بالموضوع الذى يتحدث عنه التصميم فيظهر بشكل لا يليق."},category:"Angular",tools:["HTML","PugJS","CSS","SCSS","JavaScript","Gulp","Bootstrap","AJAX","Vue","Firebase"],screenshots:{img1:{url:"https://via.placeholder.com/355x200",caption:{en:"caption 5",ar:"تسمية توضيحية 5"}},img2:{url:"https://via.placeholder.com/330x460",caption:{en:"caption 4",ar:"تسمية توضيحية 4"}},img3:{url:"https://via.placeholder.com/300x225",caption:{en:"caption 3",ar:"تسمية توضيحية 3"}},img4:{url:"https://via.placeholder.com/300x225",caption:{en:"caption 2",ar:"تسمية توضيحية 2"}},img5:{url:"https://via.placeholder.com/300x225",caption:{en:"caption 1",ar:"تسمية توضيحية 1"}}}},{id:6,url:"single-portfolio.html?id=6",imgUrl:"https://via.placeholder.com/400x300",title:{en:"Lorem Ipsum Dolor 6",ar:"هنا عنوان المشروع 6"},date:{en:"April 2021",ar:"أبريل 2021"},desc:{en:"Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.",ar:"هذا النص هو مثال لنص يمكن أن يستبدل في نفس المساحة، لقد تم توليد هذا النص من مولد النص العربى، حيث يمكنك أن تولد مثل هذا النص أو العديد من النصوص الأخرى إضافة إلى زيادة عدد الحروف التى يولدها التطبيق. إذا كنت تحتاج إلى عدد أكبر من الفقرات يتيح لك مولد النص العربى زيادة عدد الفقرات كما تريد، النص لن يبدو مقسما ولا يحوي أخطاء لغوية، مولد النص العربى مفيد لمصممي المواقع على وجه الخصوص، حيث يحتاج العميل فى كثير من الأحيان أن يطلع على صورة حقيقية لتصميم الموقع. ومن هنا وجب على المصمم أن يضع نصوصا مؤقتة على التصميم ليظهر للعميل الشكل كاملاً، دور مولد النص العربى أن يوفر على المصمم عناء البحث عن نص بديل لا علاقة له بالموضوع الذى يتحدث عنه التصميم فيظهر بشكل لا يليق."},category:"Vue",tools:["HTML","Slim","CSS","Less","JavaScript","TypeScript","Materialize","AJAX","Angular","NodeJs","MongoDB"],screenshots:{img1:{url:"https://via.placeholder.com/355x200",caption:{en:"caption 5",ar:"تسمية توضيحية 5"}},img2:{url:"https://via.placeholder.com/330x460",caption:{en:"caption 4",ar:"تسمية توضيحية 4"}},img3:{url:"https://via.placeholder.com/300x225",caption:{en:"caption 3",ar:"تسمية توضيحية 3"}},img4:{url:"https://via.placeholder.com/300x225",caption:{en:"caption 2",ar:"تسمية توضيحية 2"}},img5:{url:"https://via.placeholder.com/300x225",caption:{en:"caption 1",ar:"تسمية توضيحية 1"}}}},{id:7,url:"single-portfolio.html?id=7",imgUrl:"https://via.placeholder.com/380x215",title:{en:"Lorem Ipsum Dolor 7",ar:"هنا عنوان المشروع 7"},date:{en:"April 2021",ar:"أبريل 2021"},desc:{en:"Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.",ar:"هذا النص هو مثال لنص يمكن أن يستبدل في نفس المساحة، لقد تم توليد هذا النص من مولد النص العربى، حيث يمكنك أن تولد مثل هذا النص أو العديد من النصوص الأخرى إضافة إلى زيادة عدد الحروف التى يولدها التطبيق. إذا كنت تحتاج إلى عدد أكبر من الفقرات يتيح لك مولد النص العربى زيادة عدد الفقرات كما تريد، النص لن يبدو مقسما ولا يحوي أخطاء لغوية، مولد النص العربى مفيد لمصممي المواقع على وجه الخصوص، حيث يحتاج العميل فى كثير من الأحيان أن يطلع على صورة حقيقية لتصميم الموقع. ومن هنا وجب على المصمم أن يضع نصوصا مؤقتة على التصميم ليظهر للعميل الشكل كاملاً، دور مولد النص العربى أن يوفر على المصمم عناء البحث عن نص بديل لا علاقة له بالموضوع الذى يتحدث عنه التصميم فيظهر بشكل لا يليق."},category:"HTML",tools:["HTML","PugJS","CSS","SCSS","JavaScript","Gulp","Bootstrap","AJAX","Vue","Firebase"],screenshots:{img1:{url:"https://via.placeholder.com/355x200",caption:{en:"caption 5",ar:"تسمية توضيحية 5"}},img2:{url:"https://via.placeholder.com/330x460",caption:{en:"caption 4",ar:"تسمية توضيحية 4"}},img3:{url:"https://via.placeholder.com/300x225",caption:{en:"caption 3",ar:"تسمية توضيحية 3"}},img4:{url:"https://via.placeholder.com/300x225",caption:{en:"caption 2",ar:"تسمية توضيحية 2"}},img5:{url:"https://via.placeholder.com/300x225",caption:{en:"caption 1",ar:"تسمية توضيحية 1"}}}},{id:8,url:"single-portfolio.html?id=8",imgUrl:"https://via.placeholder.com/340x340",title:{en:"Lorem Ipsum Dolor 8",ar:"هنا عنوان المشروع 8"},date:{en:"April 2021",ar:"أبريل 2021"},desc:{en:"Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.",ar:"هذا النص هو مثال لنص يمكن أن يستبدل في نفس المساحة، لقد تم توليد هذا النص من مولد النص العربى، حيث يمكنك أن تولد مثل هذا النص أو العديد من النصوص الأخرى إضافة إلى زيادة عدد الحروف التى يولدها التطبيق. إذا كنت تحتاج إلى عدد أكبر من الفقرات يتيح لك مولد النص العربى زيادة عدد الفقرات كما تريد، النص لن يبدو مقسما ولا يحوي أخطاء لغوية، مولد النص العربى مفيد لمصممي المواقع على وجه الخصوص، حيث يحتاج العميل فى كثير من الأحيان أن يطلع على صورة حقيقية لتصميم الموقع. ومن هنا وجب على المصمم أن يضع نصوصا مؤقتة على التصميم ليظهر للعميل الشكل كاملاً، دور مولد النص العربى أن يوفر على المصمم عناء البحث عن نص بديل لا علاقة له بالموضوع الذى يتحدث عنه التصميم فيظهر بشكل لا يليق."},category:"Vue",tools:["HTML","Slim","CSS","Less","JavaScript","TypeScript","TailwindCSS","AJAX","Angular","NodeJs","MongoDB"],screenshots:{img1:{url:"https://via.placeholder.com/355x200",caption:{en:"caption 5",ar:"تسمية توضيحية 5"}},img2:{url:"https://via.placeholder.com/330x460",caption:{en:"caption 4",ar:"تسمية توضيحية 4"}},img3:{url:"https://via.placeholder.com/300x225",caption:{en:"caption 3",ar:"تسمية توضيحية 3"}},img4:{url:"https://via.placeholder.com/300x225",caption:{en:"caption 2",ar:"تسمية توضيحية 2"}},img5:{url:"https://via.placeholder.com/300x225",caption:{en:"caption 1",ar:"تسمية توضيحية 1"}}}},{id:9,url:"single-portfolio.html?id=9",imgUrl:"https://via.placeholder.com/300x375",title:{en:"Lorem Ipsum Dolor 9",ar:"هنا عنوان المشروع 9"},date:{en:"April 2021",ar:"أبريل 2021"},desc:{en:"Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.",ar:"هذا النص هو مثال لنص يمكن أن يستبدل في نفس المساحة، لقد تم توليد هذا النص من مولد النص العربى، حيث يمكنك أن تولد مثل هذا النص أو العديد من النصوص الأخرى إضافة إلى زيادة عدد الحروف التى يولدها التطبيق. إذا كنت تحتاج إلى عدد أكبر من الفقرات يتيح لك مولد النص العربى زيادة عدد الفقرات كما تريد، النص لن يبدو مقسما ولا يحوي أخطاء لغوية، مولد النص العربى مفيد لمصممي المواقع على وجه الخصوص، حيث يحتاج العميل فى كثير من الأحيان أن يطلع على صورة حقيقية لتصميم الموقع. ومن هنا وجب على المصمم أن يضع نصوصا مؤقتة على التصميم ليظهر للعميل الشكل كاملاً، دور مولد النص العربى أن يوفر على المصمم عناء البحث عن نص بديل لا علاقة له بالموضوع الذى يتحدث عنه التصميم فيظهر بشكل لا يليق."},category:"Angular",tools:["HTML","PugJS","CSS","SCSS","JavaScript","Gulp","Materialize","AJAX","Vue","Firebase"],screenshots:{img1:{url:"https://via.placeholder.com/355x200",caption:{en:"caption 5",ar:"تسمية توضيحية 5"}},img2:{url:"https://via.placeholder.com/330x460",caption:{en:"caption 4",ar:"تسمية توضيحية 4"}},img3:{url:"https://via.placeholder.com/300x225",caption:{en:"caption 3",ar:"تسمية توضيحية 3"}},img4:{url:"https://via.placeholder.com/300x225",caption:{en:"caption 2",ar:"تسمية توضيحية 2"}},img5:{url:"https://via.placeholder.com/300x225",caption:{en:"caption 1",ar:"تسمية توضيحية 1"}}}},{id:10,url:"single-portfolio.html?id=10",imgUrl:"https://via.placeholder.com/350x200",title:{en:"Lorem Ipsum Dolor 10",ar:"هنا عنوان المشروع 10"},date:{en:"April 2021",ar:"أبريل 2021"},desc:{en:"Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.",ar:"هذا النص هو مثال لنص يمكن أن يستبدل في نفس المساحة، لقد تم توليد هذا النص من مولد النص العربى، حيث يمكنك أن تولد مثل هذا النص أو العديد من النصوص الأخرى إضافة إلى زيادة عدد الحروف التى يولدها التطبيق. إذا كنت تحتاج إلى عدد أكبر من الفقرات يتيح لك مولد النص العربى زيادة عدد الفقرات كما تريد، النص لن يبدو مقسما ولا يحوي أخطاء لغوية، مولد النص العربى مفيد لمصممي المواقع على وجه الخصوص، حيث يحتاج العميل فى كثير من الأحيان أن يطلع على صورة حقيقية لتصميم الموقع. ومن هنا وجب على المصمم أن يضع نصوصا مؤقتة على التصميم ليظهر للعميل الشكل كاملاً، دور مولد النص العربى أن يوفر على المصمم عناء البحث عن نص بديل لا علاقة له بالموضوع الذى يتحدث عنه التصميم فيظهر بشكل لا يليق."},category:"HTML",tools:["HTML","Slim","CSS","Less","JavaScript","TypeScript","Bootstrap","AJAX","Angular","NodeJs","MongoDB"],screenshots:{img1:{url:"https://via.placeholder.com/355x200",caption:{en:"caption 5",ar:"تسمية توضيحية 5"}},img2:{url:"https://via.placeholder.com/330x460",caption:{en:"caption 4",ar:"تسمية توضيحية 4"}},img3:{url:"https://via.placeholder.com/300x225",caption:{en:"caption 3",ar:"تسمية توضيحية 3"}},img4:{url:"https://via.placeholder.com/300x225",caption:{en:"caption 2",ar:"تسمية توضيحية 2"}},img5:{url:"https://via.placeholder.com/300x225",caption:{en:"caption 1",ar:"تسمية توضيحية 1"}}}},{id:11,url:"single-portfolio.html?id=11",imgUrl:"https://via.placeholder.com/400x300",title:{en:"Lorem Ipsum Dolor 11",ar:"هنا عنوان المشروع 11"},date:{en:"April 2021",ar:"أبريل 2021"},desc:{en:"Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.",ar:"هذا النص هو مثال لنص يمكن أن يستبدل في نفس المساحة، لقد تم توليد هذا النص من مولد النص العربى، حيث يمكنك أن تولد مثل هذا النص أو العديد من النصوص الأخرى إضافة إلى زيادة عدد الحروف التى يولدها التطبيق. إذا كنت تحتاج إلى عدد أكبر من الفقرات يتيح لك مولد النص العربى زيادة عدد الفقرات كما تريد، النص لن يبدو مقسما ولا يحوي أخطاء لغوية، مولد النص العربى مفيد لمصممي المواقع على وجه الخصوص، حيث يحتاج العميل فى كثير من الأحيان أن يطلع على صورة حقيقية لتصميم الموقع. ومن هنا وجب على المصمم أن يضع نصوصا مؤقتة على التصميم ليظهر للعميل الشكل كاملاً، دور مولد النص العربى أن يوفر على المصمم عناء البحث عن نص بديل لا علاقة له بالموضوع الذى يتحدث عنه التصميم فيظهر بشكل لا يليق."},category:"Vue",tools:["HTML","PugJS","CSS","SCSS","JavaScript","Gulp","TailwindCSS","AJAX","Angular","Firebase"],screenshots:{img1:{url:"https://via.placeholder.com/355x200",caption:{en:"caption 5",ar:"تسمية توضيحية 5"}},img2:{url:"https://via.placeholder.com/330x460",caption:{en:"caption 4",ar:"تسمية توضيحية 4"}},img3:{url:"https://via.placeholder.com/300x225",caption:{en:"caption 3",ar:"تسمية توضيحية 3"}},img4:{url:"https://via.placeholder.com/300x225",caption:{en:"caption 2",ar:"تسمية توضيحية 2"}},img5:{url:"https://via.placeholder.com/300x225",caption:{en:"caption 1",ar:"تسمية توضيحية 1"}}}},{id:12,url:"single-portfolio.html?id=12",imgUrl:"https://via.placeholder.com/300x280",title:{en:"Lorem Ipsum Dolor 12",ar:"هنا عنوان المشروع 12"},date:{en:"April 2021",ar:"أبريل 2021"},desc:{en:"Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.",ar:"هذا النص هو مثال لنص يمكن أن يستبدل في نفس المساحة، لقد تم توليد هذا النص من مولد النص العربى، حيث يمكنك أن تولد مثل هذا النص أو العديد من النصوص الأخرى إضافة إلى زيادة عدد الحروف التى يولدها التطبيق. إذا كنت تحتاج إلى عدد أكبر من الفقرات يتيح لك مولد النص العربى زيادة عدد الفقرات كما تريد، النص لن يبدو مقسما ولا يحوي أخطاء لغوية، مولد النص العربى مفيد لمصممي المواقع على وجه الخصوص، حيث يحتاج العميل فى كثير من الأحيان أن يطلع على صورة حقيقية لتصميم الموقع. ومن هنا وجب على المصمم أن يضع نصوصا مؤقتة على التصميم ليظهر للعميل الشكل كاملاً، دور مولد النص العربى أن يوفر على المصمم عناء البحث عن نص بديل لا علاقة له بالموضوع الذى يتحدث عنه التصميم فيظهر بشكل لا يليق."},category:"Angular",tools:["HTML","Slim","CSS","Less","JavaScript","TypeScript","Materialize","AJAX","Vue","NodeJs","MongoDB"],screenshots:{img1:{url:"https://via.placeholder.com/355x200",caption:{en:"caption 5",ar:"تسمية توضيحية 5"}},img2:{url:"https://via.placeholder.com/330x460",caption:{en:"caption 4",ar:"تسمية توضيحية 4"}},img3:{url:"https://via.placeholder.com/300x225",caption:{en:"caption 3",ar:"تسمية توضيحية 3"}},img4:{url:"https://via.placeholder.com/300x225",caption:{en:"caption 2",ar:"تسمية توضيحية 2"}},img5:{url:"https://via.placeholder.com/300x225",caption:{en:"caption 1",ar:"تسمية توضيحية 1"}}}},{id:13,url:"single-portfolio.html?id=13",imgUrl:"https://via.placeholder.com/300x270",title:{en:"Lorem Ipsum Dolor 13",ar:"هنا عنوان المشروع 13"},date:{en:"April 2021",ar:"أبريل 2021"},desc:{en:"Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.",ar:"هذا النص هو مثال لنص يمكن أن يستبدل في نفس المساحة، لقد تم توليد هذا النص من مولد النص العربى، حيث يمكنك أن تولد مثل هذا النص أو العديد من النصوص الأخرى إضافة إلى زيادة عدد الحروف التى يولدها التطبيق. إذا كنت تحتاج إلى عدد أكبر من الفقرات يتيح لك مولد النص العربى زيادة عدد الفقرات كما تريد، النص لن يبدو مقسما ولا يحوي أخطاء لغوية، مولد النص العربى مفيد لمصممي المواقع على وجه الخصوص، حيث يحتاج العميل فى كثير من الأحيان أن يطلع على صورة حقيقية لتصميم الموقع. ومن هنا وجب على المصمم أن يضع نصوصا مؤقتة على التصميم ليظهر للعميل الشكل كاملاً، دور مولد النص العربى أن يوفر على المصمم عناء البحث عن نص بديل لا علاقة له بالموضوع الذى يتحدث عنه التصميم فيظهر بشكل لا يليق."},category:"HTML",tools:["HTML","PugJS","CSS","SCSS","JavaScript","Gulp","TailwindCSS","AJAX","Angular","Firebase"],screenshots:{img1:{url:"https://via.placeholder.com/355x200",caption:{en:"caption 5",ar:"تسمية توضيحية 5"}},img2:{url:"https://via.placeholder.com/330x460",caption:{en:"caption 4",ar:"تسمية توضيحية 4"}},img3:{url:"https://via.placeholder.com/300x225",caption:{en:"caption 3",ar:"تسمية توضيحية 3"}},img4:{url:"https://via.placeholder.com/300x225",caption:{en:"caption 2",ar:"تسمية توضيحية 2"}},img5:{url:"https://via.placeholder.com/300x225",caption:{en:"caption 1",ar:"تسمية توضيحية 1"}}}},{id:14,url:"single-portfolio.html?id=14",imgUrl:"https://via.placeholder.com/375x500",title:{en:"Lorem Ipsum Dolor 14",ar:"هنا عنوان المشروع 14"},date:{en:"April 2021",ar:"أبريل 2021"},desc:{en:"Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.",ar:"هذا النص هو مثال لنص يمكن أن يستبدل في نفس المساحة، لقد تم توليد هذا النص من مولد النص العربى، حيث يمكنك أن تولد مثل هذا النص أو العديد من النصوص الأخرى إضافة إلى زيادة عدد الحروف التى يولدها التطبيق. إذا كنت تحتاج إلى عدد أكبر من الفقرات يتيح لك مولد النص العربى زيادة عدد الفقرات كما تريد، النص لن يبدو مقسما ولا يحوي أخطاء لغوية، مولد النص العربى مفيد لمصممي المواقع على وجه الخصوص، حيث يحتاج العميل فى كثير من الأحيان أن يطلع على صورة حقيقية لتصميم الموقع. ومن هنا وجب على المصمم أن يضع نصوصا مؤقتة على التصميم ليظهر للعميل الشكل كاملاً، دور مولد النص العربى أن يوفر على المصمم عناء البحث عن نص بديل لا علاقة له بالموضوع الذى يتحدث عنه التصميم فيظهر بشكل لا يليق."},category:"Angular",tools:["HTML","Slim","CSS","Less","JavaScript","TypeScript","Bootstrap","AJAX","Vue","NodeJs","MongoDB"],screenshots:{img1:{url:"https://via.placeholder.com/355x200",caption:{en:"caption 5",ar:"تسمية توضيحية 5"}},img2:{url:"https://via.placeholder.com/330x460",caption:{en:"caption 4",ar:"تسمية توضيحية 4"}},img3:{url:"https://via.placeholder.com/300x225",caption:{en:"caption 3",ar:"تسمية توضيحية 3"}},img4:{url:"https://via.placeholder.com/300x225",caption:{en:"caption 2",ar:"تسمية توضيحية 2"}},img5:{url:"https://via.placeholder.com/300x225",caption:{en:"caption 1",ar:"تسمية توضيحية 1"}}}},{id:15,url:"single-portfolio.html?id=15",imgUrl:"https://via.placeholder.com/375x240",title:{en:"Lorem Ipsum Dolor 15",ar:"هنا عنوان المشروع 15"},date:{en:"April 2021",ar:"أبريل 2021"},desc:{en:"Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.",ar:"هذا النص هو مثال لنص يمكن أن يستبدل في نفس المساحة، لقد تم توليد هذا النص من مولد النص العربى، حيث يمكنك أن تولد مثل هذا النص أو العديد من النصوص الأخرى إضافة إلى زيادة عدد الحروف التى يولدها التطبيق. إذا كنت تحتاج إلى عدد أكبر من الفقرات يتيح لك مولد النص العربى زيادة عدد الفقرات كما تريد، النص لن يبدو مقسما ولا يحوي أخطاء لغوية، مولد النص العربى مفيد لمصممي المواقع على وجه الخصوص، حيث يحتاج العميل فى كثير من الأحيان أن يطلع على صورة حقيقية لتصميم الموقع. ومن هنا وجب على المصمم أن يضع نصوصا مؤقتة على التصميم ليظهر للعميل الشكل كاملاً، دور مولد النص العربى أن يوفر على المصمم عناء البحث عن نص بديل لا علاقة له بالموضوع الذى يتحدث عنه التصميم فيظهر بشكل لا يليق."},category:"Vue",tools:["HTML","PugJS","CSS","SCSS","JavaScript","Gulp","Materialize","AJAX","Angular","Firebase"],screenshots:{img1:{url:"https://via.placeholder.com/355x200",caption:{en:"caption 5",ar:"تسمية توضيحية 5"}},img2:{url:"https://via.placeholder.com/330x460",caption:{en:"caption 4",ar:"تسمية توضيحية 4"}},img3:{url:"https://via.placeholder.com/300x225",caption:{en:"caption 3",ar:"تسمية توضيحية 3"}},img4:{url:"https://via.placeholder.com/300x225",caption:{en:"caption 2",ar:"تسمية توضيحية 2"}},img5:{url:"https://via.placeholder.com/300x225",caption:{en:"caption 1",ar:"تسمية توضيحية 1"}}}},{id:16,url:"single-portfolio.html?id=16",imgUrl:"https://via.placeholder.com/570x400",title:{en:"Lorem Ipsum Dolor 16",ar:"هنا عنوان المشروع 16"},date:{en:"April 2021",ar:"أبريل 2021"},desc:{en:"Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.",ar:"هذا النص هو مثال لنص يمكن أن يستبدل في نفس المساحة، لقد تم توليد هذا النص من مولد النص العربى، حيث يمكنك أن تولد مثل هذا النص أو العديد من النصوص الأخرى إضافة إلى زيادة عدد الحروف التى يولدها التطبيق. إذا كنت تحتاج إلى عدد أكبر من الفقرات يتيح لك مولد النص العربى زيادة عدد الفقرات كما تريد، النص لن يبدو مقسما ولا يحوي أخطاء لغوية، مولد النص العربى مفيد لمصممي المواقع على وجه الخصوص، حيث يحتاج العميل فى كثير من الأحيان أن يطلع على صورة حقيقية لتصميم الموقع. ومن هنا وجب على المصمم أن يضع نصوصا مؤقتة على التصميم ليظهر للعميل الشكل كاملاً، دور مولد النص العربى أن يوفر على المصمم عناء البحث عن نص بديل لا علاقة له بالموضوع الذى يتحدث عنه التصميم فيظهر بشكل لا يليق."},category:"HTML",tools:["HTML","Slim","CSS","Less","JavaScript","TypeScript","Bootstrap","AJAX","Vue","NodeJs","MongoDB"],screenshots:{img1:{url:"https://via.placeholder.com/355x200",caption:{en:"caption 5",ar:"تسمية توضيحية 5"}},img2:{url:"https://via.placeholder.com/330x460",caption:{en:"caption 4",ar:"تسمية توضيحية 4"}},img3:{url:"https://via.placeholder.com/300x225",caption:{en:"caption 3",ar:"تسمية توضيحية 3"}},img4:{url:"https://via.placeholder.com/300x225",caption:{en:"caption 2",ar:"تسمية توضيحية 2"}},img5:{url:"https://via.placeholder.com/300x225",caption:{en:"caption 1",ar:"تسمية توضيحية 1"}}}},{id:17,url:"single-portfolio.html?id=17",imgUrl:"https://via.placeholder.com/375x300",title:{en:"Lorem Ipsum Dolor 17",ar:"هنا عنوان المشروع 17"},date:{en:"April 2021",ar:"أبريل 2021"},desc:{en:"Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.",ar:"هذا النص هو مثال لنص يمكن أن يستبدل في نفس المساحة، لقد تم توليد هذا النص من مولد النص العربى، حيث يمكنك أن تولد مثل هذا النص أو العديد من النصوص الأخرى إضافة إلى زيادة عدد الحروف التى يولدها التطبيق. إذا كنت تحتاج إلى عدد أكبر من الفقرات يتيح لك مولد النص العربى زيادة عدد الفقرات كما تريد، النص لن يبدو مقسما ولا يحوي أخطاء لغوية، مولد النص العربى مفيد لمصممي المواقع على وجه الخصوص، حيث يحتاج العميل فى كثير من الأحيان أن يطلع على صورة حقيقية لتصميم الموقع. ومن هنا وجب على المصمم أن يضع نصوصا مؤقتة على التصميم ليظهر للعميل الشكل كاملاً، دور مولد النص العربى أن يوفر على المصمم عناء البحث عن نص بديل لا علاقة له بالموضوع الذى يتحدث عنه التصميم فيظهر بشكل لا يليق."},category:"Angular",tools:["HTML","PugJS","CSS","SCSS","JavaScript","Gulp","TailwindCSS","AJAX","Angular","Firebase"],screenshots:{img1:{url:"https://via.placeholder.com/355x200",caption:{en:"caption 5",ar:"تسمية توضيحية 5"}},img2:{url:"https://via.placeholder.com/330x460",caption:{en:"caption 4",ar:"تسمية توضيحية 4"}},img3:{url:"https://via.placeholder.com/300x225",caption:{en:"caption 3",ar:"تسمية توضيحية 3"}},img4:{url:"https://via.placeholder.com/300x225",caption:{en:"caption 2",ar:"تسمية توضيحية 2"}},img5:{url:"https://via.placeholder.com/300x225",caption:{en:"caption 1",ar:"تسمية توضيحية 1"}}}},{id:18,url:"single-portfolio.html?id=18",imgUrl:"https://via.placeholder.com/350x500",title:{en:"Lorem Ipsum Dolor 18",ar:"هنا عنوان المشروع 18"},date:{en:"April 2021",ar:"أبريل 2021"},desc:{en:"Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.",ar:"هذا النص هو مثال لنص يمكن أن يستبدل في نفس المساحة، لقد تم توليد هذا النص من مولد النص العربى، حيث يمكنك أن تولد مثل هذا النص أو العديد من النصوص الأخرى إضافة إلى زيادة عدد الحروف التى يولدها التطبيق. إذا كنت تحتاج إلى عدد أكبر من الفقرات يتيح لك مولد النص العربى زيادة عدد الفقرات كما تريد، النص لن يبدو مقسما ولا يحوي أخطاء لغوية، مولد النص العربى مفيد لمصممي المواقع على وجه الخصوص، حيث يحتاج العميل فى كثير من الأحيان أن يطلع على صورة حقيقية لتصميم الموقع. ومن هنا وجب على المصمم أن يضع نصوصا مؤقتة على التصميم ليظهر للعميل الشكل كاملاً، دور مولد النص العربى أن يوفر على المصمم عناء البحث عن نص بديل لا علاقة له بالموضوع الذى يتحدث عنه التصميم فيظهر بشكل لا يليق."},category:"Vue",tools:["HTML","Slim","CSS","Less","JavaScript","TypeScript","Materialize","AJAX","Vue","NodeJs","MongoDB"],screenshots:{img1:{url:"https://via.placeholder.com/355x200",caption:{en:"caption 5",ar:"تسمية توضيحية 5"}},img2:{url:"https://via.placeholder.com/330x460",caption:{en:"caption 4",ar:"تسمية توضيحية 4"}},img3:{url:"https://via.placeholder.com/300x225",caption:{en:"caption 3",ar:"تسمية توضيحية 3"}},img4:{url:"https://via.placeholder.com/300x225",caption:{en:"caption 2",ar:"تسمية توضيحية 2"}},img5:{url:"https://via.placeholder.com/300x225",caption:{en:"caption 1",ar:"تسمية توضيحية 1"}}}}].reverse(),portfolioItems:[],testimonialsItems:[{imgUrl:"https://via.placeholder.com/200",quoteContent:{en:"Nafie simply provides amazing web development service. Their team is extremely professional and the easiest to meet I have ever worked with. I would recommend Nafie to anyone.",ar:"محمد يقدم خدمات مذهلة في تطوير الويب، ولديه فريق محترف يجعل التعامل معهم مطمئن للغاية. أوصي بفريقهم للجميع."},quoteAuthor:{en:"Terrell Grimes",ar:"جابر العواني"},jobTitle:{en:"Photographer",ar:"مصور فوتوغرافي"}},{imgUrl:"https://via.placeholder.com/200",quoteContent:{en:"Excellent Team to work with. Always positive to find the most appropriate solution. Nafie is one of the professional web development agency that provides awesome services.",ar:"فريق ممتاز للعمل معه. إيجابي دائمًا للعثور على الحل الأنسب. هم إحدى شركات تطوير الويب المحترفة التي تقدم خدمات رائعة."},quoteAuthor:{en:"Lonny Corkery",ar:"حسون القلال"},jobTitle:{en:"Project Manager",ar:"مدير المشاريع"}},{imgUrl:"https://via.placeholder.com/200",quoteContent:{en:"Nafie team is very professional, always delivers high quality results, and is always there to help. Look forward to working with Nafie in other projects.",ar:"محمد مطور محترف للغاية يقدم دائمًا نتائج عالية الجودة ، وهو دائمًا موجود للمساعدة. نتطلع إلى العمل معه في مشاريع أخرى."},quoteAuthor:{en:"Max Schmidt DDS",ar:"مصطفى الخليفي"},jobTitle:{en:"CEO, Designer",ar:"أخصائي SEO"}},{imgUrl:"https://via.placeholder.com/200",quoteContent:{en:"Nafie worked on a handful of projects for us and has always exceeded our expectations. Nafie team is dedicated, talented and a delight to work with.",ar:"عمل محمد في عدد كبير من المشاريع لأجلنا وكان دائمًا يفوق توقعاتنا. مطور متخصص وموهوب ونسعد دائمًا بالعمل معه."},quoteAuthor:{en:"Amir Stoltenberg",ar:"عباس العنابي"},jobTitle:{en:"Sales Manager",ar:"مدير مبيعات"}},{imgUrl:"https://via.placeholder.com/200",quoteContent:{en:"I know I can count on your service if I need my project done fast and with the best possible result. I am a regular customer and hope to continue our work!",ar:"يمكنني الاعتماد على خدمات محمد دائمًا وخاصة إذا كنت بحاجة إلى إنجاز مشروعي في أقل وقت وبأفضل نتيجة ممكنة. أنا عميل منتظم لديه وآمل أن نواصل عملنا معا دائمًا."},quoteAuthor:{en:"Kenton Marquardt",ar:"سمير النجار"},jobTitle:{en:"Art Director",ar:"آرت دايركتور"}},{imgUrl:"https://via.placeholder.com/200",quoteContent:{en:"Muhammad was a real pleasure to work with and we look forward to working with him again. He’s definitely the kind of developer you can trust with a project from start to finish.",ar:"أنا سعيد حقًا بالعمل مع محمد وأتطلع إلى العمل معه مرة أخرى قريبا. هو بالتأكيد من المطورين الذي يمكنك الوثوق بهم للعمل على مشروعك من البداية إلى النهاية."},quoteAuthor:{en:"Reyna Hammes",ar:"أمير داوود"},jobTitle:{en:"Motion Graphic Animator",ar:"مصمم موشن جرافيك"}},{imgUrl:"https://via.placeholder.com/200",quoteContent:{en:"Muhammad was a real pleasure to work with and we look forward to working with him again. He’s definitely the kind of developer you can trust with a project from start to finish.",ar:"أنا سعيد حقًا بالعمل مع محمد وأتطلع إلى العمل معه مرة أخرى قريبا. هو بالتأكيد من المطورين الذي يمكنك الوثوق بهم للعمل على مشروعك من البداية إلى النهاية."},quoteAuthor:{en:"Jovan Parisian",ar:"منصور السقاط"},jobTitle:{en:"Motion Graphic Animator",ar:"مصمم موشن جرافيك"}},{imgUrl:"https://via.placeholder.com/200",quoteContent:{en:"I know I can count on your service if I need my project done fast and with the best possible result. I am a regular customer and hope to continue our work!",ar:"يمكنني الاعتماد على خدمات محمد دائمًا وخاصة إذا كنت بحاجة إلى إنجاز مشروعي في أقل وقت وبأفضل نتيجة ممكنة. أنا عميل منتظم لديه وآمل أن نواصل عملنا معا دائمًا."},quoteAuthor:{en:"Pasquale Deckow",ar:"عطا بن عاشور"},jobTitle:{en:"Art Director",ar:"آرت دايركتور"}},{imgUrl:"https://via.placeholder.com/200",quoteContent:{en:"Nafie worked on a handful of projects for us and has always exceeded our expectations. Nafie team is dedicated, talented and a delight to work with.",ar:"عمل محمد في عدد كبير من المشاريع لأجلنا وكان دائمًا يفوق توقعاتنا. مطور متخصص وموهوب ونسعد دائمًا بالعمل معه."},quoteAuthor:{en:"Rosa Ferry",ar:"نافع حاتم"},jobTitle:{en:"Sales Manager",ar:"مدير مبيعات"}},{imgUrl:"https://via.placeholder.com/200",quoteContent:{en:"Nafie team is very professional, always delivers high quality results, and is always there to help. Look forward to working with Nafie in other projects.",ar:"محمد مطور محترف للغاية يقدم دائمًا نتائج عالية الجودة ، وهو دائمًا موجود للمساعدة. نتطلع إلى العمل معه في مشاريع أخرى."},quoteAuthor:{en:"Keshaun Robel",ar:"صدقي الطويل"},jobTitle:{en:"CEO, Designer",ar:"أخصائي SEO"}},{imgUrl:"https://via.placeholder.com/200",quoteContent:{en:"Excellent Team to work with. Always positive to find the most appropriate solution. Nafie is one of the professional web development agency that provides awesome services.",ar:"فريق ممتاز للعمل معه. إيجابي دائمًا للعثور على الحل الأنسب. هم إحدى شركات تطوير الويب المحترفة التي تقدم خدمات رائعة."},quoteAuthor:{en:"Casper Paucek",ar:"حسان ادريس"},jobTitle:{en:"Project Manager",ar:"مدير المشاريع"}},{imgUrl:"https://via.placeholder.com/200",quoteContent:{en:"Nafie simply provides amazing web development service. Their team is extremely professional and the easiest to meet I have ever worked with. I would recommend Nafie to anyone.",ar:"محمد يقدم خدمات مذهلة في تطوير الويب، ولديه فريق محترف يجعل التعامل معهم مطمئن للغاية. أوصي بفريقهم للجميع."},quoteAuthor:{en:"Archibald Fadel",ar:"مجد الكافي"},jobTitle:{en:"Photographer",ar:"مصور فوتوغرافي"}},{imgUrl:"https://via.placeholder.com/200",quoteContent:{en:"Nafie simply provides amazing web development service. Their team is extremely professional and the easiest to meet I have ever worked with. I would recommend Nafie to anyone.",ar:"محمد يقدم خدمات مذهلة في تطوير الويب، ولديه فريق محترف يجعل التعامل معهم مطمئن للغاية. أوصي بفريقهم للجميع."},quoteAuthor:{en:"Tabitha Denesik",ar:"آسر بنسلامة"},jobTitle:{en:"Photographer",ar:"مصور فوتوغرافي"}},{imgUrl:"https://via.placeholder.com/200",quoteContent:{en:"Excellent Team to work with. Always positive to find the most appropriate solution. Nafie is one of the professional web development agency that provides awesome services.",ar:"فريق ممتاز للعمل معه. إيجابي دائمًا للعثور على الحل الأنسب. هم إحدى شركات تطوير الويب المحترفة التي تقدم خدمات رائعة."},quoteAuthor:{en:"Javon Bogan",ar:"صهيب الشريف"},jobTitle:{en:"Project Manager",ar:"مدير المشاريع"}},{imgUrl:"https://via.placeholder.com/200",quoteContent:{en:"Nafie team is very professional, always delivers high quality results, and is always there to help. Look forward to working with Nafie in other projects.",ar:"محمد مطور محترف للغاية يقدم دائمًا نتائج عالية الجودة ، وهو دائمًا موجود للمساعدة. نتطلع إلى العمل معه في مشاريع أخرى."},quoteAuthor:{en:"Duncan Kemmer",ar:"سيد كرم"},jobTitle:{en:"CEO, Designer",ar:"أخصائي SEO"}},{imgUrl:"https://via.placeholder.com/200",quoteContent:{en:"Nafie worked on a handful of projects for us and has always exceeded our expectations. Nafie team is dedicated, talented and a delight to work with.",ar:"عمل محمد في عدد كبير من المشاريع لأجلنا وكان دائمًا يفوق توقعاتنا. مطور متخصص وموهوب ونسعد دائمًا بالعمل معه."},quoteAuthor:{en:"Coy Johns",ar:"هيثم الشريف"},jobTitle:{en:"Sales Manager",ar:"مدير مبيعات"}},{imgUrl:"https://via.placeholder.com/200",quoteContent:{en:"I know I can count on your service if I need my project done fast and with the best possible result. I am a regular customer and hope to continue our work!",ar:"يمكنني الاعتماد على خدمات محمد دائمًا وخاصة إذا كنت بحاجة إلى إنجاز مشروعي في أقل وقت وبأفضل نتيجة ممكنة. أنا عميل منتظم لديه وآمل أن نواصل عملنا معا دائمًا."},quoteAuthor:{en:"Murphy Roberts",ar:"إسلام مصطفى"},jobTitle:{en:"Art Director",ar:"آرت دايركتور"}},{imgUrl:"https://via.placeholder.com/200",quoteContent:{en:"Muhammad was a real pleasure to work with and we look forward to working with him again. He’s definitely the kind of developer you can trust with a project from start to finish.",ar:"أنا سعيد حقًا بالعمل مع محمد وأتطلع إلى العمل معه مرة أخرى قريبا. هو بالتأكيد من المطورين الذي يمكنك الوثوق بهم للعمل على مشروعك من البداية إلى النهاية."},quoteAuthor:{en:"Dimitri Lockman",ar:"وسيم السقا"},jobTitle:{en:"Motion Graphic Animator",ar:"مصمم موشن جرافيك"}}]}),created(){this.getAppTheme()},mounted(){window.innerWidth>=992&&(this.initCircleCursor(),this.heroImgPanEffect(),this.initializeTilt()),this.navMenuTabTrap(),this.scrollingOptions(),document.addEventListener("scroll",(()=>this.scrollingOptions())),document.querySelectorAll(".has-ultimate-tooltip").forEach((e=>{Popper.createPopper(e,e.querySelector(".ultimate-tooltip"),{placement:"top",modifiers:[{name:"offset",options:{offset:[0,30]}}]})})),this.getPortfolioItems(),new GLightbox({autoplayVideos:!1}),this.initSkillsFirstType()},methods:{initCircleCursor(){const e=this.$refs.appRef,t=this.$refs.circleCursorOuter,i=this.$refs.circleCursorInner;t&&i&&(e.addEventListener("mousemove",(e=>{t.setAttribute("style",`visibility: visible; top: ${e.clientY}px; left: ${e.clientX}px;`),i.setAttribute("style",`visibility: visible; top: ${e.clientY}px; left: ${e.clientX}px;`),e.target.closest("a")||e.target.closest("button")||e.target.closest(".link-hover")?i.classList.add("cursor-link-hover"):i.classList.remove("cursor-link-hover")})),e.addEventListener("click",(()=>{i.classList.add("cursor-click-effect"),setTimeout((()=>i.classList.remove("cursor-click-effect")),200)})))},getAppTheme(){const e=localStorage.getItem("nafieSavedTheme");e?this.savedTheme=e:window.matchMedia?window.matchMedia("(prefers-color-scheme: dark)").matches?this.savedTheme="dark_theme":this.savedTheme="light_theme":this.savedTheme=this.appTheme,localStorage.setItem("nafieSavedTheme",this.savedTheme)},changeAppTheme(){"light_theme"===this.savedTheme?this.savedTheme="dark_theme":this.savedTheme="light_theme",localStorage.setItem("nafieSavedTheme",this.savedTheme)},toggleNavMenu(){this.isNavMenuOpen=!this.isNavMenuOpen,this.isNavMenuOpen?this.openNavMenu():this.closeNavMenu()},openNavMenu(){const e=document.getElementsByTagName("body")[0];this.isNavMenuOpen=!0,e.setAttribute("style","overflow-y: hidden;"),this.$refs.headerNav.querySelector(".desktop-menu-content").focus()},closeNavMenu(){const e=document.getElementsByTagName("body")[0];this.isNavMenuOpen=!1,e.removeAttribute("style"),this.$refs.navMenuToggleBtn.focus()},navMenuTabTrap(){const e=this.$refs.headerNav;let t,i,s,o;document.addEventListener("keyup",(n=>{if(e.classList.contains("menu-open")){const a=[...e.querySelectorAll('a[href], area[href], input:not([disabled]), select:not([disabled]), textarea:not([disabled]), button:not([disabled]), [tabindex="0"]')].filter((e=>"hidden"!==window.getComputedStyle(e).getPropertyValue("visibility")));t=a[0],i=a[a.length-1],"Tab"===n.code?n.shiftKey?s&&i.focus():o&&t.focus():"Escape"===n.code&&this.toggleNavMenu();const r=document.activeElement;o=r===i,s=r===t}}))},heroImgPanEffect(){const e=this.$refs.heroSection;if(!e||!e.getAttribute("data-paneffect"))return;const t=e.querySelectorAll(".layer")[0],i=e.querySelectorAll(".layer")[1];e.addEventListener("mousemove",(s=>{const o=(s.x-e.getBoundingClientRect().x)/e.offsetWidth*100,n=(s.y-e.getBoundingClientRect().y)/e.offsetHeight*100;e.classList.add("parallax-animation"),t.setAttribute("style",`transform-origin: ${o}vw ${n}vh;`),i.setAttribute("style",`transform-origin: ${o}vw ${n}vh;`)}))},scrollingOptions(){const e=window.pageYOffset;this.isHeaderBig=!(e>=this.startMinimizingHeaderAt),this.isHeaderHidden=e>100&&e>this.lastScrollPosition,this.lastScrollPosition=e},scrollToTop(){window.scroll({top:0,behavior:"smooth"})},initSkillsFirstType(){const e=this.$refs.skillsSwitchBtn;e&&(this.skillsType=e.querySelector("input").value)},initializeTilt(){const e=this.$refs.portfolioItems;e&&VanillaTilt.init(e.querySelectorAll(".portfolio-item"),{max:8,speed:400,glare:!0,"max-glare":.3})},getPortfolioItems(){const e=this.allPortfolioItems.filter((e=>{const t=new URLSearchParams(window.location.search),i=t.get("tax");if(!i)return"All"===this.currentFilter||e.category===this.currentFilter;if("cat"===i){const i=t.get("cat");return this.portfolioArchiveName=i,e.category===i}if("tools"===i){const i=t.get("tools");return this.portfolioArchiveName=i,e.tools.includes(i)}})).slice(this.filteredPortfolioItems.length,this.portfolioItemsPage*this.itemsPerPage);e.length?(this.portfolioItems.push(...e),this.$nextTick((()=>{this.portfolioItemsPage>1&&this.initializeTilt(),setTimeout((()=>ScrollTrigger.refresh()),500)})),this.portfolioItemsPage++):this.setNotify({className:"danger",msg:this.$refs.portfolioItems.getAttribute("data-no-works-msg"),time:3e3})},filterPortfolioItems(e){this.currentFilter=e,this.portfolioItemsPage=1,this.filteredPortfolioItems.length?this.$nextTick((()=>{this.portfolioItemsPage>1&&this.initializeTilt(),setTimeout((()=>ScrollTrigger.refresh()),500)})):this.getPortfolioItems()},contactFormValidation(){const e=this.$refs.contactForm,t=e.querySelector('input[name="name"]'),i=e.querySelector('input[name="email"]'),s=e.querySelector('input[name="phone"]'),o=e.querySelector("textarea");let n={name:{required:!0,minLength:!0},email:{required:!0,invalid:!0},phone:{invalid:!0},message:{required:!0}};""===t.value?(n.name.required=!0,this.setNotify({id:"nameRequired",className:"danger",msg:t.closest(".control").querySelector(".errors-msgs .required").value})):(n.name.required=!1,this.dismissNotify("nameRequired")),t.value.length>0&&t.value.length<t.getAttribute("minlength")?(n.name.minLength=!0,this.setNotify({id:"nameMinLength",className:"danger",msg:t.closest(".control").querySelector(".errors-msgs .minLength").value})):(n.name.minLength=!1,this.dismissNotify("nameMinLength")),Object.keys(n.name).some((e=>!0===n.name[e]))?(t.classList.remove("valid"),t.classList.add("invalid")):(t.classList.remove("invalid"),t.classList.add("valid")),""===i.value?(n.email.required=!0,this.setNotify({id:"emailRequired",className:"danger",msg:i.closest(".control").querySelector(".errors-msgs .required").value})):(n.email.required=!1,this.dismissNotify("emailRequired")),i.value.length>0&&!/^[a-zA-Z0-9.!#$%&'*+/=?^_`{|}~-]+@[a-zA-Z0-9-]+(?:\.[a-zA-Z0-9-]+)*$/.test(i.value)?(n.email.invalid=!0,this.setNotify({id:"emailInvalid",className:"danger",msg:i.closest(".control").querySelector(".errors-msgs .invalid").value})):(n.email.invalid=!1,this.dismissNotify("emailInvalid")),Object.keys(n.email).some((e=>!0===n.email[e]))?(i.classList.remove("valid"),i.classList.add("invalid")):(i.classList.remove("invalid"),i.classList.add("valid")),s.value.length>0&&!/^[\+]?[(]?[0-9]{3}[)]?[-\s\.]?[0-9]{3}[-\s\.]?[0-9]{4,6}$/im.test(s.value)?(n.phone.invalid=!0,this.setNotify({id:"phoneInvalid",className:"danger",msg:s.closest(".control").querySelector(".errors-msgs .invalid").value})):(n.phone.invalid=!1,this.dismissNotify("phoneInvalid")),Object.keys(n.phone).some((e=>!0===n.phone[e]))?(s.classList.remove("valid"),s.classList.add("invalid")):(s.classList.remove("invalid"),s.classList.add("valid")),""===o.value?(n.message.required=!0,this.setNotify({id:"messageRequired",className:"danger",msg:o.closest(".control").querySelector(".errors-msgs .required").value})):(n.message.required=!1,this.dismissNotify("messageRequired")),Object.keys(n.message).some((e=>!0===n.message[e]))?(o.classList.remove("valid"),o.classList.add("invalid")):(o.classList.remove("invalid"),o.classList.add("valid")),!Object.values(n).some((e=>Object.values(e).some(Boolean)))&&this.sendContactFormMessage(e)},sendContactFormMessage(e){const t=e.getAttribute("action"),i=new FormData(e);this.startLoading(),fetch(t,{method:"POST",body:i}).then((e=>e.text())).then((t=>{"success"===t?(this.setNotify({className:"success",msg:e.getAttribute("data-success-msg"),time:5e3}),e.reset(),e.querySelectorAll(".valid").forEach((e=>e.classList.remove("valid")))):"error"===t&&this.setNotify({className:"danger",msg:e.getAttribute("data-err-msg"),time:5e3}),this.endLoading(),console.log(t)})).catch((e=>console.log(e)))},setNotify({id:e,className:t,msg:i,time:s}){const o={id:e||`${Date.now()}${this.notifications.length}`,className:t,msg:i,time:s};e?!this.notifications.some((t=>t.id===e))&&this.notifications.push(o):this.notifications.push(o),s&&setTimeout((()=>this.dismissNotify(o.id)),s)},dismissNotify(e){const t=this.notifications.findIndex((t=>t.id===e));t>-1&&this.notifications.splice(t,1)},startLoading(){this.ajaxLoading.push(!0)},endLoading(){this.ajaxLoading.pop()}},computed:{isAjaxLoading(){return this.ajaxLoading.some((e=>!0===e))},experienceYears(){return new Date(new Date-new Date(String(this.careerStartDate))).getFullYear()-1970},experienceChunks(){return[...Array(Math.floor((this.experienceItems.length-1)/3))]},filteredPortfolioItems(){return new URLSearchParams(window.location.search).get("tax")?this.portfolioItems:this.portfolioItems.filter((e=>"All"===this.currentFilter||e.category===this.currentFilter))},getSinglePortfolioItem(){const e=new URLSearchParams(window.location.search).get("id");return this.allPortfolioItems.find((t=>t.id==e))},copyrightDate(){const e=new Date(new Date-new Date(String(this.copyrightStartDate))).getFullYear()-1970;return 0===e?this.copyrightStartDate:`${this.copyrightStartDate} - ${this.copyrightStartDate+e}`}},directives:{clone:{mounted(e){e.parentNode.insertBefore(e.cloneNode(!0),e.nextSibling)}},staggerdelay:{mounted(e,t){[...e.children].forEach(((e,i)=>{e.setAttribute("style",`animation-delay: ${(i+1)*(t.value||100)}ms`)}))}},tooltip:{mounted(e,t){e.classList.add("has-tooltip"),e.insertAdjacentHTML("beforeend",`<div class="custom-tooltip custom-tooltip-${t.value.dir}">${t.value.text}</div>`)}}}}).mount("#app")}();