{"version":3,"sources":["images/svg-pride.svg","images/headshot.jpg","images/tetris.jpg","components/Sidebar/SidebarElements.js","components/Sidebar/index.js","components/Navbar/NavbarElements.js","components/Navbar/index.js","components/ButtonElements.js","components/HeroSection/HeroElements.js","images/icon-transparent.png","components/HeroSection/index.js","components/InfoSection/InfoElements.js","demos/about-me.mp3","demos/animation-demo.mp3","demos/commercial-demo.mp3","demos/commercial-demo-extended.mp3","demos/elearning-demo.mp3","demos/telephony-demo.mp3","components/InfoSection/index.js","images/JE-talent.png","components/InfoSection/Data.js","images/svg-mic.svg","images/svg-connected.svg","images/svg-coding.svg","components/Services/ServiceElements.js","components/Services/index.js","components/Footer/FooterElements.js","components/Footer/index.js","pages/index.js","components/Friends/FriendsElements.js","components/Friends/index.js","components/ScrollToTop.js","pages/friends.js","App.js","index.js"],"names":["SidebarContainer","styled","aside","isOpen","CloseIcon","FaTimes","Icon","div","SidebarWrapper","SidebarMenu","ul","SidebarLink","LinkScroll","SideBtnWrap","SidebarRoute","Sidebar","toggle","onClick","to","smooth","duration","spy","exact","offset","Nav","nav","scrollNav","NavbarContainer","NavLogo","LinkRouter","MobileIcon","NavMenu","NavItem","li","NavLinks","NavBtn","NavBtnLink","Navbar","useState","setScrollNav","changeNav","window","scrollY","useEffect","addEventListener","Provider","value","color","scroll","scrollToTop","Button","primary","big","dark","fontBig","RouteButton","HeroContainer","HeroContentRow","Column1","Column2","ImgWrap","Img","img","HeroH1","h1","HeroP","p","HeroBtnWrapper","ArrowForward","MdArrowForward","ArrowRight","MdKeyboardArrowRight","HeroSection","hover","setHover","onHover","id","src","IconChibi","alt","onMouseEnter","onMouseLeave","InfoContainer","lightBg","addTopPadding","InfoWrapper","InfoRow","imgStart","TextWrapper","TopLine","Heading","lightText","Subtitle","darkText","BtnWrap","AgentWrap","JEImg","JETextWrap","SocialLink","a","DemoTitle","InfoSection","topLine","headline","description","useRouterLink","useArrow","buttonLink","buttonLabel","showAudio","undefined","controls","title","CommercialDemo","type","AnimationDemo","CommercialDemoExtended","ElearningDemo","TelephonyDemo","AboutMe","homeObjOne","lightTextDesc","require","default","homeObjTwo","homeObjThree","href","target","JEIcon","ServicesContainer","ServicesWrapper","ServicesCard","ServicesIcon","ServicesH1","ServicesH2","h2","ServicesP","Services","IconMic","IconConnected","IconCoding","FooterContainer","footer","FooterWrap","FooterLinksContainer","FooterLinksWrapper","FooterLinkItems","FooterLinkTitle","SocialMedia","Link","section","SocialMediaWrap","SocialLogo","WebsiteRights","small","SocialIcons","SocialIconLink","ArtistCredit","ArtistLink","Footer","Date","getFullYear","Home","setIsOpen","Container","FriendsPageWrap","FriendsContent","FriendsWrapper","FriendsCard","FriendsList","FriendItem","FriendsH1","FriendsHeader","h3","FriendLink","Friends","ScrollToTop","pathname","useLocation","scrollTo","FriendsPage","GlobalStyles","createGlobalStyle","App","path","component","ReactDOM","render","StrictMode","document","getElementById"],"mappings":"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","file":"static/js/main.3e13fb25.chunk.js","sourcesContent":["export default __webpack_public_path__ + \"static/media/svg-pride.80df4bf8.svg\";","export default __webpack_public_path__ + \"static/media/headshot.533cc3ae.jpg\";","export default __webpack_public_path__ + \"static/media/tetris.00eaf6de.jpg\";","import styled from \"styled-components\";\r\nimport { Link as LinkScroll } from \"react-scroll\";\r\nimport { FaTimes } from \"react-icons/fa\";\r\n\r\nexport const SidebarContainer = styled.aside`\r\n  position: fixed;\r\n  z-index: 999;\r\n  width: 100%;\r\n  height: 100%;\r\n  background: var(--color-accent);\r\n  display: grid;\r\n  align-items: center;\r\n  left: 0;\r\n  transition: 0.3s ease-in-out;\r\n  opacity: ${({ isOpen }) => (isOpen ? \"100%\" : \"0\")};\r\n  top: ${({ isOpen }) => (isOpen ? \"0\" : \"-100%\")};\r\n`;\r\n\r\nexport const CloseIcon = styled(FaTimes)`\r\n  color: var(--color-text-dark);\r\n`;\r\n\r\nexport const Icon = styled.div`\r\n  position: absolute;\r\n  top: 1.2rem;\r\n  right: 1.5rem;\r\n  background: transparent;\r\n  font-size: 2rem;\r\n  cursor: pointer;\r\n  outline: none;\r\n`;\r\n\r\nexport const SidebarWrapper = styled.div`\r\n  color: var(--color-text-dark);\r\n`;\r\n\r\nexport const SidebarMenu = styled.ul`\r\n  display: grid;\r\n  grid-template-columns: 1fr;\r\n  grid-template-rows: repeat(6, 80px);\r\n  text-align: center;\r\n\r\n  @media screen and (max-width: 480px) {\r\n    grid-template-rows: repeat(6, 60px);\r\n  }\r\n`;\r\n\r\nexport const SidebarLink = styled(LinkScroll)`\r\n  display: flex;\r\n  align-items: center;\r\n  justify-content: center;\r\n  font-size: 1.5rem;\r\n  text-decoration: none;\r\n  list-style: none;\r\n  transition: 0.2s ease-in-out;\r\n  text-decoration: none;\r\n  color: var(--color-text-dark);\r\n  cursor: pointer;\r\n\r\n  &:hover {\r\n    color: var(--color-text-mid);\r\n    transition: 0.2s ease-in-out;\r\n  }\r\n`;\r\n\r\nexport const SideBtnWrap = styled.div`\r\n  display: flex;\r\n  justify-content: center;\r\n`;\r\n\r\nexport const SidebarRoute = styled(LinkScroll)`\r\n  border-radius: 50px;\r\n  background: var(--color-primary);\r\n  white-space: nowrap;\r\n  padding: 16px 64px;\r\n  color: var(--color-text-light);\r\n  font-size: 16px;\r\n  outline: none;\r\n  border: none;\r\n  cursor: pointer;\r\n  transition: all 0.2s ease-in-out;\r\n  text-decoration: none;\r\n\r\n  &:hover {\r\n    transition: all 0.2s ease-in-out;\r\n    background: var(--color-secondary);\r\n    color: var(--color-text-light);\r\n  }\r\n`;\r\n","import React from \"react\";\r\nimport {\r\n  SidebarContainer,\r\n  Icon,\r\n  CloseIcon,\r\n  SidebarWrapper,\r\n  SidebarMenu,\r\n  SidebarLink,\r\n  SideBtnWrap,\r\n  SidebarRoute,\r\n} from \"./SidebarElements\";\r\n\r\nconst Sidebar = ({ isOpen, toggle }) => {\r\n  return (\r\n    <SidebarContainer isOpen={isOpen} onClick={toggle}>\r\n      <Icon onClick={toggle}>\r\n        <CloseIcon />\r\n      </Icon>\r\n      <SidebarWrapper>\r\n        <SidebarMenu>\r\n          <SidebarLink\r\n            to=\"demos\"\r\n            onClick={toggle}\r\n            smooth={true}\r\n            duration={500}\r\n            spy={true}\r\n            exact=\"true\"\r\n            offset={-80}\r\n          >\r\n            Demos\r\n          </SidebarLink>\r\n          <SidebarLink\r\n            to=\"about\"\r\n            onClick={toggle}\r\n            smooth={true}\r\n            duration={500}\r\n            spy={true}\r\n            exact=\"true\"\r\n            offset={-80}\r\n          >\r\n            About Me\r\n          </SidebarLink>\r\n          <SidebarLink\r\n            to=\"services\"\r\n            onClick={toggle}\r\n            smooth={true}\r\n            duration={500}\r\n            spy={true}\r\n            exact=\"true\"\r\n            offset={-80}\r\n          >\r\n            Home Studio\r\n          </SidebarLink>\r\n          <SidebarLink\r\n            to=\"contact\"\r\n            onClick={toggle}\r\n            smooth={true}\r\n            duration={500}\r\n            spy={true}\r\n            exact=\"true\"\r\n            offset={-80}\r\n          >\r\n            Contact\r\n          </SidebarLink>\r\n        </SidebarMenu>\r\n        <SideBtnWrap>\r\n          <SidebarRoute\r\n            to=\"contact\"\r\n            onClick={toggle}\r\n            smooth={true}\r\n            duration={500}\r\n            spy={true}\r\n            exact=\"true\"\r\n            offset={-80}\r\n          >\r\n            livvie.lin@gmail.com\r\n          </SidebarRoute>\r\n        </SideBtnWrap>\r\n      </SidebarWrapper>\r\n    </SidebarContainer>\r\n  );\r\n};\r\n\r\nexport default Sidebar;\r\n","import styled from \"styled-components\";\r\nimport { Link as LinkRouter } from \"react-router-dom\";\r\nimport { Link as LinkScroll } from \"react-scroll\";\r\n\r\nexport const Nav = styled.nav`\r\n  background: ${({ scrollNav }) =>\r\n    scrollNav ? \"var(--color-accent)\" : \"transparent\"};\r\n  height: 80px;\r\n  margin-top: -80px;\r\n  display: flex;\r\n  justify-content: center;\r\n  align-items: center;\r\n  font-size: 1rem;\r\n  position: sticky;\r\n  top: 0;\r\n  z-index: 10;\r\n\r\n  @media screen and (max-width: 960px) {\r\n    transition: 0.8s all ease;\r\n  }\r\n`;\r\n\r\nexport const NavbarContainer = styled.div`\r\n  display: flex;\r\n  justify-content: space-between;\r\n  height: 80px;\r\n  z-index: 1;\r\n  width: 100%;\r\n  padding: 0 24px;\r\n  max-width: 1100px;\r\n`;\r\n\r\nexport const NavLogo = styled(LinkRouter)`\r\n  color: var(--color-text-dark);\r\n  justify-self: flex-start;\r\n  cursor: pointer;\r\n  font-size: 1.5rem;\r\n  display: flex;\r\n  align-items: center;\r\n  margin-left: 24px;\r\n  font-weight: bold;\r\n  text-decoration: none;\r\n`;\r\n\r\nexport const MobileIcon = styled.div`\r\n  display: none;\r\n\r\n  @media screen and (max-width: 768px) {\r\n    color: var(--color-text-dark);\r\n    display: block;\r\n    position: absolute;\r\n    top: 0;\r\n    right: 0;\r\n    transform: translate(-100%, 60%);\r\n    font-size: 1.8rem;\r\n    cursor: pointer;\r\n  }\r\n`;\r\n\r\nexport const NavMenu = styled.ul`\r\n  display: flex;\r\n  align-items: center;\r\n  list-style: none;\r\n  text-align: center;\r\n  margin-right: -22px;\r\n\r\n  @media screen and (max-width: 768px) {\r\n    display: none;\r\n  }\r\n`;\r\n\r\nexport const NavItem = styled.li`\r\n  height: 80px;\r\n`;\r\n\r\nexport const NavLinks = styled(LinkScroll)`\r\n  color: var(--color-text-dark);\r\n  display: flex;\r\n  align-items: center;\r\n  text-decoration: none;\r\n  padding: 0 1rem;\r\n  height: 100%;\r\n  cursor: pointer;\r\n\r\n  &.active {\r\n    border-bottom: 3px solid var(--color-secondary);\r\n  }\r\n`;\r\n\r\nexport const NavBtn = styled.nav`\r\n  display: flex;\r\n  align-items: center;\r\n\r\n  @media screen and (max-width: 768px) {\r\n    display: none;\r\n  }\r\n`;\r\n\r\nexport const NavBtnLink = styled(LinkScroll)`\r\n  border-radius: 50px;\r\n  background: var(--color-primary);\r\n  white-space: nowrap;\r\n  padding: 10px 22px;\r\n  color: var(--color-text-light);\r\n  font-size: 16px;\r\n  outline: none;\r\n  border: none;\r\n  cursor: pointer;\r\n  transition: all 0.2s ease-in-out;\r\n  text-decoration: none;\r\n\r\n  &:hover {\r\n    transition: all 0.2s ease-in-out;\r\n    background: var(--color-secondary);\r\n    color: var(--color-text-light);\r\n  }\r\n`;\r\n","import React, { useState, useEffect } from \"react\";\r\nimport { animateScroll as scroll } from \"react-scroll\";\r\nimport { FaBars } from \"react-icons/fa\";\r\nimport { IconContext } from \"react-icons/lib\";\r\nimport {\r\n  Nav,\r\n  NavbarContainer,\r\n  NavLogo,\r\n  MobileIcon,\r\n  NavMenu,\r\n  NavItem,\r\n  NavLinks,\r\n  NavBtn,\r\n  NavBtnLink,\r\n} from \"./NavbarElements\";\r\n\r\nconst Navbar = ({ toggle }) => {\r\n  const [scrollNav, setScrollNav] = useState(false);\r\n\r\n  const changeNav = () => {\r\n    if (window.scrollY >= 80) {\r\n      setScrollNav(true);\r\n    } else {\r\n      setScrollNav(false);\r\n    }\r\n  };\r\n\r\n  useEffect(() => {\r\n    window.addEventListener(\"scroll\", changeNav);\r\n  }, []);\r\n\r\n  const toggleHome = () => {\r\n    scroll.scrollToTop();\r\n  };\r\n\r\n  return (\r\n    <>\r\n      <IconContext.Provider value={{ color: \"#fff\" }}>\r\n        <Nav scrollNav={scrollNav}>\r\n          <NavbarContainer>\r\n            <NavLogo to=\"/\" onClick={toggleHome}>\r\n              liv\r\n            </NavLogo>\r\n            <MobileIcon onClick={toggle}>\r\n              <FaBars color=\"var(--color-text-dark\" />\r\n            </MobileIcon>\r\n            <NavMenu>\r\n              <NavItem>\r\n                <NavLinks\r\n                  to=\"demos\"\r\n                  smooth={true}\r\n                  duration={500}\r\n                  spy={true}\r\n                  exact=\"true\"\r\n                  offset={-80}\r\n                >\r\n                  Demos\r\n                </NavLinks>\r\n              </NavItem>\r\n              <NavItem>\r\n                <NavLinks\r\n                  to=\"about\"\r\n                  smooth={true}\r\n                  duration={500}\r\n                  spy={true}\r\n                  exact=\"true\"\r\n                  offset={-80}\r\n                >\r\n                  About Me\r\n                </NavLinks>\r\n              </NavItem>\r\n              <NavItem>\r\n                <NavLinks\r\n                  to=\"services\"\r\n                  smooth={true}\r\n                  duration={500}\r\n                  spy={true}\r\n                  exact=\"true\"\r\n                  offset={-80}\r\n                >\r\n                  Home Studio\r\n                </NavLinks>\r\n              </NavItem>\r\n              <NavItem>\r\n                <NavLinks\r\n                  to=\"contact\"\r\n                  smooth={true}\r\n                  duration={500}\r\n                  spy={true}\r\n                  exact=\"true\"\r\n                  offset={-80}\r\n                >\r\n                  Contact\r\n                </NavLinks>\r\n              </NavItem>\r\n            </NavMenu>\r\n            <NavBtn>\r\n              <NavBtnLink\r\n                to=\"contact\"\r\n                smooth={true}\r\n                duration={500}\r\n                spy={true}\r\n                exact=\"true\"\r\n                offset={-80}\r\n              >\r\n                livvie.lin@gmail.com\r\n              </NavBtnLink>\r\n            </NavBtn>\r\n          </NavbarContainer>\r\n        </Nav>\r\n      </IconContext.Provider>\r\n    </>\r\n  );\r\n};\r\n\r\nexport default Navbar;\r\n","import styled from \"styled-components\";\r\nimport { Link as LinkScroll } from \"react-scroll\";\r\nimport { Link as LinkRouter } from \"react-router-dom\";\r\n\r\nexport const Button = styled(LinkScroll)`\r\n  border-radius: 50px;\r\n  background: ${({ primary }) =>\r\n    primary ? \"var(--color-primary)\" : \"var(--color-secondary)\"};\r\n  white-space: nowrap;\r\n  padding: ${({ big }) => (big ? \"14px 48px\" : \"12px 30px\")};\r\n  color: ${({ dark }) =>\r\n    dark ? \"var(--color-text-light)\" : \"var(--color-text-lightest)\"};\r\n  font-size: ${({ fontBig }) => (fontBig ? \"20px\" : \"16px\")};\r\n  outline: none;\r\n  border: none;\r\n  cursor: pointer;\r\n  display: flex;\r\n  justify-content: center;\r\n  align-items: center;\r\n  transition: all 0.2s ease-in-out;\r\n\r\n  &:hover {\r\n    transition: all 0.2s ease-in-out;\r\n    background: ${({ primary }) =>\r\n      primary ? \"var(--color-secondary)\" : \"var(--color-primary)\"};\r\n  }\r\n`;\r\n\r\nexport const RouteButton = styled(LinkRouter)`\r\n  border-radius: 50px;\r\n  background: ${({ primary }) =>\r\n    primary ? \"var(--color-primary)\" : \"var(--color-secondary)\"};\r\n  white-space: normal;\r\n  max-width: 100%;\r\n  padding: ${({ big }) => (big ? \"14px 48px\" : \"12px 30px\")};\r\n  color: ${({ dark }) =>\r\n    dark ? \"var(--color-text-light)\" : \"var(--color-text-lightest)\"};\r\n  font-size: ${({ fontBig }) => (fontBig ? \"20px\" : \"16px\")};\r\n  outline: none;\r\n  border: none;\r\n  cursor: pointer;\r\n  display: flex;\r\n  justify-content: center;\r\n  align-items: center;\r\n  transition: all 0.2s ease-in-out;\r\n  text-decoration: none;\r\n\r\n  &:hover {\r\n    transition: all 0.2s ease-in-out;\r\n    background: ${({ primary }) =>\r\n      primary ? \"var(--color-secondary)\" : \"var(--color-primary)\"};\r\n  }\r\n`;\r\n","import styled from \"styled-components\";\r\nimport { MdKeyboardArrowRight, MdArrowForward } from \"react-icons/md\";\r\n\r\nexport const HeroContainer = styled.div`\r\n  background: var(--color-accent);\r\n  display: flex;\r\n  justify-content: center;\r\n  align-items: center;\r\n  padding: 0 30px;\r\n  height: 420px;\r\n  position: relative;\r\n  z-index: 1;\r\n\r\n  @media screen and (max-width: 768px) {\r\n    height: 550px;\r\n  }\r\n`;\r\n\r\nexport const HeroContentRow = styled.div`\r\n  display: grid;\r\n  grid-auto-columns: minmax(auto, 1fr);\r\n  align-items: center;\r\n  grid-template-areas: \"col1 col2\";\r\n\r\n  @media screen and (max-width: 768px) {\r\n    grid-template-areas: \"col2\" \"col1\";\r\n  }\r\n`;\r\n\r\nexport const Column1 = styled.div`\r\n  margin-top: 230px;\r\n  padding: 0 15px;\r\n  grid-area: col1;\r\n\r\n  @media screen and (max-width: 768px) {\r\n    margin-top: 40px;\r\n  }\r\n`;\r\n\r\nexport const Column2 = styled.div`\r\n  margin-top: 100px;\r\n  padding: 0 15px;\r\n  grid-area: col2;\r\n\r\n  @media screen and (max-width: 768px) {\r\n    margin-top: 160px;\r\n  }\r\n`;\r\n\r\nexport const ImgWrap = styled.div`\r\n  max-width: 200px;\r\n  height: 100%;\r\n`;\r\n\r\nexport const Img = styled.img`\r\n  width: 100%;\r\n  margin: 0 0 8px 0;\r\n  padding-right: 0;\r\n`;\r\n\r\nexport const HeroBg = styled.div`\r\n  position: absolute;\r\n  top: 0;\r\n  right: 0;\r\n  bottom: 0;\r\n  left: 0;\r\n  width: 100%;\r\n  height: 100%;\r\n  overflow: hidden;\r\n`;\r\n\r\nexport const HeroContent = styled.div`\r\n  z-index: 3;\r\n  max-width: 1200px;\r\n  position: absolute;\r\n  padding: 8px 24px;\r\n  display: flex;\r\n  flex-direction: column;\r\n  align-items: center;\r\n`;\r\n\r\nexport const HeroH1 = styled.h1`\r\n  color: var(--color-text-dark);\r\n  font-size: 48px;\r\n  text-align: center;\r\n\r\n  @media screen and (max-width: 768px) {\r\n    font-size: 40px;\r\n  }\r\n\r\n  @media screen and (max-width: 480px) {\r\n    font-size: 32px;\r\n  }\r\n`;\r\n\r\nexport const HeroP = styled.p`\r\n  margin-top: 24px;\r\n  color: var(--color-text-dark);\r\n  font-size: 24px;\r\n  text-align: center;\r\n  max-width: 600px;\r\n\r\n  @media screen and (max-width: 768px) {\r\n    font-size: 24px;\r\n  }\r\n\r\n  @media screen and (max-width: 480px) {\r\n    font-size: 18px;\r\n  }\r\n`;\r\n\r\nexport const HeroBtnWrapper = styled.div`\r\n  margin-top: 32px;\r\n  display: flex;\r\n  flex-direction: column;\r\n  align-items: center;\r\n`;\r\n\r\nexport const ArrowForward = styled(MdArrowForward)`\r\n  margin-left: 8px;\r\n  font-size: 20px;\r\n`;\r\n\r\nexport const ArrowRight = styled(MdKeyboardArrowRight)`\r\n  margin-left: 8px;\r\n  font-size: 20px;\r\n`;\r\n","export default __webpack_public_path__ + \"static/media/icon-transparent.eaa90182.png\";","import React, { useState } from \"react\";\r\nimport { Button } from \"../ButtonElements\";\r\nimport {\r\n  HeroContainer,\r\n  HeroH1,\r\n  HeroP,\r\n  HeroBtnWrapper,\r\n  ArrowForward,\r\n  ArrowRight,\r\n  HeroContentRow,\r\n  Img,\r\n  ImgWrap,\r\n  Column1,\r\n  Column2,\r\n} from \"./HeroElements\";\r\nimport IconChibi from \"../../images/icon-transparent.png\";\r\n\r\nconst HeroSection = () => {\r\n  const [hover, setHover] = useState(false);\r\n\r\n  const onHover = () => {\r\n    setHover(!hover);\r\n  };\r\n\r\n  const alt = \"Chibi icon\";\r\n\r\n  return (\r\n    <HeroContainer id=\"home\">\r\n      <HeroContentRow>\r\n        <Column1>\r\n          <ImgWrap>\r\n            <Img src={IconChibi} alt={alt} />\r\n          </ImgWrap>\r\n        </Column1>\r\n        <Column2>\r\n          <HeroH1>Livvie Lin</HeroH1>\r\n          <HeroP>Voice Actor</HeroP>\r\n          <HeroBtnWrapper>\r\n            <Button\r\n              to=\"contact\"\r\n              onMouseEnter={onHover}\r\n              onMouseLeave={onHover}\r\n              primary=\"true\"\r\n              dark=\"true\"\r\n              smooth={true}\r\n              duration={500}\r\n              spy={true}\r\n              exact=\"true\"\r\n              offset={-80}\r\n            >\r\n              Let's collaborate {hover ? <ArrowForward /> : <ArrowRight />}\r\n            </Button>\r\n          </HeroBtnWrapper>\r\n        </Column2>\r\n      </HeroContentRow>\r\n    </HeroContainer>\r\n  );\r\n};\r\n\r\nexport default HeroSection;\r\n","import styled from \"styled-components\";\r\nimport { MdKeyboardArrowRight, MdArrowForward } from \"react-icons/md\";\r\n\r\nexport const InfoContainer = styled.div`\r\n  color: var(--color-text-lightest);\r\n  background: ${({ lightBg }) =>\r\n    lightBg ? \"var(--color-background)\" : \"var(--color-accent)\"};\r\n  padding-top: ${({ addTopPadding }) => (addTopPadding ? \"60px\" : \"0\")};\r\n\r\n  @media screen and (max-width: 768px) {\r\n    padding: 0;\r\n  }\r\n`;\r\n\r\nexport const InfoWrapper = styled.div`\r\n  display: grid;\r\n  z-index: 1;\r\n  width: 100%;\r\n  max-width: 1100px;\r\n  margin-right: auto;\r\n  margin-left: auto;\r\n  padding: 24px;\r\n  justify-content: center;\r\n\r\n  @media screen and (max-width: 768px) {\r\n    padding: 12px;\r\n  }\r\n`;\r\n\r\nexport const InfoRow = styled.div`\r\n  display: grid;\r\n  grid-auto-columns: minmax(auto, 1fr);\r\n  align-items: center;\r\n  grid-template-areas: ${({ imgStart }) =>\r\n    imgStart ? `'col2 col1'` : `'col1 col2'`};\r\n\r\n  @media screen and (max-width: 768px) {\r\n    grid-template-areas: ${({ imgStart }) =>\r\n      imgStart ? `'col1' 'col2'` : `'col1 col1' 'col2 col2'`};\r\n  }\r\n`;\r\n\r\nexport const Column1 = styled.div`\r\n  margin-bottom: 15px;\r\n  padding: 0 15px;\r\n  grid-area: col1;\r\n`;\r\n\r\nexport const Column2 = styled.div`\r\n  margin-bottom: 15px;\r\n  padding: 0 15px;\r\n  grid-area: col2;\r\n`;\r\n\r\nexport const TextWrapper = styled.div`\r\n  max-width: 540px;\r\n  padding-top: 32px;\r\n  padding-bottom: 60px;\r\n`;\r\n\r\nexport const TopLine = styled.p`\r\n  color: var(--color-secondary);\r\n  font-size: 16px;\r\n  line-height: 16px;\r\n  font-weight: 700;\r\n  letter-spacing: 1.4px;\r\n  text-transform: uppercase;\r\n  margin-bottom: 16px;\r\n`;\r\n\r\nexport const Heading = styled.h1`\r\n  margin-bottom: 16px;\r\n  font-size: 48px;\r\n  line-height: 1.1;\r\n  font-weight: 600;\r\n  color: ${({ lightText }) =>\r\n    lightText ? \"var(--color-text-light)\" : \"var(--color-text-dark)\"};\r\n\r\n  @media screen and (max-width: 480px) {\r\n    font-size: 32px;\r\n  }\r\n`;\r\n\r\nexport const Subtitle = styled.p`\r\n  max-width: 440px;\r\n  margin-bottom: 35px;\r\n  font-size: 16px;\r\n  line-height: 24px;\r\n  color: ${({ darkText }) =>\r\n    darkText ? \"var(--color-text-darkest)\" : \"var(--color-text-light)\"};\r\n`;\r\n\r\nexport const BtnWrap = styled.div`\r\n  display: flex;\r\n  justify-content: flex-start;\r\n`;\r\n\r\nexport const ImgWrap = styled.div`\r\n  max-width: 420px;\r\n  height: 100%;\r\n`;\r\n\r\nexport const Img = styled.img`\r\n  width: 100%;\r\n  margin: 0 0 10px 0;\r\n  padding-right: 0;\r\n  border: 5px solid var(--color-secondary);\r\n  border-radius: 100px;\r\n`;\r\n\r\nexport const ArrowForward = styled(MdArrowForward)`\r\n  margin-left: 8px;\r\n  font-size: 20px;\r\n`;\r\n\r\nexport const ArrowRight = styled(MdKeyboardArrowRight)`\r\n  margin-left: 8px;\r\n  font-size: 20px;\r\n`;\r\n\r\nexport const AgentWrap = styled.div`\r\n  width: 100%;\r\n  white-space: nowrap;\r\n`;\r\n\r\nexport const JEImg = styled.img`\r\n  width: 40%;\r\n  vertical-align: middle;\r\n`;\r\n\r\nexport const JETextWrap = styled.div`\r\n  display: inline-block;\r\n  width: 40%;\r\n  vertical-align: middle;\r\n  margin-left: 40px;\r\n`;\r\n\r\nexport const SocialLink = styled.a`\r\n  color: var(--color-text-darkest);\r\n  text-decoration: none;\r\n`;\r\n\r\nexport const DemoTitle = styled.p`\r\n  color: var(--color-text-darkest);\r\n  margin: 5px 0;\r\n`;\r\n","export default __webpack_public_path__ + \"static/media/about-me.25d1643c.mp3\";","export default __webpack_public_path__ + \"static/media/animation-demo.d3918a4d.mp3\";","export default __webpack_public_path__ + \"static/media/commercial-demo.a05daffd.mp3\";","export default __webpack_public_path__ + \"static/media/commercial-demo-extended.58b9dfde.mp3\";","export default __webpack_public_path__ + \"static/media/elearning-demo.faa73ee4.mp3\";","export default __webpack_public_path__ + \"static/media/telephony-demo.1d54a718.mp3\";","import React, { useState } from \"react\";\r\nimport { Button, RouteButton } from \"../ButtonElements\";\r\nimport {\r\n  InfoContainer,\r\n  InfoWrapper,\r\n  InfoRow,\r\n  Column1,\r\n  Column2,\r\n  TextWrapper,\r\n  TopLine,\r\n  Heading,\r\n  Subtitle,\r\n  BtnWrap,\r\n  ImgWrap,\r\n  Img,\r\n  ArrowForward,\r\n  ArrowRight,\r\n  DemoTitle,\r\n} from \"./InfoElements\";\r\nimport AboutMe from \"../../demos/about-me.mp3\";\r\nimport AnimationDemo from \"../../demos/animation-demo.mp3\";\r\nimport CommercialDemo from \"../../demos/commercial-demo.mp3\";\r\nimport CommercialDemoExtended from \"../../demos/commercial-demo-extended.mp3\";\r\nimport ElearningDemo from \"../../demos/elearning-demo.mp3\";\r\nimport TelephonyDemo from \"../../demos/telephony-demo.mp3\";\r\n\r\nconst InfoSection = ({\r\n  lightBg,\r\n  id,\r\n  imgStart,\r\n  topLine,\r\n  lightText,\r\n  headline,\r\n  darkText,\r\n  description,\r\n  useRouterLink,\r\n  useArrow,\r\n  buttonLink,\r\n  buttonLabel,\r\n  img,\r\n  alt,\r\n  primary,\r\n  addTopPadding,\r\n  showAudio,\r\n}) => {\r\n  const [hover, setHover] = useState(false);\r\n\r\n  const onHover = () => {\r\n    setHover(!hover);\r\n  };\r\n\r\n  return (\r\n    <>\r\n      <InfoContainer addTopPadding={addTopPadding} lightBg={lightBg} id={id}>\r\n        <InfoWrapper>\r\n          <InfoRow imgStart={imgStart}>\r\n            <Column1>\r\n              <TextWrapper>\r\n                <Heading lightText={lightText}>{headline}</Heading>\r\n                <TopLine>{topLine}</TopLine>\r\n                <Subtitle darkText={darkText}>{description}</Subtitle>\r\n                <BtnWrap>\r\n                  {useRouterLink ? (\r\n                    <RouteButton\r\n                      to={buttonLink}\r\n                      onMouseEnter={onHover}\r\n                      onMouseLeave={onHover}\r\n                      smooth={true}\r\n                      duration={500}\r\n                      spy={true}\r\n                      exact=\"true\"\r\n                      offset={-80}\r\n                      primary={primary ? 1 : 0}\r\n                    >\r\n                      {buttonLabel} {hover ? <ArrowForward /> : <ArrowRight />}\r\n                    </RouteButton>\r\n                  ) : (\r\n                    <Button\r\n                      to={buttonLink}\r\n                      onMouseEnter={onHover}\r\n                      onMouseLeave={onHover}\r\n                      smooth={true}\r\n                      duration={500}\r\n                      spy={true}\r\n                      exact=\"true\"\r\n                      offset={-80}\r\n                      primary={primary ? 1 : 0}\r\n                    >\r\n                      {buttonLabel}\r\n                      {useArrow ? (\r\n                        hover ? (\r\n                          <ArrowForward />\r\n                        ) : (\r\n                          <ArrowRight />\r\n                        )\r\n                      ) : undefined}\r\n                    </Button>\r\n                  )}\r\n                </BtnWrap>\r\n              </TextWrapper>\r\n            </Column1>\r\n            <Column2>\r\n              {showAudio ? (\r\n                <div>\r\n                  <DemoTitle>Commercial Demo</DemoTitle>\r\n                  <audio controls title=\"Commercial Demo - Livvie Lin\">\r\n                    <source src={CommercialDemo} type=\"audio/mpeg\" />\r\n                    Your browser does not support the audio element.\r\n                  </audio>\r\n                  <DemoTitle>Animation Demo</DemoTitle>\r\n                  <audio controls title=\"Animation Demo - Livvie Lin\">\r\n                    <source src={AnimationDemo} type=\"audio/mpeg\" />\r\n                    Your browser does not support the audio element.\r\n                  </audio>\r\n                  <DemoTitle>Extended Commercial Demo</DemoTitle>\r\n                  <audio controls title=\"Extended Commercial Demo - Livvie Lin\">\r\n                    <source src={CommercialDemoExtended} type=\"audio/mpeg\" />\r\n                    Your browser does not support the audio element.\r\n                  </audio>\r\n                  <DemoTitle>eLearning Demo</DemoTitle>\r\n                  <audio controls title=\"eLearning Demo - Livvie Lin\">\r\n                    <source src={ElearningDemo} type=\"audio/mpeg\" />\r\n                    Your browser does not support the audio element.\r\n                  </audio>\r\n                  <DemoTitle>Telephony Demo</DemoTitle>\r\n                  <audio controls title=\"Telephony Demo - Livvie Lin\">\r\n                    <source src={TelephonyDemo} type=\"audio/mpeg\" />\r\n                    Your browser does not support the audio element.\r\n                  </audio>\r\n                  <DemoTitle>About Me</DemoTitle>\r\n                  <audio controls title=\"About Me - Livvie Lin\">\r\n                    <source src={AboutMe} type=\"audio/mpeg\" />\r\n                    Your browser does not support the audio element.\r\n                  </audio>\r\n                </div>\r\n              ) : (\r\n                <ImgWrap>\r\n                  <Img src={img} alt={alt} />\r\n                </ImgWrap>\r\n              )}\r\n            </Column2>\r\n          </InfoRow>\r\n        </InfoWrapper>\r\n      </InfoContainer>\r\n    </>\r\n  );\r\n};\r\n\r\nexport default InfoSection;\r\n","export default __webpack_public_path__ + \"static/media/JE-talent.9cebca18.png\";","import JEIcon from \"../../images/JE-talent.png\";\r\nimport {\r\n  TopLine,\r\n  AgentWrap,\r\n  JETextWrap,\r\n  JEImg,\r\n  SocialLink,\r\n} from \"./InfoElements\";\r\nimport { MdEmail, MdPhoneIphone } from \"react-icons/md\";\r\nimport { FaInstagram, FaTwitter, FaLinkedin } from \"react-icons/fa\";\r\n\r\nexport const homeObjOne = {\r\n  id: \"demos\",\r\n  lightBg: true,\r\n  lightText: false,\r\n  lightTextDesc: false,\r\n  headline: \"Demos\",\r\n  useRouterLink: false,\r\n  useArrow: true,\r\n  buttonLink: \"contact\",\r\n  buttonLabel: \"Like what you hear?\",\r\n  imgStart: false,\r\n  img: require(\"../../images/svg-pride.svg\").default,\r\n  alt: \"pride icon\",\r\n  primary: true,\r\n  darkText: true,\r\n  addTopPadding: true,\r\n  showAudio: true,\r\n};\r\n\r\nconst aboutMe = `As a queer, non-binary Asian-American, I've been acting for much of my life to fit in, basically stepping into a character that isn't fully me.\r\nBut now that I'm proud of my identity, I can confidently bring my authentic self to life and work. I use my voice to advocate for those left unheard and to help people\r\nfeel less alone by giving them someone they can relate to. Although I'm Asian, I speak Spanish and am working on embracing my culture more by learning Mandarin.\r\nI have experience in law and software engineering and have diverse interests from rock climbing to flying planes, which allows me to enthusiastically dive into many\r\ndifferent types of copy. I'm determined, energetic, and an adventurous nerd, going from completing ultramarathons in San Francisco and London to playing and narrating board\r\ngame campaigns that last even longer. I love research and learning, building worlds that people can get immersed in, doing escape rooms and telling people all about them\r\n(without spoilers), and I'm not afraid to go out of my comfort zone and try something new. My voice is youthful, smart, friendly, and versatile, and I'm excited to\r\ncollaborate on projects to make your vision and story come to life.`;\r\n\r\nexport const homeObjTwo = {\r\n  id: \"about\",\r\n  lightBg: true,\r\n  lightText: false,\r\n  lightTextDesc: false,\r\n  topLine: \"they/them\",\r\n  headline: \"About Me\",\r\n  description: aboutMe,\r\n  useRouterLink: false,\r\n  buttonLink: \"demos\",\r\n  buttonLabel: \"Listen Instead!\",\r\n  imgStart: true,\r\n  img: require(\"../../images/headshot.jpg\").default,\r\n  alt: \"profile picture\",\r\n  primary: true,\r\n  darkText: true,\r\n};\r\n\r\nexport const homeObjThree = {\r\n  id: \"contact\",\r\n  lightBg: true,\r\n  lightText: false,\r\n  lightTextDesc: false,\r\n  headline: \"Contact Me\",\r\n  description: (\r\n    <div>\r\n      <TopLine>Business Contact</TopLine>\r\n      <p>\r\n        <MdEmail /> livvie.lin@gmail.com\r\n      </p>\r\n      <p>\r\n        <MdPhoneIphone /> 415-508-8087\r\n      </p>\r\n      <br />\r\n      <TopLine>Social Media</TopLine>\r\n      <p>\r\n        <FaInstagram />{\" \"}\r\n        <SocialLink\r\n          href=\"//www.instagram.com/livvielinsta\"\r\n          target=\"_blank\"\r\n          aria-label=\"Instagram\"\r\n        >\r\n          livvielinsta\r\n        </SocialLink>\r\n      </p>\r\n      <p>\r\n        <FaTwitter />{\" \"}\r\n        <SocialLink\r\n          href=\"//www.twitter.com/livvielin\"\r\n          target=\"_blank\"\r\n          aria-label=\"Twitter\"\r\n        >\r\n          livvielin\r\n        </SocialLink>\r\n      </p>\r\n      <p>\r\n        <FaLinkedin />{\" \"}\r\n        <SocialLink\r\n          href=\"//www.linkedin.com/in/livvielin\"\r\n          target=\"_blank\"\r\n          aria-label=\"LinkedIn\"\r\n        >\r\n          livvielin\r\n        </SocialLink>\r\n      </p>\r\n      <br />\r\n      <TopLine>Voiceover Representation</TopLine>\r\n      <AgentWrap>\r\n        <JEImg src={JEIcon} alt=\"JE Talent icon\" />\r\n        <JETextWrap>\r\n          <p>\r\n            <b>JE Talent</b>\r\n          </p>\r\n          <p>San Francisco</p>\r\n          <p>Cal Grant</p>\r\n          <p>cal@jetalent.com</p>\r\n        </JETextWrap>\r\n      </AgentWrap>\r\n    </div>\r\n  ),\r\n  useRouterLink: true,\r\n  buttonLink: \"/friends\",\r\n  buttonLabel: \"My voice not right? Check out this amazing talent\",\r\n  imgStart: true,\r\n  img: require(\"../../images/tetris.jpg\").default,\r\n  alt: \"photo of myself in front of tetris wall and arcade machine\",\r\n  primary: true,\r\n  darkText: true,\r\n  addTopPadding: true,\r\n};\r\n","export default __webpack_public_path__ + \"static/media/svg-mic.84747954.svg\";","export default __webpack_public_path__ + \"static/media/svg-connected.6dbd7270.svg\";","export default __webpack_public_path__ + \"static/media/svg-coding.9a80b552.svg\";","import styled from \"styled-components\";\r\n\r\nexport const ServicesContainer = styled.div`\r\n  padding-top: 64px;\r\n  display: flex;\r\n  flex-direction: column;\r\n  justify-content: center;\r\n  align-items: center;\r\n  background: var(--color-background);\r\n\r\n  @media screen and (max-width: 768px) {\r\n    padding-bottom: 20px;\r\n  }\r\n`;\r\n\r\nexport const ServicesWrapper = styled.div`\r\n  max-width: 1000px;\r\n  margin: 0 auto;\r\n  display: grid;\r\n  grid-template-columns: 1fr 1fr 1fr;\r\n  align-items: center;\r\n  grid-gap: 16px;\r\n  padding: 0 50px;\r\n\r\n  @media screen and (max-width: 1000px) {\r\n    grid-template-columns: 1fr 1fr;\r\n  }\r\n\r\n  @media screen and (max-width: 768px) {\r\n    grid-template-columns: 1fr;\r\n    padding: 0 20px;\r\n  }\r\n`;\r\n\r\nexport const ServicesCard = styled.div`\r\n  background: var(--color-text-light);\r\n  display: flex;\r\n  flex-direction: column;\r\n  justify-content: flex-start;\r\n  align-items: center;\r\n  border-radius: 10px;\r\n  max-height: 340px;\r\n  padding: 30px;\r\n  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);\r\n  transition: all 0.2s ease-in-out;\r\n\r\n  &:hover {\r\n    transform: scale(1.02);\r\n    transition: all 0.2s ease-in-out;\r\n    cursor: pointer;\r\n  }\r\n`;\r\n\r\nexport const ServicesIcon = styled.img`\r\n  height: 160px;\r\n  width: 160px;\r\n  margin-bottom: 10px;\r\n`;\r\n\r\nexport const ServicesH1 = styled.h1`\r\n  font-size: 2.5rem;\r\n  color: var(--color-text-dark);\r\n  margin-bottom: 64px;\r\n\r\n  @media screen and (max-width: 480px) {\r\n    font-size: 2rem;\r\n  }\r\n`;\r\n\r\nexport const ServicesH2 = styled.h2`\r\n  font-size: 1rem;\r\n  margin-bottom: 10px;\r\n`;\r\n\r\nexport const ServicesP = styled.p`\r\n  font-size: 1rem;\r\n  text-align: center;\r\n`;\r\n","import React from \"react\";\r\nimport IconMic from \"../../images/svg-mic.svg\";\r\nimport IconConnected from \"../../images/svg-connected.svg\";\r\nimport IconCoding from \"../../images/svg-coding.svg\";\r\nimport {\r\n  ServicesContainer,\r\n  ServicesH1,\r\n  ServicesWrapper,\r\n  ServicesCard,\r\n  ServicesIcon,\r\n  ServicesH2,\r\n  ServicesP,\r\n} from \"./ServiceElements\";\r\n\r\nconst Services = () => {\r\n  return (\r\n    <ServicesContainer id=\"services\">\r\n      <ServicesH1>Home Studio</ServicesH1>\r\n      <ServicesWrapper>\r\n        <ServicesCard>\r\n          {/* Icons from undraw.co */}\r\n          <ServicesIcon src={IconMic} />\r\n          <ServicesH2>Equipment</ServicesH2>\r\n          <ServicesP>Rode NT1</ServicesP>\r\n          <ServicesP>Scarlett 2i2 3rd Gen</ServicesP>\r\n          <ServicesP>Beyerdynamic DT 770</ServicesP>\r\n        </ServicesCard>\r\n        <ServicesCard>\r\n          <ServicesIcon src={IconConnected} />\r\n          <ServicesH2>Connectivity</ServicesH2>\r\n          <ServicesP>Source Connect</ServicesP>\r\n          <ServicesP>Phone Patch, Skype</ServicesP>\r\n          <ServicesP>Zoom, Meet, Discord</ServicesP>\r\n        </ServicesCard>\r\n        <ServicesCard>\r\n          <ServicesIcon src={IconCoding} />\r\n          <ServicesH2>Software</ServicesH2>\r\n          <ServicesP>TwistedWave</ServicesP>\r\n          <ServicesP>Audacity</ServicesP>\r\n          <ServicesP>ocenaudio</ServicesP>\r\n        </ServicesCard>\r\n      </ServicesWrapper>\r\n    </ServicesContainer>\r\n  );\r\n};\r\n\r\nexport default Services;\r\n","import styled from \"styled-components\";\r\nimport { Link } from \"react-router-dom\";\r\n\r\nexport const FooterContainer = styled.footer`\r\n  background-color: var(--color-secondary);\r\n`;\r\n\r\nexport const FooterWrap = styled.div`\r\n  padding: 16px;\r\n  display: flex;\r\n  flex-direction: column;\r\n  justify-content: center;\r\n  align-items: center;\r\n  max-width: 1100px;\r\n  margin: 0 auto;\r\n`;\r\n\r\nexport const FooterLinksContainer = styled.div`\r\n  display: flex;\r\n  justify-content: center;\r\n\r\n  @media screen and (max-width: 820px) {\r\n    padding-top: 32px;\r\n  }\r\n`;\r\n\r\nexport const FooterLinksWrapper = styled.div`\r\n  display: flex;\r\n\r\n  @media screen and (max-width: 820px) {\r\n    flex-direction: column;\r\n  }\r\n`;\r\n\r\nexport const FooterLinkItems = styled.div`\r\n  display: flex;\r\n  flex-direction: column;\r\n  align-items: flex-start;\r\n  margin: 16px;\r\n  text-align: left;\r\n  width: 160px;\r\n  box-sizing: border-box;\r\n  color: var(--color-text-lightest);\r\n\r\n  @media screen and (max-width: 420px) {\r\n    margin: 0;\r\n    padding: 10px;\r\n    width: 100%;\r\n  }\r\n`;\r\n\r\nexport const FooterLinkTitle = styled.p`\r\n  opacity: 0%;\r\n  font-size: 8px;\r\n`;\r\n\r\nexport const FooterLink = styled(Link)`\r\n  color: var(--color-text-lightest);\r\n  text-decoration: none;\r\n  margin-bottom: 0.5rem;\r\n  font-size: 14px;\r\n\r\n  &:hover {\r\n    color: var(--color-text-mid);\r\n    transition: 0.3s ease-out;\r\n  }\r\n`;\r\n\r\nexport const SocialMedia = styled.section`\r\n  max-width: 1000px;\r\n  width: 100%;\r\n`;\r\n\r\nexport const SocialMediaWrap = styled.div`\r\n  display: flex;\r\n  justify-content: space-between;\r\n  align-items: center;\r\n  max-width: 1100px;\r\n  margin: 40px auto 0 auto;\r\n\r\n  @media screen and (max-width: 820px) {\r\n    flex-direction: column;\r\n  }\r\n`;\r\n\r\nexport const SocialLogo = styled(Link)`\r\n  color: var(--color-text-light);\r\n  justify-self: start;\r\n  cursor: pointer;\r\n  text-decoration: none;\r\n  font-size: 1.5rem;\r\n  display: flex;\r\n  align-items: center;\r\n  margin-bottom: 16px;\r\n  font-weight: bold;\r\n`;\r\n\r\nexport const WebsiteRights = styled.small`\r\n  color: var(--color-text-light);\r\n  margin-bottom: 16px;\r\n`;\r\n\r\nexport const SocialIcons = styled.div`\r\n  display: flex;\r\n  justify-content: space-between;\r\n  align-items: center;\r\n  width: 240px;\r\n`;\r\n\r\nexport const SocialIconLink = styled.a`\r\n  color: var(--color-text-light);\r\n  font-size: 24px;\r\n`;\r\n\r\nexport const ArtistCredit = styled.small`\r\n  color: var(--color-text-light);\r\n  font-style: italic;\r\n  margin-bottom: 16px;\r\n`;\r\n\r\nexport const ArtistLink = styled.a`\r\n  color: var(--color-text-light);\r\n`;\r\n","import React from \"react\";\r\nimport {\r\n  FooterContainer,\r\n  FooterWrap,\r\n  FooterLinksContainer,\r\n  FooterLinksWrapper,\r\n  FooterLinkItems,\r\n  FooterLinkTitle,\r\n  SocialMedia,\r\n  SocialMediaWrap,\r\n  SocialLogo,\r\n  WebsiteRights,\r\n  SocialIcons,\r\n  SocialIconLink,\r\n  ArtistCredit,\r\n  ArtistLink,\r\n} from \"./FooterElements\";\r\nimport { FaInstagram, FaTwitter, FaLinkedin } from \"react-icons/fa\";\r\nimport { animateScroll as scroll } from \"react-scroll\";\r\n\r\nconst Footer = () => {\r\n  const toggleHome = () => {\r\n    scroll.scrollToTop();\r\n  };\r\n\r\n  return (\r\n    <FooterContainer>\r\n      <FooterWrap>\r\n        <FooterLinksContainer>\r\n          <FooterLinksWrapper>\r\n            <FooterLinkItems>\r\n              <FooterLinkTitle>\r\n                voiceover, authentic, unpolished, warm\r\n              </FooterLinkTitle>\r\n            </FooterLinkItems>\r\n            <FooterLinkItems>\r\n              <FooterLinkTitle>\r\n                professional, fun, energetic, friendly\r\n              </FooterLinkTitle>\r\n            </FooterLinkItems>\r\n          </FooterLinksWrapper>\r\n          <FooterLinksWrapper>\r\n            <FooterLinkItems>\r\n              <FooterLinkTitle>animated, confident, versatile</FooterLinkTitle>\r\n            </FooterLinkItems>\r\n            <FooterLinkItems>\r\n              <FooterLinkTitle>\r\n                bright, storyteller, smart, youthful\r\n              </FooterLinkTitle>\r\n            </FooterLinkItems>\r\n          </FooterLinksWrapper>\r\n        </FooterLinksContainer>\r\n        <SocialMedia>\r\n          <SocialMediaWrap>\r\n            <SocialLogo to=\"/\" onClick={toggleHome}>\r\n              liv\r\n            </SocialLogo>\r\n            <WebsiteRights>\r\n              Livvie Lin © {new Date().getFullYear()} All rights reserved.\r\n            </WebsiteRights>\r\n            <ArtistCredit>\r\n              Avatar artist:{\" \"}\r\n              <ArtistLink\r\n                href=\"//www.linktr.ee/JevsterChester\"\r\n                target=\"_blank\"\r\n                aria-label=\"JevsterChester\"\r\n              >\r\n                JevsterChester\r\n              </ArtistLink>\r\n            </ArtistCredit>\r\n            <SocialIcons>\r\n              <SocialIconLink\r\n                href=\"//www.instagram.com/livvielinsta\"\r\n                target=\"_blank\"\r\n                aria-label=\"Instagram\"\r\n              >\r\n                <FaInstagram />\r\n              </SocialIconLink>\r\n              <SocialIconLink\r\n                href=\"//www.twitter.com/livvielin\"\r\n                target=\"_blank\"\r\n                aria-label=\"Twitter\"\r\n              >\r\n                <FaTwitter />\r\n              </SocialIconLink>\r\n              <SocialIconLink\r\n                href=\"//www.linkedin.com/in/livvielin\"\r\n                target=\"_blank\"\r\n                aria-label=\"Linkedin\"\r\n              >\r\n                <FaLinkedin />\r\n              </SocialIconLink>\r\n            </SocialIcons>\r\n          </SocialMediaWrap>\r\n        </SocialMedia>\r\n      </FooterWrap>\r\n    </FooterContainer>\r\n  );\r\n};\r\n\r\nexport default Footer;\r\n","import React, { useState } from \"react\";\r\nimport Sidebar from \"../components/Sidebar\";\r\nimport Navbar from \"../components/Navbar\";\r\nimport HeroSection from \"../components/HeroSection\";\r\nimport InfoSection from \"../components/InfoSection\";\r\nimport {\r\n  homeObjOne,\r\n  homeObjTwo,\r\n  homeObjThree,\r\n} from \"../components/InfoSection/Data\";\r\nimport Services from \"../components/Services\";\r\nimport Footer from \"../components/Footer\";\r\n\r\nconst Home = () => {\r\n  const [isOpen, setIsOpen] = useState(false);\r\n\r\n  const toggle = () => {\r\n    setIsOpen(!isOpen);\r\n  };\r\n\r\n  return (\r\n    <>\r\n      <Sidebar isOpen={isOpen} toggle={toggle} />\r\n      <Navbar toggle={toggle} />\r\n      <HeroSection />\r\n      <InfoSection {...homeObjOne} />\r\n      <InfoSection {...homeObjTwo} />\r\n      <Services />\r\n      <InfoSection {...homeObjThree} />\r\n      <Footer />\r\n    </>\r\n  );\r\n};\r\n\r\nexport default Home;\r\n","import styled from \"styled-components\";\r\nimport { Link } from \"react-router-dom\";\r\n\r\nexport const Container = styled.div`\r\n  min-height: 692px;\r\n  position: fixed;\r\n  bottom: 0;\r\n  left: 0;\r\n  right: 0;\r\n  top: 0;\r\n  z-index: 0;\r\n  overflow: hidden;\r\n  background: var(--color-accent);\r\n\r\n  @media screen and (max-width: 400px) {\r\n    position: relative;\r\n  }\r\n`;\r\n\r\nexport const FriendsPageWrap = styled.div`\r\n  height: 100%;\r\n  display: flex;\r\n  flex-direction: column;\r\n  justify-content: center;\r\n\r\n  @media screen and (max-width: 400px) {\r\n    height: 80%;\r\n  }\r\n`;\r\n\r\nexport const FriendsContent = styled.div`\r\n  height: 100%;\r\n  display: flex;\r\n  flex-direction: column;\r\n  justify-content: center;\r\n\r\n  @media screen and (max-width: 480px) {\r\n    padding: 10px;\r\n  }\r\n`;\r\n\r\nexport const FriendsWrapper = styled.div`\r\n  max-width: 1200px;\r\n  margin: 0 auto;\r\n  display: grid;\r\n  grid-template-columns: 1fr 1fr;\r\n  align-items: center;\r\n  grid-gap: 16px;\r\n  padding: 0 50px;\r\n\r\n  @media screen and (max-width: 1000px) {\r\n    grid-template-columns: 1fr 1fr;\r\n  }\r\n\r\n  @media screen and (max-width: 768px) {\r\n    grid-template-columns: 1fr;\r\n    padding: 0 20px;\r\n  }\r\n`;\r\n\r\nexport const FriendsCard = styled.div`\r\n  background: var(--color-text-light);\r\n  display: flex;\r\n  flex-direction: column;\r\n  justify-content: flex-start;\r\n  align-items: center;\r\n  border-radius: 10px;\r\n  padding: 30px;\r\n  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);\r\n  transition: all 0.2s ease-in-out;\r\n  min-height: 375px;\r\n\r\n  &:hover {\r\n    transform: scale(1.02);\r\n    transition: all 0.2s ease-in-out;\r\n    cursor: pointer;\r\n  }\r\n`;\r\n\r\nexport const Icon = styled(Link)`\r\n  margin-left: 32px;\r\n  margin-top: 32px;\r\n  text-decoration: none;\r\n  color: var(--color-text-dark);\r\n  font-weight: 700;\r\n  font-size: 32px;\r\n\r\n  @media screen and (max-width: 480px) {\r\n    margin-left: 16px;\r\n    margin-top: 8px;\r\n  }\r\n`;\r\n\r\nexport const FriendsList = styled.ul`\r\n  list-style-type: none;\r\n  padding-top: 20px;\r\n`;\r\n\r\nexport const FriendItem = styled.li`\r\n  padding-bottom: 10px;\r\n`;\r\n\r\nexport const FriendsH1 = styled.h1`\r\n  margin-bottom: 40px;\r\n  color: var(--color-text-dark);\r\n  font-size: 28px;\r\n  text-align: center;\r\n`;\r\n\r\nexport const FriendsHeader = styled.h3`\r\n  font-size: 18px;\r\n`;\r\n\r\nexport const FriendLink = styled.a`\r\n  color: var(--color-text-darkest);\r\n  text-decoration: underline;\r\n`;\r\n","import React from \"react\";\r\nimport {\r\n  Container,\r\n  Icon,\r\n  FriendsContent,\r\n  FriendsPageWrap,\r\n  FriendsWrapper,\r\n  FriendsCard,\r\n  FriendsList,\r\n  FriendsH1,\r\n  FriendsHeader,\r\n  FriendItem,\r\n  FriendLink,\r\n} from \"./FriendsElements\";\r\n\r\nconst Friends = () => {\r\n  return (\r\n    <>\r\n      <Container>\r\n        <FriendsPageWrap>\r\n          <Icon to=\"/\">liv</Icon>\r\n          <FriendsContent>\r\n            <FriendsH1>Livvie's Coaches and Colleagues</FriendsH1>\r\n            <FriendsWrapper>\r\n              <FriendsCard>\r\n                <FriendsHeader>\r\n                  Immense gratitude to my coaches who have made an impact and\r\n                  supported me on my journey:\r\n                </FriendsHeader>\r\n                <FriendsList>\r\n                  <FriendItem>\r\n                    <FriendLink\r\n                      href=\"//www.imdb.com/name/nm0335291\"\r\n                      target=\"_blank\"\r\n                      aria-label=\"Go to Cal's website\"\r\n                    >\r\n                      Calum Grant\r\n                    </FriendLink>{\" \"}\r\n                    - commercial\r\n                  </FriendItem>\r\n                  <FriendItem>\r\n                    <FriendLink\r\n                      href=\"//www.craigleethomas.com\"\r\n                      target=\"_blank\"\r\n                      aria-label=\"Go to Craig's website\"\r\n                    >\r\n                      Craig Lee Thomas\r\n                    </FriendLink>{\" \"}\r\n                    - commercial\r\n                  </FriendItem>\r\n                  <FriendItem>\r\n                    <FriendLink\r\n                      href=\"//www.thevoiceactorstudio.com/events-2\"\r\n                      target=\"_blank\"\r\n                      aria-label=\"Go to Melissa's website\"\r\n                    >\r\n                      Melissa Moats\r\n                    </FriendLink>{\" \"}\r\n                    - commercial\r\n                  </FriendItem>\r\n                  <FriendItem>\r\n                    <FriendLink\r\n                      href=\"//www.cissyjones.com\"\r\n                      target=\"_blank\"\r\n                      aria-label=\"Go to Cissy's website\"\r\n                    >\r\n                      Cissy Jones\r\n                    </FriendLink>{\" \"}\r\n                    - character\r\n                  </FriendItem>\r\n                  <FriendItem>\r\n                    <FriendLink\r\n                      href=\"//www.heykirstenday.com\"\r\n                      target=\"_blank\"\r\n                      aria-label=\"Go to Kirsten's website\"\r\n                    >\r\n                      Kirsten Day\r\n                    </FriendLink>{\" \"}\r\n                    - character\r\n                  </FriendItem>\r\n                  <FriendItem>\r\n                    <FriendLink\r\n                      href=\"//www.justaskjimvo.studio/\"\r\n                      target=\"_blank\"\r\n                      aria-label=\"Go to Jim's website\"\r\n                    >\r\n                      Jim Edgar\r\n                    </FriendLink>{\" \"}\r\n                    - audio\r\n                  </FriendItem>\r\n                </FriendsList>\r\n              </FriendsCard>\r\n              <FriendsCard>\r\n                <FriendsHeader>\r\n                  My voice not right for your project? No problem! Perhaps some\r\n                  of these other voiceover artists are:\r\n                </FriendsHeader>\r\n                <FriendsList>\r\n                  <FriendItem>\r\n                    <FriendLink\r\n                      href=\"//www.bespokevo.com\"\r\n                      target=\"_blank\"\r\n                      aria-label=\"Go to Marissa's website\"\r\n                    >\r\n                      Marissa Delory\r\n                    </FriendLink>{\" \"}\r\n                    - clear, comforting, passionate\r\n                  </FriendItem>\r\n                  <FriendItem>\r\n                    <FriendLink\r\n                      href=\"//www.megantrout.com\"\r\n                      target=\"_blank\"\r\n                      aria-label=\"Go to Megan's website\"\r\n                    >\r\n                      Megan Trout\r\n                    </FriendLink>{\" \"}\r\n                    - savvy, quirky, cool\r\n                  </FriendItem>\r\n                  <FriendItem>\r\n                    <FriendLink\r\n                      href=\"//www.eurienam.com/\"\r\n                      target=\"_blank\"\r\n                      aria-label=\"Go to Eurie's website\"\r\n                    >\r\n                      Eurie Nam\r\n                    </FriendLink>{\" \"}\r\n                    - young, fresh, edgy\r\n                  </FriendItem>\r\n                  <FriendItem>\r\n                    <FriendLink\r\n                      href=\"//www.vickschutz.com/\"\r\n                      target=\"_blank\"\r\n                      aria-label=\"Go to Vick's website\"\r\n                    >\r\n                      Vick Schutz\r\n                    </FriendLink>{\" \"}\r\n                    - trustworthy, confident, witty\r\n                  </FriendItem>\r\n                  <FriendItem>\r\n                    <FriendLink\r\n                      href=\"//www.kathykingmanvo.com\"\r\n                      target=\"_blank\"\r\n                      aria-label=\"Go to Kathy's website\"\r\n                    >\r\n                      Kathy Kingman\r\n                    </FriendLink>{\" \"}\r\n                    - smooth, energetic, confident\r\n                  </FriendItem>\r\n                  <FriendItem>\r\n                    <FriendLink\r\n                      href=\"//www.marksolumvo.com\"\r\n                      target=\"_blank\"\r\n                      aria-label=\"Go to Mark's website\"\r\n                    >\r\n                      Mark Solum\r\n                    </FriendLink>{\" \"}\r\n                    - warm, witty, father figure\r\n                  </FriendItem>\r\n                  <FriendItem>\r\n                    <FriendLink\r\n                      href=\"//www.lindyflowers.com\"\r\n                      target=\"_blank\"\r\n                      aria-label=\"Go to Lindy's website\"\r\n                    >\r\n                      Lindy Flowers\r\n                    </FriendLink>{\" \"}\r\n                    - trustworthy, sophisticated, genuine\r\n                  </FriendItem>\r\n                  <FriendItem>\r\n                    <FriendLink\r\n                      href=\"//www.christysummersvo.com\"\r\n                      target=\"_blank\"\r\n                      aria-label=\"Go to Christy's website\"\r\n                    >\r\n                      Christy Summers\r\n                    </FriendLink>{\" \"}\r\n                    - bright, fun, animated\r\n                  </FriendItem>\r\n                </FriendsList>\r\n              </FriendsCard>\r\n            </FriendsWrapper>\r\n          </FriendsContent>\r\n        </FriendsPageWrap>\r\n      </Container>\r\n    </>\r\n  );\r\n};\r\n\r\nexport default Friends;\r\n","import { useEffect } from \"react\";\r\nimport { useLocation } from \"react-router-dom\";\r\n\r\nexport default function ScrollToTop() {\r\n  const { pathname } = useLocation();\r\n\r\n  useEffect(() => {\r\n    window.scrollTo(0, 0);\r\n  }, [pathname]);\r\n\r\n  return null;\r\n}\r\n","import React from \"react\";\r\nimport Friends from \"../components/Friends\";\r\nimport ScrollToTop from \"../components/ScrollToTop\";\r\n\r\nconst FriendsPage = () => {\r\n  return (\r\n    <>\r\n      <ScrollToTop />\r\n      <Friends />\r\n    </>\r\n  );\r\n};\r\n\r\nexport default FriendsPage;\r\n","import \"./App.css\";\r\nimport Home from \"./pages\";\r\nimport { BrowserRouter as Router, Switch, Route } from \"react-router-dom\";\r\nimport FriendsPage from \"./pages/friends\";\r\nimport { createGlobalStyle } from \"styled-components\";\r\n\r\nconst GlobalStyles = createGlobalStyle`\r\n  html {\r\n    --color-text-darkest: #010606; // black\r\n    --color-text-dark: #534d56; // dark gray\r\n    --color-text-mid: #d9d9d9; // mid gray\r\n    --color-text-light: #f5f5f5; // light gray\r\n    --color-text-lightest: #fff; // white\r\n    --color-background: #ccf3f5; // light blue\r\n    --color-accent: #a8c0f0; // darker blue\r\n    --color-primary: #fc7753; // orange\r\n    --color-secondary: #1b998b; // teal\r\n  }\r\n`;\r\n\r\nfunction App() {\r\n  return (\r\n    <Router>\r\n      <GlobalStyles />\r\n      <Switch>\r\n        <Route path=\"/\" component={Home} exact />\r\n        <Route path=\"/friends\" component={FriendsPage} exact />\r\n      </Switch>\r\n    </Router>\r\n  );\r\n}\r\n\r\nexport default App;\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);\r\n"],"sourceRoot":""}