{"version":3,"file":"component---src-pages-developer-index-js-c9429fc17e5290745c56.js","mappings":"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","sources":["webpack://pb-gatsby-tailwind/./src/components/icons/UparrowIcon.js","webpack://pb-gatsby-tailwind/./src/components/ProjectGallery.js","webpack://pb-gatsby-tailwind/./src/pages/developer/index.js","webpack://pb-gatsby-tailwind/./src/utils/useWindowWidth.js"],"sourcesContent":["import * as React from \"react\"\n\nfunction SvgUparrowIcon({ title, titleId, ...props }) {\n  return (\n    <svg\n      width={24}\n      height={24}\n      xmlns=\"http://www.w3.org/2000/svg\"\n      fillRule=\"evenodd\"\n      clipRule=\"evenodd\"\n      aria-labelledby={titleId}\n      className='{fill} dark:fill-white hover:fill-green dark:hover:fill-green scale-100 xl:scale-125 hover:scale-125 xl:hover:scale-150 rotate-0 hover:rotate-6 transition duration-300'\n      {...props}\n    >\n      {title ? <title id={titleId}>{title}</title> : null}\n      <path d=\"M11 2.206L4.765 9.734 4 9.089l7.521-9 7.479 9-.764.646L12 2.205v21.884h-1V2.206z\" fill=\"\" />\n    </svg>\n  )\n}\n\nexport default SvgUparrowIcon\n","import { Link } from \"gatsby\"\nimport React, { useRef, useEffect, useState } from \"react\"\nimport { gsap } from \"gsap\"\nimport { GatsbyImage, getImage } from \"gatsby-plugin-image\"\nimport SvgUparrowIcon from \"../components/icons/UparrowIcon\"\nimport useWindowWidth from \"../utils/useWindowWidth\"\nimport '../styles/gallery.module.scss'\n\nexport default function ProjectGallery({ data }) {\n\n    const projects = data.projects.nodes\n    const width = useWindowWidth()\n\n    const [position, setPosition] = useState({ x: 0, y: 0 })\n    const galleryRef = useRef()\n\n    const handlePositionChange = e => {\n        setPosition({\n        x: e.clientX / window.innerWidth - 0.5,\n        y: e.clientY / window.innerHeight - 0.5,\n        })\n    }\n\n    useEffect(() => {\n        const galleryScroller = document.querySelector('.gallery-scroller');\n        const galleryItem = document.querySelector('.gallery-scroller a');\n        const galleryItemSize = width < 1280 ? (galleryItem ? galleryItem.clientWidth : null) : (galleryItem ? galleryItem.clientHeight : null)\n\n        const scrollToNextPage = () => {\n            width < 1280 ? galleryScroller.scrollBy(galleryItemSize, 0) :  galleryScroller.scrollBy(0, galleryItemSize)\n        }\n    \n        const scrollToPrevPage = () => {\n            width < 1280 ? galleryScroller.scrollBy(-galleryItemSize, 0) : galleryScroller.scrollBy(0, -galleryItemSize)\n        }\n\n        const btnNext = document.querySelector('.btn.next');\n        const btnPrev = document.querySelector('.btn.prev');\n\n        btnNext.addEventListener('click', scrollToNextPage);\n        btnPrev.addEventListener('click', scrollToPrevPage);\n    })\n    \n    useEffect(() => {\n        gsap.to(galleryRef.current, {\n        rotationY: 2 * position.y,\n        rotationX: 10 * position.x,\n        translateZ: 5,\n        transformPerspective: 200,\n        ease: 'power3',\n        transformOrigin: \"center\",\n        })\n    })\n\n    return (\n        <section\n            ref={galleryRef}\n            className='gallery relative rounded-lg px-2 lg:px-2 3xl:px-10 mt-24 sm:mt-20 md:mt-24 lg:mt-32 xl:mt-0 xl:right-10 2xl:right-12 3xl:right-56 4xl:right-72 xl:absolute xl:top-1/2 xl:transform xl:-translate-y-1/2 xl:w-1/4 2xl:w-1/4 xl:h-3/5'\n            onMouseMove={e => handlePositionChange(e)}\n            role=\"region\"\n        >\n            <div className='gallery-scroller flex flex-row xl:flex-col justify-start xl:content-center flex-nowrap w-full overflow-x-scroll xl:overflow-y-scroll h-full'>\n                {projects.map(project => {\n                    \n                    const image = getImage(project.frontmatter.thumb.childImageSharp)\n                    const alt = project.frontmatter.title\n\n                    return (\n                        <Link\n                            to={`/project/${project.frontmatter.slug}`}\n                            key={project.id}\n                            className=\"slide-item flex flex-col justify-center items-center rounded-lg ring-0 ring-white ring-opacity-0 flex-shrink-0 self-stretch w-9/12 md:w-2/4 h-56 mx-4 my-4 xl:w-10/12 xl:h-2/4 xl:mx-auto xl:my-4 overflow-hidden\"\n                        >\n                            <div className=\"group project-item flex flex-col justify-center items-center relative\">\n\n                                <div className='absolute text-center z-30 text-xl text-blueGray-900 dark:text-white opacity-0 group-hover:opacity-100 font-bold transition duration-300'>\n                                    <h3>{project.frontmatter.title}</h3>\n                                    <p className='mt-2 text-base font-normal italic'>{project.frontmatter.stack}</p>\n                                </div>\n\n                                <div className=\"overlay absolute w-full h-full bg-emerald-100 dark:bg-blueGray-900 bg-opacity-0 dark:bg-opacity-0 group-hover:bg-opacity-90 group-hover:h-1/3 transition duration-300 z-20\"></div>\n                                {project && (\n                                    <GatsbyImage \n                                        image={image}\n                                        alt={alt}\n                                        placeholder=\"blurred\"\n                                        layout=\"constrained\"\n                                        width={750}\n                                        height={422}\n                                        className=\"z-10 transition duration-300 w-full h-64 xl:h-96 scale-105 group-hover:scale-125\"\n                                    />\n                                )}\n                            </div>\n                        </Link>\n                    )\n                })}\n            </div>\n\n            <button className=\"btn z-30 prev -ml-10 flex flex-col justify-center items-center w-12 h-12 rounded-lg bg-gray-10 bg-opacity-10 absolute left-4 xl:left-1/2 xl:-translate-x-1/2 top-1/2 transform -translate-y-1/2 xl:-top-24 xl:translate-y-0\">\n                <span className='scale-125 lg:scale-150 -rotate-90 xl:rotate-0'><SvgUparrowIcon title=\"previous arrow\" fill='#1E293B' /></span>\n            </button>\n            <button className=\"btn z-30 next ml-36 lg:ml-0 flex flex-col justify-center items-center w-12 h-12 rounded-lg bg-gray-10 bg-opacity-10 absolute right-4 xl:left-1/2 xl:-translate-x-1/2 top-1/2 transform -translate-y-1/2 xl:top-full xl:translate-y-full xl:bottom-0 xl:rotate-90\">\n                <span className='scale-125 lg:scale-150 transform rotate-90 xl:rotate-90 translate-x-10 md:translate-x-14 lg:translate-x-0'><SvgUparrowIcon title=\"next arrow\" fill='#1E293B' /></span>\n            </button>\n        </section>\n    )\n}","import { graphql } from \"gatsby\"\nimport React, { useRef, useEffect, useState } from 'react'\nimport { gsap } from \"gsap\"\nimport Layout from '../../components/Layout'\nimport Seo from '../../components/Seo'\nimport ProjectGallery from '../../components/ProjectGallery'\nimport '../../styles/developer.module.scss'\n\nexport default function Developer({ data }) {\n  \n  const { siteUrl } = data.site.siteMetadata\n  const { images } = data\n\n  const profileImages = images.edges\n  const selectDefaultImage = profileImages.filter(item => item.node.name === 'og-code')\n  const defaultImageSrc = selectDefaultImage[0].node.childImageSharp.fluid.src\n\n  // console.log(data)\n\n  const [position, setPosition] = useState({ x: 0, y: 0 })\n  const textRef = useRef()\n\n  const handlePositionChange = e => {\n    setPosition({\n      x: e.clientX / window.innerWidth - 0.5,\n      y: e.clientY / window.innerHeight - 0.5,\n    })\n  }\n\n  useEffect(() => {\n    gsap.to(textRef.current, {\n      rotationY: -5 * position.y,\n      rotationX: -5 * position.x,\n      transformPerspective: 700,\n      ease: 'power3',\n      transformOrigin: \"center\",\n    })\n  })\n  \n  const openLink = () => {\n    window.open(\"https://github.com/princebazawule\")\n  }\n\n    return (\n        <>\n            <Layout>\n              <Seo title=\"Developer | Prince Bazawule\" keywords={[`frontend`, `react`, `vue`, `javascript`, `gatsby`]} description={`Prince Bazawule - Developer, creating fast responsive UIs and rich web experiences for over 15 years`} image={`${siteUrl}${defaultImageSrc}`} url={`${siteUrl}/developer/`} />\n\n              <section\n                ref={textRef}\n                className=\"xl:min-h-8/10 py-8 sm:py-6 xs:px-10 sm:px-14 md:px-16 lg:px-20 xl:px-4 2xl:px-8 flex flex-col justify-center sm:flex-initial cursor-default xl:w-3/4\"\n                onMouseMove={e => handlePositionChange(e)}\n                role=\"region\"\n              >\n                  <h1 className=\"text text-blueGray-900 dark:text-blueGray-100 tracking-tighter sm:tracking-tight xl:tracking-tighter font-black text-4xl xs:text-5xl leading-relaxed xs:leading-normal sm:text-6xl sm:leading-normal md:text-7xl md:leading-normal lg:text-8xl lg:leading-normal xl:text-8xl xl:leading-normal 2xl:text-8xl 2xl:leading-normal 3xl:text-9xl 3xl:leading-normal 4xl:text-10xl 4xl:leading-normal\">\n                      <span className='transition duration-300 ease-in-out bg-clip-text text-transparent bg-gradient-to-r from-green-400 via-blue-400 to-indigo-400 dark:bg-gradient-to-r dark:from-green-200 dark:via-blue-400 dark:to-indigo-400'>\n                        Developer\n                      </span>\n                  </h1>\n\n                  <h2 className=\"mb-8 lg:mb-14 mt-4 xs:mt-2 text text-blueGray-900 dark:text-blueGray-100 tracking-tighter sm:tracking-tight font-black text-2xl leading-tight xs:text-3xl xs:leading-none sm:text-4xl sm:leading-none md:text-5xl md:leading-none lg:text-5xl lg:leading-none xl:text-5xl xl:leading-none 2xl:text-5xl 2xl:leading-none 3xl:text-6xl 3xl:leading-none 4xl:text-6xl 4xl:leading-none\">\n                    i’m a frontend developer with over <span className='hidden xl:block leading-3'><br /></span> 15 years web experience\n                  </h2>\n                  \n                  <p className=\"mb-8 text text-gray-800 dark:text-blueGray-100 tracking-tighter sm:tracking-tight font-normal text-xl leading-normal xs:text-2xl xs:leading-normal sm:text-2xl sm:leading-normal md:text-2xl md:leading-normal lg:text-2xl lg:leading-normal xl:text-2xl xl:leading-normal 2xl:text-3xl 2xl:leading-normal 3xl:text-3xl 3xl:leading-normal 4xl:text-3xl 4xl:leading-normal\">\n                    i enjoy creating rich web experiences.\n                  </p>\n                  <p className=\"mb-8 text text-gray-800 dark:text-blueGray-100 tracking-tighter sm:tracking-tight font-normal text-xl leading-normal xs:text-2xl xs:leading-normal sm:text-2xl sm:leading-normal md:text-2xl md:leading-normal lg:text-2xl lg:leading-normal xl:text-2xl xl:leading-normal 2xl:text-3xl 2xl:leading-normal 3xl:text-3xl 3xl:leading-normal 4xl:text-3xl 4xl:leading-normal\">\n                    With a solid base in <i>html</i>, <i>css</i> &amp; <i>javascript</i>, my tech stack is ever evolving, as with the industry.\n                  </p>\n                  <p className=\"mb-8 text text-gray-800 dark:text-blueGray-100 tracking-tighter sm:tracking-tight font-normal text-xl leading-normal xs:text-2xl xs:leading-normal sm:text-2xl sm:leading-normal md:text-2xl md:leading-normal lg:text-2xl lg:leading-normal xl:text-2xl xl:leading-normal 2xl:text-3xl 2xl:leading-normal 3xl:text-3xl 3xl:leading-normal 4xl:text-3xl 4xl:leading-normal\">\n                    i am currently enjoying the exciting world of <i>react</i>, <i>vue</i>, <i>jamstack</i> &amp; <i>serverless</i> technologies.\n                  </p>\n\n                  <div className=\"inline-block\">\n                          <button\n                            type=\"button\"\n                            formTarget=\"_blank\"\n                            onClick={() => openLink()}\n                            className=\"flex mt-8 sm:mt-10 md:mt-10 lg:mt-6 xl:mt-8 2xl:mt-16 transition duration-300 ease-in-out bg-blueGray-900 hover:bg-emerald-100 dark:bg-emerald-300 dark:hover:bg-emerald-700 text-blueGray-100 hover:text-blueGray-900 dark:text-blueGray-900 dark:hover:text-blueGray-100 text-2xl xs:text-3xl sm:text-3xl md:text-4xl lg:text-4xl xl:text-4xl 2xl:text-5xl 3xl:text-5xl font-bold rounded-full border-0 py-2 px-8 lg:px-12 lg:tracking-tight xl:px-12 xl:tracking-tight 2xl:px-12 2xl:tracking-tight 3xl:px-12 3xl:tracking-tight focus:ring-6 focus:ring-emerald-500 focus:ring-opacity-5\"\n                          >\n                              view some projects\n                          </button>\n                  </div>\n              </section>\n\n              <ProjectGallery data={data} />\n              \n            </Layout>\n        </>\n    )\n}\n\nexport const query = graphql`\n  query ProjectsPage {\n    projects: allMarkdownRemark(\n      sort: { order: DESC, fields: frontmatter___date }\n      filter: { fileAbsolutePath: { regex: \"/(projects)/\" } }\n    ) {\n      nodes {\n        frontmatter {\n          title\n          stack\n          slug\n          thumb {\n            childImageSharp {\n              gatsbyImageData(\n                width: 750\n                placeholder: BLURRED\n                formats: [AUTO, WEBP, AVIF]\n                blurredOptions: {toFormat: NO_CHANGE}\n              )\n            }\n          }\n          featuredImg {\n            src {\n              childImageSharp {\n                gatsbyImageData(\n                  width: 1000\n                  placeholder: BLURRED\n                  blurredOptions: {toFormat: NO_CHANGE}\n                  formats: [AUTO, WEBP, AVIF]\n                )\n              }\n            }\n          }\n        }\n        id\n      }\n    }\n\n    images: allFile(filter: {absolutePath: {regex: \"/(images/profile)/\"}}) {\n      edges {\n        node {\n          id\n          childImageSharp {\n            fluid {\n              ...GatsbyImageSharpFluid\n            }\n          }\n          name\n        }\n      }\n    }\n\n    site {\n      siteMetadata {\n        siteUrl\n      }\n    }\n  }\n`\n","import { useEffect, useState } from \"react\"\n\nconst useWindowWidth = () => {\n    const isBrowser = typeof window !== 'undefined'\n    const [width, setWidth] = useState(isBrowser ? window.innerWidth : 0)\n  \n    useEffect(() => {\n      if (!isBrowser) return false\n  \n      const handleResize = () => setWidth(window.innerWidth)\n      window.addEventListener('resize', handleResize)\n  \n      return () => {\n        window.removeEventListener('resize', handleResize)\n      }\n    })\n  \n    return width\n}\n\nexport default useWindowWidth;"],"names":["title","titleId","props","width","height","xmlns","fillRule","clipRule","className","id","d","fill","ProjectGallery","projects","data","nodes","useWindowWidth","useState","x","y","position","setPosition","galleryRef","useRef","useEffect","galleryScroller","document","querySelector","galleryItem","galleryItemSize","clientWidth","clientHeight","btnNext","btnPrev","addEventListener","scrollBy","gsap","current","rotationY","rotationX","translateZ","transformPerspective","ease","transformOrigin","ref","onMouseMove","e","clientX","window","innerWidth","clientY","innerHeight","handlePositionChange","role","map","project","image","getImage","frontmatter","thumb","childImageSharp","alt","Link","to","slug","key","stack","G","placeholder","layout","Developer","siteUrl","site","siteMetadata","defaultImageSrc","images","edges","filter","item","node","name","fluid","src","textRef","Layout","Seo","keywords","description","url","type","formTarget","onClick","open","isBrowser","setWidth","handleResize","removeEventListener"],"sourceRoot":""}