text: (this["webpackJsonpreact-main-portfolio"]=this["webpackJsonpreact-main-portfolio"]||[]).push([[0],{404:function(n,e,t){"use strict";t.r(e);var r,i,o=t(1),a=t.n(o),c=t(42),s=t.n(c),l=t(5),d=t(50),m=t(13),b=t(6),j=t(31),h=t.p+"static/media/avatar.0f8641dd.jpg",p=t(0),g=b.b.div(r||(r=Object(l.a)(['\n  display: flex;\n  justify-content: space-between;\n  flex-direction: column;\n  align-items: center;\n  height: 100vh;\n  width: 100%;\n  border-right: 1px solid var(--border-color);\n\n  .avatar {\n    width: 100%;\n    border-bottom: 1px solid var(--border-color);\n    text-align: center;\n    padding: 1rem 0;\n\n    img {\n      width: 70%;\n      border-radius: 50%;\n      border: 8px solid var(--border-color);\n    }\n  }\n\n  .nav-items {\n    width: 100%;\n    text-align: center;\n\n    li {\n      display: block;\n\n      .active-class {\n        background-color: var(--primary-color);\n        &:hover {\n          width: 96%;\n          padding-left: 10px;\n        }\n      }\n\n      a {\n        display: block;\n        padding: 0.45rem 0;\n        position: relative;\n        text-transform: uppercase;\n        font-weight: 600;\n        letter-spacing: 1px;\n\n        &:hover {\n          cursor: pointer;\n          transform: scale(1.1);\n          transition: all 0.4s ease-in-out;\n          color: var(--white-color);\n        }\n        &::before {\n          content: "";\n          position: absolute;\n          bottom: 0;\n          left: 0;\n          width: 0;\n          height: 50%;\n          background-color: var(--primary-color);\n          transition: all 0.4s cubic-bezier(1, -0.2, 0.25, 0.95);\n          opacity: 0.21;\n          z-index: -1;\n        }\n\n        a:hover::before {\n          width: 96%;\n          height: 100%;\n        }\n      }\n    }\n  }\n\n  footer {\n    border-top: 1px solid var(--border-color);\n    width: 100%;\n    p {\n      padding: 2rem 0;\n      font-size: 0.6rem;\n      display: block;\n      text-align: center;\n    }\n  }\n']))),x=function(){return Object(p.jsxs)(g,{children:[Object(p.jsx)("div",{className:"avatar",children:Object(p.jsx)("img",{src:h,alt:""})}),Object(p.jsxs)("ul",{className:"nav-items",children:[Object(p.jsx)("li",{className:"nav-item",children:Object(p.jsx)(j.b,{to:"/",activeClassName:"active-class",exact:!0,children:"Home"})}),Object(p.jsx)("li",{className:"nav-item",children:Object(p.jsx)(j.b,{to:"/about",activeClassName:"active-class",exact:!0,children:"About"})}),Object(p.jsx)("li",{className:"nav-item",children:Object(p.jsx)(j.b,{to:"/resume",activeClassName:"active-class",exact:!0,children:"Resume"})}),Object(p.jsx)("li",{className:"nav-item",children:Object(p.jsx)(j.b,{to:"/portfolio",activeClassName:"active-class",exact:!0,children:"Portfolio"})}),Object(p.jsx)("li",{className:"nav-item",children:Object(p.jsx)(j.b,{to:"/blog",activeClassName:"active-class",exact:!0,children:"Blogs"})}),Object(p.jsx)("li",{className:"nav-item",children:Object(p.jsx)(j.b,{to:"/contact",activeClassName:"active-class",exact:!0,children:"Contact"})})]}),Object(p.jsx)("footer",{className:"footer",children:Object(p.jsxs)("p",{children:[" Portfolio Website @",(new Date).getFullYear()]})})]})},u=b.b.div(i||(i=Object(l.a)(["\n  width: 16.3rem;\n  height: 100vh;\n  position: fixed;\n  background-color: var(--sidebar-dark-color);\n  overflow: hidden;\n  transition: all 0.4s ease-in-out;\n  @media screen and (max-width: 1200px) {\n    transform: translateX(-100%);\n    z-index: 20;\n  }\n"]))),f=function(n){var e=n.navToggle;return Object(p.jsx)(u,{className:"".concat(e?"nav-toggler":""),children:Object(p.jsx)(x,{})})},O=t(118),v=t(119),w=t.n(v);var k,y,N,z,F,S,A,E,C,I,L,T,H,M,R,_,B,D,q,P,G,J,Y,U,W,K=function(){return Object(p.jsx)(p.Fragment,{children:Object(p.jsx)(w.a,{width:"100%",height:"100vh",params:{particles:{number:{value:109,density:{enable:!0,value_area:1200}},color:{value:"#636e72"},shape:{type:"circle",stroke:{width:0},polygon:{nb_sides:6}},line_linked:{enable:!1,distance:150,opacity:.9,width:1,shadow:{enable:!0,color:"#e74c3c",blur:5}},move:{enable:!0,random:!0,speed:.6,attract:{rotateX:600,rotateY:1200}},size:{value:4,random:!0,anim:{speed:40,size_min:.1}},opacity:{value:.8,anim:{speed:1,opacity_min:.1}}}}})})},X=t(120),Q=t.n(X),V=t(64),Z=t.n(V),$=t(124),nn=t.n($),en=b.b.header(k||(k=Object(l.a)(["\n  width: 100%;\n  height: 100vh;\n  position: relative;\n\n  .typography {\n    position: absolute;\n    top: 50%;\n    left: 50%;\n    transform: translate(-50%, -50%);\n    text-align: center;\n    width: 80%;\n\n    .ityped-job {\n      font-size: 3rem;\n      margin-top: 10px;\n      @media screen and (max-width: 500px) {\n        font-size: 2rem;\n      }\n      span {\n        font-size: 3rem;\n        color: crimson;\n        @media screen and (max-width: 500px) {\n          font-size: 2rem;\n        }\n      }\n    }\n\n    .icons {\n      display: flex;\n      justify-content: center;\n      margin-top: 1rem;\n      .icon {\n        border: 2px solid var(--border-color);\n        display: flex;\n        align-items: center;\n        justify-content: center;\n        border-radius: 50%;\n        transition: all 0.4s ease-in-out;\n        cursor: pointer;\n\n        &:not(:last-child) {\n          margin-right: 1rem;\n        }\n        svg {\n          margin: 0.5rem;\n        }\n      }\n\n      .i-facebook {\n        &:hover {\n          border: 2px solid #589dc5;\n          color: #589dc5;\n        }\n      }\n      .i-github {\n        &:hover {\n          border: 2px solid #6e5494;\n          color: #6e5494;\n        }\n      }\n      .i-linkedin {\n        &:hover {\n          border: 2px solid #2867b2;\n          color: #2867b2;\n        }\n      }\n    }\n  }\n"]))),tn=function(){var n=Object(o.useRef)(null);return Object(o.useEffect)((function(){Object(O.a)(n.current,{showCursor:!0,backDelay:2500,backSpeed:100,strings:["Engineer","Developer","Freelancer"]})}),[]),Object(p.jsxs)(en,{children:[Object(p.jsx)("div",{className:"particle-con",children:Object(p.jsx)(K,{})}),Object(p.jsxs)("div",{className:"typography",children:[Object(p.jsxs)("h1",{children:["Hi, I'm ",Object(p.jsx)("span",{children:"ABDELHAMEED"})]}),Object(p.jsxs)("div",{className:"ityped-job",children:["Software ",Object(p.jsx)("span",{ref:n})]}),Object(p.jsxs)("div",{className:"icons",children:[Object(p.jsx)("a",{href:"https://www.facebook.com/abdelhameed.hassan95/",className:"icon i-facebook",target:"_blank",rel:"noreferrer",children:Object(p.jsx)(Q.a,{})}),Object(p.jsx)("a",{href:"https://github.com/abdelhameed-hassan",className:"icon i-github",target:"_blank",rel:"noreferrer",children:Object(p.jsx)(Z.a,{})}),Object(p.jsx)("a",{href:"https://www.linkedin.com/in/abdelhameed-hassan-84734216a/?locale=en_US",className:"icon i-linkedin",target:"_blank",rel:"noreferrer",children:Object(p.jsx)(nn.a,{})})]})]})]})},rn=b.b.div(y||(y=Object(l.a)(["\n  padding: 5rem;\n  @media screen and (max-width: 650px) {\n    padding: 3rem;\n  }\n  @media screen and (max-width: 600px) {\n    padding: 2rem 1rem;\n  }\n  /* @media screen and (max-width: 510px) {\n    padding: 0.4rem;\n  } */\n"]))),on=b.b.div(N||(N=Object(l.a)(["\n  padding: 5rem 0;\n"]))),an=b.b.div(z||(z=Object(l.a)(['\n  position: relative;\n  h2 {\n    color: var(--white-color);\n    font-size: 3.1rem;\n    font-weight: 600;\n    text-transform: uppercase;\n    position: relative;\n    padding-bottom: 0.7rem;\n    @media screen and (max-width: 500px) {\n      font-size: 2.8rem;\n    }\n    @media screen and (max-width: 400px) {\n      font-size: 2rem;\n    }\n    &::before {\n      content: "";\n      position: absolute;\n      bottom: 0px;\n      left: 0;\n      width: 7.4rem;\n      height: 0.33rem;\n      background-color: var(--background-light-color-2);\n      border-radius: 15px;\n    }\n    &::after {\n      content: "";\n      position: absolute;\n      bottom: 0px;\n      left: 0;\n      width: 3.5rem;\n      height: 0.33rem;\n      background-color: var(--primary-color);\n      border-radius: 15px;\n    }\n\n    span {\n      font-weight: 900;\n      color: rgba(25, 29, 43, 0.44);\n      font-size: 4.7rem;\n      position: absolute;\n      left: 0;\n      top: 30%;\n      z-index: -1;\n      @media screen and (max-width: 620px) {\n        font-size: 4rem;\n      }\n      @media screen and (max-width: 500px) {\n        font-size: 3rem;\n      }\n      @media screen and (max-width: 400px) {\n        font-size: 2rem;\n      }\n    }\n  }\n']))),cn=function(n){var e=n.title,t=n.span;return Object(p.jsx)(an,{children:Object(p.jsxs)("h2",{children:[e,Object(p.jsx)("b",{children:Object(p.jsx)("span",{children:t})})]})})},sn=t.p+"static/media/resume.191085d2.jpg",ln=b.b.a(F||(F=Object(l.a)(['\n  background-color: var(--primary-color);\n  padding: 0.8rem 2.5rem;\n  color: var(--white-color);\n  cursor: pointer;\n  display: inline-block;\n  font-size: inherit;\n  text-transform: uppercase;\n  position: relative;\n  &::after {\n    content: "";\n    position: absolute;\n    width: 0%;\n    height: 0.2rem;\n    transition: all 0.4s ease-in-out;\n    left: 0;\n    bottom: 0;\n    opacity: 0.7;\n  }\n\n  &:hover::after {\n    width: 100%;\n    background-color: var(--white-color);\n  }\n']))),dn=function(n){var e=n.title;return Object(p.jsx)(ln,{children:e})},mn=b.b.div(S||(S=Object(l.a)(["\n  display: flex;\n  margin-top: 5rem;\n  @media screen and (max-width: 1000px) {\n    flex-direction: column;\n    .left-content {\n      margin-bottom: 2rem;\n    }\n  }\n  .left-content {\n    width: 100%;\n    z-index: 1;\n    img {\n      height: 90%;\n      width: 90%;\n      object-fit: cover;\n    }\n  }\n  .right-content {\n    h4 {\n      font-size: 2rem;\n      color: var(--white-color);\n      span {\n        font-size: 2rem;\n      }\n    }\n    .paragraph {\n      padding: 1rem 0;\n    }\n    .about-info {\n      display: flex;\n      padding-bottom: 1.4rem;\n      .info-title {\n        padding-right: 3rem;\n        p {\n          font-weight: 600;\n        }\n      }\n      .info-title,\n      .info {\n        p {\n          padding: 0.3rem 0;\n        }\n      }\n    }\n  }\n"]))),bn=function(){return Object(p.jsxs)(mn,{children:[Object(p.jsx)("div",{className:"left-content",children:Object(p.jsx)("img",{src:sn,alt:"resume"})}),Object(p.jsxs)("div",{className:"right-content",children:[Object(p.jsxs)("h4",{children:["I am ",Object(p.jsx)("span",{children:"Abdelhameed Hassan"})]}),Object(p.jsx)("p",{className:"paragraph",children:"Meticulous Software Engineer with 1+ years of front-end experience and a passion for creating responsive website designs and a firm believer in mobile-first approach."}),Object(p.jsxs)("div",{className:"about-info",children:[Object(p.jsxs)("div",{className:"info-title",children:[Object(p.jsx)("p",{children:"Name"}),Object(p.jsx)("p",{children:"Age"}),Object(p.jsx)("p",{children:"Nationality"}),Object(p.jsx)("p",{children:"Languages"}),Object(p.jsx)("p",{children:"Location"}),Object(p.jsx)("p",{children:"Job"})]}),Object(p.jsxs)("div",{className:"info",children:[Object(p.jsx)("p",{children:": Abdelhameed Hassan Sayed"}),Object(p.jsx)("p",{children:": 26"}),Object(p.jsx)("p",{children:": Egyptian"}),Object(p.jsx)("p",{children:": Arabic / English / German"}),Object(p.jsx)("p",{children:": Cairo, Egypt"}),Object(p.jsx)("p",{children:": Software Engineer"})]})]}),Object(p.jsx)("a",{href:"https://drive.google.com/file/d/1beUN6_KThYufxItFiIbHU5B19rGOdlIg/view?usp=sharing",target:"_blank",rel:"noreferrer",children:Object(p.jsx)(dn,{title:"Download CV"})})]})]})},jn=b.b.div(A||(A=Object(l.a)(['\n  background-color: var(--background-dark-grey);\n  border-left: 1px solid var(--border-color);\n  border-right: 1px solid var(--border-color);\n  border-bottom: 1px solid var(--border-color);\n  border-top: 8px solid var(--border-color);\n  transition: all 0.4s ease-in-out;\n  &:hover {\n    border-top: 8px solid var(--primary-color);\n    transform: translateY(3px);\n  }\n  .container {\n    padding: 1.2rem;\n    h4 {\n      color: var(--white-color);\n      font-size: 1.6rem;\n      padding: 1rem 0;\n      position: relative;\n      &::after {\n        content: "";\n        width: 4rem;\n        background-color: var(--border-color);\n        height: 3px;\n        position: absolute;\n        left: 0;\n        bottom: 0;\n        border-radius: 10px;\n      }\n    }\n\n    p {\n      padding: 0.8rem 0;\n    }\n  }\n']))),hn=function(n){var e=n.image,t=n.title,r=n.paragraph;return Object(p.jsx)(jn,{children:Object(p.jsxs)("div",{className:"container",children:[Object(p.jsx)("img",{src:e,alt:""}),Object(p.jsx)("h4",{children:t}),Object(p.jsx)("p",{children:r})]})})},pn=t.p+"static/media/design.8ecb3043.svg",gn=t.p+"static/media/intelligence.11bd2ab2.svg",xn=t.p+"static/media/game-dev.20147858.svg",un=b.b.div(E||(E=Object(l.a)(["\n  .services {\n    margin-top: 5rem;\n    display: grid;\n    grid-template-columns: repeat(3, 1fr);\n    grid-gap: 1.5rem;\n\n    @media screen and (max-width: 1000px) {\n      flex-direction: column;\n    }\n    @media screen and (max-width: 950px) {\n      grid-template-columns: repeat(2, 1fr);\n    }\n    @media screen and (max-width: 650px) {\n      grid-template-columns: repeat(1, 1fr);\n    }\n  }\n"]))),fn=function(){return Object(p.jsx)(on,{children:Object(p.jsxs)(un,{children:[Object(p.jsx)(cn,{title:"Services",span:"Services"}),Object(p.jsxs)("div",{className:"services",children:[Object(p.jsx)(hn,{image:pn,title:"Web Design",paragraph:"Lorem ipsum dolor sit amet consectetur adipisicing elit. Quidem, beatae perferendis! Incidunt vitae laboriosam itaque."}),Object(p.jsx)("div",{className:"mid-card",children:Object(p.jsx)(hn,{image:gn,title:"Artificial Intelligence",paragraph:"Lorem ipsum dolor sit amet consectetur adipisicing elit. Quidem, beatae perferendis! Incidunt vitae laboriosam itaque."})}),Object(p.jsx)(hn,{image:xn,title:"Game Development",paragraph:"Lorem ipsum dolor sit amet consectetur adipisicing elit. Quidem, beatae perferendis! Incidunt vitae laboriosam itaque."})]})]})})},On=b.b.div(C||(C=Object(l.a)(['\n  padding: 2rem 1rem;\n  border-left: 6px solid var(--border-color);\n  background-color: var(--background-dark-grey);\n  position: relative;\n  width: 100%;\n\n  &::after {\n    content: "";\n    position: absolute;\n    left: 2rem;\n    top: 100%;\n    border-width: 0.8rem;\n    border-style: solid;\n    border-color: var(--background-dark-grey) transparent transparent\n      var(--background-dark-grey);\n  }\n  p {\n    padding: 1rem 0;\n  }\n']))),vn=function(n){var e=n.text;return Object(p.jsx)(On,{children:Object(p.jsx)("p",{children:e})})},wn=b.b.div(I||(I=Object(l.a)(["\n  .reviews {\n    display: grid;\n    grid-template-columns: repeat(2, 1fr);\n    grid-gap: 1.5rem;\n    width: 100%;\n    @media screen and (max-width: 650px) {\n      flex-direction: column;\n      grid-template-columns: repeat(1, 1fr);\n    }\n  }\n"]))),kn=function(){return Object(p.jsxs)(wn,{children:[Object(p.jsx)(cn,{title:"Reviews",span:"Reviews"}),Object(p.jsx)(on,{children:Object(p.jsxs)("div",{className:"reviews",children:[Object(p.jsx)(vn,{text:"Lorem ipsum dolor sit, amet consectetur adipisicing elit. Facilis eveniet repudiandae mollitia quibusdam."}),Object(p.jsx)(vn,{text:"Lorem ipsum dolor sit, amet consectetur adipisicing elit. Facilis eveniet repudiandae mollitia quibusdam? dos repudiandae mollitia."})]})})]})},yn=b.b.section(L||(L=Object(l.a)([""]))),Nn=function(){return Object(p.jsx)(rn,{children:Object(p.jsxs)(yn,{children:[Object(p.jsx)(cn,{title:"About Me",span:"About Me"}),Object(p.jsx)(bn,{}),Object(p.jsx)(fn,{}),Object(p.jsx)(kn,{})]})})},zn=t(133),Fn=t(125),Sn=t.n(Fn),An=b.b.div(T||(T=Object(l.a)(['\n  display: grid;\n  grid-template-columns: repeat(3, 1fr);\n  grid-gap: 2.5rem;\n  @media screen and (max-width: 920px) {\n    grid-template-columns: repeat(2, 1fr);\n  }\n  @media screen and (max-width: 700px) {\n    grid-template-columns: repeat(1, 1fr);\n  }\n  .grid-item {\n    .portfolio-content {\n      display: block;\n      .portfolio-image {\n        position: relative;\n        overflow: hidden;\n        &::before {\n          content: "";\n          position: absolute;\n          left: 15px;\n          top: 15px;\n          width: 0;\n          height: 0;\n          transition: all 0.4s ease-in-out;\n        }\n        img {\n          width: 100%;\n          height: 30vh;\n          object-fit: cover;\n        }\n        ul {\n          transform: translateY(-600px);\n          transition: all 0.4s ease-in-out;\n          position: absolute;\n          left: 50%;\n          top: 50%;\n          opacity: 0;\n          li {\n            display: flex;\n            align-items: center;\n            justify-content: center;\n            padding: 1rem;\n            background-color: var(--border-color);\n            border-radius: 50%;\n            margin: 0 0.5rem;\n            width: 3rem;\n            height: 3rem;\n            transition: all 0.4s ease-in-out;\n            &:hover {\n              background-color: var(--primary-color);\n            }\n            a {\n              display: flex;\n              align-items: center;\n              justify-content: center;\n              svg {\n                font-size: 2rem;\n              }\n            }\n          }\n        }\n      }\n      .portfolio-image:hover {\n        ul {\n          transform: translate(-50%, -50%);\n          display: flex;\n          align-items: center;\n          justify-content: center;\n          transition: all 0.4s ease-in-out;\n          opacity: 1;\n          li {\n            transition: all 0.4s ease-in-out;\n            &:hover {\n              background-color: var(--primary-color);\n            }\n            a {\n              display: flex;\n              align-items: center;\n              justify-content: center;\n              svg {\n                font-size: 2rem;\n              }\n            }\n          }\n          li:hover {\n            svg {\n              color: var(--white-color);\n            }\n          }\n        }\n        &::before {\n          content: "";\n          position: absolute;\n          left: 15px;\n          top: 15px;\n          height: calc(100% - 30px);\n          width: calc(100% - 30px);\n          background-color: #8f8f8fb8;\n          opacity: 0.9;\n          transform-origin: left;\n          transition: all 0.4s ease-in-out;\n        }\n      }\n      h6 {\n        font-size: 1.5rem;\n      }\n    }\n  }\n']))),En=function(n){var e=n.menuItem;return Object(p.jsx)(An,{children:e.map((function(n){return Object(p.jsx)("div",{className:"grid-item",children:Object(p.jsxs)("div",{className:"portfolio-content",children:[Object(p.jsxs)("div",{className:"portfolio-image",children:[Object(p.jsx)("img",{src:n.image,alt:""}),Object(p.jsxs)("ul",{children:[Object(p.jsx)("li",{children:Object(p.jsx)("a",{href:n.link1,target:"_blank",rel:"noreferrer",children:Object(p.jsx)(Z.a,{})})}),Object(p.jsx)("li",{children:Object(p.jsx)("a",{href:n.link2,target:"_blank",rel:"noreferrer",children:Object(p.jsx)(Sn.a,{})})})]})]}),Object(p.jsx)("h6",{children:n.title}),Object(p.jsx)("p",{children:n.text})]})},n.id)}))})},Cn=t.p+"static/media/cv_css.81d94986.png",In=t.p+"static/media/ms.08be9db5.png",Ln=t.p+"static/media/react_styled.c23ef94e.png",Tn=t.p+"static/media/maya-4.98e8029e.jpg",Hn=t.p+"static/media/maya-3.8bd072e0.jpg",Mn=[{id:1,category:"CSS",image:Cn,link1:"https://www.google.com",link2:"https://www.google.com",title:"Responsive Resume",text:"Created with only HTML and CSS."},{id:2,category:"Python",image:Hn,link1:"https://www.google.com",link2:"https://www.google.com",title:"How To Animate In Maya",text:"Number one Animation Application"},{id:3,category:"Javascript",image:Hn,link1:"https://www.google.com",link2:"https://www.google.com",title:"How To Animate In Maya",text:"Number one Animation Application"},{id:4,category:"Animation",image:Tn,link1:"https://www.google.com",link2:"https://www.google.com",title:"How To Use Blender",text:"Free Animation Software"},{id:5,category:"Animation",image:Tn,link1:"https://www.google.com",link2:"https://www.google.com",title:"How To Use Blender",text:"Free Animation Software"},{id:6,category:"React JS",image:Ln,link1:"https://www.google.com",link2:"https://www.google.com",title:"Responsive Portfolio Website",text:"Created using different technologies such as Material UI, Styled-Components and more..."},{id:7,category:"CSS",image:In,link1:"https://www.google.com",link2:"https://www.google.com",title:"Microsoft Website Clone",text:"Created using HTML and CSS"}],Rn=b.b.button(H||(H=Object(l.a)(["\n  outline: none;\n  border: none;\n  background-color: var(--background-light-color-2);\n  padding: 0.4rem 2rem;\n  font-size: inherit;\n  color: var(--white-color);\n  cursor: pointer;\n  transition: all 0.4s ease-in-out;\n  margin-bottom: 0.6rem;\n  &:active,\n  &:focus {\n    background-color: var(--primary-color);\n  }\n  &:hover {\n    background-color: var(--primary-color);\n  }\n  &:not(:last-child) {\n    margin-right: 0.7rem;\n  }\n"]))),_n=b.b.div(M||(M=Object(l.a)(["\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  flex-wrap: wrap;\n  /* width: 70%; */\n  margin: 2.5rem auto;\n  @media screen and (max-width: 740px) {\n    margin-top: 0;\n  }\n"]))),Bn=function(n){var e=n.filter,t=n.buttonsNames;return Object(p.jsx)(_n,{children:t.map((function(n,t){return Object(p.jsx)(Rn,{onClick:function(){return e(n)},children:n},t)}))})},Dn=b.b.section(R||(R=Object(l.a)([""]))),qn=function(){var n=Object(o.useState)(Mn),e=Object(d.a)(n,2),t=e[0],r=e[1],i=["All"].concat(Object(zn.a)(new Set(Mn.map((function(n){return n.category})))));return Object(p.jsx)(rn,{children:Object(p.jsxs)(Dn,{children:[Object(p.jsx)(cn,{title:"PORTFOLIO",span:"PORTFOLIO"}),Object(p.jsxs)(on,{children:[Object(p.jsx)(Bn,{filter:function(n){if("All"!==n){var e=Mn.filter((function(e){return e.category===n}));r(e)}else r(Mn)},buttonsNames:i}),Object(p.jsx)(En,{menuItem:t})]})]})})},Pn=b.b.div(_||(_=Object(l.a)(["\n  .progress-bar {\n    display: flex;\n    align-items: center;\n    p {\n      padding-right: 1.1rem;\n    }\n    .progress {\n      position: relative;\n      width: 100%;\n      height: 0.4rem;\n      background-color: var(--border-color);\n      span {\n        background-color: var(--primary-color);\n        position: absolute;\n        left: 0;\n        bottom: 0;\n        height: 100%;\n      }\n    }\n  }\n"]))),Gn=function(n){var e=n.title,t=n.width,r=n.text;return Object(p.jsxs)(Pn,{children:[Object(p.jsx)("h6",{children:e}),Object(p.jsxs)("div",{className:"progress-bar",children:[Object(p.jsx)("p",{children:r}),Object(p.jsx)("div",{className:"progress",children:Object(p.jsx)("span",{style:{width:t}})})]})]})},Jn=b.b.div(B||(B=Object(l.a)(["\n  .skills {\n    display: grid;\n    grid-template-columns: repeat(2, 1fr);\n    grid-row-gap: 2rem;\n    grid-column-gap: 3rem;\n    @media screen and (max-width: 700px) {\n      grid-template-columns: repeat(1, 1fr);\n    }\n  }\n"]))),Yn=function(){return Object(p.jsxs)(Jn,{children:[Object(p.jsx)(cn,{title:"SKILLS",span:"SKILLS"}),Object(p.jsx)(on,{children:Object(p.jsxs)("div",{className:"skills",children:[Object(p.jsx)(Gn,{title:"HTML5",width:"95%",text:"95%"}),Object(p.jsx)(Gn,{title:"CSS3",width:"90%",text:"90%"}),Object(p.jsx)(Gn,{title:"JAVASCRIPT",width:"85%",text:"85%"}),Object(p.jsx)(Gn,{title:"REACT JS",width:"75%",text:"75%"})," ",Object(p.jsx)(Gn,{title:"DOCKER",width:"70%",text:"70%"}),Object(p.jsx)(Gn,{title:"TERRAFORM",width:"75%",text:"75%"}),Object(p.jsx)(Gn,{title:"AWS",width:"60%",text:"60%"}),Object(p.jsx)(Gn,{title:"C++",width:"50%",text:"50%"}),Object(p.jsx)(Gn,{title:"JIRA",width:"90%",text:"90%"})," ",Object(p.jsx)(Gn,{title:"BITBUCKET",width:"90%",text:"90%"})," ",Object(p.jsx)(Gn,{title:"LINUX",width:"90%",text:"90%"})," ",Object(p.jsx)(Gn,{title:"ENGLISH",width:"95%",text:"95%"}),Object(p.jsx)(Gn,{title:"GOOGLING",width:"100%",text:"100%"})]})})]})},Un=b.b.div(D||(D=Object(l.a)(["\n  display: flex;\n  align-items: center;\n  p {\n    padding-right: 1rem;\n    svg {\n      font-size: 2.5rem;\n    }\n  }\n  h3 {\n    color: var(--white-color);\n    font-size: 2rem;\n  }\n"]))),Wn=function(n){var e=n.icon,t=n.title;return Object(p.jsxs)(Un,{children:[Object(p.jsx)("p",{children:e}),Object(p.jsx)("h3",{children:t})]})},Kn=b.b.div(q||(q=Object(l.a)(['\n  display: flex;\n  &:not(:last-child) {\n    padding-bottom: 3rem;\n  }\n  @media screen and (max-width: 640px) {\n    p,\n    h5,\n    h6 {\n      font-size: 80%;\n    }\n  }\n  .left-content {\n    width: 50%;\n    padding-left: 20px;\n    position: relative;\n    &::before {\n      content: "";\n      position: absolute;\n      left: -12px;\n      top: 5px;\n      height: 17px;\n      width: 17px;\n      border-radius: 50%;\n      border: 2px solid var(--border-color);\n      background-color: var(--background-dark-color);\n    }\n    p {\n      display: inline-block;\n    }\n  }\n  .right-content {\n    padding-left: 5rem;\n    position: relative;\n    &::before {\n      content: "";\n      position: absolute;\n      left: 0;\n      top: 15px;\n      height: 2px;\n      width: 3rem;\n      background-color: var(--border-color);\n    }\n    h5 {\n      color: var(--primary-color);\n      font-size: 2rem;\n      padding-bottom: 0.4rem;\n    }\n    h6 {\n      padding-bottom: 0.6rem;\n      font-size: 1.5rem;\n    }\n  }\n']))),Xn=function(n){var e=n.year,t=n.title,r=n.subtitle,i=n.text;return Object(p.jsxs)(Kn,{children:[Object(p.jsx)("div",{className:"left-content",children:Object(p.jsx)("p",{children:e})}),Object(p.jsxs)("div",{className:"right-content",children:[Object(p.jsx)("h5",{children:t}),Object(p.jsx)("h6",{children:r}),Object(p.jsx)("p",{children:i})]})]})},Qn=t(126),Vn=t.n(Qn),Zn=t(127),$n=t.n(Zn),ne=b.b.div(P||(P=Object(l.a)(["\n  .small-title {\n    padding-bottom: 3rem;\n  }\n  .resume-content {\n    border-left: 2px solid var(--border-color);\n    .u-margin-bottom {\n      margin-bottom: 4rem;\n    }\n  }\n"]))),ee=function(){return Object(p.jsxs)(ne,{children:[Object(p.jsx)(cn,{title:"Resume",span:"Resume"}),Object(p.jsxs)(on,{children:[Object(p.jsx)("div",{className:"small-title",children:Object(p.jsx)(Wn,{icon:Object(p.jsx)(Vn.a,{}),title:"Working Experience"})}),Object(p.jsxs)("div",{className:"resume-content",children:[Object(p.jsx)(Xn,{year:"2021 - Present",title:"WeXcute",subtitle:"Front-end Engineer",text:"Lorem ipsum dolor, sit amet consectetur adipisicing elit. Molestiae ullam deleniti consequuntur sit eius alias asperiores eveniet corporis, praesentium quod!, amet consectetur adipisicing elit."}),Object(p.jsx)("div",{className:"u-margin-bottom",children:Object(p.jsx)(Xn,{year:"2020 - 2021",title:"Baddel Inc",subtitle:"Junior Software Engineer",text:"Lorem ipsum dolor, sit amet consectetur adipisicing elit. Molestiae ullam deleniti consequuntur sit eius alias asperiores eveniet corporis, praesentium quod!, amet consectetur adipisicing elit."})})]}),Object(p.jsx)("div",{className:"small-title",children:Object(p.jsx)(Wn,{icon:Object(p.jsx)($n.a,{}),title:"Education"})}),Object(p.jsx)("div",{className:"resume-content",children:Object(p.jsx)(Xn,{year:"2013 - 2018",title:"Higher Technological Institute",subtitle:"Mechatronics Engineer",text:"Lorem ipsum dolor, sit amet consectetur adipisicing elit. Molestiae ullam deleniti consequuntur sit eius alias asperiores eveniet corporis, praesentium quod!, amet consectetur adipisicing elit."})})]})]})},te=b.b.section(G||(G=Object(l.a)([""]))),re=function(){return Object(p.jsx)(rn,{children:Object(p.jsxs)(te,{children:[Object(p.jsx)(Yn,{}),Object(p.jsx)(ee,{})]})})},ie=t.p+"static/media/blog1.7ecbb78c.svg",oe=t.p+"static/media/blog2.09939351.svg",ae=[{id:1,title:"How to use SEO Efficiently",date:"03",month:"April",image:t.p+"static/media/blog3.6291ee7c.svg",link:"https://www.google.com/"},{id:2,title:"How to code like a pro",date:"04",month:"April",image:t.p+"static/media/blog4.60aa6cec.svg",link:"https://www.google.com/"},{id:3,title:"How to Work From Home",date:"01",month:"April",image:ie,link:"https://www.google.com/"},{id:4,title:"How to Choose a programming language",date:"02",month:"April",image:oe,link:"https://www.google.com/"}],ce=b.b.section(J||(J=Object(l.a)(["\n  .blog {\n    display: grid;\n    grid-template-columns: repeat(2, 1fr);\n    grid-column-gap: 2rem;\n    grid-row-gap: 3rem;\n    @media screen and (max-width: 770px) {\n      grid-template-columns: repeat(1, 1fr);\n    }\n    .blog-item {\n      background-color: var(--background-dark-grey);\n      padding: 1rem 1rem;\n      .image {\n        width: 100%;\n        overflow: hidden;\n        img {\n          width: 100%;\n          height: 90%;\n          object-fit: cover;\n          transition: all 0.4s ease-in-out;\n          &:hover {\n            transform: rotate(3deg) scale(1.1);\n          }\n        }\n      }\n      .title {\n        padding: 1rem 0.5rem 0 0.5rem;\n\n        a {\n          font-size: 1.7rem;\n          color: var(--white-color);\n          cursor: pointer;\n          transition: all 0.4s ease-in-out;\n          &:hover {\n            color: var(--primary-color);\n          }\n        }\n      }\n    }\n  }\n"]))),se=function(){return Object(p.jsx)(rn,{children:Object(p.jsxs)(ce,{children:[Object(p.jsx)(cn,{title:"Blogs",span:"Blogs"}),Object(p.jsx)(on,{className:"blog",children:ae.map((function(n){return Object(p.jsxs)("div",{className:"blog-item",children:[Object(p.jsx)("div",{className:"image",children:Object(p.jsx)("img",{src:n.image,alt:""})}),Object(p.jsx)("div",{className:"title",children:Object(p.jsx)("a",{href:n.link,target:"_blank",rel:"noreferrer",children:n.title})})]},n.id)}))})]})})},le=b.b.div(Y||(Y=Object(l.a)(["\n  padding: 1.5rem 2rem;\n  background-color: var(--background-dark-grey);\n  display: flex;\n  align-items: center;\n  @media screen and (max-width: 620px) {\n    padding-right: 0;\n  }\n  :nth-child(1) {\n    margin-top: 1.5rem;\n  }\n  &:not(:last-child) {\n    margin-bottom: 2.5rem;\n  }\n  .left-content {\n    padding: 1.5rem;\n    border: 1px solid var(--border-color);\n    font-size: 2rem;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    margin-right: 1.5rem;\n    svg {\n      font-size: 2.3rem;\n    }\n  }\n  .right-content {\n    h6 {\n      color: var(--white-color);\n      font-size: 1.2rem;\n      padding-bottom: 0.6rem;\n    }\n    p {\n      padding: 0.4rem 0;\n    }\n  }\n"]))),de=function(n){var e=n.icon,t=n.title,r=n.contact;return Object(p.jsxs)(le,{children:[Object(p.jsx)("div",{className:"left-content",children:Object(p.jsx)("p",{children:e})}),Object(p.jsxs)("div",{className:"right-content",children:[Object(p.jsx)("h6",{children:t}),Object(p.jsx)("p",{children:r})]})]})},me=t(128),be=t.n(me),je=t(129),he=t.n(je),pe=t(130),ge=t.n(pe),xe=b.b.section(U||(U=Object(l.a)(["\n  .contact-section {\n    display: grid;\n    grid-template-columns: repeat(2, 1fr);\n    grid-column-gap: 2rem;\n    @media screen and (max-width: 1000px) {\n      grid-template-columns: repeat(1, 1fr);\n      .form-field {\n        margin-bottom: 3rem;\n      }\n    }\n\n    .left-content {\n      .contact-title {\n        h4 {\n          color: var(--white-color);\n          padding: 1rem 0;\n          font-size: 1.8rem;\n        }\n      }\n      .form {\n        width: 100%;\n        @media screen and (max-width: 620px) {\n          width: 100%;\n        }\n        .form-field {\n          margin-top: 2rem;\n          position: relative;\n          width: 100%;\n\n          label {\n            position: absolute;\n            left: 20px;\n            top: -20px;\n            display: inline-block;\n            background-color: var(--background-dark-color);\n            padding: 0 0.5rem;\n            color: inherit;\n          }\n          input {\n            border: 1px solid var(--border-color);\n            outline: none;\n            background: transparent;\n            height: 50px;\n            padding: 0 15px;\n            width: 100%;\n            color: var(--white-color);\n          }\n          textarea {\n            border: 1px solid var(--border-color);\n            background-color: transparent;\n            outline: none;\n            color: var(--white-color);\n            width: 100%;\n            padding: 0.8rem 1rem;\n          }\n        }\n      }\n    }\n    .right-content {\n      display: grid;\n      grid-template-columns: repeat(1, 1fr);\n    }\n  }\n"]))),ue=function(){return Object(p.jsxs)(rn,{children:[Object(p.jsx)(cn,{title:"Contact",span:"Contact"}),Object(p.jsx)(xe,{children:Object(p.jsxs)(on,{className:"contact-section",children:[Object(p.jsxs)("div",{className:"left-content",children:[Object(p.jsx)("div",{className:"contact-title",children:Object(p.jsx)("h4",{children:"Get In Touch"})}),Object(p.jsxs)("form",{className:"form",children:[Object(p.jsxs)("div",{className:"form-field",children:[Object(p.jsx)("label",{htmlFor:"name",id:"name",children:"Enter Your Name*"}),Object(p.jsx)("input",{type:"text",id:"name"})]}),Object(p.jsxs)("div",{className:"form-field",children:[Object(p.jsx)("label",{htmlFor:"email",id:"email",children:"Enter Your Email*"}),Object(p.jsx)("input",{type:"text",id:"email"})]}),Object(p.jsxs)("div",{className:"form-field",children:[Object(p.jsx)("label",{htmlFor:"subject",id:"subject",children:"Enter Your Subject*"}),Object(p.jsx)("input",{type:"text",id:"subject"})]}),Object(p.jsxs)("div",{className:"form-field",children:[Object(p.jsx)("label",{htmlFor:"textarea",children:"Enter Your Message*"}),Object(p.jsx)("textarea",{name:"textarea",id:"textarea",cols:"30",rows:"10"})]}),Object(p.jsx)("div",{className:"form-field",children:Object(p.jsx)(dn,{title:"SEND EMAIL"})})]})]}),Object(p.jsxs)("div",{className:"right-content",children:[Object(p.jsx)(de,{icon:Object(p.jsx)(be.a,{}),title:"Phone",contact:"+02 0127 9989 791"}),Object(p.jsx)(de,{icon:Object(p.jsx)(he.a,{}),title:"Email",contact:"abdelhameed.hs0@gmail.com"}),Object(p.jsx)(de,{icon:Object(p.jsx)(ge.a,{}),title:"Address",contact:"4th-district, Obour-City, Egypt"})]})]})})]})},fe=t(131),Oe=t.n(fe),ve=t(422),we=t(421),ke=t(132),ye=t.n(ke);var Ne,ze=b.b.main(W||(W=Object(l.a)(["\n  position: relative;\n  margin-left: 16.3rem;\n  min-height: 100vh;\n  @media screen and (max-width: 1200px) {\n    margin-left: 0;\n  }\n\n  .lines {\n    position: absolute;\n    min-height: 100%;\n    width: 100%;\n    display: flex;\n    justify-content: space-evenly;\n    z-index: -999;\n    .line-1,\n    .line-2,\n    .line-3,\n    .line-4 {\n      width: 1px;\n      min-height: 100vh;\n      background-color: var(--border-color);\n    }\n  }\n"]))),Fe=function(){var n=Object(o.useState)("dark-theme"),e=Object(d.a)(n,2),t=e[0],r=e[1],i=Object(o.useState)(!1),a=Object(d.a)(i,2),c=a[0],s=a[1];return Object(o.useEffect)((function(){document.documentElement.className=t}),[t]),Object(p.jsxs)("div",{className:"App",children:[Object(p.jsx)(f,{navToggle:c}),Object(p.jsxs)("div",{className:"light-dark-mode",children:[Object(p.jsx)("div",{className:"left-content",children:Object(p.jsx)(Oe.a,{})}),Object(p.jsx)("div",{className:"right-content",children:Object(p.jsx)(ve.a,{value:"",inputProps:{"aria-label":""},size:"medium",onClick:function(){r("light-theme"===t?"dark-theme":"light-theme")}})})]}),Object(p.jsx)("div",{className:"hamburger-menu",children:Object(p.jsx)(we.a,{onClick:function(){return s(!c)},children:Object(p.jsx)(ye.a,{})})}),Object(p.jsxs)(ze,{children:[Object(p.jsxs)("div",{className:"lines",children:[Object(p.jsx)("div",{className:"line-1"}),Object(p.jsx)("div",{className:"line-2"}),Object(p.jsx)("div",{className:"line-3"}),Object(p.jsx)("div",{className:"line-4"})]}),Object(p.jsxs)(m.c,{children:[Object(p.jsx)(m.a,{path:"/",exact:!0,children:Object(p.jsx)(tn,{})}),Object(p.jsx)(m.a,{path:"/about",exact:!0,children:Object(p.jsx)(Nn,{})}),Object(p.jsx)(m.a,{path:"/resume",exact:!0,children:Object(p.jsx)(re,{})}),Object(p.jsx)(m.a,{path:"/portfolio",exact:!0,children:Object(p.jsx)(qn,{})}),Object(p.jsx)(m.a,{path:"/blog",exact:!0,children:Object(p.jsx)(se,{})}),Object(p.jsx)(m.a,{path:"/contact",exact:!0,children:Object(p.jsx)(ue,{})})]})]})]})},Se=Object(b.a)(Ne||(Ne=Object(l.a)(["\n    \n    /* :root {\n        --background-color: #ce2a2a;\n        --primary-color: #007bff;\n        --primary-color-light: #057FFF;\n        --secondary-color: #6c757d;\n        --background-dark-color: #10121A;\n        --background-dark-grey: #191D2B;\n        --border-color: #2e344e;\n        --background-light-color: #F1F1F1;\n        --background-light-color-2: rgba(3,127,255,.3);\n        --white-color: #FFF;\n        --font-light-color: #a4acc4;\n        --font-dark-color: #313131;\n        --font-dark-color-2: #151515;\n        --sidebar-dark-color: #191D2B;\n        --scrollbar-bg-color: #383838;\n        --scrollbar-thump-color: #6b6b6b;\n        --scrollbar-track-color: #383838;\n\n    } */\n\n    .light-theme{\n        --background-color: #ce2a2a;\n        --primary-color: #007bff;\n        --primary-color-light: #057FFF;\n        --secondary-color: #6c757d;\n        --background-dark-color: #F1F1F1;\n        --background-dark-grey: #e4e4e4;\n        --border-color: #cbced8;\n        --background-light-color: #F1F1F1;\n        --background-light-color-2: rgba(3,127,255,.3);\n        --white-color: #151515;\n        --font-light-color: #313131;\n        --font-dark-color: #313131;\n        --font-dark-color-2: #030202;\n        --sidebar-dark-color: #E4E4E4;\n        --scrollbar-bg-color: #383838;\n        --scrollbar-thump-color: #6b6b6b;\n        --scrollbar-track-color: #383838;\n\n    }\n\n    .dark-theme{\n        --background-color: #ce2a2a;\n        --primary-color: #007bff;\n        --primary-color-light: #057FFF;\n        --secondary-color: #6c757d;\n        --background-dark-color: #10121A;\n        --background-dark-grey: #191D2B;\n        --border-color: #2e344e;\n        --background-light-color: #F1F1F1;\n        --background-light-color-2: rgba(3,127,255,.3);\n        --white-color: #FFF;\n        --font-light-color: #a4acc4;\n        --font-dark-color: #313131;\n        --font-dark-color-2: #151515;\n        --sidebar-dark-color: #191D2B;\n        --scrollbar-bg-color: #383838;\n        --scrollbar-thump-color: #6b6b6b;\n        --scrollbar-track-color: #383838;\n\n    }\n    \n    * {\n        padding: 0;\n        margin: 0;\n        box-sizing: border-box;\n        text-decoration: none;\n        list-style: none;\n        font-family: 'Nunito', sans-serif;\n        font-size: 1.2rem;\n        scroll-behavior: smooth;\n    }\n\n    body {\n        background-color: var(--background-dark-color);\n        color: var(--font-light-color);\n\n        ::-webkit-scrollbar{\n            width: 9px;\n            background-color: #383838;\n    }\n\n        ::-webkit-scrollbar-thumb{\n            border-radius: 10px;\n            background-color: #6b6b6b;\n\n        }\n\n        ::-webkit-scrollbar-track{\n            border-radius: 10px;\n            background-color: #383838;\n\n        }\n    }\n    \n    a {\n        font-family: inherit;\n        color: inherit;\n        font-size: inherit;\n        font-size: 1rem;\n    }\n\n    h1 {\n        font-size: 4rem;\n        color: var(---white-color);\n        span {\n            font-size: 4rem;\n        @media screen and (max-width: 660px) {\n            font-size: 3.5rem;\n        }\n        @media screen and (max-width: 600px) {\n            font-size: 3rem;\n        }\n        @media screen and (max-width: 500px) {\n            font-size: 2rem;\n      }\n    }    \n          @media screen and (max-width: 660px) {\n            font-size: 3.5rem;\n        }\n        @media screen and (max-width: 600px) {\n            font-size: 3rem;\n        }\n        @media screen and (max-width: 500px) {\n            font-size: 2rem;\n      }\n    }\n    \n    h6 {\n      color: var(--white-color);\n      font-size: 1.2rem;\n      padding-bottom: 0.6rem;\n    }\n\n    span {\n        color: var(--primary-color) ;\n    }\n\n    //Floating Toggler\n    .light-dark-mode {\n        position: fixed;\n        right: 0;\n        top: 50%;\n        background-color: var(--background-light-color-2);\n        width: 6.5rem;\n        height: 2.5rem;\n        z-index: 15;\n        display: flex;\n        align-items: center;\n        justify-content: center;\n        svg {\n        display: flex;\n        align-items: center;\n        font-size: 1.7rem;\n        color: var(--white-color);\n        }\n    }\n\n    //Nav Toggler\n       .hamburger-menu{\n        display:none;\n        position: absolute;\n        right:5%;\n        top:5%;\n        z-index: 15;\n        svg{\n            font-size: 3rem;\n        }\n    }\n\n    .nav-toggler{\n        transform: translateX(0);\n        z-index: 20;\n    }\n      @media screen and (max-width: 1200px) {\n       .hamburger-menu{\n        display:block;\n        position: absolute;\n        right:5%;\n        top:3%;\n    }\n  }\n      @media screen and (max-width: 600px) {\n       .hamburger-menu{\n        right:0%;\n    }\n  }\n\n    //Global Media queries\n"])));s.a.render(Object(p.jsxs)(a.a.StrictMode,{children:[Object(p.jsx)(Se,{}),Object(p.jsx)(j.a,{children:Object(p.jsx)(Fe,{})})]}),document.getElementById("root"))}},[[404,1,2]]]);
  //# sourceMappingURL=main.b0894ab3.chunk.js.map