{"version":3,"file":"component---src-pages-index-js-3fc16c00e295b28da279.js","mappings":"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","sources":["webpack://gatsby-starter-hello-world/./src/components/Project.js","webpack://gatsby-starter-hello-world/./src/components/Projects.js","webpack://gatsby-starter-hello-world/./src/components/Title.js","webpack://gatsby-starter-hello-world/./src/components/Hero.js","webpack://gatsby-starter-hello-world/./src/constants/services.js","webpack://gatsby-starter-hello-world/./src/components/Services.js","webpack://gatsby-starter-hello-world/./src/pages/index.js"],"sourcesContent":["import React from \"react\"\nimport { GatsbyImage, getImage } from \"gatsby-plugin-image\"\nimport { FaGithubSquare, FaShareSquare } from \"react-icons/fa\"\nimport { Link } from \"gatsby\"\n\nconst Project = ({ description, title, github, stack, url, image, index }) => {\n  return (\n    <article className=\"project\">\n      <GatsbyImage\n        image={getImage(image)}\n        className=\"project-img\"\n        alt={title}\n      />\n      <div className=\"project-info\">\n        <span className=\"project-number\">0{index + 1}.</span>\n        <Link to={`/projects`} className=\"project-slug\">\n          <h3>{title}</h3>\n        </Link>\n        <p className=\"project-desc\">{description}</p>\n        <h4>Technology:</h4>\n        <div className=\"project-stack\">\n          {stack.map(item => {\n            return <span key={item.id}>{item.title}</span>\n          })}\n        </div>\n        <div className=\"project-links\">\n          <a href={github}>\n            <FaGithubSquare className=\"project-icon\"></FaGithubSquare>\n          </a>\n          <a href={url}>\n            <FaShareSquare className=\"project-icon\"></FaShareSquare>\n          </a>\n        </div>\n      </div>\n    </article>\n  )\n}\n\nexport default Project\n","import React from \"react\"\nimport Title from \"./Title\"\nimport Project from \"./Project\"\nimport { Link } from \"gatsby\"\nconst Projects = ({ projects, title, showLink }) => {\n  return (\n    <section className=\"section projects\">\n      <Title title={title} />\n      <div className=\"section-center projects-center\">\n        {projects.map((project, index) => {\n          return <Project key={project.id} index={index} {...project} />\n        })}\n      </div>\n      {showLink && (\n        <Link to=\"/projects\" className=\"btn center-btn\">\n          projects\n        </Link>\n      )}\n    </section>\n  )\n}\n\nexport default Projects\n","import React from \"react\"\n\nconst Title = ({ title }) => {\n  return (\n    <div className=\"section-title\">\n      <h2>{title || \"default title\"}</h2>\n      <div className=\"underline\"></div>\n    </div>\n  )\n}\n\nexport default Title\n","import React from \"react\"\nimport { Link } from \"gatsby\"\nimport socialLinks from \"../constants/social_links\"\n// import heroImg from \"../assets/images/hero.svg\"\nimport { StaticImage } from \"gatsby-plugin-image\"\n\nconst Hero = () => {\n  return (\n    <header className=\"hero\">\n      <section className=\"section-center hero-center\">\n        <article className=\"hero-info\">\n          <div>\n            <div className=\"underline\"></div>\n            <h1>i'm Zakaria</h1>\n            <h4>\n              {\" \"}\n              <span>MERN</span> stack web developer\n            </h4>\n            <Link to=\"/contact\" className=\"btn\">\n              contact me\n            </Link>\n            <div className=\"social-links\">\n              {socialLinks.map(link => {\n                return (\n                  <a href={link.url} key={link.id} className=\"social-link\">\n                    {link.icon}\n                  </a>\n                )\n              })}\n            </div>\n          </div>\n        </article>\n        <StaticImage\n          src=\"../assets/images/hero-img1.png\"\n          alt=\"portfolio\"\n          className=\"hero-img\"\n          placeholder=\"blurred\"\n        />\n        {/* <img src={heroImg} alt=\"portfolio\" className=\"hero-img-svg\" /> */}\n      </section>\n    </header>\n  )\n}\n\nexport default Hero\n","import React from \"react\"\nimport { FaCode, FaSketch, FaPaintBrush } from \"react-icons/fa\"\nconst services = [\n  {\n    id: 1,\n    icon: <FaCode className=\"service-icon\" />,\n    title: \"web development\",\n    text: `I provide professional web Development services with splendid graphics to create high quality websites for your corporate business identity.`,\n  },\n  {\n    id: 2,\n    icon: <FaSketch className=\"service-icon\" />,\n    title: \"web design\",\n    text: `Web design is an extremely important part of any project/brand.I will make a clean, unique an professional looking website, it's must be respinsive, pixel perfect. w3c valid.`,\n  },\n  {\n    id: 3,\n    icon: <FaPaintBrush className=\"service-icon\" />,\n    title: \"Graphic Design\",\n    text: `Graphic design is the process of visual communication and problem-solving using one or more of typography, photography, and illustration.`,\n  },\n]\n\nexport default services\n","import React from \"react\"\nimport Title from \"./Title\"\nimport services from \"../constants/services\"\nconst Services = () => {\n  return (\n    <section className=\"section bg-grey\">\n      <Title title=\"services\" />\n      <div className=\"section-center services-center\">\n        {services.map(service => {\n          const { id, icon, title, text } = service\n          return (\n            <article key={id} className=\"service\">\n              {icon}\n              <h4>{title}</h4>\n              <div className=\"underline\"></div>\n              <p>{text}</p>\n            </article>\n          )\n        })}\n      </div>\n    </section>\n  )\n}\n\nexport default Services\n","import React from \"react\"\nimport { graphql } from \"gatsby\"\nimport Hero from \"../components/Hero\"\nimport Services from \"../components/Services\"\n\nimport Projects from \"../components/Projects\"\nimport Seo from \"../components/Seo\"\nconst IndexPage = ({ data }) => {\n  const {\n    allStrapiProject: { nodes: projects },\n  } = data\n  return (\n    <>\n      <Seo title=\"Home\" />\n      <main>\n        <Hero />\n        <Services />\n\n        <Projects title=\"featured projects\" showLink projects={projects} />\n      </main>\n    </>\n  )\n}\nexport const query = graphql`\n  {\n    allStrapiProject(filter: { featured: { eq: true } }) {\n      nodes {\n        description\n        featured\n        github\n        id\n        title\n        url\n        stack {\n          id\n          title\n        }\n        image {\n          childImageSharp {\n            gatsbyImageData(placeholder: BLURRED, layout: CONSTRAINED)\n          }\n        }\n      }\n      totalCount\n    }\n  }\n`\nexport default IndexPage\n"],"names":["description","title","github","stack","url","image","index","className","G","getImage","alt","to","map","item","key","id","href","projects","showLink","Title","project","socialLinks","link","icon","S","src","placeholder","text","services","service","data","allStrapiProject","nodes","Seo","Projects"],"sourceRoot":""}