{"version":3,"sources":["components/sections/Footer/Footer.jsx","components/pages/About/Skills/SkillItem.jsx","components/pages/About/Skills/Skills.jsx","components/pages/About/About.jsx","images/blog/reactVSnext.jpg","images/blog/storybook.jpg","images/blog/blog-03.jpg","components/pages/Blog/BlogItem.jsx","components/pages/Blog/Blog.jsx","components/pages/Contact/Contact.jsx","images/portfolio/decidemos.png","images/portfolio/landlock.png","images/portfolio/veamly.png","images/portfolio/hiver12.png","components/pages/Portfolio/PortfolioItem.jsx","components/pages/Portfolio/Portfolio.jsx","components/pages/Service/ServiceItem.jsx","components/pages/Service/Service.jsx","components/sections/Navbar/Navbar.jsx","images/code.jpg","components/sections/ProfileCover/ProfileCover.jsx","images/profile-rayen.jpg","resume/rayenbensaad_resume.pdf","components/sections/Sidebar/Sidebar.jsx","App.jsx","reportWebVitals.js","index.jsx"],"names":["Footer","_jsx","className","children","_jsxs","rel","SkillItem","props","title","percentage","skill","style","width","concat","backendSkillData","id","toolsSkillData","frontendSkillData","Skills","map","About","BlogItem","image","link","description","blog","src","alt","href","target","blogData","reactVSnext","storybook","image3","Blog","Contact","form","setForm","useState","name","email","message","loading","setLoading","handleChange","e","value","onSubmit","preventDefault","emailjs","send","from_name","to_name","from_email","to_email","then","alert","error","console","log","type","onChange","placeholder","required","rows","ToastContainer","PortfolioItem","portfolio","FaRegEye","portfolioData","veamly","landlock","decidemos","hiver12","Portfolio","ServiceItem","icon","service","serviceData","FaReact","FaCode","FaLaptopCode","FaWordpress","FaSearchengin","Service","navbarData","to","Navbar","Router","el","LinkItem","Switch","Route","exact","path","NavLink","activeClassName","ProfileCover","cover","socials","FaFacebookF","FaGithub","FaLinkedinIn","FaInstagram","Sidebar","profile","resume","download","social","SocialIcon","App","reportWebVitals","onPerfEntry","Function","_ref","getCLS","getFID","getFCP","getLCP","getTTFB","ReactDOM","render","React","StrictMode","document","getElementById"],"mappings":"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","file":"static/js/main.64f4f912.chunk.js","sourcesContent":["import React from \"react\";\n\nconst Footer = () => {\n  return (\n    <footer className=\"bg-white p-4 absolute bottom-0 left-0 w-full\">\n      <div className=\"container px-4\">\n        <p className=\"text-sm text-gray-400 text-center\">\n          Designed and Developed by\n          <a\n            className=\"text-blue-1000 ml-1\"\n            rel=\"nofollow\"\n          >\n            Rayen Ben Saâd\n          </a>\n        </p>\n      </div>\n    </footer>\n  );\n};\n\nexport default Footer;\n","import React from \"react\";\n\nconst SkillItem = (props) => {\n  const { title, percentage } = props.skill;\n  return (\n    <div className=\"w-full md:w-1/2\">\n      <div className=\"mb-4 md:mx-4\">\n        <div className=\"flex justify-between items-center mb-1\">\n          <h5 className=\"text-md text-gray-400 font-light\">{title}</h5>\n          <span className=\"text-md text-blue-1000 font-bold\">\n            {percentage}\n          </span>\n        </div>\n        <div className=\"w-full bg-blue-200 relative h-2 rounded\">\n          <div\n            className=\"absolute h-full left-0 top-0 bg-blue-1000 rounded\"\n            style={{ width: `${percentage}` }}\n          ></div>\n        </div>\n      </div>\n    </div>\n  );\n};\n\nexport default SkillItem;\n","import React from \"react\";\nimport SkillItem from \"./SkillItem\";\n\nconst backendSkillData = [\n  {\n    id: 1,\n    title: \"Node.js\",\n    percentage: \"70%\",\n  },\n  {\n    id: 2,\n    title: \"NestJS\",\n    percentage: \"70%\",\n  },\n  {\n    id: 3,\n    title: \"Laravel, Lumen, PHP\",\n    percentage: \"50%\",\n  },\n  {\n    id: 4,\n    title: \"NoSQL, MongoDB\",\n    percentage: \"50%\",\n  },\n  {\n    id: 5,\n    title: \"SQL, MySQL, PL/QL\",\n    percentage: \"70%\",\n  },\n];\nconst toolsSkillData = [\n  {\n    id: 1,\n    title: \"Git, Github, Gitlab, Bitbucket\",\n    percentage: \"70%\",\n  },\n  {\n    id: 2,\n    title: \"Docker\",\n    percentage: \"40%\",\n  },\n  {\n    id: 3,\n    title: \"Postman, Swagger\",\n    percentage: \"80%\",\n  },\n  {\n    id: 4,\n    title: \"Jira\",\n    percentage: \"80%\",\n  },\n];\nconst frontendSkillData = [\n  {\n    id: 1,\n    title: \"Html, Css, Scss\",\n    percentage: \"95%\",\n  },\n  {\n    id: 2,\n    title: \"Bootstrap\",\n    percentage: \"85%\",\n  },\n  {\n    id: 3,\n    title: \"TailwindCSS\",\n    percentage: \"90%\",\n  },\n  {\n    id: 4,\n    title: \"Ant Design\",\n    percentage: \"80%\",\n  },\n  {\n    id: 5,\n    title: \"Javascript, Typescript\",\n    percentage: \"70%\",\n  },\n  {\n    id: 6,\n    title: \"ReactJS\",\n    percentage: \"80%\",\n  },\n  {\n    id: 7,\n    title: \"Next.js\",\n    percentage: \"50%\",\n  },\n  {\n    id: 8,\n    title: \"Angular\",\n    percentage: \"50%\",\n  },\n  {\n    id: 9,\n    title: \"Vue.js\",\n    percentage: \"50%\",\n  },\n];\n\nconst Skills = () => {\n  return (\n    <div className=\"py-4\">\n\n      <div className=\"flex flex-wrap\">\n        <div className=\"w-full\">\n          <div className=\"md:mx-4\">\n            <h3 className=\"text-2xl text-gray-800 font-bold mb-4\">Frontend Skills</h3>\n          </div>\n        </div>\n        {frontendSkillData.map((skill, id) => (\n          <SkillItem skill={skill} key={id} />\n        ))}\n      </div>\n      <hr className=\"my-6\" />\n\n\n      <div className=\"flex flex-wrap\">\n        <div className=\"w-full\">\n          <div className=\"md:mx-4\">\n            <h3 className=\"text-2xl text-gray-800 font-bold mb-4\">Backend Skills</h3>\n          </div>\n        </div>\n        {backendSkillData.map((skill, id) => (\n          <SkillItem skill={skill} key={id} />\n        ))}\n      </div>\n      <hr className=\"my-6\" />\n\n      <div className=\"flex flex-wrap\">\n        <div className=\"w-full\">\n          <div className=\"md:mx-4\">\n            <h3 className=\"text-2xl text-gray-800 font-bold mb-4\">Tools</h3>\n          </div>\n        </div>\n        {toolsSkillData.map((skill, id) => (\n          <SkillItem skill={skill} key={id} />\n        ))}\n      </div>\n    </div>\n  );\n};\n\nexport default Skills;\n","import React from \"react\";\nimport Skills from \"./Skills/Skills\";\n\nconst About = () => {\n  return (\n    <section className=\"py-8\">\n      <div className=\"flex flex-wrap md:px-4\">\n        <div className=\"w-full\">\n          <div className=\"md:mx-4\">\n            <h3 className=\"text-2xl text-gray-800 font-bold mb-4\">Who am I?</h3>\n            <p className=\"text-sm text-gray-400 leading-6 mb-3\">\n              Hi, I'm Rayen Ben Saad: full-stack web & app developer, amateur\n              cook hobbyist, tinkerer, and general curious person. I can conjure\n              a website or app from nothing into existence, fully formed. I\n              specialize in manipulating the very fabric of the web, its raw\n              materials of HTML, CSS, JavaScript, and Typescript. To launch\n              these creations into the cosmos, I have studied the ancient tomes\n              of sysadmin to create and control Linux servers, the golems of the\n              cloud. Their true names are inscribed into the DNS so that\n              everyone who speaks their names may summon them. And each and\n              every one is sealed with an SSL certificate of authenticity.\n            </p>\n            <p className=\"text-sm text-gray-400 leading-6 mb-3\">\n              A full-stack developer knows no bounds. And when they find one\n              they cross it without hesitation, boldly going into the unknown to\n              return richer for it.\n            </p>\n          </div>\n          <Skills />\n        </div>\n      </div>\n    </section>\n  );\n};\n\nexport default About;\n","export default __webpack_public_path__ + \"static/media/reactVSnext.6a752c68.jpg\";","export default __webpack_public_path__ + \"static/media/storybook.f12a2ebb.jpg\";","export default __webpack_public_path__ + \"static/media/blog-03.e1ff56f6.jpg\";","import React from \"react\";\n\nconst BlogItem = (props) => {\n  const { image, title, link, description } = props.blog;\n  return (\n    <div className=\"w-full lg:w-1/2\">\n      <div className=\"my-4 md:mx-4 shadow p-6 rounded-md bg-white group hover:shadow-md\">\n        <div className=\"relative mb-6 w-full h-56 bg-purple-200 rounded-md overflow-hidden\">\n          <img\n            src={image}\n            alt=\"blogImage\"\n            className=\"w-full h-full object-cover object-center transform group-hover:scale-125 group-hover:rotate-6 transition duration-200\"\n          />\n        </div>\n        <h3>\n          <a\n            href={link}\n            className=\"block text-lg font-medium text-gray-800 hover:text-purple-600 mb-2\"\n            target=\"_blank\"\n          >\n            {title}\n          </a>\n        </h3>\n        <p className=\"text-gray-400\">{description}</p>\n      </div>\n    </div>\n  );\n};\n\nexport default BlogItem;\n","import React from \"react\";\nimport reactVSnext from \"../../../images/blog/reactVSnext.jpg\";\nimport storybook from \"../../../images/blog/storybook.jpg\";\nimport image3 from \"../../../images/blog/blog-03.jpg\";\nimport BlogItem from \"./BlogItem\";\n\nconst blogData = [\n  {\n    id: 1,\n    image: reactVSnext,\n    title: \"🚀 Exploring the Powerhouse Duo: Next.js vs. React.js! 🤝\",\n    link:\"https://www.linkedin.com/posts/bensaadrayen_reactjs-nextjs-webdevelopment-activity-7101549534073266176-S-LW?utm_source=share&utm_medium=member_desktop\",\n    description:\n      \"Let's unravel the differences between these two powerful technologies and understand when to wield each one in your projects.\",\n  },\n  {\n    id: 2,\n    image: storybook,\n    title: \"🚀 Elevate Your React Workflow with Storybook!\",\n    link: \"https://www.linkedin.com/posts/bensaadrayen_install-storybook-activity-7096978402284306432-9fHp?utm_source=share&utm_medium=member_desktop\",\n    description:\n      \"Storybook isn't just a collection of tales; it's a transformative tool that can revolutionize the way you develop and showcase React components.\",\n  },\n  {\n    id: 3,\n    image: image3,\n    title: \"🎯 Micro-frontends: The Frontend Revolution 🔥\",\n    link: \"https://www.linkedin.com/posts/bensaadrayen_micro-frontends-architecture-activity-7092621157425717248-XcrW?utm_source=share&utm_medium=member_desktop\",\n    description:\n      \"In today's dynamic tech landscape, building scalable hashtag#WebApplications demands flexibility, collaboration, and efficiency....\",\n  },\n];\n\nconst Blog = () => {\n  return (\n    <section className=\"pb-10\">\n      <div className=\"flex flex-wrap md:px-4\">\n        {blogData.map((blog, id) => (\n          <BlogItem blog={blog} key={id} />\n        ))}\n      </div>\n    </section>\n  );\n};\n\nexport default Blog;\n","import React, { useState } from \"react\";\nimport { ToastContainer } from \"react-toastify\";\nimport \"react-toastify/dist/ReactToastify.css\";\nimport emailjs from \"@emailjs/browser\";\n\nconst Contact = () => {\n\n  const [form, setForm] = useState({\n    name: \"\",\n    email: \"\",\n    message: \"\",\n  });\n  const [loading, setLoading] = useState(false);\n\n  const handleChange = (e) => {\n    const { name, value } = e.target;\n    setForm({ ...form, [name]: value });\n  };\n\n  const handleSubmit = (e) => {\n    e.preventDefault();\n    setLoading(true);\n\n    emailjs\n      .send(\n        \"service_d8fc75a\",\n        \"template_2brs1er\",\n        {\n          from_name: form.name,\n          to_name: \"Rayen\",\n          from_email: form.email,\n          to_email: \"rayenbensaad.portfolio@gmail.com\",\n          message: form.message,\n        },\n        \"It9teYHTcapJV32G2\"\n      )\n      .then(\n        () => {\n          setLoading(false);\n          alert(\"Thank you. I will get back to you as soon as possible.\");\n\n          setForm({\n            name: \"\",\n            email: \"\",\n            message: \"\",\n          });\n        },\n        (error) => {\n          setLoading(false);\n\n          console.log(error);\n          alert(\"Something went wrong.\");\n        }\n      );\n  };\n\n  return (\n    <section className=\"pb-10\">\n      <div className=\"flex flex-wrap md:px-4\">\n        <form className=\"p-8 md:mx-4 bg-white rounded-md shadow-md\" onSubmit={handleSubmit}>\n          <div className=\"m-3\">\n            <h3 className=\"text-2xl text-gray-800 font-bold mb-6\">\n              Get in Touch\n            </h3>\n          </div>\n          <div className=\"w-full flex flex-wrap\">\n            <div className=\"w-full md:w-1/2\">\n              <div className=\"m-3\">\n                <input\n                  type=\"text\"\n                  name=\"name\"\n                  value={form.name}\n                  onChange={handleChange}\n                  placeholder=\"Your Name\"\n                  required\n                  className=\"w-full border border-gray-100 rounded py-4 px-6 text-sm bg-white\"\n                />\n              </div>\n            </div>\n            <div className=\"w-full md:w-1/2\">\n              <div className=\"m-3\">\n                <input\n                  type=\"email\"\n                  name=\"email\"\n                  value={form.email}\n                  onChange={handleChange}\n                  required\n                  placeholder=\"Your Email\"\n                  className=\"w-full border border-gray-100 rounded py-4 px-6 text-sm bg-white\"\n                />\n              </div>\n            </div>\n            <div className=\"w-full\">\n              <div className=\"m-3\">\n                <textarea\n                  name=\"message\"\n                  value={form.message}\n                  onChange={handleChange}\n                  required\n                  placeholder=\"Your Message\"\n                  rows=\"6\"\n                  className=\"w-full border border-gray-100 rounded py-4 px-6 text-sm bg-white\"\n                />\n              </div>\n            </div>\n            <div className=\"w-full\">\n              <div className=\"m-3 text-right\">\n                <input\n                  type=\"submit\"\n                  value={loading ? \"Sending...\" : \"Send\"}\n                  className=\"rounded bg-blue-800 text-center border-0 py-3 px-6 text-white leading-7 tracking-wide hover:bg-blue-1000 cursor-pointer\"\n                />\n              </div>\n            </div>\n          </div>\n          <ToastContainer />\n        </form>\n      </div>\n    </section>\n  );\n};\n\nexport default Contact;\n","export default __webpack_public_path__ + \"static/media/decidemos.ce038773.png\";","export default __webpack_public_path__ + \"static/media/landlock.70c3677e.png\";","export default __webpack_public_path__ + \"static/media/veamly.170c74ac.png\";","export default __webpack_public_path__ + \"static/media/hiver12.e6b70133.png\";","import React from \"react\";\nimport { FaRegEye } from \"react-icons/fa\";\n\nconst PortfolioItem = (props) => {\n  const { image, title, link, description } = props.portfolio;\n  return (\n    <div className=\"w-full lg:w-1/2\">\n      <div className=\"my-4 md:mx-4 shadow p-6 rounded-md bg-white group hover:shadow-md\">\n        <div className=\"relative mb-6 w-full h-48 bg-blue-200 rounded-md overflow-hidden\">\n          <img\n            src={image}\n            alt=\"coverImage\"\n            className=\"w-full h-full object-cover object-center\"\n          />\n          <div className=\"absolute opacity-0 transition duration-200 bg-blue-200 bg-opacity-80 w-full flex items-center justify-center h-full left-0 top-0 group-hover:opacity-100 group-hover:visible\">\n            <ul className=\"flex flex-wrap\">\n              <li className=\"m-2\">\n                <a\n                  href={link}\n                  target=\"_blank\"\n                  rel=\"noreferrer\"\n                  className=\"w-12 h-10 text-xl text-blue-1000 flex items-center justify-center border-2 border-blue-1000 rounded hover:text-white hover:bg-blue-1000\"\n                >\n                  <FaRegEye />\n                </a>\n              </li>\n            </ul>\n          </div>\n        </div>\n        <h3 className=\"text-lg font-medium text-gray-800 mb-2\">{title}</h3>\n        <p className=\"text-gray-400\">{description}</p>\n      </div>\n    </div>\n  );\n};\n\nexport default PortfolioItem;\n","import React from \"react\";\nimport decidemos from \"../../../images/portfolio/decidemos.png\";\nimport landlock from \"../../../images/portfolio/landlock.png\";\nimport veamly from \"../../../images/portfolio/veamly.png\";\nimport hiver12 from \"../../../images/portfolio/hiver12.png\";\n\nimport PortfolioItem from \"./PortfolioItem\";\n\nconst portfolioData = [\n  {\n    id: 1,\n    image: veamly,\n    title: \"Flowfinitee\",\n    link: \"https://flowfinitee.com/\",\n    description:\n      \"A cross platform desktop applications a desktop application that enhances productivity by providing visibility into work patterns, minimizing distractions, and centralizing collaboration apps. Simplify time management, stay focused, and streamline your workflow effortlessly.\",\n  },\n  {\n    id: 2,\n    image: landlock,\n    title: \"Landlock\",\n    link: \"https://www.landlock.us/\",\n    description:\n      \"A web application that enables users to register and securely store their property information. The application incorporates user authentication, allowing individuals to create accounts, log in securely with persona verification and manage their property details with ease.\",\n  },\n  {\n    id: 3,\n    image: decidemos,\n    title: \"Decidemos\",\n    link: \"https://www.decidemos.fr/\",\n    description:\n      \"A deliberative web platform that allows its members to submit thematic proposals or candidacies according to electoral deadlines, to debate and vote according to a schedule.\",\n  },\n  {\n    id: 4,\n    image: hiver12,\n    title: \"Incubation program\",\n    link: \"https://www.incubator-forms.hive12.com/\",\n    description:\n      \"Hive12, a coworking space, provide a platform for an incubation program offering support to early-stage startups\",\n  },\n];\n\nconst Portfolio = () => {\n  return (\n    <section className=\"pb-10\">\n      <div className=\"flex flex-wrap md:px-4\">\n        {portfolioData.map((portfolio, id) => (\n          <PortfolioItem portfolio={portfolio} key={id} />\n        ))}\n      </div>\n    </section>\n  );\n};\n\nexport default Portfolio;\n","import React from \"react\";\n\nconst ServiceItem = (props) => {\n  const { icon, title, description } = props.service;\n  return (\n    <div className=\"w-full lg:w-1/2\">\n      <div className=\"my-4 md:mx-4 shadow p-6 rounded-md bg-white group hover:shadow-md\">\n        <div className=\"w-16 h-16 flex items-center justify-center rounded-md text-3xl mb-5 bg-blue-100 text-blue-600 transition duration-200 group-hover:bg-blue-800 group-hover:text-white\">\n          {icon}\n        </div>\n        <h3 className=\"text-lg font-medium text-gray-1000 mb-2\">{title}</h3>\n        <p className=\"text-gray-400\">{description}</p>\n      </div>\n    </div>\n  );\n};\n\nexport default ServiceItem;\n","import React from \"react\";\nimport { FaLaptopCode , FaSearchengin , FaCode, FaWordpress, FaReact } from \"react-icons/fa\";\n// import { SiTailwindcss } from \"react-icons/si\";\nimport ServiceItem from \"./ServiceItem\";\n\nconst serviceData = [\n  {\n    id: 1,\n    icon: <FaReact />,\n    title: \"Web Development\",\n    description:\n      \" Creating websites and web applications using various technologies such as HTML, CSS, JavaScript, and frameworks like React, Angular, or Vue.js.\",\n  },\n  {\n    id: 2,\n    icon: <FaCode  />,\n    title: \"Backend Development:\",\n    description:\n      \"Developing server-side logic, databases, APIs, and other components necessary for web or mobile applications using technologies like Node.js (ExpressJS, NestJS),  PHP (Laravel).\",\n  },\n  {\n    id: 3,\n    icon: <FaLaptopCode />,\n    title: \"Full-Stack Development\",\n    description:\n      \"Offering end-to-end development services, including both frontend and backend development, to deliver complete solutions.\",\n  },\n  {\n    id: 4,\n    icon: <FaWordpress />,\n    title: \"CMS Development\",\n    description:\n      \"Creating content management systems (CMS) or customizing existing ones like WordPress to meet specific client needs.\",\n  },\n  {\n    id: 5,\n    icon: <FaSearchengin  />,\n    title: \"SEO and Digital Marketing Integration\",\n    description:\n      \"Optimizing websites and applications for search engines (SEO) and integrating digital marketing tools and analytics for better visibility and performance.\",\n  },\n];\n\nconst Service = () => {\n  return (\n    <section className=\"pb-10\">\n      <div className=\"flex flex-wrap md:px-4\">\n        {serviceData.map((service, id) => (\n          <ServiceItem service={service} key={id} />\n        ))}\n      </div>\n    </section>\n  );\n};\n\nexport default Service;\n","import React from \"react\";\nimport {\n  BrowserRouter as Router,\n  NavLink,\n  Route,\n  Switch,\n} from \"react-router-dom\";\nimport About from \"../../pages/About/About\";\nimport Blog from \"../../pages/Blog/Blog\";\nimport Contact from \"../../pages/Contact/Contact\";\nimport Portfolio from \"../../pages/Portfolio/Portfolio\";\nimport Service from \"../../pages/Service/Service\";\n\nconst navbarData = [\n  {\n    id: 1,\n    title: \"About\",\n    to: \"/about\",\n  },\n  {\n    id: 2,\n    title: \"Services\",\n    to: \"/services\",\n  },\n  {\n    id: 3,\n    title: \"Works\",\n    to: \"/works\",\n  },\n  {\n    id: 4,\n    title: \"Blogs\",\n    to: \"/blogs\",\n  },\n  {\n    id: 5,\n    title: \"Contact\",\n    to: \"/contact\",\n  },\n];\n\nconst Navbar = () => {\n  return (\n    <Router>\n      <nav className=\"md:mx-8 mb-3 px-6 py-2 z-10 sticky top-0 bg-white shadow rounded\">\n        <ul className=\"flex flex-wrap\">\n          {navbarData.map((el, id) => (\n            <LinkItem el={el} key={id} />\n          ))}\n        </ul>\n      </nav>\n\n      <Switch>\n        <Route exact path=\"/\">\n          <About />\n        </Route>\n        <Route path=\"/services\">\n          <Service />\n        </Route>\n        <Route path=\"/works\">\n          <Portfolio />\n        </Route>\n        <Route path=\"/blogs\">\n          <Blog />\n        </Route>\n        <Route path=\"/contact\">\n          <Contact />\n        </Route>\n        <Route path=\"/about\">\n          <About />\n        </Route>\n      </Switch>\n    </Router>\n  );\n};\n\nexport default Navbar;\n\nconst LinkItem = (props) => {\n  const { title, to } = props.el;\n  return (\n    <li className=\"m-3 lg:mx-5\">\n      <NavLink\n        to={to}\n        activeClassName=\"text-blue-1000\"\n        className=\"text-gray-800 text-medium hover:text-blue-1000\"\n      >\n        {title}\n      </NavLink>\n    </li>\n  );\n};\n","export default __webpack_public_path__ + \"static/media/code.14c70275.jpg\";","import React from \"react\";\nimport cover from \"../../../images/code.jpg\";\n\nconst ProfileCover = () => {\n  return (\n    <div className=\"h-60 w-full\">\n      <img\n        src={cover}\n        alt=\"cover\"\n        className=\"w-full h-full object-cover object-center\"\n      />\n    </div>\n  );\n};\n\nexport default ProfileCover;\n","export default __webpack_public_path__ + \"static/media/profile-rayen.5d6b1a88.jpg\";","export default __webpack_public_path__ + \"static/media/rayenbensaad_resume.4efa9d09.pdf\";","import React from \"react\";\nimport {\n  FaFacebookF,\n  FaGithub,\n  FaInstagram,\n  FaLinkedinIn,\n} from \"react-icons/fa\";\nimport profile from \"../../../images/profile-rayen.jpg\";\nimport resume from \"../../../resume/rayenbensaad_resume.pdf\";\n\nconst socials = [\n  {\n    id: 1,\n    icon: <FaFacebookF />,\n    link: \"https://www.facebook.com/rayen.bensaad/\",\n  },\n  {\n    id: 2,\n    icon: <FaGithub />,\n    link: \"https://github.com/rayenbensaad\",\n  },\n  {\n    id: 3,\n    icon: <FaLinkedinIn />,\n    link: \"https://www.linkedin.com/in/bensaadrayen/\",\n  },\n  {\n    id: 4,\n    icon: <FaInstagram />,\n    link: \"https://www.instagram.com/rayenbensaad/\",\n  },\n  // {\n  //   id: 5,\n  //   icon: <FaBehance />,\n  //   link: \"#0\",\n  // },\n  // {\n  //   id: 6,\n  //   icon: <FaDribbble />,\n  //   link: \"#0\",\n  // },\n  // {\n  //   id: 7,\n  //   icon: <FaSkype />,\n  //   link: \"#0\",\n  // },\n  // {\n  //   id: 7,\n  //   icon: <FaTwitter />,\n  //   link: \"#0\",\n  // },\n];\n\nconst Sidebar = () => {\n  return (\n    <aside className=\"sticky top-0 bg-white md:mx-8 lg:mx-4 mb-8 p-6 shadow-md rounded-md -mt-40\">\n      <div className=\"w-24 h-24 rounded-md overflow-hidden mx-auto mb-5\">\n        <img src={profile} alt=\"shafiqhammad\" className=\"w-full\" />\n      </div>\n      <div className=\"text-center\">\n        <h1 className=\"text-xl text-gray-800 font-bold mb-1\">Rayen Ben Saâd</h1>\n        <p className=\"text-sm text-gray-400 mb-3\">\n          Software Engineer | Fullstack JS developer | Frontend developer -\n          <a href=\"#0\" className=\"text-blue-1000 pl-1\">\n            React.js, Next.js, Storybook\n          </a>\n        </p>\n        <a\n          href={resume}\n          className=\"inline-block mb-3 rounded bg-blue-800 text-center border-0 py-2 px-6 text-white leading-7 tracking-wide hover:bg-blue-1000\"\n          download=\"Rayen-Ben-Saad-Resume\"\n        >\n          Download Resume\n        </a>\n        <ul className=\"flex flex-wrap justify-center\">\n          {socials.map((social, id) => (\n            <SocialIcon social={social} key={id} />\n          ))}\n        </ul>\n      </div>\n      <div className=\"text-start pt-4\">\n        <h3 className=\"text-md mb-2 uppercase font-medium text-gray-800\">\n          About Me\n        </h3>\n        <p className=\"text-gray-400 text font-light leading-relaxed\">\n          As a passionate software engineer with a focus on full-stack\n          development, I thrive on crafting innovative solutions that marry\n          cutting-edge technology with user-centric design. With a strong\n          foundation in both front-end and back-end development, I bring\n          creativity and attention to detail to every project I undertake. My\n          journey in the world of software engineering has been driven by a\n          relentless curiosity to explore new technologies and solve complex\n          problems. Through continuous learning and collaboration, I am\n          committed to delivering high-quality, scalable solutions that exceed\n          expectations and make a meaningful impact.\n        </p>\n      </div>\n    </aside>\n  );\n};\n\nexport default Sidebar;\n\nconst SocialIcon = (props) => {\n  const { icon, link } = props.social;\n  return (\n    <li className=\"m-2\">\n      <a\n        href={link}\n        target=\"_blank\"\n        className=\"w-8 h-8 bg-blue-100 rounded text-blue-1000 flex items-center justify-center hover:text-white hover:bg-blue-800\"\n      >\n        {icon}\n      </a>\n    </li>\n  );\n};\n","import Footer from \"./components/sections/Footer/Footer\";\nimport Navbar from \"./components/sections/Navbar/Navbar\";\nimport ProfileCover from \"./components/sections/ProfileCover/ProfileCover\";\nimport Sidebar from \"./components/sections/Sidebar/Sidebar\";\n\nfunction App() {\n  return (\n    <main className=\"min-h-screen relative bg-gray-50 pb-10\">\n      <ProfileCover />\n      <div className=\"container px-4\">\n        <div className=\"flex flex-wrap px-4\">\n          <div className=\"w-full lg:w-1/3 \">\n            <Sidebar />\n          </div>\n          <div className=\"w-full lg:w-2/3 \">\n            <Navbar />\n          </div>\n        </div>\n      </div>\n      <Footer />\n    </main>\n  );\n}\n\nexport default App;\n","const reportWebVitals = onPerfEntry => {\n  if (onPerfEntry && onPerfEntry instanceof Function) {\n    import('web-vitals').then(({ getCLS, getFID, getFCP, getLCP, getTTFB }) => {\n      getCLS(onPerfEntry);\n      getFID(onPerfEntry);\n      getFCP(onPerfEntry);\n      getLCP(onPerfEntry);\n      getTTFB(onPerfEntry);\n    });\n  }\n};\n\nexport default reportWebVitals;\n","import React from 'react';\nimport ReactDOM from 'react-dom';\nimport './index.css';\nimport App from './App';\nimport reportWebVitals from './reportWebVitals';\n\nReactDOM.render(\n  <React.StrictMode>\n    <App />\n  </React.StrictMode>,\n  document.getElementById('root')\n);\n\n// If you want to start measuring performance in your app, pass a function\n// to log results (for example: reportWebVitals(console.log))\n// or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals\nreportWebVitals();\n"],"sourceRoot":""}