{"version":3,"sources":["images/eot1.png","images/EOTpic2.jpg","images/K5.png","images/logo2.png","images/stamp3.png","images/PR-Card-eot-1.jpg","images/PR-Card-wnl-1.jpg","images/PR-Card-bo-1.jpg","images/PR-Card-port-1.jpg","images/eot2.png","images/EOThero2.jpg","images/lofiproto.jpg","images/EOTProto1.jpg","images/WNLhero2.jpg","images/HomeS1.png","images/cbs.jpg","images/WNLwireframe.jpg","images/WNLProto.jpg","images/WNLProto1.png","images/WNLProto2.png","images/WNLProto3.png","images/WNLProto4.png","images/WNLProtoLap1.png","images/WNLProtoLap2.png","images/WNLProtoIpad.png","images/WNLhero.jpg","images/Me2.jpg","images/BOhero.jpg","images/BOWire1.png","images/BOWire2.png","images/BOWire3.png","images/BOProto.jpg","images/BOProto1.png","images/BOProto2.png","images/BOProto3.png","images/BOProto4.png","images/PORThero.jpg","components/Intropage.js","components/Pages/Intro.js","components/Pages/Home.js","components/ContactForm.js","components/Pages/Contact.js","components/useWindowSize.js","components/SocialStickyLeft.js","components/CardItemLight.js","components/CardsLight.js","components/Pages/Projects.js","components/HeroSectionLeft copy.js","components/HeroSectionRight.js","components/Line.js","components/PR1Img.js","components/PR3Img.js","components/PRH1.js","components/PRTextLeft.js","components/PrTitle.js","components/PRTitleText.js","components/Pages/Project01.js","components/PRH5.js","components/PRMockupText.js","components/PRMockupText1.js","components/Pages/Project02.js","components/ScrollToTop.js","components/Pages/About.js","components/Pages/Project03.js","components/Pages/Project04.js","App.js","index.js"],"names":["Intropage","className","alt","src","require","default","Intro","Home","Result","Disable","Able","ContactForm","useState","result","showResult","disableSubmit","setDisableSubmit","form","useRef","ref","onSubmit","e","preventDefault","emailjs","sendForm","current","then","console","log","text","error","reset","type","name","placeholder","sitekey","onVerify","onExpire","disabled","value","Contact","useWindowSize","width","undefined","height","windowSize","setWindowSize","useEffect","window","handleResize","innerWidth","innerHeight","addEventListener","removeEventListener","SocialStickyLeft","size","class","href","CardItem","props","to","path","label","text2","CardsLight","CardItemLight","Projects","style","textDecoration","HeroSectionLeft","useInView","inView","animationControl","useAnimation","checkAnimation","start","x","opacity","transition","delay","ease","duration","y","motion","div","initial","whileTap","scale","animate","img","h1","h5","HeroSectionRight","Line","PR1Img","PR3Img","PRH1","PRTextLeft","h52","h53","link","h6","PrTitle","subtext","date","PRTitleText","title","Project01","PRH5","PRMockupText","img1","alt1","text1","img2","alt2","PRMockupText1","Project02","ScrollToTop","prevProps","this","location","pathname","scrollTo","children","Component","withRouter","About","Project03","Project04","App","exact","component","ReactDOM","render","StrictMode","document","getElementById"],"mappings":"6KAAA,OAAe,cAA0B,kC,6BCAzC,OAAe,cAA0B,qC,+ECAzC,OAAe,cAA0B,gC,6BCAzC,OAAe,wgH,+CCAf,OAAe,cAA0B,oC,qECAzC,OAAe,cAA0B,2C,6BCAzC,OAAe,cAA0B,2C,6BCAzC,OAAe,cAA0B,0C,6BCAzC,OAAe,cAA0B,4C,uHCAzC,OAAe,cAA0B,kC,qGCAzC,OAAe,cAA0B,sC,6BCAzC,OAAe,cAA0B,uC,6BCAzC,OAAe,cAA0B,uC,+CCAzC,OAAe,cAA0B,sC,6BCAzC,OAAe,cAA0B,oC,6BCAzC,OAAe,cAA0B,iC,6BCAzC,OAAe,cAA0B,0C,6BCAzC,OAAe,cAA0B,sC,6BCAzC,OAAe,cAA0B,uC,6BCAzC,OAAe,cAA0B,uC,6BCAzC,OAAe,cAA0B,uC,6BCAzC,OAAe,cAA0B,uC,6BCAzC,OAAe,cAA0B,0C,6BCAzC,OAAe,cAA0B,0C,6BCAzC,OAAe,cAA0B,0C,6BCAzC,OAAe,cAA0B,qC,6BCAzC,OAAe,cAA0B,iC,6BCAzC,OAAe,cAA0B,oC,6BCAzC,OAAe,cAA0B,qC,6BCAzC,OAAe,cAA0B,qC,6BCAzC,OAAe,cAA0B,qC,6BCAzC,OAAe,cAA0B,qC,6BCAzC,OAAe,cAA0B,sC,6BCAzC,OAAe,cAA0B,sC,6BCAzC,OAAe,cAA0B,sC,6BCAzC,OAAe,cAA0B,sC,6BCAzC,OAAe,cAA0B,sC,8FCmB1BA,MAhBf,WACI,OACI,mCACA,sBAAKC,UAAU,kBAAf,UACA,sBAAKA,UAAU,gBAAf,UACA,yCAAW,wCACX,qBAAKA,UAAU,aAAaC,IAAI,aAAaC,IAAKC,EAAQ,IAAoBC,UAF9E,OAGA,qBAAKJ,UAAU,gBAAgBC,IAAI,aAAaC,IAAKC,EAAQ,IAAuBC,gBCC7EC,MARf,WACI,OACI,mCACI,cAAC,EAAD,OCiDGC,MAnCf,WAGI,OAEI,mCACA,cAAC,EAAD,O,wDCrBFC,EAAQ,WACZ,OACE,mBAAGP,UAAU,KAAb,0CAIEQ,EAAS,WACb,OACE,mBAAGR,UAAU,IAAb,8DAIES,EAAM,WACV,OACE,mBAAGT,UAAU,KAAb,gBAiFWU,MA5Ef,WAIE,MAA6BC,oBAAS,GAAtC,mBAAOC,EAAP,KAAeC,EAAf,KAEA,EAAyCF,oBAAS,GAAlD,mBAAOG,EAAP,KAAqBC,EAArB,KAGMC,EAAOC,mBAoBb,OACE,8BACE,sBAAKjB,UAAU,cAAf,UACA,oBAAIA,UAAU,UAAd,qBACC,uBAAMkB,IAAKF,EAAMG,SAtBJ,SAACC,GACjBA,EAAEC,iBAEFC,IAAQC,SAAS,kBAAmB,mBAAoBP,EAAKQ,QAAS,8BACnEC,MAAK,SAACb,GACHc,QAAQC,IAAIf,EAAOgB,SACpB,SAACC,GACAH,QAAQC,IAAIE,EAAMD,SAGtBZ,EAAKQ,QAAQM,QACbjB,GAAW,IAWV,UAGA,oBAAIb,UAAU,SAAd,gCAED,sBAAKA,UAAU,YAAf,UACA,qBAAKA,UAAU,MAAMC,IAAI,kBAAkBC,IAAKC,EAAQ,IAAwBC,UAChF,sBAAKJ,UAAU,OAAf,UACA,uBAAOA,UAAU,QAAjB,kBACA,uBAAO+B,KAAK,OAAOC,KAAK,YAAYC,YAAY,YAAYjC,UAAU,SAGtE,uBAAOA,UAAU,QAAjB,mBACA,uBAAO+B,KAAK,QAAQC,KAAK,aAAahC,UAAU,QAAQiC,YAAY,eAEpE,uBAAOjC,UAAU,SAAjB,qBACA,0BAAUgC,KAAK,UAAUhC,UAAU,UAAUiC,YAAY,oBAMzD,cAAC,IAAD,CAAUC,QAAQ,2CAA2CC,SAAW,kBAAMpB,GAAiB,IAASqB,SAAW,kBAAMrB,GAAiB,MAE1I,uBAAOf,UAAU,SAAS+B,KAAK,SAASM,SAAUvB,EAAewB,MAAM,SACvE,sBAAKtC,UAAU,MAAf,UACGY,EAAS,cAAC,EAAD,IAAa,KACtBE,EAAgB,cAAC,EAAD,IAAa,cAAC,EAAD,sBCnEvByB,MAVf,WACI,OACI,mCAEA,cAAC,EAAD,OCyBOC,G,MAjCO,WAGlB,MAAoC7B,mBAAS,CACzC8B,WAAOC,EACPC,YAAQD,IAFZ,mBAAOE,EAAP,KAAmBC,EAAnB,KA2BA,OAtBAC,qBAAU,WAEN,GAAsB,qBAAXC,OAAwB,KAEtBC,EAAT,WAEIH,EAAc,CACVJ,MAAOM,OAAOE,WACdN,OAAQI,OAAOG,eAWvB,OANAH,OAAOI,iBAAiB,SAAUH,GAGlCA,IAGO,kBAAMD,OAAOK,oBAAoB,SAAUJ,OAEvD,IACIJ,IC8EIS,MAzGf,WAEI,IAAMC,EAAOd,IAEb,OAEI,qBAAKxC,UAAU,iBAAf,SAEA,qBAAKA,UAAU,eAAf,SA0DMsD,EAAKb,MAAQ,MAEf,qBAAKzC,UAAU,UAAf,SAOA,mBAAGuD,MAAM,2BAA2BC,KAAK,+DAAzC,SACE,mBAAGD,MAAM,6BC1DRE,MApBf,SAAkBC,GACd,OACI,mCAEE,eAAC,IAAD,CAAM1D,UAAU,mBAAmB2D,GAAID,EAAME,KAA7C,UACI,wBAAQ5D,UAAU,uBAAuB,gBAAe0D,EAAMG,MAA9D,SACI,qBAAK3D,IAAKwD,EAAMxD,IAChBD,IAAI,OACJD,UAAU,sBAEd,sBAAKA,UAAU,mBAAf,UACI,oBAAIA,UAAU,mBAAd,SAAkC0D,EAAM9B,OACxC,oBAAI5B,UAAU,oBAAd,SAAmC0D,EAAMI,iB,MC8D5CC,MAxEf,WAII,OACI,sBAAK/D,UAAU,SAAf,UACI,oEACA,sBAAKA,UAAU,mBAAf,UAEI,sBAAKA,UAAU,eAAf,UAEA,qBAAKA,UAAU,QAAf,SAEA,cAACgE,EAAD,CACI9D,IAAKC,EAAQ,IAA+BC,QAC5CwB,KAAK,cACLkC,MAAM,iCACND,MAAM,MACND,KAAK,iBAKT,qBAAK5D,UAAU,QAAf,SACA,cAACgE,EAAD,CACI9D,IAAKC,EAAQ,IAA+BC,QAC5CwB,KAAK,UACLkC,MAAM,uEACND,MAAM,2BACND,KAAK,oBAMT,sBAAK5D,UAAU,eAAf,UAIA,qBAAKA,UAAU,QAAf,SACC,cAACgE,EAAD,CACG9D,IAAKC,EAAQ,IAA8BC,QAC3CwB,KAAK,SACLkC,MAAM,+BACND,MAAM,UACND,KAAK,iBAMR,qBAAK5D,UAAU,QAAf,SACA,cAACgE,EAAD,CACG9D,IAAKC,EAAQ,IAAgCC,QAC7CwB,KAAK,eACLkC,MAAM,gCACND,MAAM,WACND,KAAK,2BCzDV,SAASK,EAASP,GAC7B,OACI,qCACJ,cAAC,IAAD,CAAMC,GAAG,SAASO,MAAO,CAAEC,eAAgB,QAA3C,SACC,oBAAInE,UAAU,WAAd,wBAID,cAAC,EAAD,O,oCC8FWoE,MAnGf,SAAyBV,GACpB,MAAsBW,cAAfC,EAAP,EAAOA,OAAQpD,EAAf,EAAeA,IAGTqD,EAAmBC,cACnBC,EAAiBD,cAmCxB,OAjCKF,GACLC,EAAiBG,MAAM,CAErBC,EAAG,EACHC,QAAS,EACTC,WAAY,CACVC,MAAO,EACPC,KAAM,YACNC,SAAU,KASZV,GACFG,EAAeC,MAAM,CACnBO,EAAG,MACHL,QAAS,EACTC,WAAY,CACVC,MAAO,EACPC,KAAM,YACNC,SAAU,MAWV,qBAAKhF,UAAU,UAAf,SAEA,sBAAKA,UAAU,kBAAkBkB,IAAMA,EAAvC,UAEC,cAACgE,EAAA,EAAOC,IAAR,CAEGC,QAAS,CACJT,EAAG,SACJC,QAAS,GAIbS,SAAU,CAAEC,MAAO,IAInBC,QAAShB,EAETvE,UAAU,gBAdb,SAiBD,qBAAKE,IAAKwD,EAAM8B,IAAKvF,IAAKyD,EAAMzD,IAAKD,UAAU,UAK/C,qBAAKkB,IAAKA,EAAV,SACC,eAACgE,EAAA,EAAOC,IAAR,CAEGC,QAAS,CACLH,EAAG,QACHL,QAAS,GAIbW,QAASd,EACTzE,UAAU,eATb,UAcG,6BACK0D,EAAM+B,KAIX,+BAAK/B,EAAMgC,GAAX,kB,MCWGC,MAnGf,SAA0BjC,GACrB,MAAsBW,cAAfC,EAAP,EAAOA,OAAQpD,EAAf,EAAeA,IAGTqD,EAAmBC,cACnBC,EAAiBD,cAmCxB,OAjCKF,GACLC,EAAiBG,MAAM,CAErBC,EAAG,EACHC,QAAS,EACTC,WAAY,CACVC,MAAO,EACPC,KAAM,YACNC,SAAU,KASZV,GACFG,EAAeC,MAAM,CACnBO,EAAG,MACHL,QAAS,EACTC,WAAY,CACVC,MAAO,EACPC,KAAM,YACNC,SAAU,MAWV,qBAAKhF,UAAU,WAAf,SAEA,sBAAKA,UAAU,yBAAyBkB,IAAMA,EAA9C,UAEC,cAACgE,EAAA,EAAOC,IAAR,CAEGC,QAAS,CACJT,EAAG,QACJC,QAAS,GAIbS,SAAU,CAAEC,MAAO,IAInBC,QAAShB,EAETvE,UAAU,iBAdb,SAiBD,qBAAKE,IAAKwD,EAAM8B,IAAKvF,IAAKyD,EAAMzD,IAAKD,UAAU,WAK/C,qBAAKkB,IAAKA,EAAV,SACC,eAACgE,EAAA,EAAOC,IAAR,CAEGC,QAAS,CACLH,EAAG,QACHL,QAAS,GAIbW,QAASd,EACTzE,UAAU,gBATb,UAcG,6BACK0D,EAAM+B,KAIX,+BAAK/B,EAAMgC,GAAX,kB,MCpFGE,MAVf,WACI,OACI,qBAAK5F,UAAU,iBAAf,SACA,qBAAKA,UAAU,YAAf,SACI,oBAAIA,UAAU,Y,MCcX6F,MAlBf,SAAgBnC,GACZ,OACI,qBAAK1D,UAAU,iBAAf,SAEA,qBAAKA,UAAU,sBAAf,SAGI,qBAAKE,IAAKwD,EAAM8B,IAAKvF,IAAKyD,EAAMzD,IAAKD,UAAU,kB,MC8B5C8F,MApCf,WAEI,IAAMxC,EAAOd,IAEb,OACI,qBAAKxC,UAAU,iBAAf,SAEA,sBAAKA,UAAU,sBAAf,UACNsD,EAAKb,MAAQ,KACP,qBAAKzC,UAAU,qBAAf,SACI,qBAAKA,UAAU,cAAf,SACI,qBAAKE,IAAKC,EAAQ,IAAsBC,QAASH,IAAI,MAAMD,UAAU,iBAKzE,qBAAKA,UAAU,qBAAf,SACA,qBAAKA,UAAU,cAAf,SACA,qBAAKE,IAAKC,EAAQ,IAAsBC,QAASH,IAAI,MAAMD,UAAU,iBAI9EsD,EAAKb,MAAQ,MACJ,qBAAKzC,UAAU,qBAAf,SACA,qBAAKA,UAAU,cAAf,SACA,qBAAKE,IAAKC,EAAQ,IAAsBC,QAASH,IAAI,MAAMD,UAAU,uB,MCblE+F,MAbf,SAAcrC,GACV,OACI,qBAAK1D,UAAU,iBAAf,SACA,qBAAKA,UAAU,sBAAf,SACA,6BAAK0D,EAAM+B,U,MCaJO,MAjBf,SAAoBtC,GAChB,OACI,qBAAK1D,UAAU,mBAAf,SACA,sBAAKA,UAAU,wBAAf,UACA,6BAAK0D,EAAM+B,KACX,6BAAK/B,EAAMgC,KACX,6BAAKhC,EAAMuC,MACX,+BAAKvC,EAAMwC,IAAX,IAAgB,mBAAG1C,KAAK,+DAAR,SAAwEE,EAAMyC,UAC9F,6BAAKzC,EAAM0C,W,MCMJC,MAdf,SAAiB3C,GACb,OACI,qBAAK1D,UAAU,oBAAf,SACA,sBAAKA,UAAU,yBAAf,UAEE,6BAAM0D,EAAM9B,OACZ,6BAAK8B,EAAM4C,UACX,6BAAK5C,EAAM6C,a,MCUNC,MAhBf,SAAqB9C,GACjB,OAEI,qBAAK1D,UAAU,sBAAf,SAEA,sBAAKA,UAAU,iBAAf,UACI,sBAAKA,UAAU,kBAAf,cAAkC,6BAAK0D,EAAM+C,WAC7C,sBAAKzG,UAAU,iBAAf,cAAiC,6BAAK0D,EAAM9B,gBCKzC,SAAS8E,IACpB,OACA,qCACC,oBAAI1G,UAAU,YAAd,wBACD,cAAC,EAAD,CAAS4B,KAAK,cAAc0E,QAAQ,gDAAgDC,KAAK,cACzF,cAAC,EAAD,IACA,cAAC,EAAD,CAAQf,IAAKrF,EAAQ,IAA6BC,QAASH,IAAI,6CAA4C,cAAC,EAAD,IAC3G,cAAC,EAAD,IAAS,cAAC,EAAD,IACT,cAAC,EAAD,CAAiBuF,IAAKrF,EAAQ,IAA4BC,QAASH,IAAI,2DAEvEwF,GAAG,eAAeC,GAAG,+GAGrB,cAAC,EAAD,IACA,cAAC,EAAD,CAAYD,GAAG,mBACfC,GAAG,mZACHO,IAAI,oRAGR,cAAC,EAAD,IACA,cAAC,EAAD,CAAaQ,MAAM,gBAAgB7E,KAAK,qGACpC,cAAC,EAAD,IAEJ,cAAC,EAAD,CAAa6E,MAAM,eAAe7E,KAAK,sIACnC,cAAC,EAAD,IAEJ,cAAC,EAAD,CAAa6E,MAAM,iBAAiB7E,KAAK,qKACrC,cAAC,EAAD,IAEA,cAAC,EAAD,CAAY6D,GAAG,iBACfC,GAAG,0aACHO,IAAI,uKACJC,IAAI,kFAEJ,cAAC,EAAD,IAEA,cAAC,EAAD,CAAMT,GAAG,4BACT,cAAC,EAAD,CAAQD,IAAKrF,EAAQ,IAA8BC,QAASH,IAAI,6CAChE,cAAC,EAAD,IAEA,cAAC,EAAD,CAAawG,MAAM,aACnB7E,KAAK,gNACL,cAAC,EAAD,IAEA,cAAC,EAAD,CAAa6E,MAAM,eACnB7E,KAAK,iHACL,cAAC,EAAD,IAEA,cAAC,EAAD,CAAM6D,GAAG,qBACT,cAAC,EAAD,CAAQD,IAAKrF,EAAQ,KAA8BC,QAASH,IAAI,6CAChE,cAAC,EAAD,IAEA,cAAC,EAAD,CAAYwF,GAAG,aACfC,GAAG,gLACHO,IAAI,qJAEJ,cAAC,EAAD,IACA,cAAC,EAAD,CAAaQ,MAAM,aAAa7E,KAAK,+NACrC,cAAC,EAAD,IAKA,cAAC,EAAD,CAAkB4D,IAAKrF,EAAQ,IAA4BC,QAASH,IAAI,MACxEwF,GAAG,cAAcC,GAAG,iF,OChETiB,MAbf,SAAcjD,GACV,OACI,qBAAK1D,UAAU,iBAAf,SACA,qBAAKA,UAAU,sBAAf,SACA,6BAAK0D,EAAMgC,U,MC+BJkB,MAnCf,SAAsBlD,GAClB,OACI,qBAAK1D,UAAU,uBAAf,SACA,sBAAKA,UAAU,kBAAf,UACA,sBAAKA,UAAU,uBAAf,UAEI,qBAAKA,UAAU,mBAAf,SACA,qBAAKE,IAAKwD,EAAMmD,KAAM5G,IAAKyD,EAAMoD,KAAM9G,UAAU,qBAGjD,qBAAKA,UAAU,kBAAf,SACC0D,EAAMqD,WAMV,sBAAK/G,UAAU,uBAAf,UAEG,qBAAKA,UAAU,mBAAf,SACA,qBAAKE,IAAKwD,EAAMsD,KAAM/G,IAAKyD,EAAMuD,KAAMjH,UAAU,qBAGjD,qBAAKA,UAAU,kBAAf,SACC0D,EAAMI,iBCCJoD,MAzBf,SAAuBxD,GACnB,OACI,qBAAK1D,UAAU,uBAAf,SACA,qBAAKA,UAAU,kBAAf,SACA,sBAAKA,UAAU,uBAAf,UAEI,qBAAKA,UAAU,mBAAf,SACA,qBAAKE,IAAKwD,EAAMmD,KAAM5G,IAAKyD,EAAMoD,KAAM9G,UAAU,qBAGjD,qBAAKA,UAAU,kBAAf,SACC0D,EAAMqD,gBCKJ,SAASI,IACpB,OACA,qCACC,oBAAInH,UAAU,YAAd,wBACD,cAAC,EAAD,CAAS4B,KAAK,UAAU0E,QAAQ,sFAAsFC,KAAK,iBAC3H,cAAC,EAAD,IACA,cAAC,EAAD,CAAQf,IAAKrF,EAAQ,KAA6BC,QAASH,IAAI,6CAA4C,cAAC,EAAD,IAE3G,cAAC,EAAD,CAAiBuF,IAAKrF,EAAQ,KAA2BC,QAASH,IAAI,6CAEtEwF,GAAG,eAAeC,GAAG,oHAGrB,cAAC,EAAD,IACA,cAAC,EAAD,CAAYD,GAAG,mBACfC,GAAG,8eAEHO,IAAI,+FAGR,cAAC,EAAD,IACA,cAAC,EAAD,CAAaQ,MAAM,gBAAgB7E,KAAK,qGACpC,cAAC,EAAD,IAEJ,cAAC,EAAD,CAAa6E,MAAM,eAAe7E,KAAK,qHACnC,cAAC,EAAD,IAEJ,cAAC,EAAD,CAAa6E,MAAM,iBAAiB7E,KAAK,2KACrC,cAAC,EAAD,IAEA,cAAC,EAAD,CAAY6D,GAAG,iBACfC,GAAG,sSACHO,IAAI,uTACJC,IAAI,KAEJ,cAAC,EAAD,IAEA,cAAC,EAAD,CAAQV,IAAKrF,EAAQ,KAAwBC,QAASH,IAAI,uBAC1D,cAAC,EAAD,CAAMyF,GAAG,gEACT,cAAC,EAAD,IAEA,cAAC,EAAD,CAAMD,GAAG,4BACT,cAAC,EAAD,CAAQD,IAAKrF,EAAQ,KAAiCC,QAASH,IAAI,6CACnE,cAAC,EAAD,IAEA,cAAC,EAAD,CAAawG,MAAM,oBACnB7E,KAAK,wWAGL,cAAC,EAAD,IAEA,cAAC,EAAD,CAAa6E,MAAM,aACnB7E,KAAK,gNACL,cAAC,EAAD,IAEA,cAAC,EAAD,CAAa6E,MAAM,eACnB7E,KAAK,uFACL,cAAC,EAAD,IAEA,cAAC,EAAD,CAAM6D,GAAG,qBACT,cAAC,EAAD,CAAQD,IAAKrF,EAAQ,KAA6BC,QAASH,IAAI,6CAC/D,cAAC,EAAD,IAEA,cAAC,EAAD,CAAe4G,KAAM1G,EAAQ,KAA8BC,QAAS0G,KAAK,2BACzEC,MAAM,uOAEMC,KAAM7G,EAAQ,KAA8BC,QAAS6G,KAAK,2BAC1DnD,MAAM,8OAGlB,cAAC,EAAD,CAAe+C,KAAM1G,EAAQ,KAA8BC,QAAS0G,KAAK,2BACzEC,MAAM,kJAENC,KAAM7G,EAAQ,KAA8BC,QAAS6G,KAAK,2BAC1DnD,MAAM,iEAGN,cAAC,EAAD,CAAe+C,KAAM1G,EAAQ,KAAiCC,QAAS0G,KAAK,2CAC5EC,MAAM,yIAENC,KAAM7G,EAAQ,KAAiCC,QAAS6G,KAAK,2BAC7DnD,MAAM,iMAGN,cAAC,EAAD,CAAe+C,KAAM1G,EAAQ,KAAiCC,QAAS0G,KAAK,4BAC5EC,MAAM,iHAGN,cAAC,EAAD,IAEA,cAAC,EAAD,CAAYtB,GAAG,aACfC,GAAG,qWACHO,IAAI,wJAEJ,cAAC,EAAD,IACA,cAAC,EAAD,CAAaQ,MAAM,aAAa7E,KAAK,yNACrC,cAAC,EAAD,IAKA,cAAC,EAAD,CAAkB4D,IAAKrF,EAAQ,KAA4BC,QAASH,IAAI,MACxEwF,GAAG,aAAaC,GAAG,sH,oCCtHjB0B,E,wKACJ,SAAmBC,GACIC,KAAK5D,MAAlB6D,SACKC,WAAaH,EAAUE,SAASC,UAC3CzE,OAAO0E,SAAS,EAAG,K,oBAIvB,WAEE,OADqBH,KAAK5D,MAAlBgE,a,GATcC,aAcXC,cAAWR,GCXX,SAASS,IACpB,OACJ,qCACI,oBAAI7H,UAAU,WAAd,sBACA,cAAC,EAAD,IACA,cAAC,EAAD,CAAQwF,IAAKrF,EAAQ,KAAwBC,QAASH,IAAI,6CAC1D,cAAC,EAAD,CAAYwF,GAAG,YACXC,GAAG,uQACHO,IAAI,qHACJC,IAAI,sDAAsDC,KAAK,gBCIxD,SAAS2B,IACpB,OACA,qCACC,oBAAI9H,UAAU,YAAd,wBACD,cAAC,EAAD,CAAS4B,KAAK,SAAS0E,QAAQ,4DAA4DC,KAAK,mBAChG,cAAC,EAAD,IACA,cAAC,EAAD,CAAQf,IAAKrF,EAAQ,KAA2BC,QAASH,IAAI,6CAA4C,cAAC,EAAD,IACzG,cAAC,EAAD,CAAawG,MAAM,eAAe7E,KAAK,sGACvC,cAAC,EAAD,IACA,cAAC,EAAD,CAAY6D,GAAG,mBACfC,GAAG,8OACHO,IAAI,6FAGR,cAAC,EAAD,IACA,cAAC,EAAD,CAAaQ,MAAM,gBAAgB7E,KAAK,qGACpC,cAAC,EAAD,IAEJ,cAAC,EAAD,CAAa6E,MAAM,eAAe7E,KAAK,sGACnC,cAAC,EAAD,IAEJ,cAAC,EAAD,CAAa6E,MAAM,iBAAiB7E,KAAK,0HACrC,cAAC,EAAD,IAEA,cAAC,EAAD,CAAY6D,GAAG,iBACfC,GAAG,yIACHO,IAAI,wMACJC,IAAI,KAEJ,cAAC,EAAD,IAGA,cAAC,EAAD,CAAMT,GAAG,4BACT,cAAC,EAAD,CAAeoB,KAAM1G,EAAQ,KAA4BC,QAAS0G,KAAK,2CACvEC,MAAM,oJAENC,KAAM7G,EAAQ,KAA4BC,QAAS6G,KAAK,2BACxDnD,MAAM,iBAGL,cAAC,EAAD,CAAe+C,KAAM1G,EAAQ,KAA4BC,QAAS0G,KAAK,mBACxEC,MAAM,2JAGN,cAAC,EAAD,IAEA,cAAC,EAAD,CAAaN,MAAM,aACnB7E,KAAK,gNACL,cAAC,EAAD,IAEA,cAAC,EAAD,CAAa6E,MAAM,eACnB7E,KAAK,qKACL,cAAC,EAAD,IAEA,cAAC,EAAD,CAAM6D,GAAG,qBACT,cAAC,EAAD,CAAQD,IAAKrF,EAAQ,KAA4BC,QAASH,IAAI,6CAC9D,cAAC,EAAD,IAEA,cAAC,EAAD,CAAe4G,KAAM1G,EAAQ,KAA6BC,QAAS0G,KAAK,2BACxEC,MAAM,gMAEMC,KAAM7G,EAAQ,KAA6BC,QAAS6G,KAAK,2BACzDnD,MAAM,6IAGlB,cAAC,EAAD,CAAe+C,KAAM1G,EAAQ,KAA6BC,QAAS0G,KAAK,2BACxEC,MAAM,6IAENC,KAAM7G,EAAQ,KAA6BC,QAAS6G,KAAK,2BACzDnD,MAAM,0EAKN,cAAC,EAAD,IAEA,cAAC,EAAD,CAAY2B,GAAG,aACfC,GAAG,kPACHO,IAAI,4IAEJ,cAAC,EAAD,IACA,cAAC,EAAD,CAAaQ,MAAM,aAAa7E,KAAK,iOC1F1B,SAASmG,IACpB,OACA,qCACC,oBAAI/H,UAAU,YAAd,mBACD,cAAC,EAAD,CAAS4B,KAAK,eAAe0E,QAAQ,gDAAgDC,KAAK,iBAC1F,cAAC,EAAD,IACA,cAAC,EAAD,CAAQf,IAAKrF,EAAQ,KAA6BC,QAASH,IAAI,6CAA4C,cAAC,EAAD,IAG3G,cAAC,EAAD,CAAYwF,GAAG,mBACfC,GAAG,iNACHO,IAAI,0IACJC,IAAI,kaAGJ,cAAC,EAAD,CAAMT,GAAG,yBACT,cAAC,EAAD,OCuBWuC,MA5Bf,WACE,OACE,qBAAKhI,UAAU,SAAf,SACA,cAAC,IAAD,UAEE,eAAC,EAAD,WAGA,cAAC,EAAD,IAEM,eAAC,IAAD,WACJ,cAAC,IAAD,CAAO4D,KAAK,IAAIqE,OAAK,EAACC,UAAW5H,IACjC,cAAC,IAAD,CAAOsD,KAAK,SAASqE,OAAK,EAACC,UAAWL,IACtC,cAAC,IAAD,CAAOjE,KAAK,YAAYqE,OAAK,EAACC,UAAWjE,IACzC,cAAC,IAAD,CAAOL,KAAK,WAAWqE,OAAK,EAACC,UAAW3F,IACxC,cAAC,IAAD,CAAOqB,KAAK,SAASqE,OAAK,EAACC,UAAW7H,IACtC,cAAC,IAAD,CAAOuD,KAAK,aAAaqE,OAAK,EAACC,UAAWxB,IAC1C,cAAC,IAAD,CAAO9C,KAAK,aAAaqE,OAAK,EAACC,UAAWf,IAC1C,cAAC,IAAD,CAAOvD,KAAK,aAAaqE,OAAK,EAACC,UAAWJ,IAC1C,cAAC,IAAD,CAAOlE,KAAK,aAAaqE,OAAK,EAACC,UAAWH,eClClDI,IAASC,OACP,cAAC,IAAMC,WAAP,UACE,cAAC,EAAD,MAEFC,SAASC,eAAe,W","file":"static/js/main.9f1b0f63.chunk.js","sourcesContent":["export default __webpack_public_path__ + \"static/media/eot1.19bbb006.png\";","export default __webpack_public_path__ + \"static/media/EOTpic2.1c932a3f.jpg\";","export default __webpack_public_path__ + \"static/media/K5.fba7c632.png\";","export default \"data:image/png;base64,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\"","export default __webpack_public_path__ + \"static/media/stamp3.e826f140.png\";","export default __webpack_public_path__ + \"static/media/PR-Card-eot-1.6c1b8369.jpg\";","export default __webpack_public_path__ + \"static/media/PR-Card-wnl-1.dbcc4fa8.jpg\";","export default __webpack_public_path__ + \"static/media/PR-Card-bo-1.1560e385.jpg\";","export default __webpack_public_path__ + \"static/media/PR-Card-port-1.9f2bdab8.jpg\";","export default __webpack_public_path__ + \"static/media/eot2.8abff277.png\";","export default __webpack_public_path__ + \"static/media/EOThero2.70331187.jpg\";","export default __webpack_public_path__ + \"static/media/lofiproto.93a9a524.jpg\";","export default __webpack_public_path__ + \"static/media/EOTProto1.66e44773.jpg\";","export default __webpack_public_path__ + \"static/media/WNLhero2.7a791a14.jpg\";","export default __webpack_public_path__ + \"static/media/HomeS1.746198d7.png\";","export default __webpack_public_path__ + \"static/media/cbs.8ea4f65b.jpg\";","export default __webpack_public_path__ + \"static/media/WNLwireframe.e57fb6b2.jpg\";","export default __webpack_public_path__ + \"static/media/WNLProto.06044ead.jpg\";","export default __webpack_public_path__ + \"static/media/WNLProto1.176e4808.png\";","export default __webpack_public_path__ + \"static/media/WNLProto2.56eee764.png\";","export default __webpack_public_path__ + \"static/media/WNLProto3.5f633bc8.png\";","export default __webpack_public_path__ + \"static/media/WNLProto4.d596ffe3.png\";","export default __webpack_public_path__ + \"static/media/WNLProtoLap1.fa0f59c1.png\";","export default __webpack_public_path__ + \"static/media/WNLProtoLap2.8b561c4f.png\";","export default __webpack_public_path__ + \"static/media/WNLProtoIpad.522fac3b.png\";","export default __webpack_public_path__ + \"static/media/WNLhero.3228f139.jpg\";","export default __webpack_public_path__ + \"static/media/Me2.b0cf26cb.jpg\";","export default __webpack_public_path__ + \"static/media/BOhero.5ad75cf3.jpg\";","export default __webpack_public_path__ + \"static/media/BOWire1.4e27bec8.png\";","export default __webpack_public_path__ + \"static/media/BOWire2.24fb073e.png\";","export default __webpack_public_path__ + \"static/media/BOWire3.992a3e3e.png\";","export default __webpack_public_path__ + \"static/media/BOProto.c24bb818.jpg\";","export default __webpack_public_path__ + \"static/media/BOProto1.2fcf9696.png\";","export default __webpack_public_path__ + \"static/media/BOProto2.70550456.png\";","export default __webpack_public_path__ + \"static/media/BOProto3.ad576a71.png\";","export default __webpack_public_path__ + \"static/media/BOProto4.8e17bef7.png\";","export default __webpack_public_path__ + \"static/media/PORThero.9ddf6013.jpg\";","import React from 'react'\r\nimport './Intropage.css'\r\n\r\nfunction Intropage() {\r\n    return (\r\n        <>\r\n        <div className=\"intro-container\">\r\n        <div className=\"intro-flexbox\">    \r\n        <h1>coming <b>soon</b></h1>\r\n        <img className='intro-logo' alt=\"wave emoji\" src={require(\"../images/K5.png\").default}></img> </div>\r\n        <img className='intro-txtlogo' alt=\"wave emoji\" src={require(\"../images/logo2.png\").default} ></img>\r\n         \r\n        </div>\r\n        \r\n            \r\n        </>\r\n    )\r\n}\r\n\r\nexport default Intropage\r\n","import React from 'react'\r\nimport Intropage from '../Intropage'\r\n\r\nfunction Intro() {\r\n    return (\r\n        <>\r\n            <Intropage/>\r\n        </>\r\n    )\r\n}\r\n\r\nexport default Intro\r\n","\r\nimport React from 'react'\r\n\r\nimport '../../App.css';\r\n// import Cards from '../Cards';\r\n\r\n// import HeroSection from '../HeroSection';\r\n// import SectionLeft from '../SectionLeft';\r\n// import SectionRight from '../SectionRight';\r\n// import Box from '../Box';\r\n// import HS from '../HS';\r\n// import PRSectionRight from '../PRSectionRight';\r\n// import PRSectionLeft from '../PRSectionLeft';\r\n// import ScrollToTop from '../ScrollToTop';\r\n// import HeroSectionLeft from '../HeroSectionLeft copy';\r\n// import HeroSectionRight from '../HeroSectionRight';\r\n// import Line from '../Line';\r\nimport Intro from './Intro';\r\n\r\n\r\nfunction Home () {\r\n\r\n\r\n    return(\r\n       \r\n        <>\r\n        <Intro/>\r\n        \r\n        {/* <ScrollToTop>\r\n    \r\n\r\n        <HS/>\r\n        \r\n        \r\n         <HeroSectionLeft img={require(\"../../images/EOThero2.jpg\").default} alt=\"huh\" \r\n     \r\n    h1=\"Equitable designing\" h5=\"I grew up with the word: Equality. It has always been a complex word to me. That's until I discovered the word: Equity. It radiates the core of my understanding what a design should have.\"/>\r\n        \r\n\r\n       <HeroSectionRight img={require(\"../../images/HomeS1.png\").default} alt=\"huh\" \r\n     \r\n    h1=\"User Centered\" h5=\"All designs are made for the users. Ask questions, receive feedback, update the design. A simple yet effective method to meet all ends.\"/>\r\n         \r\n        \r\n        \r\n       \r\n       \r\n        <Cards/>\r\n        \r\n        </ScrollToTop> */}\r\n        \r\n        </>\r\n    )\r\n}\r\n\r\nexport default Home;","import React, { useState, useRef } from 'react';\r\nimport './ContactForm.css';\r\nimport emailjs from 'emailjs-com'\r\nimport Reaptcha from 'reaptcha';\r\n\r\nconst Result =() =>{\r\n  return(\r\n    <p className='p3'>Thank you! Message is send.</p>\r\n  )\r\n}\r\n\r\nconst Disable =() =>{\r\n  return(\r\n    <p className=\"p\">* Please complete the Recaptcha before sending!</p>\r\n  )\r\n}\r\n\r\nconst Able =() =>{\r\n  return(\r\n    <p className=\"p2\">K</p>\r\n  )\r\n}\r\n\r\n\r\nfunction ContactForm() {\r\n\r\n \r\n  \r\n  const [result, showResult] = useState(false);\r\n\r\n  const [disableSubmit,setDisableSubmit] = useState(true);\r\n \r\n\r\n  const form = useRef();\r\n\r\n  const sendEmail = (e) => {\r\n    e.preventDefault();\r\n\r\n    emailjs.sendForm('service_lvap7he', 'template_3w49q6v', form.current, 'user_Pr23lepidZuO63RnsCYyX')\r\n      .then((result) => {\r\n          console.log(result.text);\r\n      }, (error) => {\r\n          console.log(error.text);\r\n      });\r\n\r\n      form.current.reset();\r\n      showResult(true);\r\n  };\r\n\r\n  \r\n\r\n\r\n\r\n  return (\r\n    <div>\r\n      <div className=\"contactpage\">\r\n      <h1 className=\"contact\">Contact</h1>\r\n       <form ref={form} onSubmit={sendEmail}>\r\n       \r\n\r\n       <h1 className=\"h1form\"> Send me a message</h1>\r\n      \r\n      <div className=\"container\">\r\n      <img className='img' alt=\"stamp with logo\" src={require(\"../images/stamp3.png\").default}/>\r\n      <div className=\"form\">\r\n      <label className=\"label\">Name</label>\r\n      <input type=\"text\" name=\"user_name\" placeholder=\"Your Name\" className=\"text\"/>\r\n      \r\n\r\n      <label className=\"label\">Email</label>\r\n      <input type=\"email\" name=\"user_email\" className=\"email\" placeholder=\"Your Email\"/>\r\n\r\n      <label className=\"label2\">Message</label>\r\n      <textarea name=\"message\" className=\"message\" placeholder=\"Your Message <3\"/>\r\n      \r\n      {/* <ReCaptchaV2 sitekey={'6Lcu-DQdAAAAAHkDEoCmi5VT-SeQhM-VET8Lh0JC'} \r\n        onChange={(() => setDisableSubmit(false))}\r\n        onExpire={(() => setDisableSubmit(true))}\r\n      /> */}\r\n      <Reaptcha sitekey=\"6Lcu-DQdAAAAAHkDEoCmi5VT-SeQhM-VET8Lh0JC\" onVerify={(() => setDisableSubmit(false))} onExpire={(() => setDisableSubmit(true))} />\r\n\r\n      <input className=\"submit\" type=\"submit\" disabled={disableSubmit} value=\"Send\" />\r\n      <div className=\"row\">\r\n        {result ? <Result /> : null}\r\n        {disableSubmit ? <Disable/> : <Able/>}\r\n        \r\n        \r\n      \r\n      </div>\r\n       </div>\r\n       </div>\r\n    </form>\r\n\r\n\r\n\r\n      </div>\r\n    </div>\r\n  );\r\n}\r\n\r\nexport default ContactForm;","import React from 'react'\r\nimport '../../App.css';\r\n\r\nimport ContactForm from '../ContactForm';\r\n\r\n\r\n\r\nfunction Contact () {\r\n    return(\r\n        <>\r\n        \r\n        <ContactForm/>\r\n        \r\n        </>\r\n    )\r\n}\r\n\r\nexport default Contact;","import { useState, useEffect } from \"react\";\r\n\r\n// Hook\r\nconst useWindowSize = () => {\r\n    // Initialize state with undefined width/height so server and client renders match\r\n    // Learn more here: https://joshwcomeau.com/react/the-perils-of-rehydration/\r\n    const [windowSize, setWindowSize] = useState({\r\n        width: undefined,\r\n        height: undefined\r\n    });\r\n\r\n    useEffect(() => {\r\n        // only execute all the code below in client side\r\n        if (typeof window !== \"undefined\") {\r\n            // Handler to call on window resize\r\n            function handleResize() {\r\n                // Set window width/height to state\r\n                setWindowSize({\r\n                    width: window.innerWidth,\r\n                    height: window.innerHeight\r\n                });\r\n            }\r\n\r\n            // Add event listener\r\n            window.addEventListener(\"resize\", handleResize);\r\n\r\n            // Call handler right away so state gets updated with initial window size\r\n            handleResize();\r\n\r\n            // Remove event listener on cleanup\r\n            return () => window.removeEventListener(\"resize\", handleResize);\r\n        }\r\n    }, []); // Empty array ensures that effect is only run on mount\r\n    return windowSize;\r\n};\r\n\r\nexport default useWindowSize;","import React from 'react'\r\n// import { Link } from 'react-router-dom'\r\nimport \"./SocialStickyLeft.css\"\r\nimport useWindowSize from './useWindowSize';\r\n\r\n\r\nfunction SocialStickyLeft() {\r\n\r\n    const size = useWindowSize(); \r\n\r\n    return (\r\n        \r\n        <div className=\"social-wrapper\">\r\n\r\n        <div className=\"social-icons\">\r\n        {/* { size.width > 1300 &&\r\n            <div className=\"icon-bg\">\r\n                \r\n                <Link\r\n              class='social-icon-link facebook'\r\n              to='/'\r\n              target='_blank'\r\n              aria-label='Facebook'\r\n            >\r\n              <i class='fab fa-facebook-f' />\r\n            </Link>\r\n            </div>\r\n            } */}\r\n\r\n            {/* { size.width > 1300 &&\r\n            <div className=\"icon-bg\">\r\n            <Link\r\n              class='social-icon-link instagram'\r\n              to='/'\r\n              target='_blank'\r\n              aria-label='Instagram'\r\n            >\r\n              <i className='fab fa-instagram'/>\r\n            </Link>\r\n            </div> */}\r\n            \r\n            {/*  */}\r\n            {/* { size.width > 1300 &&\r\n\r\n            <div className=\"icon-bg\">\r\n            <Link\r\n              class='social-icon-link youtube'\r\n              to='/'\r\n              target='_blank'\r\n              aria-label='Youtube'\r\n            >\r\n              <i class='fab fa-youtube' />\r\n            </Link>\r\n            </div>\r\n            } */}\r\n\r\n            {/* { size.width > 1300 &&\r\n\r\n            <div className=\"icon-bg\">\r\n            <Link\r\n              class='social-icon-link twitter'\r\n              to='/'\r\n              target='_blank'\r\n              aria-label='Twitter'\r\n            >\r\n              <i class='fab fa-twitter' />\r\n            </Link>\r\n            </div>\r\n            } */}\r\n\r\n\r\n\r\n            { size.width > 1300 &&\r\n\r\n            <div className=\"icon-bg\">\r\n            {/* <Link\r\n              class='social-icon-link twitter'\r\n              to='/'\r\n              target='_blank'\r\n              aria-label='LinkedIn'\r\n            > */}\r\n            <a class='social-icon-link twitter' href=\"https://www.linkedin.com/in/karima-targhi-bakkali-7022b1149/\">\r\n              <i class='fab fa-linkedin' />\r\n            </a>\r\n            {/* </Link> */}\r\n            </div>\r\n            }\r\n            \r\n       \r\n        \r\n\r\n        {/* { size.width > 1300 &&\r\n\r\n            <div className=\"icon-bg\">\r\n            <Link\r\n              class='social-icon-link twitter'\r\n              to='/'\r\n              target='_blank'\r\n              aria-label='LinkedIn'\r\n            >\r\n              <i class='fab fa-linkedin' />\r\n            </Link>\r\n            </div>\r\n            } */}\r\n            </div>\r\n        </div>\r\n        \r\n    )\r\n    }\r\n   \r\n\r\nexport default SocialStickyLeft\r\n","import React from 'react';\r\nimport { Link } from 'react-router-dom';\r\n\r\n\r\nfunction CardItem(props) {\r\n    return (\r\n        <>\r\n          \r\n          <Link className=\"cards-item-linkL\" to={props.path}>\r\n              <figure className=\"cards-item-pic-wrapL\" data-category={props.label}>\r\n                  <img src={props.src} \r\n                  alt=\"Iets\" \r\n                  className=\"cards-item-imgL\" />\r\n              </figure>\r\n              <div className=\"cards-item-infoL\">\r\n                  <h5 className='cards-item-textL'>{props.text}</h5>\r\n                  <h6 className='cards-item-text2L'>{props.text2}</h6>\r\n              </div>\r\n          </Link>\r\n\r\n        </>\r\n    )\r\n}\r\n\r\nexport default CardItem\r\n","import React from 'react'\r\nimport CardItemLight from './CardItemLight'\r\nimport './CardsLight.css'\r\n\r\n\r\n\r\nfunction CardsLight() {\r\n\r\n    \r\n    \r\n    return (\r\n        <div className='cardsL'>\r\n            <h1>View and read my latests projects.</h1>\r\n            <div className=\"cards-containerL\">\r\n                \r\n                <div className=\"cards-itemsL\">\r\n\r\n                <div className=\"itemL\">\r\n                \r\n                <CardItemLight\r\n                    src={require(\"../images/PR-Card-eot-1.jpg\").default}\r\n                    text=\"Eat on Time\"\r\n                    text2=\"An app that reminds you to eat\"\r\n                    label=\"App\"\r\n                    path=\"/Project01\"\r\n                    \r\n                />\r\n                </div>\r\n\r\n                <div className=\"itemL\">\r\n                <CardItemLight\r\n                    src={require(\"../images/PR-Card-wnl-1.jpg\").default}\r\n                    text=\"Work NL\"\r\n                    text2=\"Project that helps first generation immigrants find the perfect job.\"\r\n                    label=\"Responsive website + app\"\r\n                    path=\"/Project02\"\r\n                />\r\n                </div>\r\n                \r\n                </div>\r\n\r\n                <div className=\"cards-itemsL\">\r\n                \r\n                \r\n\r\n                <div className=\"itemL\">\r\n                 <CardItemLight\r\n                    src={require(\"../images/PR-Card-bo-1.jpg\").default}\r\n                    text=\"Bogota\"\r\n                    text2=\"Merch-selling artist website\"\r\n                    label=\"Website\"\r\n                    path=\"/Project03\"\r\n                    \r\n                />\r\n                </div>\r\n                \r\n                 \r\n                 <div className=\"itemL\">\r\n                 <CardItemLight\r\n                    src={require(\"../images/PR-Card-port-1.jpg\").default}\r\n                    text=\"This website\"\r\n                    text2=\"Portfolio website coded by me\"\r\n                    label=\"React.js\"\r\n                    path=\"/Project04\"\r\n                    \r\n                />\r\n                </div>\r\n                \r\n                \r\n                </div>\r\n               \r\n                \r\n                </div>\r\n            </div>\r\n        \r\n    )\r\n}\r\n\r\nexport default CardsLight\r\n","import React from 'react';\r\nimport '../../App.css';\r\nimport { Link } from 'react-router-dom';\r\n\r\nimport CardsLight from '../CardsLight';\r\n\r\nexport default function Projects(props) {\r\n    return (\r\n        <>\r\n    <Link to='/Intro' style={{ textDecoration: 'none' }}>\r\n     <h1 className=\"projects\">Projects</h1>\r\n     </Link>\r\n\r\n    \r\n    <CardsLight/>\r\n    </>\r\n     \r\n    )\r\n}","import React from 'react'\r\nimport './SectionLeft.css';\r\nimport { useInView } from 'react-intersection-observer'\r\nimport { motion, useAnimation } from \"framer-motion\";\r\n\r\n\r\n\r\n\r\n\r\nfunction HeroSectionLeft(props) {\r\n     const {inView, ref} = useInView();\r\n\r\n\r\n     const animationControl = useAnimation();\r\n     const checkAnimation = useAnimation();\r\n    \r\n     if (inView) {\r\n    animationControl.start({\r\n        \r\n      x: 0,\r\n      opacity: 1,\r\n      transition: {\r\n        delay: 0,\r\n        ease: \"easeInOut\", \r\n        duration: 1.0\r\n      }\r\n    \r\n      \r\n    });\r\n\r\n    \r\n  }\r\n\r\n  if (inView) {\r\n    checkAnimation.start({\r\n      y: \"0px\",\r\n      opacity: 1,\r\n      transition: {\r\n        delay: 0,\r\n        ease: \"easeInOut\", \r\n        duration: 0.5\r\n      }\r\n      \r\n    });\r\n  }\r\n\r\n\r\n\r\n\r\n    return (\r\n        \r\n        <div className=\"section\"> \r\n        \r\n        <div className='section-wrapper' ref ={ref}>\r\n        \r\n         <motion.div\r\n\r\n            initial={{\r\n                 x: \"-500px\",\r\n                opacity: 0\r\n        \r\n            }}\r\n\r\n            whileTap={{ scale: 0.9 }}\r\n\r\n       \r\n\r\n            animate={animationControl}\r\n       \r\n            className=\"section-image\"\r\n    >\r\n    \r\n        <img src={props.img} alt={props.alt} className=\"pic\"/>\r\n    \r\n        </motion.div>\r\n        \r\n        \r\n        <div ref={ref}>\r\n         <motion.div\r\n\r\n            initial={{\r\n                y: \"100px\",\r\n                opacity: 0\r\n        \r\n            }}\r\n\r\n            animate={checkAnimation}\r\n            className=\"section-text\"\r\n            \r\n    >\r\n\r\n        \r\n            <h1>\r\n                {props.h1}\r\n            </h1>\r\n            \r\n\r\n            <h5>{props.h5} </h5>\r\n            </motion.div>\r\n            \r\n            \r\n        </div>\r\n            \r\n        </div>\r\n        </div>\r\n    )\r\n}\r\n\r\nexport default HeroSectionLeft\r\n","import React from 'react'\r\nimport './SectionRight.css';\r\nimport { useInView } from 'react-intersection-observer'\r\nimport { motion, useAnimation } from \"framer-motion\";\r\n\r\n\r\n\r\n\r\n\r\nfunction HeroSectionRight(props) {\r\n     const {inView, ref} = useInView();\r\n\r\n\r\n     const animationControl = useAnimation();\r\n     const checkAnimation = useAnimation();\r\n    \r\n     if (inView) {\r\n    animationControl.start({\r\n        \r\n      x: 0,\r\n      opacity: 1,\r\n      transition: {\r\n        delay: 0,\r\n        ease: \"easeInOut\", \r\n        duration: 1.0\r\n      }\r\n    \r\n      \r\n    });\r\n\r\n    \r\n  }\r\n\r\n  if (inView) {\r\n    checkAnimation.start({\r\n      y: \"0px\",\r\n      opacity: 1,\r\n      transition: {\r\n        delay: 0,\r\n        ease: \"easeInOut\", \r\n        duration: 0.5\r\n      }\r\n      \r\n    });\r\n  }\r\n\r\n\r\n\r\n\r\n    return (\r\n        \r\n        <div className=\"sectionR\"> \r\n        \r\n        <div className='section-right-wrapperR' ref ={ref}>\r\n        \r\n         <motion.div\r\n\r\n            initial={{\r\n                 x: \"500px\",\r\n                opacity: 0\r\n        \r\n            }}\r\n\r\n            whileTap={{ scale: 0.9 }}\r\n\r\n       \r\n\r\n            animate={animationControl}\r\n       \r\n            className=\"section-imageR\"\r\n    >\r\n    \r\n        <img src={props.img} alt={props.alt} className=\"picR\"/>\r\n    \r\n        </motion.div>\r\n        \r\n        \r\n        <div ref={ref}>\r\n         <motion.div\r\n\r\n            initial={{\r\n                y: \"100px\",\r\n                opacity: 0\r\n        \r\n            }}\r\n\r\n            animate={checkAnimation}\r\n            className=\"section-textR\"\r\n            \r\n    >\r\n\r\n        {/* <h3>{props.label}</h3> */}\r\n            <h1>\r\n                {props.h1}\r\n            </h1>\r\n            \r\n\r\n            <h5>{props.h5} </h5>\r\n            </motion.div>\r\n            \r\n            \r\n        </div>\r\n            \r\n        </div>\r\n        </div>\r\n    )\r\n}\r\n\r\nexport default HeroSectionRight\r\n","import React from 'react'\r\nimport './Line.css'\r\n\r\nfunction Line() {\r\n    return (\r\n        <div className=\"container-line\">\r\n        <div className=\"wrap-line\">\r\n            <hr className=\"hr\"></hr>\r\n            </div>\r\n        </div>\r\n    )\r\n}\r\n\r\nexport default Line\r\n","import React from 'react'\r\nimport './PR1Img.css'\r\n\r\nfunction PR1Img(props) {\r\n    return (\r\n        <div className=\"container-1img\">\r\n\r\n        <div className=\"container-1img-wrap\">\r\n\r\n           \r\n            <img src={props.img} alt={props.alt} className=\"pic-1img\"/>\r\n            \r\n    \r\n\r\n        </div>\r\n \r\n            \r\n        </div>\r\n    )\r\n}\r\n\r\nexport default PR1Img\r\n","import React from 'react'\r\nimport './PR3Img.css'\r\nimport useWindowSize from './useWindowSize'\r\n\r\nfunction PR3Img() {\r\n\r\n    const size = useWindowSize(); \r\n\r\n    return (\r\n        <div className=\"container-3img\">\r\n\r\n        <div className=\"container-3img-wrap\">\r\n{ size.width > 768 &&\r\n        <div className=\"section-image-3img\">\r\n            <div className=\"blokje-3img\">\r\n                <img src={require(\"../images/eot1.png\").default} alt=\"kip\" className=\"pic-3img\"/>\r\n        </div>  \r\n            </div>\r\n}\r\n\r\n            <div className=\"section-image-3img\">\r\n            <div className=\"blokje-3img\">\r\n            <img src={require(\"../images/eot2.png\").default} alt=\"kip\" className=\"pic-3img\"/>\r\n            </div>\r\n            </div>\r\n            \r\n { size.width > 1300 &&\r\n            <div className=\"section-image-3img\">\r\n            <div className=\"blokje-3img\">\r\n            <img src={require(\"../images/eot1.png\").default} alt=\"kip\" className=\"pic-3img\"/>\r\n            </div>\r\n            </div> }\r\n\r\n        </div>\r\n \r\n            \r\n        </div>\r\n    )\r\n}\r\n\r\nexport default PR3Img\r\n","import React from 'react'\r\nimport './PRH1.css'\r\n\r\nfunction PRH1(props) {\r\n    return (\r\n        <div className=\"container-prh1\">\r\n        <div className=\"container-prh1-wrap\">\r\n        <h1>{props.h1}</h1>\r\n\r\n\r\n        </div>\r\n            \r\n        </div>\r\n    )\r\n}\r\n\r\nexport default PRH1\r\n","import React from 'react'\r\nimport './PRTextLeft.css'\r\n\r\nfunction PRTextLeft(props) {\r\n    return (\r\n        <div className=\"container-prtext\">\r\n        <div className=\"container-prtext-wrap\">\r\n        <h1>{props.h1}</h1>\r\n        <h5>{props.h5}</h5>\r\n        <h5>{props.h52}</h5>\r\n        <h5>{props.h53} <a href=\"https://www.linkedin.com/in/karima-targhi-bakkali-7022b1149/\">{props.link}</a></h5>\r\n        <h6>{props.h6}</h6>\r\n\r\n\r\n        </div>\r\n            \r\n        </div>\r\n    )\r\n}\r\n\r\nexport default PRTextLeft\r\n","import React from 'react'\r\nimport './PrTitle.css'\r\n\r\nfunction PrTitle(props) {\r\n    return (\r\n        <div className=\"container-prtitle\">\r\n        <div className=\"container-prtitle-wrap\">\r\n\r\n          <h1 >{props.text}</h1>  \r\n          <h2>{props.subtext}</h2>\r\n          <h3>{props.date}</h3>\r\n        </div>\r\n        \r\n        </div>\r\n    )\r\n}\r\n\r\nexport default PrTitle\r\n","import React from 'react'\r\n\r\nimport './PRTitleText.css'\r\n\r\nfunction PRTitleText(props) {\r\n    return (\r\n        \r\n        <div className=\"container-titletext\">\r\n        \r\n        <div className=\"wrap-titletext\">\r\n            <div className=\"title-titletext\"> <h1>{props.title}</h1></div>\r\n            <div className=\"text-titletext\"> <h5>{props.text}</h5></div>\r\n            \r\n        </div>\r\n        \r\n        </div>\r\n            \r\n    )\r\n}\r\n\r\nexport default PRTitleText\r\n\r\n","import React from 'react';\r\nimport '../../App.css';\r\n\r\nimport HeroSectionLeft from '../HeroSectionLeft copy';\r\nimport HeroSectionRight from '../HeroSectionRight';\r\nimport Line from '../Line';\r\nimport PR1Img from '../PR1Img';\r\nimport PR3Img from '../PR3Img';\r\nimport PRH1 from '../PRH1';\r\n// import PRSectionLeft from '../PRSectionLeft';\r\n\r\nimport PRTextLeft from '../PRTextLeft';\r\nimport PrTitle from '../PrTitle';\r\nimport PRTitleText from '../PRTitleText';\r\n\r\n\r\nexport default function Project01() {\r\n    return (\r\n    <>\r\n     <h1 className=\"projects2\">Case Study</h1>\r\n    <PrTitle text=\"Eat On Time\" subtext=\"An app that helps you remind to eat, on time.\" date=\"June 2021\"/>\r\n    <Line/>\r\n    <PR1Img img={require(\"../../images/EOThero2.jpg\").default} alt=\"Images displaying wireframes and mockups\"/><Line/>\r\n    <PR3Img/><Line/>\r\n    <HeroSectionLeft img={require(\"../../images/EOTpic2.jpg\").default} alt=\"Displaying the app on phone while hand holding the phone\" \r\n    // label=\"Mockup\" \r\n    h1=\"Project Goal\" h5=\"Simplify the process of creating personalized reminders to eat. Creating easy schedules without much work.\"/>\r\n\r\n   \r\n    <Line/>\r\n    <PRTextLeft h1=\"Project Overview\" \r\n    h5=\"During the pandemic of 2021, a lot of people were forced to change their work schedules completely. Many people had to work from home, which changed their work schedule completely. I noticed a lot of people complaining about forgetting to eat, or eat on random times. I also noticed that this is a common thing for people who create their own schedules. I used this phenomenon to create this project.\"\r\n    h52=\"Eat on Time is an app that will help you set reminders to eat. You can add times for reminders as you like, and you can even set Presets to make your schedule for a working day easy. The main user for this app are people who are too busy, or just blatantly forget to eat.\"\r\n    />\r\n\r\n<Line/>\r\n<PRTitleText title=\"Designer Role\" text=\"For this project, I took on the complete project as a UX Designer. From research to prototyping.\"/>\r\n    <Line/>\r\n\r\n<PRTitleText title=\"Target Users\" text=\"The target users for this app are the people who are really busy and forget to eat. Or are easily distracted and need a reminder.\"/>\r\n    <Line/>\r\n\r\n<PRTitleText title=\"Key Challenges\" text=\"The main challenge for this app was how to create easy, non-binding reminders that are considered to be helpful instead of feeling like a routine or obligation.\"/>\r\n    <Line/>\r\n\r\n    <PRTextLeft h1=\"Research Study\" \r\n    h5=\"In the research study we interviewed 4 people to see if they could relate to the problem of not eating on time, and to see what we could do to help. We were positively shocked how many people considered this a problem. It is an issue that’s fairly common. We saw this trend within all ages and genders. Their main concern was that they have no one to remind them to eat. And sometimes they prioritize work over eating.\"\r\n    h52=\"The main pain points we found were: Prioritizing work over eating, Missing a reminder, Other food apps focus more on weight loss/gain than eating on a certain time.\"\r\n    h53=\"After learning this, I build a wireframe design based on those 3 pain points.\"\r\n    />\r\n    <Line/>\r\n    \r\n    <PRH1 h1=\"Initial design concepts\"/>\r\n    <PR1Img img={require(\"../../images/lofiproto.jpg\").default} alt=\"Images displaying wireframes and mockups\"/>\r\n    <Line/>\r\n\r\n    <PRTitleText title=\"User Tests\" \r\n    text=\"I conducted a usability study to see the reactions and first inputs of the participants. The tests were conducted in a one-to-one environment. All participants were asked to analyze and use a prototype. \"/>\r\n    <Line/>\r\n\r\n    <PRTitleText title=\"Test Results\" \r\n    text=\"The main issues found were: Clickables/buttons are small, No presets were available, App needs a fun element\"/>\r\n    <Line/>\r\n\r\n    <PRH1 h1=\"Prototype Design\"/>\r\n    <PR1Img img={require(\"../../images/EOTProto1.jpg\").default} alt=\"Images displaying wireframes and mockups\"/>\r\n    <Line/>\r\n\r\n    <PRTextLeft h1=\"Conclusion\" \r\n    h5=\"The app really sparked interested in people. They would love to have it in real life. I learned how many people could benefit from it. (even with medication instead of food)\"\r\n    h52=\"I also noticed how many people prefer wider, bigger buttons. They are more accessible, even if they are in a hard to reach corner of the screen.\"\r\n    />\r\n    <Line/>\r\n    <PRTitleText title=\"Next steps\" text=\"To enhance the idea/ design of this product, adding a option with ideas what to eat would also be beneficial. I also want to add a visual aspect to the lower menu/icons, so you can see on which page you are right now. \"/>\r\n    <Line/>\r\n\r\n\r\n\r\n    \r\n    <HeroSectionRight img={require(\"../../images/EOTpic2.jpg\").default} alt=\"huh\" \r\n    h1=\"Interested?\" h5=\"Would you like to hear more? Please don't hesitate to send me a message. \"/>\r\n\r\n    </>\r\n    \r\n    )\r\n}","import React from 'react'\r\nimport './PRH5.css'\r\n\r\nfunction PRH5(props) {\r\n    return (\r\n        <div className=\"container-prh5\">\r\n        <div className=\"container-prh5-wrap\">\r\n        <h5>{props.h5}</h5>\r\n\r\n\r\n        </div>\r\n            \r\n        </div>\r\n    )\r\n}\r\n\r\nexport default PRH5\r\n","import React from 'react'\r\nimport './PRMockupText.css'\r\n\r\nfunction PRMockupText(props) {\r\n    return (\r\n        <div className='container-mockuptext'>\r\n        <div className=\"wrap-mockuptext\">\r\n        <div className=\"wrap-flex-mockuptext\">\r\n            \r\n            <div className=\"image-mockuptext\">\r\n            <img src={props.img1} alt={props.alt1} className=\"pic-mockuptext\"/>\r\n            </div>\r\n            \r\n            <div className=\"text-mockuptext\">\r\n            {props.text1}\r\n            </div>\r\n\r\n        </div>\r\n\r\n\r\n         <div className=\"wrap-flex-mockuptext\">\r\n            \r\n            <div className=\"image-mockuptext\">\r\n            <img src={props.img2} alt={props.alt2} className=\"pic-mockuptext\"/>\r\n            </div>\r\n            \r\n            <div className=\"text-mockuptext\">\r\n            {props.text2}\r\n            </div>\r\n\r\n            </div>\r\n\r\n        </div>\r\n            \r\n        </div>\r\n    )\r\n}\r\n\r\nexport default PRMockupText\r\n","import React from 'react'\r\nimport './PRMockupText.css'\r\n\r\nfunction PRMockupText1(props) {\r\n    return (\r\n        <div className='container-mockuptext'>\r\n        <div className=\"wrap-mockuptext\">\r\n        <div className=\"wrap-flex-mockuptext\">\r\n            \r\n            <div className=\"image-mockuptext\">\r\n            <img src={props.img1} alt={props.alt1} className=\"pic-mockuptext\"/>\r\n            </div>\r\n            \r\n            <div className=\"text-mockuptext\">\r\n            {props.text1}\r\n            </div>\r\n\r\n        </div>\r\n\r\n\r\n         \r\n\r\n        </div>\r\n            \r\n        </div>\r\n    )\r\n}\r\n\r\nexport default PRMockupText1\r\n","import React from 'react';\r\nimport '../../App.css';\r\n\r\nimport HeroSectionLeft from '../HeroSectionLeft copy';\r\nimport HeroSectionRight from '../HeroSectionRight';\r\nimport Line from '../Line';\r\nimport PR1Img from '../PR1Img';\r\n// import PR3Img from '../PR3Img';\r\nimport PRH1 from '../PRH1';\r\nimport PRH5 from '../PRH5';\r\nimport PRMockupText from '../PRMockupText';\r\nimport PRMockupText1 from '../PRMockupText1';\r\n// import PRSectionLeft from '../PRSectionLeft';\r\n\r\nimport PRTextLeft from '../PRTextLeft';\r\nimport PrTitle from '../PrTitle';\r\nimport PRTitleText from '../PRTitleText';\r\n\r\n\r\nexport default function Project02() {\r\n    return (\r\n    <>\r\n     <h1 className=\"projects2\">Case Study</h1>\r\n    <PrTitle text=\"Work NL\" subtext=\"Responsive website/app that helps first generation immigrants find the perfect job.\" date=\"October 2021\"/>\r\n    <Line/>\r\n    <PR1Img img={require(\"../../images/WNLhero2.jpg\").default} alt=\"Images displaying wireframes and mockups\"/><Line/>\r\n    {/* <PR3Img/><Line/> */}\r\n    <HeroSectionLeft img={require(\"../../images/HomeS1.png\").default} alt=\"Displaying the website on different media.\" \r\n    // label=\"Mockup\" \r\n    h1=\"Project Goal\" h5=\"Creating a simple, readable, straight to the point responsive website, to help people find a perfect (new) job.\"/>\r\n\r\n   \r\n    <Line/>\r\n    <PRTextLeft h1=\"Project Overview\" \r\n    h5=\"First generation Immigrants are often viewed as hard workers. In the Netherlands, a lot of immigrants have different origins. Together they make up more than 10% of the Dutch population. A huge portion of this group have the same (type of) job since entering the country. Now that the average age is rising, some people can’t do the hard labour anymore, and need another job. \r\nFor a lot of immigrants, the language, new technology, and the lack of information can be a big challenge.\"\r\n    h52=\"Work NL is build to aid the first generation immigrants. But it's accessible for everyone.\"\r\n    />\r\n\r\n<Line/>\r\n<PRTitleText title=\"Designer Role\" text=\"For this project, I took on the complete project as a UX Designer. From research to prototyping.\"/>\r\n    <Line/>\r\n\r\n<PRTitleText title=\"Target Users\" text=\"The target users for this app are first generation immigrants in The Netherlands. Ages from 18 till retirement. \"/>\r\n    <Line/>\r\n\r\n<PRTitleText title=\"Key Challenges\" text=\"The main challenge for this app was how to cater to such a diverse, and large group of different people. What are the needs, which problems are they facing right now?\"/>\r\n    <Line/>\r\n\r\n    <PRTextLeft h1=\"Research Study\" \r\n    h5=\" In the first part of the study, I studied demographics of the first generation immigrants. I used CBS’s studies on immigrants in The Netherlands. I noticed a big difference between European and non-European first immigrants. Non-European immigrants have a large group above the age 50.\"\r\n    h52=\"I interviewed both European and non-European immigrants, but I noticed that language problems are common between both groups. Both groups feel like job search sites are often focussed on non-immigrants and often written in difficult language. Both groups are interested in a more easy to understand platform.\"\r\n    h53=\"\"\r\n    />\r\n    <Line/>\r\n    \r\n    <PR1Img img={require(\"../../images/cbs.jpg\").default} alt=\"Showing statistics\"/>\r\n    <PRH5 h5=\" ^ 13,7% of all inhabitants are first generation immigrants\" />\r\n    <Line/>\r\n\r\n    <PRH1 h1=\"Initial design concepts\"/>\r\n    <PR1Img img={require(\"../../images/WNLwireframe.jpg\").default} alt=\"Images displaying wireframes and mockups\"/>\r\n    <Line/>\r\n\r\n    <PRTitleText title=\"Competitive Audit\" \r\n    text=\"After analyzing some popular job-searching websites, I added a prominent searchbar to the design. \r\n    I concluded that a lot of the websites have a lot of text, but not many images to simplify the process.\r\n    Because language problems are a challenge, I wanted to add more icons and images to the design, to differentiate from the other job searching sites.\"/>\r\n    <Line/>\r\n\r\n    <PRTitleText title=\"User Tests\" \r\n    text=\"I conducted a usability study to see the reactions and first inputs of the participants. The tests were conducted in a one-to-one environment. All participants were asked to analyze and use a prototype. \"/>\r\n    <Line/>\r\n\r\n    <PRTitleText title=\"Test Results\" \r\n    text=\"The main issues found were: Some people had difficulty to go back to the mainpage.\"/>\r\n    <Line/>\r\n\r\n    <PRH1 h1=\"Prototype Design\"/>\r\n    <PR1Img img={require(\"../../images/WNLProto.jpg\").default} alt=\"Images displaying wireframes and mockups\"/>\r\n    <Line/>\r\n\r\n    <PRMockupText  img1={require(\"../../images/WNLProto1.png\").default} alt1=\"Displaying prototype app\" \r\n    text1=\"On the app, the home screen has a easy language selector, a prominent searchbar to make the job hunt easier, but also job recommendations. The recommendations show pictures related to the job, so it will be easier to understand.\"\r\n\r\n                img2={require(\"../../images/WNLProto2.png\").default} alt2=\"Displaying prototype app\"\r\n                text2=\"When clicking on a job listing, the job summary is always backed up by icons on top. The most important attributes are listed on top as icons + text. An 'Apply Now' button is positioned below and will keep the position when scrolling\"\r\n            />\r\n\r\n    <PRMockupText  img1={require(\"../../images/WNLProto3.png\").default} alt1=\"Displaying prototype app\" \r\n    text1=\"When clicking the apply button, a pop-up confirmation message will be in screen. You can confirm that you really wanted to apply at this time. \"\r\n\r\n    img2={require(\"../../images/WNLProto4.png\").default} alt2=\"Displaying prototype app\" \r\n    text2=\"Lastly, the succes screen, after confirming the application.\"\r\n    />\r\n\r\n    <PRMockupText  img1={require(\"../../images/WNLProtoLap1.png\").default} alt1=\"Displaying prototype Website, Homescreen\" \r\n    text1=\"On the website desktop version, all functions are on the navbar. The navbar will be sticky, so that everything will be easy to attain.\"\r\n\r\n    img2={require(\"../../images/WNLProtoLap2.png\").default} alt2=\"Displaying prototype app\" \r\n    text2=\"All pages are accompanied by a header text. You can immediately spot which page you are on. Because the pages are responsive, they look familiar even when you use a different media device.\"\r\n    />\r\n\r\n    <PRMockupText1 img1={require(\"../../images/WNLProtoIpad.png\").default} alt1=\"Prototype on a pad device\"\r\n    text1=\"The responsive design will trigger a different look based on the medium used. Above is the website on a pad.\"\r\n    />\r\n    \r\n    <Line/>\r\n\r\n    <PRTextLeft h1=\"Conclusion\" \r\n    h5=\"To me, this project was super interesting. I never imagined that we have such a large group of first generation immigrants. It was really refreshing to learn about the subject, and creating solutions for a fairly common problem that (in my opinion) is quite overlooked. I am sure that not only first generation immigrants would benefit from this project.\"\r\n    h52=\"The main take-away was the importance of the use of language. To keep away from difficult language, or to use images/icons to back-up the language.\"\r\n    />\r\n    <Line/>\r\n    <PRTitleText title=\"Next steps\" text=\"The project can be even stronger by conduction more usability tests. For example with people who have trouble to read. The app also would benefit if more icons are added (for example, on the confirmation screen).\"/>\r\n    <Line/>\r\n\r\n\r\n\r\n    \r\n    <HeroSectionRight img={require(\"../../images/WNLhero.jpg\").default} alt=\"huh\" \r\n    h1=\"The Future\" h5=\"As this was a personal project, I hope I can use this experience to help with a similar problem in the future.\"/>\r\n\r\n    </>\r\n    \r\n    )\r\n}","import { Component } from 'react'\r\nimport { withRouter } from 'react-router-dom';\r\n\r\nclass ScrollToTop extends Component {\r\n  componentDidUpdate(prevProps) {\r\n    const { location } = this.props;\r\n    if (location.pathname !== prevProps.location.pathname) {\r\n      window.scrollTo(0, 0);\r\n    }\r\n  }\r\n\r\n  render() {\r\n    const { children } = this.props;\r\n    return children;\r\n  }\r\n}\r\n\r\nexport default withRouter(ScrollToTop);\r\n","import React from 'react';\r\n\r\nimport '../../App.css';\r\nimport PR1Img from '../PR1Img';\r\nimport PRTextLeft from '../PRTextLeft';\r\n\r\nexport default function About() {\r\n    return (\r\n<>\r\n    <h1 className=\"services\">About me</h1>\r\n    <PR1Img/>\r\n    <PR1Img img={require(\"../../images/Me2.jpg\").default} alt=\"That's me standing in front of mountains\"/>\r\n    <PRTextLeft h1=\"Hi there,\" \r\n        h5=\"After working for 12+ years as a make-up artist, digital designing kept pulling me into it more & more. I always loved creativity and working with people. I have a strong sense of color theory, solving problems creatively, and love to affect people positively.\"\r\n        h52=\"In my spare time I like to play video games, lift weights, and eat lovely food. I enjoy travelling to far places. \"\r\n        h53=\"For more info about my work/resume, please visit my\" link=\"LinkedIn\"\r\n    />\r\n    \r\n</>\r\n)\r\n}\r\n","import React from 'react';\r\nimport '../../App.css';\r\n\r\n// import HeroSectionLeft from '../HeroSectionLeft copy';\r\n// import HeroSectionRight from '../HeroSectionRight';\r\nimport Line from '../Line';\r\nimport PR1Img from '../PR1Img';\r\n// import PR3Img from '../PR3Img';\r\nimport PRH1 from '../PRH1';\r\n// import PRH5 from '../PRH5';\r\nimport PRMockupText from '../PRMockupText';\r\nimport PRMockupText1 from '../PRMockupText1';\r\n// import PRSectionLeft from '../PRSectionLeft';\r\n\r\nimport PRTextLeft from '../PRTextLeft';\r\nimport PrTitle from '../PrTitle';\r\nimport PRTitleText from '../PRTitleText';\r\n\r\n\r\nexport default function Project03() {\r\n    return (\r\n    <>\r\n     <h1 className=\"projects2\">Case Study</h1>\r\n    <PrTitle text=\"Bogota\" subtext=\"Responsive website where you can buy merch from a artist.\" date=\"September 2021\"/>\r\n    <Line/>\r\n    <PR1Img img={require(\"../../images/BOhero.jpg\").default} alt=\"Images displaying wireframes and mockups\"/><Line/>\r\n    <PRTitleText title=\"Project Goal\" text=\"Easily buy official merchandise on artist's website. Make sure the userflow is easy to understand\"/>   \r\n    <Line/>\r\n    <PRTextLeft h1=\"Project Overview\" \r\n    h5=\"Almost everyone has it: a favorite artist. You can support your fav artist in multiple ways. One of those support systems is buying merchandise. Some people only want to buy merch on the official website, to avoid counterfeit products.\"\r\n    h52=\"Bogota is a fictional artist, capturing hearts with his guitar skills and magical voice.\"\r\n    />\r\n\r\n<Line/>\r\n<PRTitleText title=\"Designer Role\" text=\"For this project, I took on the complete project as a UX Designer. From research to prototyping.\"/>\r\n    <Line/>\r\n\r\n<PRTitleText title=\"Target Users\" text=\"The target users for this project are people aged 18+, who enjoy music and/or are concert goers. \"/>\r\n    <Line/>\r\n\r\n<PRTitleText title=\"Key Challenges\" text=\"The main challenge for this project is creating a functional, easy user flow, when buying merchandise on a website.  \"/>\r\n    <Line/>\r\n\r\n    <PRTextLeft h1=\"Research Study\" \r\n    h5=\"For the research study, I interviewed 5 individuals. The group was quite diverse, but many answers were corresponding with each other.\"\r\n    h52=\"All participants said they dislike websites with too much text, pictures and such. 80% preferred buying merch of the official website. 80% would like to see information like tourdates on a website.\"\r\n    h53=\"\"\r\n    />\r\n    <Line/>\r\n    \r\n\r\n    <PRH1 h1=\"Initial design concepts\"/>\r\n    <PRMockupText  img1={require(\"../../images/BOWire1.png\").default} alt1=\"Displaying wireframe Website, Homescreen\" \r\n    text1=\"Initial home screen. The word 'merch' in the navbar has been replaced by 'Shop'. Tourdates are also added to the navbar after the research study.\"\r\n\r\n    img2={require(\"../../images/BOWire2.png\").default} alt2=\"Displaying wireframe app\" \r\n    text2=\"Item screen.\"\r\n    />\r\n\r\n     <PRMockupText1 img1={require(\"../../images/BOWire3.png\").default} alt1=\"Wireframe mobile\"\r\n    text1=\"The website is responsive and will transform based on the media used to view the website. Above is a wireframe for the home screen on mobile displays.\"\r\n    />\r\n\r\n    <Line/>\r\n\r\n    <PRTitleText title=\"User Tests\" \r\n    text=\"I conducted a usability study to see the reactions and first inputs of the participants. The tests were conducted in a one-to-one environment. All participants were asked to analyze and use a prototype. \"/>\r\n    <Line/>\r\n\r\n    <PRTitleText title=\"Test Results\" \r\n    text=\"The two main points in the results that were standing out were: the word 'Merch' could be difficult to understand, and adding more information (like tourdates) \"/>\r\n    <Line/>\r\n\r\n    <PRH1 h1=\"Prototype Design\"/>\r\n    <PR1Img img={require(\"../../images/BOProto.jpg\").default} alt=\"Images displaying wireframes and mockups\"/>\r\n    <Line/>\r\n\r\n    <PRMockupText  img1={require(\"../../images/BOProto1.png\").default} alt1=\"Displaying prototype app\" \r\n    text1=\"On the desktop website, after choosing a product you like to buy, you will get options for customization. You can select a color, and the option box has the placeholder text 'Choose Size'. \"\r\n\r\n                img2={require(\"../../images/BOProto2.png\").default} alt2=\"Displaying prototype app\"\r\n                text2=\"After getting a pop-up confirmation of adding your item to the cart, you can view your cart. You can add, delete, or confirm your order.\"\r\n            />\r\n\r\n    <PRMockupText  img1={require(\"../../images/BOProto3.png\").default} alt1=\"Displaying prototype app\" \r\n    text1=\"After collecting all your user data, or filling in shipping info, a review screen will show all your data again, and the total amount due.\"\r\n\r\n    img2={require(\"../../images/BOProto4.png\").default} alt2=\"Displaying prototype app\" \r\n    text2=\"Lastly, a success screen will be the final confirmation of this flow.\"\r\n    />\r\n\r\n   \r\n    \r\n    <Line/>\r\n\r\n    <PRTextLeft h1=\"Conclusion\" \r\n    h5=\"Creating a webshop - environment sounds very easy and common, because we use it so much. But I learned it has a lot of opportunities for user experience. You can add so many options, but you want to have a clean and easy to read interface.\"\r\n    h52=\"I would love to keep on working on e-commerce projects, I think it's a excellent challenge of creating a well executed user experience.\"\r\n    />\r\n    <Line/>\r\n    <PRTitleText title=\"Next steps\" text=\"I would like to make the buying process even more pleasant by adding more pictures of the products. Like a carrousel gallery. I also would like to dive deeper into confirmation screen, to see with types work the best.\"/>\r\n    {/* <Line/> */}\r\n\r\n\r\n\r\n    \r\n    {/* <HeroSectionRight img={require(\"../../images/WNLhero.jpg\").default} alt=\"huh\" \r\n    h1=\"The Future\" h5=\"As this was a personal project, I hope I can use this experience to help with a similar problem in the future.\"/> */}\r\n\r\n    </>\r\n    \r\n    )\r\n}","import React from 'react';\r\nimport '../../App.css';\r\nimport Line from '../Line';\r\nimport PR1Img from '../PR1Img';\r\nimport PRH1 from '../PRH1';\r\nimport PRTextLeft from '../PRTextLeft';\r\nimport PrTitle from '../PrTitle';\r\n\r\n\r\n\r\nexport default function Project04() {\r\n    return (\r\n    <>\r\n     <h1 className=\"projects2\">About</h1>\r\n    <PrTitle text=\"This website\" subtext=\"Responsive portfolio website build with React\" date=\"January 2022\"/>\r\n    <Line/>\r\n    <PR1Img img={require(\"../../images/PORThero.jpg\").default} alt=\"Images displaying wireframes and mockups\"/><Line/>\r\n    \r\n\r\n    <PRTextLeft h1=\"Project Overview\" \r\n    h5=\"It was time to showcase my work. I tried a few web builders, but they missed 'something' I wanted on the site. Why not build my own website? I know some HTML after all... Well, maybe i need something more. \"\r\n    h52=\"And then I came to the brilliant idea of taking a first step into React! It took some time, but i can happily say that I learned a lot.\"\r\n    h53=\"It was very nice to translate your own wireframes into a website, and to actually make your User Experience come to life. On the journey I noticed a lot of User Experience technicalties that I had to fix with code. The biggest challenge was responsiveness, for all screens. All dimensions. All phones. I resized my browser a gazillion times, and I used mobile simulators to check the most common phone dimensions.\"\r\n    />\r\n\r\n    <PRH1 h1=\"Hope you enjoyed it!\" />\r\n    <Line/>\r\n    </>\r\n    )\r\n}","import React from 'react';\n// import Navbar from './components/Navbar';\n\nimport Home from './components/Pages/Home'\n// import Footer from './components/Footer';\nimport './App.css';\nimport {BrowserRouter as Router, Switch, Route} from \"react-router-dom\";\n\n\nimport Contact from './components/Pages/Contact';\nimport SocialStickyLeft from './components/SocialStickyLeft';\n\nimport Projects from './components/Pages/Projects';\nimport Project01 from './components/Pages/Project01';\nimport Project02 from './components/Pages/Project02';\nimport ScrollToTop from './components/ScrollToTop';\nimport About from './components/Pages/About';\nimport Project03 from './components/Pages/Project03';\nimport Project04 from './components/Pages/Project04';\nimport Intro from './components/Pages/Intro';\n\nfunction App() {\n  return (\n    <div className=\"scroll\">\n    <Router>\n      {/* <h1>Hello</h1> */}\n      <ScrollToTop>\n\n      {/* <Navbar /> */}\n      <SocialStickyLeft/>\n      \n            <Switch>\n        <Route path='/' exact component={Home} />\n        <Route path='/about' exact component={About} />\n        <Route path='/projects' exact component={Projects} />\n        <Route path='/contact' exact component={Contact} />\n        <Route path='/Intro' exact component={Intro} />\n        <Route path='/Project01' exact component={Project01} />\n        <Route path='/Project02' exact component={Project02} />\n        <Route path='/Project03' exact component={Project03} />\n        <Route path='/Project04' exact component={Project04} />\n      </Switch>\n      {/* <Footer/> */}\n      </ScrollToTop>\n      </Router>\n    </div>\n  );\n}\n\nexport default App;\n","import React from 'react';\nimport ReactDOM from 'react-dom';\n\nimport App from './App';\n\n\nReactDOM.render(\n  <React.StrictMode>\n    <App />\n  </React.StrictMode>,\n  document.getElementById('root')\n);\n\n\n"],"sourceRoot":""}