{"version":3,"file":"static/js/4655.334d1687.chunk.js","mappings":"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","sources":["components/Typography/index.js","constants/colors.js","constants/contexts.js","constants/media-queries.js","pages/MainPage/styles.js","pages/MainPage/index.js","../node_modules/headx/src/Headx.jsx"],"sourcesContent":["import styled from 'styled-components';\nimport mq from 'constants/media-queries';\n\n// List of Typography components with font-sizes for different breakpoints\nexport const StyledH1 = styled.h1`\n  font-family: \"Acme\", san-serif;\n  font-display: swap;\n  font-size: 32px;\n  line-height: 1.25em;\n  font-weight: 500;\n\n  @media ${mq.phone} {\n    font-size: 36px;\n  }\n\n  @media ${mq.tablet} {\n    font-size: 42px;\n    line-height: 1.125em;\n  }\n\n  @media ${mq.desktop} {\n    font-size: 48px;\n    line-height: 2em;\n  }\n`;\n\nexport const StyledH2 = styled.h2`\n  font-size: 28px;\n  line-height: 1.25em;\n  font-weight: 500;\n\n  @media ${mq.tablet} {\n    font-size: 32px;\n    line-height: 1.125em;\n  }\n\n  @media ${mq.desktop} {\n    font-size: 36px;\n    line-height: 1.1em;\n  }\n`;\n\nexport const StyledH3 = styled.h3`\n  font-family: \"Staatliches\", san-serif;\n  font-display: swap;\n  font-size: 24px;\n  line-height: 1.25em;\n  font-weight: 400;\n\n  @media ${mq.phone} {\n    font-size: 28px;\n  }\n\n  @media ${mq.desktop} {\n    font-size: 32px;\n    line-height: 1.5em;\n  }\n`;\n\nexport const StyledH4 = styled.h4`\n  font-size: 24px;\n  line-height: 1.25em;\n  font-weight: 400;\n`;\n\nexport const StyledParagraph = styled.p`\n  font-size: 18px;\n  line-height: 1.25em;\n  font-weight: 400;\n\n  @media ${mq.uptoSmallPhone} and (orientation: portrait) {\n    line-height: 1.2em;\n  }\n\n  @media (min-width: 361px) and ${mq.uptoPhone} and (orientation: portrait) {\n    line-height: 1.4em;\n  }\n\n  @media ${mq.tablet} and (orientation: portrait) {\n    font-size: 22px;\n  }\n\n  @media ${mq.desktop} {\n    font-size: 22px;\n    line-height: 1.125em;\n  }\n\n  @media ${mq.desktop} and (orientation: portrait),\n  @media ${mq.desktop} and (orientation: landscape) {\n    font-size: 24px;\n    line-height: 1.2em;\n  }\n`;\n\nexport const StyledSubtext = styled.p`\n  font-size: 14px;\n  line-height: 1em;\n  font-weight: 300;\n`;\n","// Style constants\nconst colors = {\n  APPLE: '#66b447', // green\n  ABYSS: '#051622', // dark blue\n  ASPARAGUS: '#92A332', // grass green\n  AZURE: '#3399FF',\n  BLUSH: '#DE5D83', // Light pink\n  DAYLILY: '#FB9039', // orange\n  LAGOON: '#1BA098', // teal\n  LATTE: '#F7F4E9', // eyeshell white\n  MAGENTA: '#5626C4', // purple\n  PANTONE: '#373A36', // rust\n  SUNGLOW: '#FACD3D', // yellow\n  TURQUOISE: '#15F4EE',\n  WHITE: '#ffffff',\n  BLACK: '#000000',\n};\n\nexport default colors;\n","import { createContext } from 'react';\n\nexport const calcBreakpoint = (width) => {\n  let breakpoint = 0;\n  if (width >= 1200) {\n    breakpoint = 4; // xl\n  } else if (width >= 992) {\n    breakpoint = 3; // lg\n  } else if (width >= 768) {\n    breakpoint = 2; // md\n  } else if (width >= 576) {\n    breakpoint = 1; // sm\n  }\n  return breakpoint;\n};\n\nexport const calcOrientation = (width, height) => {\n  let orientation = 'landscape';\n  if (width < 1200 && width < height) {\n    orientation = 'portrait';\n  }\n  return orientation;\n};\n\nexport const BrowserContext = createContext({\n  breakpoint: 2,\n  orientation: 'landscape',\n});\n\nexport const ScrollPositionContext = createContext({\n  topScroll: 0, // Top scroll position\n  bottomScroll: 0, // Bottom scroll position\n  startedScrolling: false, // Has the user started to scroll\n});\n","export default {\n  uptoSmallPhone: '(max-width: 359.98px)',\n  phone: '(min-width: 576px)',\n  uptoPhone: '(max-width: 575.98px)',\n  tablet: '(min-width: 768px)',\n  uptoTablet: '(max-width: 767.98px)',\n  desktop: '(min-width: 992px)',\n  uptoDesktop: '(max-width: 991.98px)',\n  largeDevice: '(min-width: 1200px)',\n  uptoLargeDevice: '(max-width: 1199.98px)',\n};\n","import styled from 'styled-components';\n\nimport main1 from 'images/main1.webp';\nimport main2 from 'images/main2.webp';\nimport main3 from 'images/main3.webp';\nimport main4 from 'images/main4.webp';\nimport colors from 'constants/colors';\nimport mq from 'constants/media-queries';\nimport { StyledH4 } from 'components/Typography';\n\nexport const MainPageContainer = styled.main`\n  position: relative;\n  display: grid;\n  justify-content:center;\n  align-items: center;\n  width: ${(props) => props.$width}px;\n  height: ${(props) => props.$height}px;\n  overflow: hidden;\n\n  header {\n    z-index: 10;\n  }\n\n  .header__title {\n    display: none;\n  }\n\n  .return__title {\n    color: ${colors.LATTE};\n    font-size: 16px;\n    padding: 20px 0 0 0;\n  }\n\n  .main-page__title {\n    position: fixed;\n    top: 24px;\n    right: 24px;\n    z-index: 11;\n    font-family: \"Lobster\", san-serif;\n    font-display: swap;\n    font-size: 32px;\n    color: ${colors.LATTE};\n    text-shadow: 4px 4px 7px ${colors.ABYSS},\n                -1px -1px 7px ${colors.PANTONE};\n\n    @media ${mq.uptoTablet} {\n      top: 16px;\n      right: 24px;\n      font-size: 22px;\n      line-height: 28px;\n    }\n  }\n\n  @media ${mq.desktop} {\n    nav {\n      height: calc(100% - 72px);\n      z-index: 3;\n      .nav__close {\n        display: none;\n      }\n  \n      .nav__chevron-right {\n        visibility: hidden;\n      }\n\n      @media (hover: none) {\n        .nav__link,\n        .nav__link-two {\n          background: transparent;\n\n          svg, h2, h4 {\n            color: ${colors.LATTE};\n            fill: ${colors.LATTE};\n            text-shadow: 4px 4px 7px ${colors.BLACK}80,\n                        -1px -1px 7px ${colors.BLACK}80;\n          }\n        }\n      }\n\n      @media (hover: hover) and (pointer: fine) {\n        .nav__link:not(:hover),\n        .nav__link-title,\n        svg,\n        h2,\n        .nav__link-two h4 {\n          background: transparent;\n          color: transparent;\n          fill: transparent;\n        }\n\n        .nav__link-two {\n          background: transparent;\n        }\n\n        .nav__link:hover {\n          background: ${colors.LATTE}66;\n    \n          svg, h2, h4 {\n            text-shadow: 4px 4px 7px ${colors.BLACK}80,\n                        -1px -1px 7px ${colors.BLACK}80;\n          }\n        }\n      }\n  \n      .nav__link > section {\n        max-width: none;\n        margin: 0;\n        border-bottom: 1px solid ${colors.BLACK}26;\n        justify-content: flex-start;\n        svg {\n          margin: 0 32px;\n        }\n        .nav__link-title {\n          font-size: 24px;\n        }\n      }\n    }\n  }\n`;\n\nexport const ImageContainer = styled.div`\n  position: absolute;\n  width: calc(100% + 24px);\n  height: calc(100% + 24px);\n  top: -12px;\n  left: -12px;\n  background-size: cover;\n  background-position: center;\n  transition: all 0.5s ease-out;\n  z-index: 0;\n`;\n\nexport const ImageBgContainer = styled.div`\n  position: absolute;\n  width: 100%;\n  height: 100%;\n  top: 0;\n  left: 0;\n  background: radial-gradient(circle, ${colors.ABYSS}66 30%, ${colors.ABYSS} 100%);\n  transition: all .5s ease-out;\n  z-index: 1;\n`;\n\nexport const TextBox = styled.section`\n  padding: 50px;\n  text-align: center;\n  border-radius: 8px;\n  background: ${colors.ABYSS}B3;\n  transition: all .5s ease-out;\n  z-index: 4;\n\n  @media ${mq.uptoTablet} {\n    padding: 24px;\n  }\n\n  @media ${mq.desktop} {\n    padding: 60px;\n    box-shadow: inset 4px 4px 7px ${colors.ABYSS},\n                inset -1px -1px 7px ${colors.ABYSS};\n  }\n\n  ${StyledH4} {\n    text-align: center;\n    line-height: 36px;\n    font-family: \"Sen\", san-serif;\n    font-display: swap;\n    font-weight: 500;\n    color: ${colors.LATTE};\n\n    span {\n      font-size: 44px;\n    }\n\n    @media ${mq.uptoTablet} {\n      font-size: 18px;\n      line-height: 32px;\n    }\n  }\n`;\n\nexport const IconContainer = styled.div`\n  display: flex;\n  position: fixed;\n  width: 260px;\n  height: 72px;\n  bottom: 0;\n  right: calc(50% - 130px);\n  justify-content: space-between;\n  align-items: center;\n  z-index: 4;\n\n  svg {\n    width: 40px;\n    height: 40px;\n    margin: 0 3px;\n    color: ${colors.LATTE};\n    fill: ${colors.LATTE};\n    cursor: pointer;\n    transition: all 0.2s;\n\n    @media (hover: hover) and (pointer: fine) {\n      &:hover {\n        width: 46px;\n        height: 46px;\n        margin: 0;\n      }\n    }\n  }\n\n  @media ${mq.desktop} {\n    width: 300px;\n    right: calc(50% - 150px);\n  }\n`;\n\nexport const backgroundData = [\n  main1,\n  main2,\n  main3,\n  main4,\n];\n\nexport const backgroundDataIndex = Math.floor(Math.random() * 4);\n","import React, {\n  lazy,\n  useContext,\n  useEffect,\n  useRef,\n  useState,\n} from 'react';\nimport PropTypes from 'prop-types';\nimport Headx from 'headx';\nimport { Link } from 'react-router-dom';\n\nimport { StyledH2, StyledH4 } from 'components/Typography';\nimport { BrowserContext } from 'constants/contexts';\nimport {\n  email,\n  github,\n  linked,\n  info,\n} from 'images/icons';\nimport {\n  backgroundData,\n  backgroundDataIndex,\n  MainPageContainer,\n  IconContainer,\n  ImageContainer,\n  ImageBgContainer,\n  TextBox,\n} from './styles';\n\nconst Header = lazy(() => import('components/Header'));\n\n// Page component that renders copy and links related to work experience\nfunction MainPage({\n  is404 = false,\n}) {\n  const imageBgRef = useRef(null);\n  const { breakpoint } = useContext(BrowserContext);\n  const [mouseXY, setMouseXY] = useState({\n    x: 0,\n    y: 0,\n  });\n  const [browserParams, setBrowserParams] = useState({\n    width: window.innerWidth,\n    height: window.innerHeight,\n  });\n\n  const mouseMoveHandler = (e) => {\n    setMouseXY({\n      x: Math.round((-8 * (window.innerWidth - 2 * e.clientX)) / window.innerWidth),\n      y: Math.round((-4 * (window.innerHeight - 2 * e.clientY)) / window.innerHeight),\n    });\n  };\n\n  const iconClickhandler = (href) => {\n    window.open(href);\n  };\n\n  useEffect(() => {\n    setBrowserParams({\n      width: window.innerWidth,\n      height: window.innerHeight,\n    });\n  }, [\n    breakpoint,\n    window.innerWidth,\n    window.innerHeight,\n  ]);\n\n  useEffect(() => {\n    let throttle = false;\n    imageBgRef.current.addEventListener('mousemove', (e) => {\n      if (!throttle) {\n        mouseMoveHandler(e);\n        throttle = true;\n        setTimeout(() => { throttle = false; }, 150);\n      }\n    });\n  }, []);\n\n  return (\n    <MainPageContainer\n      ref={imageBgRef}\n      className=\"main-page\"\n      $width={browserParams.width}\n      $height={browserParams.height}\n    >\n      <Headx\n        title=\"Mohan Subramanian - Portfolio\"\n      />\n      <ImageContainer\n        style={{\n          backgroundImage: `url(${backgroundData[backgroundDataIndex]})`,\n          transform: `translateX(${-1 * mouseXY.x}px) translateY(${-1 * mouseXY.y}px)`,\n        }}\n      />\n      <StyledH2 className=\"main-page__title\">{`Mohan ${breakpoint > 3 ? 'Subramanian' : 'S'}`}</StyledH2>\n      <Header isMainPage={breakpoint > 2} />\n      <ImageBgContainer />\n      <TextBox\n        className=\"main-page__text-box\"\n        $width={browserParams.width}\n        style={{ transform: `translateX(${mouseXY.x}px) translateY(${mouseXY.y}px)` }}\n      >\n        {\n          is404\n            ? (\n              <StyledH4>\n                <span>404</span>\n                <br />\n                Sorry, the page could not be found\n                <br />\n                <Link to=\"/\" className=\"return__title\">Return to Homepage</Link>\n              </StyledH4>\n            ) : (\n              <StyledH4>\n                Lead Frontend Engineer\n                <br />\n                with &lsquo;Game Designer&rsquo; skills\n                <br />\n                15+ years of experience\n                <br />\n                Fueled by passion & creativity\n              </StyledH4>\n            )\n        }\n      </TextBox>\n      <IconContainer className=\"main-page__icon\">\n        {\n          [email, github, linked, info].map(({\n            Icon,\n            href,\n          }) => (\n            <Icon\n              key={`${Icon}-${href}`}\n              onClick={() => { iconClickhandler(href); }}\n            />\n          ))\n        }\n      </IconContainer>\n    </MainPageContainer>\n  );\n}\n\nMainPage.propTypes = {\n  is404: PropTypes.bool,\n};\n\nexport default MainPage;\n","import React, { useEffect } from 'react';\r\n\r\nconst Headx = (props) => {\r\n    useEffect(() => {\r\n        const { title, meta, httpEquiv, links, og, twitter } = props;\r\n\r\n        // Function to remove existing meta tags with the same name\r\n        const removeExistingMetaTags = (tagName) => {\r\n            const existingMetaTags = document.head.querySelectorAll(`meta[name=\"${tagName}\"]`);\r\n            existingMetaTags.forEach((tag) => {\r\n                tag.remove();\r\n            });\r\n        };\r\n\r\n        // Error handling: Check if document.head exists before modifying it\r\n        if (document.head) {\r\n\r\n            // Set the document title if 'title' prop is provided\r\n            if (title) {\r\n                document.title = title;\r\n            }\r\n\r\n            // Add <meta> tags from the 'meta' prop\r\n            if (meta) {\r\n                meta.forEach((metaItem) => {\r\n                    removeExistingMetaTags(metaItem.name);\r\n                    const metaTag = document.createElement('meta');\r\n                    metaTag.name = metaItem.name;\r\n                    metaTag.content = metaItem.content;\r\n                    document.head.appendChild(metaTag);\r\n                });\r\n            }\r\n\r\n            // Add <meta> tags with 'httpEquiv' from the prop\r\n            if (httpEquiv) {\r\n                httpEquiv.forEach((httpEquivItem) => {\r\n                    const httpEquivTag = document.createElement('meta');\r\n                    httpEquivTag.httpEquiv = httpEquivItem.name;\r\n                    httpEquivTag.content = httpEquivItem.content;\r\n                    document.head.appendChild(httpEquivTag);\r\n                });\r\n            }\r\n\r\n            // Add <link> tags from the 'links' prop\r\n            if (links) {\r\n                links.forEach((linkItem) => {\r\n                    const linkTag = document.createElement('link');\r\n                    linkTag.rel = linkItem.name;\r\n                    linkTag.href = linkItem.content;\r\n                    document.head.appendChild(linkTag);\r\n                });\r\n            }\r\n\r\n            // Add Open Graph (OG) <meta> tags from the 'og' prop\r\n            if (og) {\r\n                og.forEach((ogItem) => {\r\n                    const ogTag = document.createElement('meta');\r\n                    ogTag.setAttribute('property', `og:${ogItem.name}`);\r\n                    ogTag.content = ogItem.content;\r\n                    document.head.appendChild(ogTag);\r\n                });\r\n            }\r\n\r\n            // Add Twitter <meta> tags from the 'twitter' prop\r\n            if (twitter) {\r\n                twitter.forEach((twitterItem) => {\r\n                    const twitterTag = document.createElement('meta');\r\n                    twitterTag.setAttribute('property', `twitter:${twitterItem.name}`);\r\n                    twitterTag.content = twitterItem.content;\r\n                    document.head.appendChild(twitterTag);\r\n                });\r\n            }\r\n        } else {\r\n            console.error(\"document.head doesn't exist; unable to add tags.\");\r\n        }\r\n    }, [props]);\r\n\r\n    // This component doesn't render any visible elements\r\n    return null;\r\n};\r\n\r\nexport default Headx;\r\n"],"names":["StyledH1","styled","h1","_templateObject","_taggedTemplateLiteral","mq","phone","tablet","desktop","StyledH2","h2","_templateObject2","StyledH3","h3","_templateObject3","StyledH4","h4","_templateObject4","StyledParagraph","p","_templateObject5","uptoSmallPhone","uptoPhone","StyledSubtext","_templateObject6","APPLE","ABYSS","ASPARAGUS","AZURE","BLUSH","DAYLILY","LAGOON","LATTE","MAGENTA","PANTONE","SUNGLOW","TURQUOISE","WHITE","BLACK","calcBreakpoint","width","breakpoint","calcOrientation","height","orientation","BrowserContext","createContext","ScrollPositionContext","topScroll","bottomScroll","startedScrolling","uptoTablet","uptoDesktop","largeDevice","uptoLargeDevice","MainPageContainer","main","props","$width","$height","colors","ImageContainer","div","ImageBgContainer","TextBox","section","IconContainer","backgroundData","main1","main2","main3","main4","backgroundDataIndex","Math","floor","random","Header","lazy","_ref","_ref$is","is404","imageBgRef","useRef","useContext","_useState","useState","x","y","_useState2","_slicedToArray","mouseXY","setMouseXY","_useState3","window","innerWidth","innerHeight","_useState4","browserParams","setBrowserParams","useEffect","throttle","current","addEventListener","e","round","clientX","clientY","mouseMoveHandler","setTimeout","_jsxs","ref","className","children","_jsx","Headx","title","style","backgroundImage","concat","transform","isMainPage","Link","to","email","github","linked","info","map","_ref2","Icon","href","onClick","open","iconClickhandler","meta","httpEquiv","links","og","twitter","document","head","forEach","metaItem","tagName","name","querySelectorAll","tag","remove","metaTag","createElement","content","appendChild","httpEquivItem","httpEquivTag","linkItem","linkTag","rel","ogItem","ogTag","setAttribute","twitterItem","twitterTag","console","error"],"sourceRoot":""}