{children}
\n \n );\n};\n","import { useEffect, useRef } from 'react';\nvar DEFAULT_USE_TITLE_OPTIONS = {\n restoreOnUnmount: false,\n};\nfunction useTitle(title, options) {\n if (options === void 0) { options = DEFAULT_USE_TITLE_OPTIONS; }\n var prevTitleRef = useRef(document.title);\n if (document.title !== title)\n document.title = title;\n useEffect(function () {\n if (options && options.restoreOnUnmount) {\n return function () {\n document.title = prevTitleRef.current;\n };\n }\n else {\n return;\n }\n }, []);\n}\nexport default typeof document !== 'undefined' ? useTitle : function (_title) { };\n","// extracted by mini-css-extract-plugin\nexport default {\"navbar\":\"Navbar_navbar__3Mm5I\",\"navbar_hidden\":\"Navbar_navbar_hidden__YAfw0\",\"navbar_color\":\"Navbar_navbar_color__BrLDh\",\"header\":\"Navbar_header__BFAxg\",\"logo\":\"Navbar_logo__Y2vXI\",\"logo_link\":\"Navbar_logo_link__serLW\",\"burger\":\"Navbar_burger__5EK44\",\"active\":\"Navbar_active__bXxdV\",\"bar1\":\"Navbar_bar1__aEZP8\",\"bar2\":\"Navbar_bar2__CAB+i\",\"menu\":\"Navbar_menu__ulCGQ\",\"switch_mode\":\"Navbar_switch_mode__8u-Jp\",\"menu_item\":\"Navbar_menu_item__d8l3l\",\"link\":\"Navbar_link__T3AnO\"};","import { FC, useCallback, useEffect, useState } from 'react';\nimport { navLinks } from 'Constants';\n\nimport { FaSun, FaMoon } from 'react-icons/fa';\nimport { useMode } from 'Hooks/useMode';\nimport useClassNames from 'Hooks/useClassNames';\nimport { useMediaQuery } from 'react-responsive';\nimport { SlideToggle } from 'Components/SlideToggle';\nimport { useTitle } from 'react-use';\nimport styles from './Navbar.module.scss';\n\nexport const Navbar: FC = () => {\n const { darkMode, setDarkMode } = useMode();\n const [onScroll, setOnScroll] = useState(true);\n const [isActive, setIsActive] = useState(false);\n const [lastScroll, setLastScroll] = useState(0);\n const [path, setPath] = useState('Portfolio');\n const [color, setColor] = useState(false);\n useTitle(`${path} | Jessie Tarrosa`);\n\n const burger = useMediaQuery({ query: '(max-width: 800px)' });\n\n const handleScroll = useCallback(() => {\n if (typeof window !== 'undefined') {\n setLastScroll(window.scrollY || document.documentElement.scrollTop);\n\n if (window.scrollY > lastScroll) {\n if (lastScroll > 80) {\n setColor(true);\n } else {\n setColor(false);\n }\n setOnScroll(false);\n } else {\n setOnScroll(true);\n }\n }\n }, [lastScroll]);\n\n const handleToggle = (value: boolean) => {\n setDarkMode(value);\n setIsActive(false);\n };\n\n const handleClick = useCallback((path: string) => {\n let newPath = path;\n if (newPath === '' || newPath === 'Home') {\n newPath = 'Portfolio';\n }\n\n setPath(newPath);\n setIsActive(false);\n }, []);\n\n useEffect(() => {\n window.addEventListener('scroll', handleScroll);\n\n return () => {\n window.removeEventListener('scroll', handleScroll);\n };\n }, [handleScroll]);\n\n useEffect(() => {\n let active = true;\n\n if (!burger) {\n if (active) {\n setIsActive(false);\n }\n }\n\n return () => {\n active = false;\n };\n }, [burger]);\n\n return (\n \n );\n};\n","// extracted by mini-css-extract-plugin\nexport default {\"section\":\"Section_section__bEAWa\"};","import { FC } from 'react';\nimport useClassNames from 'Hooks/useClassNames';\n\nimport styles from './Section.module.scss';\n\ninterface SectionProps {\n id?: string;\n className?: string;\n animation?: string;\n children?: React.ReactNode;\n}\n\nexport const Section: FC\n
\n );\n};\n","// extracted by mini-css-extract-plugin\nexport default {\"button\":\"LinkButton_button__bhO8B\",\"slide\":\"LinkButton_slide__wSE6P\"};","import useClassNames from 'Hooks/useClassNames';\nimport { FC } from 'react';\n\nimport styles from './LinkButton.module.scss';\n\ninterface LinkButtonProps {\n link: string;\n className?: string;\n children?: React.ReactNode;\n}\n\nexport const LinkButton: FC\n {onLoad && (\n \n \n )}\n 
setOnLoad(false)} />\n
\n {name}
\nProjects
\n\n {data.map((item, i) => (\n
\n \n 2 ? 2 : 1,\n partialVisibilityGutter: 40\n },\n mobile: {\n breakpoint: {\n max: 464,\n min: 0\n },\n items: 1,\n partialVisibilityGutter: 30\n },\n tablet: {\n breakpoint: {\n max: 1024,\n min: 464\n },\n items: data[i].projects.length > 2 ? 2 : 1,\n partialVisibilityGutter: 30\n }\n }}\n showDots={false}\n sliderClass=\"\"\n slidesToSlide={1}\n swipeable\n >\n {item.projects.map((project, i) => (\n
\n ))}\n \n
\n \n {item.name}\n
\n {item?.link && (\n \n Role:\n
\n {item.role}
\n\n View Details \n
\n )}\n \n
\n About Me
\n\n As an experienced full-stack developer with five years of hands-on experience, I bring a versatile skill set\n to the table. My expertise spans both front-end and back-end technologies, making me a valuable asset to any\n development team. On the front-end, I have a strong command of JavaScript, React, and Redux, enabling me to\n design and implement dynamic and responsive user interfaces. Proficiency in front-end technologies such as CSS\n and HTML ensures that I can create visually appealing and user-friendly web applications.\n
\n\n On the back-end, I excel in building scalable and cost-effective systems, with a deep understanding of\n databases and effective data integration. I am also well-versed in cloud hosting and deployment strategies,\n ensuring that applications I work on are not only functional but also performant and easily scalable.\n Additionally, I am skilled in project management, utilizing collaboration tools like Git, GitHub, and JIRA.\n
\n\n My commitment to delivering high-quality, efficient, and maintainable code is unwavering. I thrive on\n problem-solving and collaboration, always eager to embrace emerging technologies to enhance the quality of my\n work. With a proven track record of success, I am dedicated to continuous growth and development, constantly\n seeking opportunities to expand my skills and contribute to innovative full-stack projects.\n
\nThese are the tools that he's been using over the past few years in web development.
\n\n {tools.map((item: Tools, i) => (\n \n 
\n \n ))}\n
\n \n View Resume \n
\n \n \n \n
\n );\n};\n","// extracted by mini-css-extract-plugin\nexport default {\"intro\":\"Intro_intro__MxZGf\",\"intro_container\":\"Intro_intro_container__OTznu\",\"socials\":\"Intro_socials__g9a0P\",\"socials_icon\":\"Intro_socials_icon__S3w0k\",\"linkedin\":\"Intro_linkedin__koZnb\",\"github\":\"Intro_github__-yT7e\",\"twitter\":\"Intro_twitter__3QRux\",\"instagram\":\"Intro_instagram__jTjQ0\",\"light_mode\":\"Intro_light_mode__W5jeJ\",\"button_group\":\"Intro_button_group__vD9uV\",\"img_container\":\"Intro_img_container__QhZG8\",\"image_circle\":\"Intro_image_circle__edtwt\"};","import { FC } from 'react';\nimport { Section } from 'Components/Section';\nimport Typewriter from 'typewriter-effect';\nimport { roles } from 'Constants';\nimport { IconType } from 'react-icons';\nimport { FaGithub, FaInstagram, FaLinkedin, FaTwitter } from 'react-icons/fa';\nimport { SiCodewars } from 'react-icons/si';\nimport man from 'assets/image/jessie.png';\n\nimport { LinkButton } from 'Components/LinkButton';\nimport { useMode } from 'Hooks/useMode';\nimport { Cat } from 'Components/Cat';\nimport styles from './Intro.module.scss';\n\ninterface Socials {\n icon: IconType;\n link: string;\n name: string;\n}\n\nconst socials: Socials[] = [\n {\n icon: FaGithub,\n link: 'https://github.com/oreoseenoevil/',\n name: 'github'\n },\n {\n icon: FaLinkedin,\n link: 'https://www.linkedin.com/in/jessiedev/',\n name: 'linkedin'\n },\n {\n icon: FaTwitter,\n link: 'https://www.twitter.com/majessietic/',\n name: 'twitter'\n },\n {\n icon: FaInstagram,\n link: 'https://www.instagram.com/oreoseenoevil/',\n name: 'instagram'\n },\n {\n icon: SiCodewars,\n link: 'https://www.codewars.com/users/oreoseenoevil',\n name: 'codewars'\n }\n];\n\nexport const Intro: FC = () => {\n const { darkMode } = useMode();\n\n return (\n \n
\n \n
\n \n
\n \n
\n \n \n
\n \n \n
\n
\n Hello I'm Jessie Tarrosa
\n\n
\n \n {socials.map((item: Socials, i) => (\n \n
\n \n Get in touch \n
\n \n {darkMode ? (\n
\n \n 
\n
\n )}\n \n
\n );\n};\n","import { ReportHandler } from 'web-vitals';\n\nconst reportWebVitals = (onPerfEntry?: ReportHandler) => {\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/client';\n\nimport 'normalize.css';\nimport 'Styles/main.scss';\nimport 'react-multi-carousel/lib/styles.css';\n\nimport { App } from 'UI/App';\nimport { ModeContextProvider } from 'Context/Mode';\nimport reportWebVitals from './reportWebVitals';\n\nconst rootElement = document.getElementById('root');\n\nconst root = ReactDOM.createRoot(rootElement as Element);\n\nroot.render(\n \n
\n \n {/* {children}
\r\n \r\n );\r\n};\r\n","import { useEffect, useRef } from 'react';\nvar DEFAULT_USE_TITLE_OPTIONS = {\n restoreOnUnmount: false,\n};\nfunction useTitle(title, options) {\n if (options === void 0) { options = DEFAULT_USE_TITLE_OPTIONS; }\n var prevTitleRef = useRef(document.title);\n if (document.title !== title)\n document.title = title;\n useEffect(function () {\n if (options && options.restoreOnUnmount) {\n return function () {\n document.title = prevTitleRef.current;\n };\n }\n else {\n return;\n }\n }, []);\n}\nexport default typeof document !== 'undefined' ? useTitle : function (_title) { };\n","// extracted by mini-css-extract-plugin\nexport default {\"navbar\":\"Navbar_navbar__3MfWQ\",\"navbar_hidden\":\"Navbar_navbar_hidden__-OFmK\",\"navbar_color\":\"Navbar_navbar_color__BDeHN\",\"header\":\"Navbar_header__9Y54W\",\"logo\":\"Navbar_logo__yOZgx\",\"logo_link\":\"Navbar_logo_link__K0acz\",\"burger\":\"Navbar_burger__3g8j1\",\"active\":\"Navbar_active__phK2w\",\"bar1\":\"Navbar_bar1__uYT6L\",\"bar2\":\"Navbar_bar2__by8tn\",\"menu\":\"Navbar_menu__62QW2\",\"switch_mode\":\"Navbar_switch_mode__PMmiv\",\"menu_item\":\"Navbar_menu_item__AK9-3\",\"link\":\"Navbar_link__ajYmx\"};","import { FC, useCallback, useEffect, useState } from 'react';\r\nimport { navLinks } from 'Constants';\r\n\r\nimport { FaSun, FaMoon } from 'react-icons/fa';\r\nimport { useMode } from 'Hooks/useMode';\r\nimport useClassNames from 'Hooks/useClassNames';\r\nimport { useMediaQuery } from 'react-responsive';\r\nimport { SlideToggle } from 'Components/SlideToggle';\r\nimport { useTitle } from 'react-use';\r\nimport styles from './Navbar.module.scss';\r\n\r\nexport const Navbar: FC = () => {\r\n const { darkMode, setDarkMode } = useMode();\r\n const [onScroll, setOnScroll] = useState(true);\r\n const [isActive, setIsActive] = useState(false);\r\n const [lastScroll, setLastScroll] = useState(0);\r\n const [path, setPath] = useState('Portfolio');\r\n const [color, setColor] = useState(false);\r\n useTitle(`${path} | Jessie Tarrosa`);\r\n\r\n const burger = useMediaQuery({ query: '(max-width: 800px)' });\r\n\r\n const handleScroll = useCallback(() => {\r\n if (typeof window !== 'undefined') {\r\n setLastScroll(window.scrollY || document.documentElement.scrollTop);\r\n\r\n if (window.scrollY > lastScroll) {\r\n if (lastScroll > 80) {\r\n setColor(true);\r\n } else {\r\n setColor(false);\r\n }\r\n setOnScroll(false);\r\n } else {\r\n setOnScroll(true);\r\n }\r\n }\r\n }, [lastScroll]);\r\n\r\n const handleToggle = (value: boolean) => {\r\n setDarkMode(value);\r\n setIsActive(false);\r\n };\r\n\r\n const handleClick = useCallback((path: string) => {\r\n let newPath = path;\r\n if (newPath === '' || newPath === 'Home') {\r\n newPath = 'Portfolio';\r\n }\r\n\r\n setPath(newPath);\r\n setIsActive(false);\r\n }, []);\r\n\r\n useEffect(() => {\r\n window.addEventListener('scroll', handleScroll);\r\n\r\n return () => {\r\n window.removeEventListener('scroll', handleScroll);\r\n };\r\n }, [handleScroll]);\r\n\r\n useEffect(() => {\r\n let active = true;\r\n\r\n if (!burger) {\r\n if (active) {\r\n setIsActive(false);\r\n }\r\n }\r\n\r\n return () => {\r\n active = false;\r\n };\r\n }, [burger]);\r\n\r\n return (\r\n \r\n );\r\n};\r\n","// extracted by mini-css-extract-plugin\nexport default {\"section\":\"Section_section__utGu9\"};","import { FC } from 'react';\r\nimport useClassNames from 'Hooks/useClassNames';\r\n\r\nimport styles from './Section.module.scss';\r\n\r\ninterface SectionProps {\r\n id?: string;\r\n className?: string;\r\n animation?: string;\r\n children?: React.ReactNode;\r\n}\r\n\r\nexport const Section: FC\r\n
\r\n );\r\n};\r\n","// extracted by mini-css-extract-plugin\nexport default {\"button\":\"LinkButton_button__06wwk\",\"slide\":\"LinkButton_slide__yaQIh\"};","import useClassNames from 'Hooks/useClassNames';\r\nimport { FC } from 'react';\r\n\r\nimport styles from './LinkButton.module.scss';\r\n\r\ninterface LinkButtonProps {\r\n link: string;\r\n className?: string;\r\n children?: React.ReactNode;\r\n}\r\n\r\nexport const LinkButton: FC\r\n {onLoad && (\r\n \r\n \r\n )}\r\n setOnLoad(false)} />\r\n
\r\n {name}
\r\nProjects
\r\n\r\n {data.map((item, i) => (\r\n
\r\n \r\n 2 ? 2 : 1,\r\n partialVisibilityGutter: 40\r\n },\r\n mobile: {\r\n breakpoint: {\r\n max: 464,\r\n min: 0\r\n },\r\n items: 1,\r\n partialVisibilityGutter: 30\r\n },\r\n tablet: {\r\n breakpoint: {\r\n max: 1024,\r\n min: 464\r\n },\r\n items: data[i].projects.length > 2 ? 2 : 1,\r\n partialVisibilityGutter: 30\r\n }\r\n }}\r\n showDots={false}\r\n sliderClass=\"\"\r\n slidesToSlide={1}\r\n swipeable\r\n >\r\n {item.projects.map((project, i) => (\r\n
\r\n ))}\r\n \r\n
\r\n \r\n {item.name}\r\n
\r\n {item?.link && (\r\n \r\n Role:\r\n
\r\n {item.role}
\r\n\r\n View Details \r\n
\r\n )}\r\n \r\n
\r\n About Me
\r\n\r\n As an experienced full-stack developer with five years of hands-on experience, I bring a versatile skill set\r\n to the table. My expertise spans both front-end and back-end technologies, making me a valuable asset to any\r\n development team. On the front-end, I have a strong command of JavaScript, React, and Redux, enabling me to\r\n design and implement dynamic and responsive user interfaces. Proficiency in front-end technologies such as CSS\r\n and HTML ensures that I can create visually appealing and user-friendly web applications.\r\n
\r\n\r\n On the back-end, I excel in building scalable and cost-effective systems, with a deep understanding of\r\n databases and effective data integration. I am also well-versed in cloud hosting and deployment strategies,\r\n ensuring that applications I work on are not only functional but also performant and easily scalable.\r\n Additionally, I am skilled in project management, utilizing collaboration tools like Git, GitHub, and JIRA.\r\n
\r\n\r\n My commitment to delivering high-quality, efficient, and maintainable code is unwavering. I thrive on\r\n problem-solving and collaboration, always eager to embrace emerging technologies to enhance the quality of my\r\n work. With a proven track record of success, I am dedicated to continuous growth and development, constantly\r\n seeking opportunities to expand my skills and contribute to innovative full-stack projects.\r\n
\r\nThese are the tools that he's been using over the past few years in web development.
\r\n\r\n {tools.map((item: Tools, i) => (\r\n \r\n \r\n \r\n ))}\r\n
\r\n \r\n View Resume \r\n
\r\n \r\n \r\n \r\n
\r\n );\r\n};\r\n","// extracted by mini-css-extract-plugin\nexport default {\"intro\":\"Intro_intro__9nqgm\",\"intro_container\":\"Intro_intro_container__0P-EK\",\"socials\":\"Intro_socials__YcTtk\",\"socials_icon\":\"Intro_socials_icon__7TYkL\",\"linkedin\":\"Intro_linkedin__F6EF3\",\"github\":\"Intro_github__9cY8l\",\"twitter\":\"Intro_twitter__0XavV\",\"instagram\":\"Intro_instagram__ZmeLD\",\"light_mode\":\"Intro_light_mode__CMTcg\",\"button_group\":\"Intro_button_group__JMsDG\",\"img_container\":\"Intro_img_container__JyrU-\",\"image_circle\":\"Intro_image_circle__3894A\"};","import { FC } from 'react';\r\nimport { Section } from 'Components/Section';\r\nimport Typewriter from 'typewriter-effect';\r\nimport { roles } from 'Constants';\r\nimport { IconType } from 'react-icons';\r\nimport { FaGithub, FaInstagram, FaLinkedin, FaTwitter } from 'react-icons/fa';\r\nimport { SiCodewars } from 'react-icons/si';\r\nimport man from 'assets/image/jessie.png';\r\n\r\nimport { LinkButton } from 'Components/LinkButton';\r\nimport { useMode } from 'Hooks/useMode';\r\nimport { Cat } from 'Components/Cat';\r\nimport styles from './Intro.module.scss';\r\n\r\ninterface Socials {\r\n icon: IconType;\r\n link: string;\r\n name: string;\r\n}\r\n\r\nconst socials: Socials[] = [\r\n {\r\n icon: FaGithub,\r\n link: 'https://github.com/oreoseenoevil/',\r\n name: 'github'\r\n },\r\n {\r\n icon: FaLinkedin,\r\n link: 'https://www.linkedin.com/in/jessiedev/',\r\n name: 'linkedin'\r\n },\r\n {\r\n icon: FaTwitter,\r\n link: 'https://www.twitter.com/majessietic/',\r\n name: 'twitter'\r\n },\r\n {\r\n icon: FaInstagram,\r\n link: 'https://www.instagram.com/oreoseenoevil/',\r\n name: 'instagram'\r\n },\r\n {\r\n icon: SiCodewars,\r\n link: 'https://www.codewars.com/users/oreoseenoevil',\r\n name: 'codewars'\r\n }\r\n];\r\n\r\nexport const Intro: FC = () => {\r\n const { darkMode } = useMode();\r\n\r\n return (\r\n \r\n
\r\n \r\n
\r\n \r\n
\r\n \r\n
\r\n \r\n \r\n
\r\n \r\n \r\n
\r\n
\r\n Hello I'm Jessie Tarrosa
\r\n\r\n
\r\n \r\n {socials.map((item: Socials, i) => (\r\n \r\n
\r\n \r\n Get in touch \r\n
\r\n \r\n {darkMode ? (\r\n
\r\n \r\n \r\n
\r\n )}\r\n \r\n
\r\n );\r\n};\r\n","import { ReportHandler } from 'web-vitals';\r\n\r\nconst reportWebVitals = (onPerfEntry?: ReportHandler) => {\r\n if (onPerfEntry && onPerfEntry instanceof Function) {\r\n import('web-vitals').then(({ getCLS, getFID, getFCP, getLCP, getTTFB }) => {\r\n getCLS(onPerfEntry);\r\n getFID(onPerfEntry);\r\n getFCP(onPerfEntry);\r\n getLCP(onPerfEntry);\r\n getTTFB(onPerfEntry);\r\n });\r\n }\r\n};\r\n\r\nexport default reportWebVitals;\r\n","import React from 'react';\r\nimport ReactDOM from 'react-dom/client';\r\n\r\nimport 'normalize.css';\r\nimport 'Styles/main.scss';\r\nimport 'react-multi-carousel/lib/styles.css';\r\n\r\nimport { App } from 'UI/App';\r\nimport { ModeContextProvider } from 'Context/Mode';\r\nimport reportWebVitals from './reportWebVitals';\r\n\r\nconst rootElement = document.getElementById('root');\r\n\r\nconst root = ReactDOM.createRoot(rootElement as Element);\r\n\r\nroot.render(\r\n \r\n
\r\n \r\n {/*