{"version":3,"sources":["Contexts/DeviceContext.js","Components/AnimatedText.js","Components/EmphasisedText.js","Components/HoverableButton.js","Components/HoverableLink.js","Components/Modal.js","Components/ContactPage.js","Contexts/CursorContext.js","Hooks/useCursorPosition.js","Components/Cursor.js","Info/text.js","Components/HomePageButtons.js","Components/HomePage.js","Components/ProjectContainer.js","Components/ProjectsPage.js","Components/Logo.js","Components/SidebarNavLinks.js","Components/Sidebar.js","Info/CssVariables.js","App.js","Hooks/useDeviceSize.js","index.js"],"names":["DeviceContext","createContext","AnimatedText","children","text","animation","type","split","map","item","i","className","style","animationDelay","EmphasisedText","useState","HoverableButton","hoverHandler","rotate","size","submit","loading","hovered","setHovered","handleHover","e","undefined","onMouseEnter","onMouseLeave","HoverableLink","to","href","target","rel","Modal","setMessageSent","show","setShow","closeModalHandler","onClick","ContactPage","device","useContext","message","setMessage","messageSent","setLoading","isSmall","id","onSubmit","preventDefault","emailjs","sendForm","then","result","reset","error","console","log","htmlFor","name","placeholder","required","value","onChange","CursorContext","CursorProvider","x","y","cursorPosition","setCursorPosition","updatePosition","test","getBoundingClientRect","height","width","focused","clientX","clientY","useEffect","window","addEventListener","removeEventListener","useCursorPosition","Provider","Cursor","position","top","left","aboutText","default","title","paragraph","Who","What","Why","HomePageButtons","handleButtonHover","child","HomePage","hoveredButton","setHoveredButton","setParagraph","setTitle","update","innerText","ProjectContainer","description","tech","reverse","showTech","setShowTech","ProjectsPage","Logo","mode","SidebarNavLinks","Sidebar","setMode","logoMode","setLogoMode","deviceStyles","App","setDevice","handleScreenResize","checkScreenWidth","innerWidth","Object","entries","index","key","document","documentElement","setProperty","useDeviceSize","path","ReactDOM","render","StrictMode","getElementById"],"mappings":"iNAEaA,G,MAAgBC,2B,OCyBdC,EAzBM,SAAC,GAA2B,IAA1BC,EAAyB,EAAzBA,SAEfC,GAFwC,EAAfC,UAElB,CAACF,IACRG,EAAO,GASX,MARsB,iBAAZH,GACNC,EAAOD,EAASI,MAAM,IACtBD,EAAO,eAEPF,EAAO,CAACD,GACRG,EAAO,SAIPF,EAAKI,KAAK,SAACC,EAAMC,GAAP,OACN,sBAEIC,UAAS,wBAAmBL,GAC5BM,MAAO,CAACC,eAAe,GAAD,OAAKH,EAAI,GAAT,MAH1B,SAKSD,GAJAC,OCMNI,EArBQ,SAAC,GAAgB,IAAfX,EAAc,EAAdA,SAErB,EAAoCY,oBAAS,GAA7C,6BAQA,OACI,sBACIJ,UAAS,kBADb,SAKKR,KCcEa,EA9BS,SAAC,GAA6D,IAA5DC,EAA2D,EAA3DA,aAAcC,EAA6C,EAA7CA,OAAQC,EAAqC,EAArCA,KAAMC,EAA+B,EAA/BA,OAAQC,EAAuB,EAAvBA,QAASlB,EAAc,EAAdA,SAEnE,EAAgCY,oBAAS,GAAzC,mBAAQO,EAAR,KAAiBC,EAAjB,KAEA,SAASC,EAAYC,GACH,eAAXA,EAAEnB,MAAuBiB,GAAW,kBAAM,KAC/B,eAAXE,EAAEnB,MAAuBiB,GAAW,kBAAM,KACnB,mBAAhBN,GACNA,EAAaQ,GAMrB,OACI,yBACId,UAAS,mCAA8BW,EAAU,UAAY,GAApD,iBAAmEI,IAATP,EAAqBA,EAAO,IAAtF,OAA2FE,EAAU,YAAc,IAC5HM,aAAcH,EACdI,aAAcJ,EAEdlB,KAAMc,EAAS,SAAW,SAL9B,UAOKjB,GAAsB,GACvB,qBACIQ,UAAS,qCAAgCW,EAAU,UAAY,IAAtD,OAA2DJ,EAAS,UAAY,U,iBCM1FW,EA5BO,SAAC,GAAkC,IAAjC1B,EAAgC,EAAhCA,SAAUc,EAAsB,EAAtBA,aAAca,EAAQ,EAARA,GAE5C,OAAIA,EAGA,cAAC,EAAD,CACIb,aAAcA,EADlB,SAKkB,MAAVa,EAAG,GACC,cAAC,IAAD,CAAMnB,UAAU,iBAAiBmB,GAAIA,EAArC,SACK3B,IAGL,mBACIQ,UAAU,iBACVoB,KAAMD,EACNE,OAAO,SACPC,IAAI,aAJR,SAKS9B,MAlBV,8BCkBJ+B,EAtBD,SAAC,GAAgC,IAA/B/B,EAA8B,EAA9BA,SAAUgC,EAAoB,EAApBA,eAEtB,EAA0BpB,oBAAS,GAAnC,mBAAQqB,EAAR,KAAcC,EAAd,KAEA,SAASC,EAAkBb,GACvBY,GAAQ,GACRF,GAAe,GAGnB,OAAY,IAATC,EAAuB,KAGtB,sBAAKzB,UAAU,QAAf,UACI,sBAAKA,UAAU,OAAf,UACI,wBAAQA,UAAU,cAAc4B,QAASD,EAAzC,gBACCnC,KAEL,qBAAKQ,UAAU,WAAW4B,QAASD,QCwFhCE,EAlGK,WAEhB,IAAQC,EAAWC,qBAAW1C,GAAtByC,OACR,EAAgC1B,mBAAS,IAAzC,mBAAQ4B,EAAR,KAAiBC,EAAjB,KACA,EAAwC7B,oBAAS,GAAjD,mBAAQ8B,EAAR,KAAqBV,EAArB,KACA,EAAgCpB,oBAAS,GAAzC,mBAAQM,EAAR,KAAiByB,EAAjB,KAEMC,EAAqB,UAAXN,GAAiC,gBAAXA,EAqBtC,OACI,0BAASO,GAAG,UAAUrC,UAAU,WAAhC,UACI,6BACI,eAAC,EAAD,sBACaoC,EAAU,uBAAS,GAAG,cAAC,EAAD,yBAGvC,sBACIC,GAAG,kBACHrC,UAAS,eAAUoC,EAAU,MAAQ,MAA5B,YAAqCN,GAFlD,UAII,0BACI9B,UAAS,eAAUoC,EAAU,MAAQ,OADzC,UAGI,cAAC,EAAD,CAAe9B,aAAc,KAAMa,GAAG,+BAAtC,oBAGA,cAAC,EAAD,CAAeb,aAAc,KAAMa,GAAG,yCAAtC,sBAGA,cAAC,EAAD,CAAeb,aAAc,KAAMa,GAAG,oCAAtC,wBAIJ,uBAAMmB,SAvClB,SAAsBxB,GAClBA,EAAEyB,iBACFJ,GAAW,GACXK,IAAQC,SAAS,YAAa,mBAAoB3B,EAAEO,OAAQ,8BACzDqB,MAAK,SAACC,GACHV,GAAW,iBAAK,MAChBnB,EAAEO,OAAOuB,QACTT,GAAW,GACXX,GAAe,MAChB,SAACqB,GACAC,QAAQC,IAAIF,EAAMpD,MAClB0C,GAAW,OA4BqBnC,UAAU,WAAxC,UACI,2BAAUA,UAAU,WAApB,UACI,iCACI,eAAC,EAAD,kBACQ,cAAC,EAAD,iBADR,gBACwD,cAAC,EAAD,uBAI5D,uBAAOgD,QAAQ,UACf,uBACIX,GAAG,aACHrC,UAAW8B,EACXnC,KAAK,QACLsD,KAAK,QACLC,YAAY,QACZC,UAAQ,IAEZ,uBAAOH,QAAQ,YACf,0BACIC,KAAK,UACLZ,GAAG,YACHrC,UAAW8B,EACXoB,YAAY,oBACZE,MAAOpB,EACPqB,SAnExB,SAAsBvC,GAClBmB,GAAW,kBAAKnB,EAAEO,OAAO+B,eAqEXpB,EAAU,cAAC,EAAD,CACRzB,QAAQ,EACRE,SAAQuB,EACRtB,QAASA,EAHD,kBAMS,SAG3BwB,GACE,eAAC,EAAD,CAAOV,eAAgBA,EAAvB,UACI,6BAAI,cAAC,EAAD,4CACJ,sGAAwE,uBAAxE,gCAA0G,uBAAK,cAAC,EAAD,8BCjG5H,IAAM8B,EAAgBhE,0BAEtB,SAASiE,EAAT,GAAqC,IAAZ/D,EAAW,EAAXA,SAE5B,ECLW,WAEX,MAA8CY,mBAAS,CACnDoD,EAAG,KACHC,EAAG,OAFP,mBAAQC,EAAR,KAAwBC,EAAxB,KAKMC,EAAiB,SAAC9C,GACjB,mCAAmC+C,KAAK/C,EAAEO,OAAOrB,WAChD2D,GAAkB,WACd,MAA8B7C,EAAEO,OAAOyC,wBACvC,MAAO,CAACN,EADR,EAAOA,EACIC,EADX,EAAUA,EACIM,OADd,EAAaA,OACSC,MADtB,EAAqBA,MACQC,SAAS,MAG1CN,EAAkB,CAAEH,EAAG1C,EAAEoD,QAAST,EAAG3C,EAAEqD,QAASF,SAAS,KASjE,OALAG,qBAAU,WAEN,OADAC,OAAOC,iBAAiB,YAAaV,GAC9B,kBAAMS,OAAOE,oBAAoB,YAAaX,MACvD,IAEK,CAAEF,EAAgBC,GDlBqBa,GAA9C,mBAAQd,EAAR,KAAwBC,EAAxB,KAEA,OACI,cAACL,EAAcmB,SAAf,CACIrB,MAAO,CAACM,iBAAgBC,qBAD5B,SAGKnE,IEVb,IAmBekF,EAnBA,WAEX,IAAQhB,EAAmB3B,qBAAWuB,GAA9BI,eACFiB,EAAW,CACbC,IAAKlB,EAAeD,EACpBoB,KAAMnB,EAAeF,EACrBO,OAAQL,EAAeK,OACvBC,MAAON,EAAeM,OAG1B,OACI,sBACI3B,GAAG,SACHrC,UAAS,UAAK0D,EAAeO,QAAU,UAAY,QACnDhE,MAAO0E,KCjBNG,EAAY,CACrBC,QAAS,CACLC,MAAO,QACPC,UAAW,4BAEfC,IAAK,CACDF,MAAO,OACPC,UAAW,6GAEfE,KAAM,CACFH,MAAO,QACPC,UAAW,sHAEfG,IAAK,CACDJ,MAAO,OACPC,UAAW,oLCeJI,EA1BS,SAAC,GAAmC,IAAlCC,EAAiC,EAAjCA,kBAAmB9F,EAAc,EAAdA,SACzC,OACI,oBAAI6C,GAAG,eAAerC,UAAU,WAAhC,SAEQR,EAASK,KAAK,SAAC0F,EAAOxF,GAClB,OACI,6BAEQwF,EAAM,GACF,cAAC,EAAD,CAAejF,aAAcgF,EAAmBnE,GAAIoE,EAAM,GAA1D,SACKA,EAAM,KAGX,cAAC,EAAD,CAAiBjF,aAAcgF,EAA/B,SACKC,EAAM,MARdxF,SC4ElByF,EA/EE,WAEb,MAA4CpF,mBAAS,WAArD,mBAAQqF,EAAR,KAAuBC,EAAvB,KACA,EAAoCtF,mBAAS,IAA7C,mBAAQ6E,EAAR,KAAmBU,EAAnB,KACA,EAA4BvF,mBAAS,IAArC,mBAAQ4E,EAAR,KAAeY,EAAf,KACQ9D,EAAWC,qBAAW1C,GAAtByC,OAyBR,OAvBAsC,qBAAU,WACN,IAAIyB,EAAS,GACyB,iBAA5Bf,EAAUW,KAA4BI,EAASf,EAAUW,IAC7B,iBAA5BX,EAAUW,KAA4BI,EAASf,EAAS,SAClEa,GAAa,WACT,MAAc,UAAX7D,GAAiC,gBAAXA,EACdgD,EAAUI,IAAID,UAElBY,EAAOZ,aAElBW,GAAS,kBAAKC,EAAOb,WACvB,CAACS,EAAe3D,IAad,0BAASO,GAAG,OAAOrC,UAAS,mBAAc8B,GAA1C,UACI,oBAAIO,GAAG,aAAarC,UAAS,UAAK8B,GAAlC,SACI,eAAC,EAAD,WACI,wCAGA,uBACA,cAAC,EAAD,UACI,cAAC,EAAD,UACKkD,YAMD,WAAXlD,GAAkC,UAAXA,IACpB,cAAC,EAAD,CAAiBwD,kBA3BjC,SAA4BxE,GACxB6E,GAAa,iBAAK,MAClBC,GAAS,iBAAK,MACA,eAAX9E,EAAEnB,KAIL+F,GAAiB,iBAAK,aAHlBA,GAAiB,kBAAK5E,EAAEO,OAAOyE,cAuBvB,SAEQ,CACI,CAAC,MAAO,aACR,CAAC,MAAO,YACR,CAAC,OAAQ,gBAM7B,mBAAG9F,UAAS,UAAK8B,EAAL,YAAe2D,EAAf,YAAZ,SACI,cAAC,EAAD,UACKR,OAIO,UAAXnD,GAAiC,gBAAXA,IACnB,cAAC,EAAD,UAEQ,CACI,CAAC,WAAY,aACb,CAAC,UAAW,mBCH7BiE,EAlEU,SAAC,GAA6C,IAA5Cf,EAA2C,EAA3CA,MAAOgB,EAAoC,EAApCA,YAAaC,EAAuB,EAAvBA,KAAM9E,EAAiB,EAAjBA,GAAI+E,EAAa,EAAbA,QAE7CpE,EAAWC,qBAAW1C,GAAtByC,OACR,EAAkC1B,oBAAS,GAA3C,mBAAQ+F,EAAR,KAAkBC,EAAlB,KACA,EAAoChG,mBAAS,IAA7C,mBAAQ6E,EAAR,KAAmBU,EAAnB,KAEMvD,EAAqB,UAAXN,GAAiC,gBAAXA,EAetC,OAbAsC,qBAAU,WACNuB,GAAa,WACT,OAAOQ,EAAWF,EAAOD,OAE/B,CAACG,IAUC,sBAAKnG,UAAS,oCAA+BkG,EAAU,WAAa,UAAtD,YAAmEpE,GAAjF,UACI,oBAAI9B,UAAS,uBAAkBkG,EAAU,WAAa,WAAtD,SACI,mBACIlG,UAAS,mBAAc8B,GACvBV,KAAMD,GAAM,IACZE,OAAO,SACPC,IAAI,aAJR,SAMI,cAAC,EAAD,UACK0D,QAIb,sBAAKhF,UAAS,+BAA0BkG,EAAU,WAAa,UAAjD,YAA8DpE,GAA5E,UACI,oBAAG9B,UAAW8B,EAAd,UACI,cAAC,EAAD,UACKkD,IAEL,+BACI,cAAC,EAAD,UACKC,SAKT7C,EACI,mBAAGpC,UAAW8B,EAAd,SACI,+BACI,cAAC,EAAD,UACKmE,QAKb,cAAC,EAAD,CAAezF,KAAK,QAAQF,aAzChD,SAAyBQ,GACrB6E,GAAa,iBAAK,MACJ,eAAX7E,EAAEnB,MAAuByG,GAAY,kBAAI,KAC9B,eAAXtF,EAAEnB,MAAuByG,GAAY,kBAAI,MAsC+BjF,GAAIA,EAA/D,yBC/BTkF,EA3BM,WACjB,OACI,0BAAShE,GAAG,WAAWrC,UAAU,WAAjC,UACI,6BACI,eAAC,EAAD,iBACO,cAAC,EAAD,6BAIX,cAAC,EAAD,CACIgF,MAAM,SACNgB,YAAY,iDACZC,KAAK,2FACL9E,GAAG,wBAGP,cAAC,EAAD,CACI6D,MAAM,WACNgB,YAAY,oDACZC,KAAK,kDACLC,SAAS,EACT/E,GAAG,sCCtBJmF,EAFF,SAAC,GAAD,IAAEC,EAAF,EAAEA,KAAF,OAAY,qBAAKvG,UAAS,oBAAmBe,IAATwF,EAAqBA,EAAO,OCgC9DC,EA9BS,WACpB,OACI,8BACI,qBAAIxG,UAAU,WAAd,UACI,6BACI,cAAC,IAAD,CAAMmB,GAAG,IAAT,SACI,cAAC,EAAD,uBAKR,6BACI,cAAC,IAAD,CAAMA,GAAG,YAAT,SACI,cAAC,EAAD,uBAKR,6BACI,cAAC,IAAD,CAAMA,GAAG,WAAT,SACI,cAAC,EAAD,gCCqBTsF,EAtCC,WAEZ,MAA0BrG,mBAAS,IAAnC,mBAAQmG,EAAR,KAAcG,EAAd,KACA,EAAiCtG,mBAAS,IAA1C,mBAAQuG,EAAR,KAAkBC,EAAlB,KACQ9E,EAAWC,qBAAW1C,GAAtByC,OAaR,OAXAsC,qBAAU,WACQ,UAAXtC,GAAiC,WAAXA,GAAqB4E,GAAQ,iBAAK,YAC7C,UAAX5E,GAAiC,gBAAXA,GAA0B4E,GAAQ,iBAAK,QACjE,CAAC5E,IASA,sBACIO,GAAG,UACHrC,UAAS,mBAAcuG,EAAd,YAAsBzE,GAFnC,UAII,cAAC,EAAD,CACIvB,QAAQ,EACRC,KAAM,QACNF,aAdZ,SAA2BQ,GACvB8F,GAAY,WACR,MAAkB,eAAX9F,EAAEnB,KAAwB,SAAW,OAS5C,SAKI,cAAC,IAAD,CAAMK,UAAU,iBAAiBmB,GAAG,IAApC,SACI,cAAC,EAAD,CAAMoF,KAAMI,QAIX,WAATJ,GAAqB,cAAC,EAAD,QCvCpBM,EAAe,CACxB,cAAe,CACX,kBAAmB,OACnB,kBAAmB,OACnB,qBAAsB,OACtB,0BAA2B,OAC3B,eAAgB,OAEpB,MAAS,CACL,kBAAmB,OACnB,kBAAmB,OACnB,qBAAsB,OACtB,0BAA2B,OAC3B,eAAgB,OAEpB,OAAU,CACN,kBAAmB,OACnB,kBAAmB,OACnB,qBAAsB,QACtB,0BAA2B,OAC3B,eAAgB,OAEpB,MAAS,CACL,kBAAmB,OACnB,kBAAmB,OACnB,qBAAsB,QACtB,0BAA2B,OAC3B,eAAgB,MC4BTC,MA1Cf,WAEE,MAAkC1G,oBAAS,GAA3C,mBACA,GADA,UCZa,WAGX,MAA8BA,mBAAS,SAAvC,mBAAQ0B,EAAR,KAAgBiF,EAAhB,KAEMC,EAAqB,SAAClG,GACxBiG,GAAU,WACN,OAAOE,QAITA,EAAmB,WACrB,IAAIzG,EAAO,QAKX,OAJI6D,OAAO6C,WAAa,MAAM1G,EAAO,eACjC6D,OAAO6C,YAAc,MAAM1G,EAAO,SAClC6D,OAAO6C,YAAc,MAAM1G,EAAO,UAClC6D,OAAO6C,YAAc,MAAM1G,EAAO,SAC/BA,GAkBX,OAfA4D,qBAAU,WACN2C,EAAUE,KACZ,IAEF7C,qBAAU,WAEN,OADAC,OAAOC,iBAAiB,SAAU0C,GAC3B,kBAAM3C,OAAOE,oBAAoB,SAAUyC,MACpD,IAEF5C,qBAAU,WACN+C,OAAOC,QAAQP,EAAa/E,IAASjC,KAAK,WAAewH,GAAU,IAAD,mBAAtBC,EAAsB,KAAjBlE,EAAiB,KAC9DmE,SAASC,gBAAgBvH,MAAMwH,YAAYH,EAAKlE,QAEtD,CAACtB,IAEI,CAAEA,EAAQiF,GDtBAW,IAAX5F,EAAR,oBAUA,OACE,cAAC,IAAD,UAEE,cAACzC,EAAcoF,SAAf,CAAwBrB,MAAO,CAAEtB,UAAjC,SACE,cAACyB,EAAD,UACE,sBAAKvD,UAAS,uBAAkB8B,GAAhC,UACE,cAAC,EAAD,IACA,sBAAM9B,UAAS,UAAK8B,GAApB,SACE,eAAC,IAAD,WACE,cAAC,IAAD,CAAO6F,KAAK,YAAZ,SACE,cAAC,EAAD,MAEF,cAAC,IAAD,CAAOA,KAAK,WAAZ,SACE,cAAC,EAAD,MAEF,cAAC,IAAD,CAAOA,KAAK,IAAZ,SACE,cAAC,EAAD,WAIN,wBAAQ3H,UAAU,WAAlB,yDACa,WAAX8B,GAAkC,UAAXA,IAAuB,cAAC,EAAD,cE3C5D8F,IAASC,OACP,cAAC,IAAMC,WAAP,UACE,cAAC,EAAD,MAEFP,SAASQ,eAAe,W","file":"static/js/main.9d10a19e.chunk.js","sourcesContent":["import { createContext } from \"react\";\r\n\r\nexport const DeviceContext = createContext();\r\n","import React from 'react'\r\n\r\nconst AnimatedText = ({children, animation}) => {\r\n\r\n    let text = [children];\r\n    let type = '';\r\n    if(typeof children == 'string') {\r\n        text = children.split('');\r\n        type = 'characters';\r\n    } else {\r\n        text = [children];\r\n        type = 'words';\r\n    }\r\n\r\n    return (\r\n        text.map( (item, i) => (\r\n            <span \r\n                key={i} \r\n                className={`animated-text ${type}`}\r\n                style={{animationDelay: `${i / 69}s`}}\r\n            >\r\n                    {item}\r\n            </span>\r\n        ))\r\n    )\r\n}\r\n\r\nexport default AnimatedText\r\n","import React, { useState } from 'react'\r\n\r\nconst EmphasisedText = ({children}) => {\r\n\r\n    const [ isHovered, setIsHovered ] = useState(false);\r\n\r\n    function handleHover(e) {\r\n        //add when hover animations are wanted\r\n        // if(e.type === 'mouseenter') setIsHovered(()=> true);\r\n        // if(e.type === 'mouseleave') setIsHovered(()=> false);\r\n    }\r\n\r\n    return (\r\n        <span \r\n            className={`emphasised-text`}\r\n            // onMouseEnter={handleHover}\r\n            // onMouseLeave={handleHover}\r\n        >\r\n            {children}\r\n        </span>\r\n    )\r\n}\r\n\r\nexport default EmphasisedText\r\n","import React, { useState } from 'react'\r\n\r\nconst HoverableButton = ({hoverHandler, rotate, size, submit, loading ,children}) => {\r\n\r\n    const [ hovered, setHovered ] = useState(false);\r\n    \r\n    function handleHover(e) {\r\n        if(e.type === 'mouseleave') setHovered(() => false);\r\n        if(e.type === 'mouseenter') setHovered(() => true);\r\n        if(typeof hoverHandler == 'function'){\r\n            hoverHandler(e);\r\n        } else {\r\n            return\r\n        }\r\n    }\r\n \r\n    return (\r\n        <button \r\n            className={`hoverable-button flex-row${hovered ? ' active' : ''} ${size !== undefined ? size : ''}${loading ? ' disabled' : ''}`}\r\n            onMouseEnter={handleHover} \r\n            onMouseLeave={handleHover}\r\n            // onClick={handleClick}\r\n            type={submit ? 'submit' : 'button'}\r\n        >\r\n            {children ? children : ''}\r\n            <div \r\n                className={`hoverable-button-decoration${hovered ? ' active' : ''}${rotate ? ' rotate' : ''}`} \r\n            />\r\n        </button>\r\n    )\r\n}\r\n\r\nexport default HoverableButton\r\n","import React from 'react'\r\nimport { Link } from 'react-router-dom'\r\nimport HoverableButton from './HoverableButton'\r\n\r\nconst HoverableLink = ({children, hoverHandler, to}) => {\r\n\r\n    if(!to) return <></>;\r\n\r\n    return (\r\n        <HoverableButton \r\n            hoverHandler={hoverHandler} \r\n            // rotate={true}\r\n        >\r\n            {\r\n                to[0] === '/' ? (\r\n                    <Link className='hoverable-link' to={to}>\r\n                        {children}\r\n                    </Link>\r\n                ) : (\r\n                    <a \r\n                        className='hoverable-link' \r\n                        href={to} \r\n                        target=\"_blank\" \r\n                        rel=\"noreferrer\">\r\n                            {children}\r\n                    </a>\r\n                )\r\n            }\r\n        </HoverableButton>\r\n    )\r\n}\r\n\r\nexport default HoverableLink\r\n","import React, { useState } from 'react'\r\n\r\nconst Modal = ({children, setMessageSent}) => {\r\n\r\n    const [ show, setShow ] = useState(true);\r\n    \r\n    function closeModalHandler(e){\r\n        setShow(false);\r\n        setMessageSent(false);\r\n    }\r\n\r\n    if(show === false) return null;\r\n\r\n    return (\r\n        <div className=\"modal\">\r\n            <div className=\"card\">\r\n                <button className=\"modal-close\" onClick={closeModalHandler}>Oi</button>\r\n                {children}\r\n            </div>\r\n            <div className=\"modal-bg\" onClick={closeModalHandler} />\r\n        </div>\r\n    )\r\n}\r\n\r\nexport default Modal\r\n","import React, { useContext, useState } from 'react'\r\nimport { DeviceContext } from '../Contexts/DeviceContext'\r\nimport AnimatedText from './AnimatedText';\r\nimport EmphasisedText from './EmphasisedText';\r\nimport HoverableButton from './HoverableButton'\r\nimport emailjs from 'emailjs-com';\r\nimport HoverableLink from './HoverableLink';\r\nimport Modal from './Modal';\r\n\r\nconst ContactPage = () => {\r\n\r\n    const { device } = useContext(DeviceContext);\r\n    const [ message, setMessage ] = useState('');\r\n    const [ messageSent, setMessageSent ] = useState(false);\r\n    const [ loading, setLoading ] = useState(false);\r\n    \r\n    const isSmall = device === 'small' || device === 'extra-small';\r\n\r\n    function handleChange(e) {\r\n        setMessage(()=> e.target.value);\r\n    }\r\n\r\n    function handleSubmit(e) { \r\n        e.preventDefault();\r\n        setLoading(true);\r\n        emailjs.sendForm('Portfolio', 'template_ub61guv', e.target, 'user_ZPuvXMoI1Hz8sQ2oJcxyF')\r\n          .then((result) => {\r\n              setMessage(()=> '');\r\n              e.target.reset();\r\n              setLoading(false);\r\n              setMessageSent(true);\r\n          }, (error) => {\r\n              console.log(error.text);\r\n              setLoading(false);\r\n          });\r\n    }\r\n\r\n    return (\r\n        <section id=\"contact\" className=\"flex-col\">\r\n            <h2>\r\n                <AnimatedText>\r\n                    Keep in {isSmall ? <br /> : ''}<EmphasisedText>touch</EmphasisedText>\r\n                </AnimatedText>\r\n            </h2>\r\n            <div \r\n                id=\"contact-options\"\r\n                className={`flex-${isSmall ? 'col' : 'row'} ${device}`}\r\n            >\r\n                <address \r\n                    className={`flex-${isSmall ? 'row' : 'col'}`}\r\n                >\r\n                    <HoverableLink hoverHandler={null} to='https://github.com/Shemicalx'>\r\n                        GitHub\r\n                    </HoverableLink>\r\n                    <HoverableLink hoverHandler={null} to='https://www.linkedin.com/in/noamshemi/'>\r\n                        LinkedIn\r\n                    </HoverableLink>\r\n                    <HoverableLink hoverHandler={null} to='https://www.buzzsprout.com/937528'>\r\n                        Podcast\r\n                    </HoverableLink>\r\n                </address>\r\n                <form onSubmit={handleSubmit} className=\"flex-row\">\r\n                    <fieldset className=\"flex-col\">\r\n                        <legend>\r\n                            <AnimatedText>\r\n                                Let <EmphasisedText>me</EmphasisedText> get back to <EmphasisedText>you</EmphasisedText>\r\n                            </AnimatedText>\r\n                        </legend>\r\n                        \r\n                        <label htmlFor=\"email\" />\r\n                        <input \r\n                            id=\"emailInput\" \r\n                            className={device} \r\n                            type=\"email\" \r\n                            name=\"email\" \r\n                            placeholder=\"Email\" \r\n                            required \r\n                        />\r\n                        <label htmlFor=\"message\" />\r\n                        <textarea\r\n                            name=\"message\" \r\n                            id=\"mailInput\" \r\n                            className={device} \r\n                            placeholder=\"Tell me anything!\" \r\n                            value={message}\r\n                            onChange={handleChange}\r\n                        />\r\n                    </fieldset>\r\n                    { message ? <HoverableButton \r\n                        rotate={true} \r\n                        submit={message ? true : false }\r\n                        loading={loading}\r\n                    >\r\n                        Send\r\n                    </HoverableButton> : \"\" }\r\n                </form>\r\n            </div>\r\n            { messageSent && (\r\n                <Modal setMessageSent={setMessageSent}>\r\n                    <h2><EmphasisedText>Your message has been sent!</EmphasisedText></h2>\r\n                    <p>I appreciate you contacting me and I will respond as soon as possible<br/>Thank you for thinking of me,<br/><EmphasisedText>Noam.</EmphasisedText></p>\r\n                </Modal>\r\n            )}\r\n        </section>\r\n    )\r\n}\r\n\r\nexport default ContactPage\r\n","import { createContext } from \"react\";\r\nimport useCursorPosition from \"../Hooks/useCursorPosition\";\r\n\r\nexport const CursorContext = createContext();\r\n\r\nexport function CursorProvider({children}) {\r\n\r\n    const [ cursorPosition, setCursorPosition ] = useCursorPosition();\r\n\r\n    return (\r\n        <CursorContext.Provider \r\n            value={{cursorPosition, setCursorPosition}}\r\n        >\r\n            {children}\r\n        </CursorContext.Provider>\r\n    )\r\n};","import { useEffect, useState } from \"react\";\r\n\r\nexport default function useCursorPosition () {\r\n    \r\n    const [ cursorPosition, setCursorPosition ] = useState({ \r\n        x: null, \r\n        y: null\r\n    });\r\n\r\n    const updatePosition = (e) => {\r\n        if(/hoverable-button |hoverable-link/.test(e.target.className)){\r\n            setCursorPosition(()=> {\r\n                const {x, y, height, width} = e.target.getBoundingClientRect();\r\n                return {x, y, height, width, focused: true};\r\n            });\r\n        } else {\r\n            setCursorPosition({ x: e.clientX, y: e.clientY, focused: false});  \r\n        }\r\n    };\r\n    \r\n    useEffect(()=>{\r\n        window.addEventListener(\"mousemove\", updatePosition);\r\n        return () => window.removeEventListener(\"mousemove\", updatePosition);\r\n    },[]);\r\n\r\n    return [ cursorPosition, setCursorPosition ];\r\n}","import React, { useContext } from 'react'\r\nimport { CursorContext } from '../Contexts/CursorContext'\r\n\r\nconst Cursor = () => {\r\n\r\n    const { cursorPosition } = useContext(CursorContext);\r\n    const position = {\r\n        top: cursorPosition.y,\r\n        left: cursorPosition.x,\r\n        height: cursorPosition.height,\r\n        width: cursorPosition.width,\r\n    }\r\n\r\n    return (\r\n        <span \r\n            id=\"cursor\" \r\n            className={`${cursorPosition.focused ? 'focused' : 'free'}`} \r\n            style={position} \r\n        />\r\n    )\r\n}\r\n\r\nexport default Cursor\r\n","export const aboutText = {\r\n    default: {\r\n        title: 'Shemi',\r\n        paragraph: 'I make things that work.',\r\n    },\r\n    Who: {\r\n        title: 'Who?',\r\n        paragraph: 'Hi there! I am Noam Shemi. I am a web developer, UX designer, content creator and an omelette enthusiast.'\r\n    },\r\n    What: {\r\n        title: 'What?',\r\n        paragraph: 'Let me show you some of my work! Click on the button you\\'re hovering over to see a couple of my favorite projects.'\r\n    },\r\n    Why: {\r\n        title: 'Why?',\r\n        paragraph: 'I am extremely passionate about solving problems and thinking outside the box. I do so by creating tools that work for me. My attraction to coding derives from the same place.'\r\n    }\r\n};","import React from 'react'\r\nimport HoverableButton from './HoverableButton'\r\nimport HoverableLink from './HoverableLink'\r\n\r\nconst HomePageButtons = ({handleButtonHover, children}) => {\r\n    return (\r\n        <ul id=\"home-buttons\" className=\"flex-row\">\r\n            {\r\n                children.map( (child, i) => {\r\n                    return (\r\n                        <li key={i}>\r\n                            {\r\n                                child[1] ? (\r\n                                    <HoverableLink hoverHandler={handleButtonHover} to={child[1]}>\r\n                                        {child[0]}\r\n                                    </HoverableLink>\r\n                                ) : (\r\n                                    <HoverableButton hoverHandler={handleButtonHover}>\r\n                                        {child[0]}\r\n                                    </HoverableButton>\r\n                                )\r\n                            }\r\n                        </li>\r\n                    )\r\n                })\r\n            }\r\n        </ul>\r\n    )\r\n}\r\n\r\nexport default HomePageButtons\r\n","import React, { useContext, useEffect, useState } from 'react'\r\nimport AnimatedText from './AnimatedText'\r\nimport EmphasisedText from './EmphasisedText';\r\nimport { aboutText } from '../Info/text'\r\nimport { DeviceContext } from '../Contexts/DeviceContext';\r\nimport HomePageButtons from './HomePageButtons';\r\n\r\nconst HomePage = () => {\r\n\r\n    const [ hoveredButton, setHoveredButton ] = useState('default')\r\n    const [ paragraph, setParagraph ] = useState('');\r\n    const [ title, setTitle ] = useState('');\r\n    const { device } = useContext(DeviceContext);\r\n\r\n    useEffect(()=> {\r\n        let update = {};\r\n        if(typeof aboutText[hoveredButton] == 'object') update = aboutText[hoveredButton];\r\n        if(typeof aboutText[hoveredButton] != 'object') update = aboutText['default'];\r\n        setParagraph(()=> {\r\n            if(device === 'small' || device === 'extra-small'){\r\n                return aboutText.Who.paragraph\r\n            }\r\n            return update.paragraph\r\n        })\r\n        setTitle(()=> update.title)\r\n    },[hoveredButton, device]);\r\n    \r\n    function handleButtonHover (e) {\r\n        setParagraph(()=> '');\r\n        setTitle(()=> '');\r\n        if(e.type === 'mouseenter') {\r\n            setHoveredButton(()=> e.target.innerText);\r\n            return;\r\n        };\r\n        setHoveredButton(()=> 'default');\r\n    };\r\n\r\n    return (\r\n        <section id=\"home\" className={`flex-col ${device}`}>\r\n            <h1 id=\"home-title\" className={`${device}`}>\r\n                <AnimatedText>\r\n                    <span>\r\n                        Noam \r\n                    </span>\r\n                    <br/>\r\n                    <EmphasisedText>\r\n                        <AnimatedText>\r\n                            {title}\r\n                        </AnimatedText>\r\n                    </EmphasisedText>\r\n                </AnimatedText>\r\n            </h1>\r\n            {\r\n                (device === 'medium' || device === 'large') && (\r\n                    <HomePageButtons handleButtonHover={handleButtonHover}>\r\n                        {\r\n                            [\r\n                                ['Who', '/projects'],\r\n                                ['Why', '/contact'],\r\n                                ['What', '/projects'],\r\n                            ]\r\n                        }\r\n                    </HomePageButtons>\r\n                ) \r\n            }\r\n            <p className={`${device} ${hoveredButton}-display`}>\r\n                <AnimatedText>\r\n                    {paragraph}\r\n                </AnimatedText>\r\n            </p>\r\n            {\r\n                (device === 'small' || device === 'extra-small') && (\r\n                    <HomePageButtons>\r\n                        {\r\n                            [\r\n                                ['Projects', '/projects'],\r\n                                ['Contact', '/contact'],\r\n                            ]\r\n                        }\r\n                    </HomePageButtons>\r\n                )\r\n            }\r\n        </section>\r\n    )\r\n}\r\n\r\nexport default HomePage\r\n","import React, { useContext, useEffect, useState } from 'react'\r\nimport { DeviceContext } from '../Contexts/DeviceContext'\r\nimport AnimatedText from './AnimatedText'\r\nimport EmphasisedText from './EmphasisedText'\r\nimport HoverableButton from './HoverableButton'\r\nimport HoverableLink from './HoverableLink'\r\n\r\nconst ProjectContainer = ({title, description, tech, to, reverse}) => {\r\n\r\n    const { device } = useContext(DeviceContext);\r\n    const [ showTech, setShowTech ] = useState(false);\r\n    const [ paragraph, setParagraph ] = useState('');\r\n\r\n    const isSmall = device === 'small' || device === 'extra-small';\r\n\r\n    useEffect(()=> {\r\n        setParagraph(()=>{\r\n            return showTech ? tech : description\r\n        })\r\n    },[showTech]);\r\n\r\n    //need to add tech feature\r\n    function handleTechHover(e) {\r\n        setParagraph(()=> '')\r\n        if(e.type === 'mouseenter') setShowTech(()=>true);\r\n        if(e.type === 'mouseleave') setShowTech(()=>false);\r\n    }\r\n\r\n    return (\r\n        <div className={`project-container flex-row${reverse ? ' reverse' : ' normal'} ${device}`}>\r\n            <h3 className={`project-title${reverse ? ' reverse' : ' normal'}`}>\r\n                <a \r\n                    className={`flex-row ${device}`}\r\n                    href={to || '#'} \r\n                    target='_blank' \r\n                    rel=\"noreferrer\" \r\n                >\r\n                    <AnimatedText>\r\n                        {title}\r\n                    </AnimatedText>\r\n                </a>\r\n            </h3>\r\n            <div className={`project-info flex-row${reverse ? ' reverse' : ' normal'} ${device}`}>\r\n                <p className={device}>\r\n                    <EmphasisedText>\r\n                        {title}\r\n                    </EmphasisedText>\r\n                    <span>\r\n                        <AnimatedText>\r\n                            {paragraph}\r\n                        </AnimatedText>\r\n                    </span>\r\n                </p>\r\n                {\r\n                    isSmall ? (\r\n                        <p className={device}>\r\n                            <span>\r\n                                <AnimatedText>\r\n                                    {tech}\r\n                                </AnimatedText>\r\n                            </span>\r\n                        </p>\r\n                    ) : (\r\n                        <HoverableLink size=\"small\" hoverHandler={handleTechHover} to={to}>\r\n                            Tech\r\n                        </HoverableLink>\r\n                    )\r\n                }\r\n            </div>\r\n        </div>\r\n    )\r\n}\r\n\r\nexport default ProjectContainer\r\n","import React from 'react'\r\nimport AnimatedText from './AnimatedText'\r\nimport EmphasisedText from './EmphasisedText'\r\nimport ProjectContainer from './ProjectContainer'\r\n\r\nconst ProjectsPage = () => {\r\n    return (\r\n        <section id=\"projects\" className=\"flex-col\">\r\n            <h2>\r\n                <AnimatedText>\r\n                    My <EmphasisedText>Portfolio</EmphasisedText>\r\n                </AnimatedText>\r\n            </h2>\r\n\r\n            <ProjectContainer \r\n                title='Memopa'\r\n                description=\"A memory-mapping and mnemonic converting SaaS.\"\r\n                tech=\"HTML, CSS, SASS, JavaScript, React | Hooks | Context API, Express.js, MongoDB, Firebase.\"\r\n                to=\"https://memopa.com/\"\r\n            />\r\n\r\n            <ProjectContainer\r\n                title=\"Typogrid\"\r\n                description=\"A font finding and customizing tool for creators.\"\r\n                tech=\"HTML, CSS, JavaScript, React, Google-Fonts API.\"\r\n                reverse={true}\r\n                to=\"https://typogrid.netlify.app/\"\r\n            />\r\n        </section>\r\n    )\r\n}\r\n\r\nexport default ProjectsPage\r\n","import React from 'react'\r\n\r\nconst Logo = ({mode}) => <div className={`logo ${mode !== undefined ? mode : ''}`} />;\r\n\r\nexport default Logo\r\n","import React from 'react'\r\nimport { Link } from 'react-router-dom'\r\nimport EmphasisedText from './EmphasisedText'\r\n\r\nconst SidebarNavLinks = () => {\r\n    return (\r\n        <nav>\r\n            <ul className=\"flex-col\">\r\n                <li>\r\n                    <Link to=\"/\">\r\n                        <EmphasisedText>\r\n                            Home\r\n                        </EmphasisedText>\r\n                    </Link>\r\n                </li>\r\n                <li>\r\n                    <Link to=\"/projects\">\r\n                        <EmphasisedText>\r\n                            Work\r\n                        </EmphasisedText>\r\n                    </Link>\r\n                </li>\r\n                <li>\r\n                    <Link to=\"/contact\">\r\n                        <EmphasisedText>\r\n                            Contact\r\n                        </EmphasisedText>\r\n                    </Link>\r\n                </li>\r\n            </ul>\r\n        </nav>\r\n    )\r\n}\r\n\r\nexport default SidebarNavLinks\r\n","import React, { useContext, useEffect, useState } from 'react'\r\nimport { Link } from 'react-router-dom';\r\nimport { DeviceContext } from '../Contexts/DeviceContext';\r\nimport HoverableButton from './HoverableButton';\r\nimport Logo from './Logo';\r\nimport SidebarNavLinks from './SidebarNavLinks';\r\n\r\nconst Sidebar = () => {\r\n\r\n    const [ mode, setMode ] = useState('');\r\n    const [ logoMode, setLogoMode] = useState('');\r\n    const { device } = useContext(DeviceContext);\r\n\r\n    useEffect(()=> {\r\n        if(device === 'large' || device === 'medium') setMode(()=> 'active');\r\n        if(device === 'small' || device === 'extra-small') setMode(()=> '');\r\n    }, [device])\r\n\r\n    function logoHoverHandler (e) {\r\n        setLogoMode(() => {\r\n            return e.type === 'mouseenter' ? 'active' : ''\r\n        })\r\n    }\r\n\r\n    return (\r\n        <div \r\n            id=\"sidebar\" \r\n            className={`flex-col ${mode} ${device}`}\r\n        >\r\n            <HoverableButton \r\n                rotate={true} \r\n                size={'small'}\r\n                hoverHandler={logoHoverHandler}\r\n            >\r\n                <Link className='hoverable-link' to='/'>\r\n                    <Logo mode={logoMode} />\r\n                </Link>\r\n            </HoverableButton>\r\n        {\r\n            mode === 'active' && <SidebarNavLinks />\r\n        }\r\n        </div>\r\n    )\r\n}\r\n\r\nexport default Sidebar\r\n","export const deviceStyles = {\r\n    'extra-small': {\r\n        '--sidebar-width': '3rem',\r\n        '--footer-height': '1rem',\r\n        '--main-header-size': '4rem',\r\n        '--hoverable-button-size': '4rem',\r\n        '--logo-scale': '0.6',\r\n    },\r\n    'small': {\r\n        '--sidebar-width': '3rem',\r\n        '--footer-height': '2rem',\r\n        '--main-header-size': '7rem',\r\n        '--hoverable-button-size': '4rem',\r\n        '--logo-scale': '0.7',\r\n    },\r\n    'medium': {\r\n        '--sidebar-width': '7rem',\r\n        '--footer-height': '2rem',\r\n        '--main-header-size': '10rem',\r\n        '--hoverable-button-size': '5rem',\r\n        '--logo-scale': '0.8',\r\n    },\r\n    'large': {\r\n        '--sidebar-width': '8rem',\r\n        '--footer-height': '3rem',\r\n        '--main-header-size': '10rem',\r\n        '--hoverable-button-size': '6rem',\r\n        '--logo-scale': '1',\r\n    },\r\n};","import { useState } from 'react';\r\nimport { BrowserRouter as Router, Route, Switch} from 'react-router-dom'\r\nimport './App.css';\r\nimport ContactPage from './Components/ContactPage';\r\nimport Cursor from './Components/Cursor';\r\nimport HomePage from './Components/HomePage';\r\nimport ProjectsPage from './Components/ProjectsPage';\r\nimport Sidebar from './Components/Sidebar';\r\nimport TutorialOverlay from './Components/TutorialOverlay';\r\nimport { CursorProvider } from './Contexts/CursorContext';\r\nimport { DeviceContext } from './Contexts/DeviceContext';\r\nimport useDeviceSize from './Hooks/useDeviceSize';\r\n\r\nfunction App() {\r\n\r\n  const [ tutorial, setTutorial ] = useState(true);\r\n  const [ device ] = useDeviceSize();\r\n\r\n  //run tutorial on first load\r\n  // if(tutorial && (device === 'medium' || device === 'large') && window.location.href === window.location.origin + '/') return (\r\n  //   <CursorProvider>\r\n  //     <TutorialOverlay setTutorial={setTutorial} />\r\n  //     <Cursor />\r\n  //   </CursorProvider>\r\n  // ) \r\n\r\n  return (\r\n    <Router>\r\n      {/* need to figure out updates to cursor position */}\r\n      <DeviceContext.Provider value={{ device }}>\r\n        <CursorProvider>\r\n          <div className={`app flex-col ${device}`}>\r\n            <Sidebar />\r\n            <main className={`${device}`}>\r\n              <Switch>\r\n                <Route path=\"/projects\">\r\n                  <ProjectsPage />\r\n                </Route>\r\n                <Route path=\"/contact\">\r\n                  <ContactPage />\r\n                </Route>\r\n                <Route path=\"/\">\r\n                  <HomePage />          \r\n                </Route>\r\n              </Switch>\r\n            </main>\r\n            <footer className=\"flex-row\">© 2021 Noam Shemi. All Rights Reserved.</footer>\r\n            {(device === 'medium' || device === 'large') && <Cursor />}\r\n          </div>\r\n        </CursorProvider>\r\n      </DeviceContext.Provider>\r\n    </Router>\r\n  );\r\n}\r\n\r\nexport default App;\r\n","import { useEffect, useState } from \"react\";\r\nimport { deviceStyles } from '../Info/CssVariables';\r\n\r\nexport default function useDeviceSize() {\r\n\r\n    // small / medium / large\r\n    const [ device, setDevice ] = useState('small');\r\n\r\n    const handleScreenResize = (e) => {\r\n        setDevice(() => {\r\n            return checkScreenWidth();\r\n        });\r\n    };\r\n\r\n    const checkScreenWidth = () => {\r\n        let size = 'small';\r\n        if( window.innerWidth < 420 ) size = 'extra-small';\r\n        if( window.innerWidth >= 500 ) size = 'small';\r\n        if( window.innerWidth >= 600 ) size = 'medium';\r\n        if( window.innerWidth >= 830 ) size = 'large';\r\n        return size;\r\n    };\r\n\r\n    useEffect(()=> {\r\n        setDevice(checkScreenWidth);\r\n    },[])\r\n\r\n    useEffect(()=> {\r\n        window.addEventListener('resize', handleScreenResize);\r\n        return () => window.removeEventListener('resize', handleScreenResize);\r\n    },[]);\r\n\r\n    useEffect(()=> {\r\n        Object.entries(deviceStyles[device]).map (([key, value], index)=> {\r\n            document.documentElement.style.setProperty(key, value);\r\n        });\r\n    },[device]);\r\n\r\n    return [ device, setDevice ];\r\n\r\n}","import React from 'react';\r\nimport ReactDOM from 'react-dom';\r\nimport App from './App';\r\n\r\nReactDOM.render(\r\n  <React.StrictMode>\r\n    <App />\r\n  </React.StrictMode>,\r\n  document.getElementById('root')\r\n);"],"sourceRoot":""}