\n {\n if (reason !== 'backdropClick') {\n handleDrawerClose();\n } else if (reason !== 'escapeKeyDown') {\n handleDrawerClose();\n }\n }}\n anchor='left'\n open={open}\n classes={{ paper: classes.MuiDrawer }}\n className='drawer'\n disableScrollLock={true}\n >\n
\n\n
\n );\n}\n\nexport default Navbar;\n","import React, { useContext } from 'react'\nimport './Footer.css'\nimport { ThemeContext } from '../../contexts/ThemeContext'\nimport { headerData } from '../../data/headerData'\n\nfunction Footer() {\n\n const shortname = (name) => {\n if(name.length > 10) {\n return name.split(\" \")[0]\n } else {\n return name\n }\n }\n\n const { theme } = useContext(ThemeContext)\n\n return (\n \n
\n \n {shortname(headerData.name)}\n
\n\n\n {\n if (e.key === ' ' || e.key === 'Enter') {\n e.preventDefault();\n handleDrawerClose();\n }\n }}\n className={classes.closebtnIcon}\n role='button'\n tabIndex='0'\n aria-label='Close'\n />\n
\n \n\n
\n
\n \n \n \n \n \n\n \n \n \n\n \n \n \n\n \n \n \n\n \n \n \n\n \n \n \n
\n \n
\n \n \n
\n \n \n
\n \n \n
\n \n \n
\n \n \n
\n \n \n
\n )\n}\n\nexport default Footer\n\n","export const socialsData = {\n github: 'https://github.com/sreerag-rajan',\n facebook: '',\n linkedIn: 'https://www.linkedin.com/in/marwen-mzoughi',\n instagram: '',\n codepen: '',\n twitter: '',\n reddit: '',\n blogger: '',\n medium: 'https://medium.com/@sreerag.rajan5',\n stackOverflow: '',\n gitlab: '',\n youtube: ''\n}","import React, { useContext } from 'react';\nimport { Button } from '@material-ui/core';\nimport { NavHashLink as NavLink } from 'react-router-hash-link';\nimport { makeStyles } from '@material-ui/core/styles';\n\nimport './Landing.css';\nimport { ThemeContext } from '../../contexts/ThemeContext';\nimport { headerData } from '../../data/headerData';\nimport { socialsData } from '../../data/socialsData';\n\nimport {\n FaTwitter,\n FaLinkedin,\n FaGithub,\n FaYoutube,\n FaBlogger,\n} from 'react-icons/fa';\n\nfunction Landing() {\n const { theme, drawerOpen } = useContext(ThemeContext);\n\n const useStyles = makeStyles((t) => ({\n resumeBtn: {\n color: theme.primary,\n borderRadius: '30px',\n textTransform: 'inherit',\n textDecoration: 'none',\n width: '150px',\n fontSize: '1rem',\n fontWeight: '500',\n height: '50px',\n fontFamily: 'var(--primaryFont)',\n border: `3px solid ${theme.primary}`,\n transition: '100ms ease-out',\n '&:hover': {\n backgroundColor: theme.tertiary,\n color: theme.secondary,\n border: `3px solid ${theme.tertiary}`,\n },\n [t.breakpoints.down('sm')]: {\n width: '180px',\n },\n },\n contactBtn: {\n backgroundColor: theme.primary,\n color: theme.secondary,\n borderRadius: '30px',\n textTransform: 'inherit',\n textDecoration: 'none',\n width: '150px',\n height: '50px',\n fontSize: '1rem',\n fontWeight: '500',\n fontFamily: 'var(--primaryFont)',\n border: `3px solid ${theme.primary}`,\n transition: '100ms ease-out',\n '&:hover': {\n backgroundColor: theme.secondary,\n color: theme.tertiary,\n border: `3px solid ${theme.tertiary}`,\n },\n [t.breakpoints.down('sm')]: {\n display: 'none',\n },\n },\n }));\n\n const classes = useStyles();\n\n return (\n \n Made with \n \n ❤\n \n by {shortname(headerData.name)}\n
\n\n \n \n
\n \n \n \n );\n}\n\nexport default Landing;\n","export const aboutData = {\n title: \"Who I am\",\n description1: \"Hello! My name is Marwen Mzoughi. I'm a Senior Revenue Management Analyst.\",\n description2: \"Pricing Manager in the air transport sector, I mainly work on data processing and analysis, the implementation of market strategies, the reorganization and optimization of processes and project management. I am interested in a new opportunities in data processing and analysis. I am also open to new challenges.\",\n image: 2\n}","import React, { useContext } from 'react';\n\nimport './About.css';\nimport { ThemeContext } from '../../contexts/ThemeContext';\nimport { aboutData } from '../../data/aboutData'\n\n\n\nfunction About() {\n\n const { theme } = useContext(ThemeContext);\n return (\n \n \n
\n \n {socialsData.linkedIn && (\n \n \n \n \n \n
\n {headerData.title}
\n{headerData.name}
\n{headerData.desciption}
\n\n\n {headerData.resumePdf && (\n \n \n \n )}\n \n \n \n
\n \n
\n\n )\n}\n\nexport default About\n"," export const skillsData = [\n {title: 'Sector Skills', description: 'Air transport/ Rail transport / Hospitality/ Tour Operators/Travel agencies, Banking / stock brokerage'},\n {title: 'Business Skills', description: 'Data processing and analysis, yield management (revenue optimization), booking and pricing management, reporting, marketing, strategy'},\n {title: 'Technical Skills', description: 'GDS AMADEUS, ATPCO apps, SQL, Power BI, MS Office'},\n {title: 'Cross-sectoral Skills', description: 'Leadership, analysis and synthesis, professional rigor and organization, team leadership, conflict management, creativity, sense of innovation, adaptability and flexibility'},\n \n]\n\n\n\n// Choose your skills from below. Make sure it's in the same format and spelled correctly.\n// Couldn't find the required skills? Raise an issue on github at https://github.com/hhhrrrttt222111/developer-portfolio/issues/new\n\n\n// AVAILABLE SKILLS\n\n/* \n HTML\n CSS\n JS \n React\n Next JS\n Nuxt JS\n Node JS\n Vue\n Angular\n Docker\n Photoshop\n Illustrator\n Svelte\n GCP\n Azure\n Fastify\n Haxe\n Ionic\n Markdown\n Microsoft Office\n Picsart\n Sketch\n Unity\n WolframAlpha\n Adobe XD\n After Effects\n Bootstrap\n Bulma\n CapacitorJs\n Coffeescript\n MemSQL\n C\n C++\n C#\n Python\n Java\n Julia\n Matlab\n Swift\n Ruby\n Kotlin\n Go\n PHP\n Flutter\n Dart\n Typescript\n Swift\n Git\n Figma\n Canva\n Ubuntu\n Bootstrap\n MongoDB\n Tailwind\n ViteJS\n VuetifyJS\n MySQL\n PostgreSQL\n AWS\n Firebase\n Blender\n Premiere Pro\n Adobe Audition\n Deno\n Django\n Gimp\n Graphql\n Lightroom\n MaterialUI\n Nginx\n Numpy\n OpenCV\n Pytorch\n Selenium\n Strapi\n Tensorflow\n Webex\n Wordpress\n*/\n","export default __webpack_public_path__ + \"static/media/gcp.1b20e46e.svg\";","export default __webpack_public_path__ + \"static/media/html.6a342d61.svg\";","export default __webpack_public_path__ + \"static/media/photoshop.1114b31f.svg\";","export default __webpack_public_path__ + \"static/media/illustrator.33feff48.svg\";","export default __webpack_public_path__ + \"static/media/docker.a6221ab3.svg\";","export default __webpack_public_path__ + \"static/media/adobe-xd.a6dca99d.svg\";","export default __webpack_public_path__ + \"static/media/after-effects.3c076652.svg\";","export default __webpack_public_path__ + \"static/media/css.43b6f4bd.svg\";","export default __webpack_public_path__ + \"static/media/angular.d4cb4fa5.svg\";","export default __webpack_public_path__ + \"static/media/javascript.e9360603.svg\";","export default __webpack_public_path__ + \"static/media/nextJS.fc272ac2.svg\";","export default __webpack_public_path__ + \"static/media/nuxtJS.81cb52af.svg\";","export default __webpack_public_path__ + \"static/media/react.2b6a0717.svg\";","export default __webpack_public_path__ + \"static/media/svelte.7b116dd5.svg\";","export default __webpack_public_path__ + \"static/media/typescript.31f8fee8.svg\";","export default __webpack_public_path__ + \"static/media/vue.47bdfb5a.svg\";","export default __webpack_public_path__ + \"static/media/bootstrap.19a2d2ff.svg\";","export default __webpack_public_path__ + \"static/media/bulma.5910d441.svg\";","export default __webpack_public_path__ + \"static/media/capacitorjs.7517cfe2.svg\";","export default __webpack_public_path__ + \"static/media/coffeescript.848d1c77.svg\";","export default __webpack_public_path__ + \"static/media/memsql.aecce246.svg\";","export default __webpack_public_path__ + \"static/media/mongoDB.6c6da702.svg\";","export default __webpack_public_path__ + \"static/media/mysql.f9e45d29.svg\";","export default __webpack_public_path__ + \"static/media/postgresql.c0d71b7c.svg\";","export default __webpack_public_path__ + \"static/media/tailwind.254c4865.svg\";","export default __webpack_public_path__ + \"static/media/vitejs.b99f0b09.svg\";","export default __webpack_public_path__ + \"static/media/vuetifyjs.8a22a3ec.svg\";","export default __webpack_public_path__ + \"static/media/c.77377419.svg\";","export default __webpack_public_path__ + \"static/media/cplusplus.3398ef50.svg\";","export default __webpack_public_path__ + \"static/media/csharp.8f35e178.svg\";","export default __webpack_public_path__ + \"static/media/dart.30bf58d8.svg\";","export default __webpack_public_path__ + \"static/media/go.cda9e1cf.svg\";","export default __webpack_public_path__ + \"static/media/java.d004bc17.svg\";","export default __webpack_public_path__ + \"static/media/julia.be076220.svg\";","export default __webpack_public_path__ + \"static/media/kotlin.4f592da4.svg\";","export default __webpack_public_path__ + \"static/media/matlab.3d4e15a6.svg\";","export default __webpack_public_path__ + \"static/media/php.8132ef91.svg\";","export default __webpack_public_path__ + \"static/media/python.cf32ad96.svg\";","export default __webpack_public_path__ + \"static/media/ruby.34e792ab.svg\";","export default __webpack_public_path__ + \"static/media/swift.a030128a.svg\";","export default __webpack_public_path__ + \"static/media/adobeaudition.afa937d5.svg\";","export default __webpack_public_path__ + \"static/media/aws.0510b15a.svg\";","export default __webpack_public_path__ + \"static/media/deno.96d4a63d.svg\";","export default __webpack_public_path__ + \"static/media/django.d51a8aa4.svg\";","export default __webpack_public_path__ + \"static/media/firebase.99786447.svg\";","export default __webpack_public_path__ + \"static/media/gimp.7cff4c04.svg\";","export default __webpack_public_path__ + \"static/media/git.a0b8447e.svg\";","export default __webpack_public_path__ + \"static/media/graphql.be1dc316.svg\";","export default __webpack_public_path__ + \"static/media/lightroom.0e67d833.svg\";","export default __webpack_public_path__ + \"static/media/materialui.518da2c0.svg\";","export default __webpack_public_path__ + \"static/media/nginx.14c0011a.svg\";","export default __webpack_public_path__ + \"static/media/numpy.5bdfa40b.svg\";","export default __webpack_public_path__ + \"static/media/opencv.0f128460.svg\";","export default __webpack_public_path__ + \"static/media/premierepro.ee38e1aa.svg\";","export default __webpack_public_path__ + \"static/media/pytorch.1862724d.svg\";","export default __webpack_public_path__ + \"static/media/selenium.7dcf1c14.svg\";","export default __webpack_public_path__ + \"static/media/strapi.ac0a6e67.svg\";","export default __webpack_public_path__ + \"static/media/tensorflow.6d6f2e37.svg\";","export default __webpack_public_path__ + \"static/media/webix.99dfb57f.svg\";","export default __webpack_public_path__ + \"static/media/wordpress.1c0bf6df.svg\";","export default __webpack_public_path__ + \"static/media/azure.a4419965.svg\";","export default __webpack_public_path__ + \"static/media/blender.b96901d1.svg\";","export default __webpack_public_path__ + \"static/media/fastify.1b930a41.svg\";","export default __webpack_public_path__ + \"static/media/figma.1cd44608.svg\";","export default __webpack_public_path__ + \"static/media/flutter.643a93c8.svg\";","export default __webpack_public_path__ + \"static/media/haxe.10a910ff.svg\";","export default __webpack_public_path__ + \"static/media/ionic.d2050eeb.svg\";","export default __webpack_public_path__ + \"static/media/markdown.62e50cf0.svg\";","export default __webpack_public_path__ + \"static/media/microsoftoffice.c3a1f4f1.svg\";","export default __webpack_public_path__ + \"static/media/picsart.f869489b.svg\";","export default __webpack_public_path__ + \"static/media/sketch.87c83552.svg\";","export default __webpack_public_path__ + \"static/media/unity.ad58069d.svg\";","export default __webpack_public_path__ + \"static/media/wolframalpha.24726d34.svg\";","export default __webpack_public_path__ + \"static/media/canva.b96f915b.svg\";","import React,{ useContext } from 'react';\nimport Marquee from \"react-fast-marquee\";\n\nimport './Skills.css'\n\nimport { ThemeContext } from '../../contexts/ThemeContext';\nimport { skillsData } from '../../data/skillsData'\nimport { skillsImage } from '../../utils/skillsImage'\n\nfunction Skills() {\n\n const { theme } = useContext(ThemeContext);\n\n const skillBoxStyle = {\n backgroundColor: theme.secondary,\n boxShadow: `0px 0px 30px ${theme.primary30}`\n }\n\n const skillBoxDetailsStyle = {\n backgroundColor: theme.secondary,\n boxShadow: `0px 0px 10px ${theme.primary30}`\n }\n\n return (\n \n \n \n \n
\n \n
\n \n
\n {aboutData.title}
\n{aboutData.description1}
{aboutData.description2}
\n 
\n
\n \n
\n )\n}\n\nexport default Skills\n","export default __webpack_public_path__ + \"static/media/girl1.7f9d8736.svg\";","export default __webpack_public_path__ + \"static/media/girl2.c1222fab.svg\";","export default __webpack_public_path__ + \"static/media/girl3.46f7c62b.svg\";","export default __webpack_public_path__ + \"static/media/boy1.f9c177c8.svg\";","export default __webpack_public_path__ + \"static/media/boy2.ece5c080.svg\";","export default __webpack_public_path__ + \"static/media/boy3.a46b5f81.svg\";","import React, { useContext, useRef } from 'react';\n\nimport Slider from 'react-slick';\n\nimport { FaQuoteLeft, FaArrowRight, FaArrowLeft } from 'react-icons/fa';\n\nimport { ThemeContext } from '../../contexts/ThemeContext';\nimport { testimonialsData } from '../../data/testimonialsData';\n\nimport './Testimonials.css';\n\nfunction Testimonials() {\n const { theme } = useContext(ThemeContext);\n const sliderRef = useRef();\n\n const settings = {\n dots: true,\n adaptiveHeight: true,\n infinite: true,\n speed: 800,\n arrows: false,\n slidesToShow: 1,\n slidesToScroll: 1,\n autoplay: true,\n margin: 3,\n loop: true,\n autoplaySpeed: 3000,\n draggable: true,\n swipeToSlide: true,\n swipe: true,\n };\n\n const gotoNext = () => {\n sliderRef.current.slickNext();\n };\n\n const gotoPrev = () => {\n sliderRef.current.slickPrev();\n };\n\n return (\n <>\n {testimonialsData.length > 0 && (\n \n
\n Skills
\n\n
\n \n \n
\n \n
\n Testimonials
\n\n \n \n {testimonialsData.map((test) => (\n \n \n
\n \n \n ))}\n \n \n \n
\n {test.text}
\n{test.name}
\n{test.title}
\n\n 
\n
\n \n
\n \n {date}
\n{title}
\n{desc}
\n\n
\n )}\n\n \n )\n}\n\nexport default Blog\n","export default __webpack_public_path__ + \"static/media/eduImgWhite.ae822784.svg\";","export default __webpack_public_path__ + \"static/media/eduImgBlack.b19a68ba.svg\";","import React, { useContext } from 'react';\nimport { makeStyles } from '@material-ui/core/styles';\nimport Fade from 'react-reveal/Fade';\n\nimport { ThemeContext } from '../../contexts/ThemeContext';\n\nimport eduImgWhite from '../../assets/svg/education/eduImgWhite.svg'\nimport eduImgBlack from '../../assets/svg/education/eduImgBlack.svg'\nimport './Education.css'\n\nfunction EducationCard({ id, institution, course, startYear, endYear }) {\n\n const { theme } = useContext(ThemeContext);\n\n const useStyles = makeStyles((t) => ({\n educationCard : {\n backgroundColor:theme.primary30,\n \"&:hover\": {\n backgroundColor:theme.primary50,\n },\n },\n }));\n\n const classes = useStyles();\n\n return (\n \n
\n Blog
\n\n
\n \n {blogData.slice(0, 3).reverse().map(blog => (\n
\n\n {blogData.length > 3 && (\n \n \n \n \n
\n )}\n \n
\n \n 
\n
\n \n
\n {startYear}-{endYear}
\n{course}
\n{institution}
\n\n \n
\n )\n}\n\nexport default Education\n","export default __webpack_public_path__ + \"static/media/expImgWhite.0b896d9c.svg\";","export default __webpack_public_path__ + \"static/media/expImgBlack.6f43b1ca.svg\";","import React,{useContext} from 'react';\n\nimport { ThemeContext } from '../../contexts/ThemeContext';\n\nimport './Experience.css';\n\nimport { experienceData } from '../../data/experienceData'\nimport ExperienceCard from './ExperienceCard';\n\nfunction Experience() {\n\n const { theme } = useContext(ThemeContext);\n return (\n \n
\n \n
\n Education
\n {educationData.map(edu => (\n\n 
\n
\n \n
\n )\n}\n\nexport default Experience\n","export const contactsData = {\n email: 'marou.mzoughi@gmail.com',\n phone: '+216 58118859',\n address: '412 Ground Floor, Indraprastha Colony, Sector 30-33, Faridabad, Haryana, 121003',\n\n sheetAPI: ''\n}","import React, { useContext, useState } from 'react';\nimport { Snackbar, IconButton, SnackbarContent } from '@material-ui/core';\nimport CloseIcon from '@material-ui/icons/Close';\nimport axios from 'axios';\nimport isEmail from 'validator/lib/isEmail';\nimport { makeStyles } from '@material-ui/core/styles';\nimport {\n FaTwitter,\n FaLinkedinIn,\n FaGithub,\n FaYoutube,\n FaBloggerB,\n FaRedditAlien,\n FaStackOverflow,\n FaCodepen,\n FaInstagram,\n FaGitlab,\n FaMediumM,\n} from 'react-icons/fa';\nimport { AiOutlineSend, AiOutlineCheckCircle } from 'react-icons/ai';\nimport { FiPhone, FiAtSign } from 'react-icons/fi';\nimport { HiOutlineLocationMarker } from 'react-icons/hi';\n\nimport { ThemeContext } from '../../contexts/ThemeContext';\n\nimport { socialsData } from '../../data/socialsData';\nimport { contactsData } from '../../data/contactsData';\nimport './Contacts.css';\n\nfunction Contacts() {\n const [open, setOpen] = useState(false);\n\n const [name, setName] = useState('');\n const [email, setEmail] = useState('');\n const [message, setMessage] = useState('');\n\n const [success, setSuccess] = useState(false);\n const [errMsg, setErrMsg] = useState('');\n\n const { theme } = useContext(ThemeContext);\n\n const handleClose = (event, reason) => {\n if (reason === 'clickaway') {\n return;\n }\n\n setOpen(false);\n };\n\n const useStyles = makeStyles((t) => ({\n input: {\n border: `4px solid ${theme.primary80}`,\n backgroundColor: `${theme.secondary}`,\n color: `${theme.tertiary}`,\n fontFamily: 'var(--primaryFont)',\n fontWeight: 500,\n transition: 'border 0.2s ease-in-out',\n '&:focus': {\n border: `4px solid ${theme.primary600}`,\n },\n },\n message: {\n border: `4px solid ${theme.primary80}`,\n backgroundColor: `${theme.secondary}`,\n color: `${theme.tertiary}`,\n fontFamily: 'var(--primaryFont)',\n fontWeight: 500,\n transition: 'border 0.2s ease-in-out',\n '&:focus': {\n border: `4px solid ${theme.primary600}`,\n },\n },\n label: {\n backgroundColor: `${theme.secondary}`,\n color: `${theme.primary}`,\n fontFamily: 'var(--primaryFont)',\n fontWeight: 600,\n fontSize: '0.9rem',\n padding: '0 5px',\n transform: 'translate(25px,50%)',\n display: 'inline-flex',\n },\n socialIcon: {\n width: '45px',\n height: '45px',\n borderRadius: '50%',\n display: 'flex',\n alignItems: 'center',\n justifyContent: 'center',\n fontSize: '21px',\n backgroundColor: theme.primary,\n color: theme.secondary,\n transition: '250ms ease-in-out',\n '&:hover': {\n transform: 'scale(1.1)',\n color: theme.secondary,\n backgroundColor: theme.tertiary,\n },\n },\n detailsIcon: {\n backgroundColor: theme.primary,\n color: theme.secondary,\n borderRadius: '50%',\n width: '45px',\n height: '45px',\n display: 'flex',\n alignItems: 'center',\n justifyContent: 'center',\n fontSize: '23px',\n transition: '250ms ease-in-out',\n flexShrink: 0,\n '&:hover': {\n transform: 'scale(1.1)',\n color: theme.secondary,\n backgroundColor: theme.tertiary,\n },\n },\n submitBtn: {\n backgroundColor: theme.primary,\n color: theme.secondary,\n transition: '250ms ease-in-out',\n '&:hover': {\n transform: 'scale(1.08)',\n color: theme.secondary,\n backgroundColor: theme.tertiary,\n },\n },\n }));\n\n const classes = useStyles();\n\n const handleContactForm = (e) => {\n e.preventDefault();\n\n if (name && email && message) {\n if (isEmail(email)) {\n const responseData = {\n name: name,\n email: email,\n message: message,\n };\n\n axios.post(contactsData.sheetAPI, responseData).then((res) => {\n console.log('success');\n setSuccess(true);\n setErrMsg('');\n\n setName('');\n setEmail('');\n setMessage('');\n setOpen(false);\n });\n } else {\n setErrMsg('Invalid email');\n setOpen(true);\n }\n } else {\n setErrMsg('Enter all the fields');\n setOpen(true);\n }\n };\n\n return (\n \n
\n \n 
\n
\n \n \n ))}\n
\n Experience
\n {experienceData.map(exp =>(\n\n
\n {/* Contacts
\n\n {/*
\n \n \n \n \n \n
*/}\n\n \n \n \n
\n \n
\n \n {contactsData.email}\n
\n \n\n
\n \n {contactsData.phone}\n
\n \n {/*\n
*/}\n\n \n \n
\n \n {contactsData.address}\n
\n\n \n {name}\n \n \n \n
\n \n
\n )}\n\n \n )\n}\n\nexport default Projects\n","/* eslint-disable */\nimport { BiShoppingBag, BiPencil } from \"react-icons/bi\";\nimport { BsCodeSlash, BsClipboardData } from \"react-icons/bs\";\nimport { AiOutlineMail, AiFillAudio } from \"react-icons/ai\";\nimport { FaInternetExplorer, FaChalkboardTeacher, FaCameraRetro, FaPinterest, FaVideo, FaTabletAlt, FaRegNewspaper } from \"react-icons/fa\";\n\n \n\nexport const servicesData = [\n // {\n // id: 1,\n // title: 'Marketing',\n // icon: \n
\n Professional Experience
\n\n
\n \n {projectsData.slice(0, 4).map(project => (\n
\n\n {projectsData.length > 3 && (\n \n \n \n \n
\n )}\n \n
\n )}\n \n )\n}\n\nexport default Services\n","export const achievementData = {\n bio : \"The illiterate of the 21st century will not be those who cannot read and write, but those who cannot learn, unlearn, and relearn. - Alvin Toffler\",\n achievements : [\n {\n id : 1,\n title : 'ATPCO CAT31/33',\n details : 'Automation of voluntary changes and voluntary refunds',\n date : '',\n field : '',\n image : 'https://udemy-certificate.s3.amazonaws.com/image/UC-0cd075aa-f55b-4d9f-aec0-119020a4e792.jpg?v=1611846350000'\n },\n {\n id : 2,\n title : 'ATPCO OPTIONAL SERVICES & BRANDED FARES',\n details : 'Implementation of optional services and branded fare policies',\n date : '',\n field : '',\n image : 'https://udemy-certificate.s3.amazonaws.com/image/UC-91ae3ea2-39ee-4a57-bf23-d397aff0d9a7.jpg?v=1621951317000'\n },\n {\n id : 3,\n title : 'ATPCO FAREMANAGER',\n details : 'Creation and management of database of fares and conditions',\n date : '',\n field : '',\n image : 'https://udemy-certificate.s3.amazonaws.com/image/UC-0cd075aa-f55b-4d9f-aec0-119020a4e792.jpg?v=1611846350000'\n },\n {\n id : 4,\n title : 'AMADEUS ARD WEB',\n details : 'Advanced training on how to create a PNR, sell ancillary services, search for fares, issue and exchange documents…',\n date : '',\n field : '',\n image : 'https://udemy-certificate.s3.amazonaws.com/image/UC-91ae3ea2-39ee-4a57-bf23-d397aff0d9a7.jpg?v=1621951317000'\n },\n {\n id : 5,\n title : 'ATPCO Carrier-Imposed Fees',\n details : 'Creation and management of carrier-imposed fees and ticketing fees',\n date : '',\n field : '',\n image : 'https://udemy-certificate.s3.amazonaws.com/image/UC-0cd075aa-f55b-4d9f-aec0-119020a4e792.jpg?v=1611846350000'\n },\n {\n id : 6,\n title : 'Profitline/Yield',\n details : 'Initiation to the revenue management system and demand forecast',\n date : '',\n field : '',\n image : 'https://udemy-certificate.s3.amazonaws.com/image/UC-91ae3ea2-39ee-4a57-bf23-d397aff0d9a7.jpg?v=1621951317000'\n },\n {\n id : 7,\n title : 'IATA Airline Management',\n details : 'Dynamic pricing and revenue management (basic concepts) Route forecasting and development (analysis of new routes profitability)',\n date : '',\n field : '',\n image : 'https://udemy-certificate.s3.amazonaws.com/image/UC-0cd075aa-f55b-4d9f-aec0-119020a4e792.jpg?v=1611846350000'\n },\n\n ]\n}\n\n\n// Do not remove any fields.\n// Leave it blank instead as shown below.\n\n/*\n\nexport const achievementData = {\n bio : \"\",\n achievements : []\n}\n\n*/","import React, { useContext } from 'react';\nimport { makeStyles } from '@material-ui/core/styles';\nimport Fade from 'react-reveal/Fade';\n\nimport { ThemeContext } from '../../contexts/ThemeContext';\n\nimport { AiOutlineFolder } from \"react-icons/ai\";\n\nimport './Achievement.css'\n\nfunction AchievementCard({id, title, details, date, field, image}) {\n\n const { theme } = useContext(ThemeContext);\n\n const useStyles = makeStyles((t) => ({\n achievementCard : {\n backgroundColor:theme.primary30,\n \"&:hover\": {\n backgroundColor:theme.primary50,\n },\n },\n }));\n\n const classes = useStyles();\n return (\n \n
\n Services
\n\n
\n \n These are some of the services I offer. Reach out to me if I can help you with any!\n
\n\n {servicesData.map(services => (\n \n ))}\n
\n \n
\n \n
\n \n
\n {title}
\n{details}
\n\n
\n \n
\n {field}
\n\n 
\n
\n \n
\n )}\n \n )\n}\n\nexport default Achievement\n","import React, { useState, useContext } from 'react';\nimport { IoIosArrowDropupCircle } from 'react-icons/io';\nimport { makeStyles } from '@material-ui/core/styles';\n\nimport { ThemeContext } from '../../contexts/ThemeContext';\nimport './BackToTop.css';\n\nfunction BackToTop() {\n const [visible, setVisible] = useState(false);\n\n const { theme } = useContext(ThemeContext);\n\n const toggleVisible = () => {\n const scrolled = document.documentElement.scrollTop;\n if (scrolled > 300) {\n setVisible(true);\n } else if (scrolled <= 300) {\n setVisible(false);\n }\n };\n\n const scrollToTop = () => {\n window.scrollTo({\n top: 0,\n behavior: 'smooth',\n });\n };\n\n window.addEventListener('scroll', toggleVisible);\n\n const useStyles = makeStyles(() => ({\n icon: {\n fontSize: '3rem',\n color: theme.tertiary,\n },\n }));\n\n const classes = useStyles();\n\n return (\n \n
\n Achievements
\n{achievementData.bio}
\n\n {achievementData.achievements.map(achieve => ( \n \n ))}\n
\n \n \n {headerData.name} - Porfolio \n \n\n
\n )\n}\n\nexport default Main\n","import React, { useContext, useState } from 'react'\nimport { Helmet } from 'react-helmet'\nimport { Grid } from '@material-ui/core'\nimport { Link } from 'react-router-dom'\nimport { makeStyles } from '@material-ui/core/styles';\nimport { AiOutlineHome } from \"react-icons/ai\";\n\nimport './BlogPage.css'\nimport { SingleBlog } from '../../components'\nimport { ThemeContext } from '../../contexts/ThemeContext';\nimport { blogData } from '../../data/blogData'\nimport { headerData } from '../../data/headerData'\n\nfunction BlogPage() {\n\n const [search, setSearch] = useState('')\n const { theme } = useContext(ThemeContext);\n\n const filteredArticles = blogData.filter((blog) => {\n const content = blog.title + blog.description + blog.date\n return content.toLowerCase().includes(search.toLowerCase())\n })\n\n\n const useStyles = makeStyles((t) => ({\n search : {\n color: theme.tertiary, \n width: '40%',\n height: '2.75rem',\n outline: 'none',\n border: 'none',\n borderRadius: '20px',\n padding: '0.95rem 1rem',\n fontFamily: \"'Noto Sans TC', sans-serif\",\n fontWeight: 500,\n fontSize: '0.9rem', \n backgroundColor: theme.secondary, \n boxShadow: theme.type === 'dark' ? 'inset 3px 3px 6px #ffffff10, inset -3px -3px 6px #00000060' : 'inset 3px 3px 6px #ffffffbd, inset -3px -3px 6px #00000030',\n \"&::placeholder\": {\n color: theme.tertiary80, \n },\n [t.breakpoints.down('sm')]: {\n width:'350px',\n },\n },\n home: {\n color: theme.secondary,\n position: 'absolute',\n top: 25,\n left: 25,\n padding: '7px',\n borderRadius: '50%',\n boxSizing: 'content-box',\n fontSize: '2rem',\n cursor: 'pointer',\n boxShadow: theme.type === 'dark' ? '3px 3px 6px #ffffff40, -3px -3px 6px #00000050' : '3px 3px 6px #ffffff40, -3px -3px 6px #00000050',\n transition: 'all 0.3s ease-in-out',\n \"&:hover\": \n {\n color: theme.tertiary,\n transform: 'scale(1.1)',\n },\n [t.breakpoints.down('sm')]: {\n fontSize: '1.8rem',\n },\n },\n }));\n\n const classes = useStyles();\n\n return (\n \n \n {headerData.name} | Blog \n \n
\n )\n}\n\nexport default BlogPage\n","import React, { useContext, useState } from 'react'\nimport { Helmet } from 'react-helmet'\nimport { Grid } from '@material-ui/core'\nimport { Link } from 'react-router-dom'\nimport { makeStyles } from '@material-ui/core/styles';\nimport { AiOutlineHome } from \"react-icons/ai\";\n\nimport './ProjectPage.css'\nimport { SingleProject } from '../../components';\nimport { ThemeContext } from '../../contexts/ThemeContext';\nimport { projectsData } from '../../data/projectsData'\nimport { headerData } from '../../data/headerData'\n\nfunction ProjectPage() {\n\n const [search, setSearch] = useState('')\n const { theme } = useContext(ThemeContext);\n\n const filteredArticles = projectsData.filter((project) => {\n const content = project.projectName + project.projectDesc + project.tags\n return content.toLowerCase().includes(search.toLowerCase())\n })\n\n const useStyles = makeStyles((t) => ({\n search : {\n color: theme.tertiary, \n width: '40%',\n height: '2.75rem',\n outline: 'none',\n border: 'none',\n borderRadius: '20px',\n padding: '0.95rem 1rem',\n fontFamily: \"'Noto Sans TC', sans-serif\",\n fontWeight: 500,\n fontSize: '0.9rem', \n backgroundColor: theme.secondary, \n boxShadow: theme.type === 'dark' ? 'inset 3px 3px 6px #ffffff10, inset -3px -3px 6px #00000060' : 'inset 3px 3px 6px #ffffffbd, inset -3px -3px 6px #00000030',\n \"&::placeholder\": {\n color: theme.tertiary80, \n },\n [t.breakpoints.down('sm')]: {\n width:'350px',\n },\n },\n home: {\n color: theme.secondary,\n position: 'absolute',\n top: 25,\n left: 25,\n padding: '7px',\n borderRadius: '50%',\n boxSizing: 'content-box',\n fontSize: '2rem',\n cursor: 'pointer',\n boxShadow: theme.type === 'dark' ? '3px 3px 6px #ffffff40, -3px -3px 6px #00000050' : '3px 3px 6px #ffffff40, -3px -3px 6px #00000050',\n transition: 'all 0.3s ease-in-out',\n \"&:hover\": \n {\n color: theme.tertiary,\n transform: 'scale(1.1)',\n },\n [t.breakpoints.down('sm')]: {\n fontSize: '1.8rem',\n },\n },\n }));\n\n const classes = useStyles();\n\n return (\n \n \n \n \n
\n Blogs
\n\n
\n \n setSearch(e.target.value)} placeholder=\"Seach blog...\" className={classes.search}/>\n
\n \n \n {filteredArticles.reverse().map(blog => (\n \n
\n \n \n {headerData.name} | Professional Experience \n \n
\n )\n}\n\nexport default ProjectPage\n","import { useEffect } from 'react';\nimport { withRouter } from 'react-router-dom';\n\nfunction ScrollToTop({ history }) {\n useEffect(() => {\n const unlisten = history.listen(() => {\n window.scrollTo(0, 0);\n });\n return () => {\n unlisten();\n }\n });\n\n return (null);\n}\n\nexport default withRouter(ScrollToTop);","import React, { useContext } from 'react';\nimport { BrowserRouter as Router, Route, Switch, Redirect } from 'react-router-dom';\n\nimport { ThemeContext } from './contexts/ThemeContext';\nimport { Main, BlogPage, ProjectPage } from './pages'\nimport { BackToTop } from './components'\nimport ScrollToTop from './utils/ScrollToTop'\n\nimport './App.css'\n\nfunction App() {\n\n const { theme } = useContext(ThemeContext);\n\n console.log(\"%cDEVELOPER PORTFOLIO\", `color:${theme.primary}; font-size:50px`);\n console.log(\"%chttps://github.com/hhhrrrttt222111/developer-portfolio\", `color:${theme.tertiary}; font-size:20px`);\n // console.log = console.warn = console.error = () => {};\n\n return (\n \n \n \n \n
\n Professional Experience
\n\n
\n \n setSearch(e.target.value)} placeholder=\"Search project...\" className={classes.search} />\n
\n \n \n {filteredArticles.map(project => (\n \n
\n \n \n \n \n \n
\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';\nimport ThemeContextProvider from './contexts/ThemeContext'\n\n\nimport \"slick-carousel/slick/slick.css\"; \nimport \"slick-carousel/slick/slick-theme.css\";\n\nReactDOM.render(\n