{"version":3,"sources":["contexts/theme.js","portfolio.js","components/Navbar/Navbar.js","components/Header/Header.js","components/About/About.js","components/ProjectContainer/ProjectContainer.js","components/Projects/Projects.js","components/Skills/Skills.js","components/ScrollToTop/ScrollToTop.js","components/Contact/Contact.js","components/Footer/Footer.js","App.js","index.js"],"names":["ThemeContext","createContext","ThemeProvider","children","useState","themeName","setThemeName","useEffect","darkMediaQuery","window","matchMedia","matches","addEventListener","e","Provider","value","toggleTheme","name","localStorage","setItem","header","about","linkedin","github","projects","description","stack","livePreview","sourceCode","skills","contact","Navbar","useContext","showNavList","setShowNavList","toggleNavList","className","style","display","length","href","onClick","type","Header","homepage","title","About","role","resume","social","target","rel","ProjectContainer","project","map","item","uniqid","Projects","id","Skills","skill","ScrollToTop","isVisible","setIsVisible","toggleVisibility","pageYOffset","removeEventListener","fontSize","Contact","Footer","App","render","document","getElementById"],"mappings":"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","file":"static/js/main.02c9dcd6.chunk.js","sourcesContent":["import { createContext, useEffect, useState } from 'react'\nimport PropTypes from 'prop-types'\n\nconst ThemeContext = createContext()\n\nconst ThemeProvider = ({ children }) => {\n  const [themeName, setThemeName] = useState('light')\n\n  useEffect(() => {\n    const darkMediaQuery = window.matchMedia('(prefers-color-scheme: dark)')\n    setThemeName(darkMediaQuery.matches ? 'dark' : 'light')\n    darkMediaQuery.addEventListener('change', (e) => {\n      setThemeName(e.matches ? 'dark' : 'light')\n    })\n  }, [])\n\n  const toggleTheme = () => {\n    const name = themeName === 'dark' ? 'light' : 'dark'\n    localStorage.setItem('themeName', name)\n    setThemeName(name)\n  }\n\n  return (\n    <ThemeContext.Provider value={[{ themeName, toggleTheme }]}>\n      {children}\n    </ThemeContext.Provider>\n  )\n}\n\nThemeProvider.propTypes = {\n  children: PropTypes.node.isRequired,\n}\n\nexport { ThemeProvider, ThemeContext }\n","const header = {\n  // all the properties are optional - can be left empty or deleted\n  homepage: 'https://james.cuadra.uk',\n  title: 'JC.',\n}\n\nconst about = {\n  // all the properties are optional - can be left empty or deleted\n  name: 'James Cuadra',\n  role: 'Application Developer',\n  description:\n    'I am currently in my third year of a Degree Apprenticeship with Fujitsu UK working as an Application Developer and studying for a BSc (Hons) Digital and Technology Solutions at Manchester Metropolitan University.',\n  resume:\n    'https://drive.google.com/file/d/14rQVKqR9VJ9K49l5S1d3A0eUoxbMjrUT/view?usp=sharing',\n  social: {\n    linkedin: 'https://www.linkedin.com/in/james-cuadra-49373317a/',\n    github: 'https://github.com/James-Cuadra',\n  },\n}\n\nconst projects = [\n  // projects can be added an removed\n  // if there are no projects, Projects section won't show up\n  {\n    name: 'Castle Camping LTD',\n    description:\n      'A website developed for a local campsite to allow customers to find out about their stay online. Includes a contact form and live reviews from Google Maps.',\n    stack: ['HTML', 'CSS', 'JavaScript'],\n    livePreview:\n      'https://castlecampingltd.co.uk/',\n  },\n  {\n    name: 'CampWise',\n    description:\n      'A full-stack web application I am developing. CampWise is a campsite management system that allows campsite owners to manage their bookings, customers and facilities.',\n    stack: ['React', 'NextJS', 'Python', 'AWS'],\n  },\n  {\n    name: 'Rubix³',\n    description:\n      \"A Rubik's Cube solving app developed for my A Level Computer Science Non-Examined Assesment (NEA) using camera recognition to input the current state of the cube.\",\n    stack: ['Javascript', 'Kotlin', 'Android'],\n    sourceCode: 'https://github.com/James-Cuadra/Rubix3',\n    livePreview: '',\n  },\n]\n\nconst skills = [\n  // skills can be added or removed\n  // if there are no skills, Skills section won't show up\n  'JavaScript',\n  'Python',\n  'NodeJS',\n  'NextJS',\n  'React',\n  'Java',\n  'Agile',\n  'SQL',\n  'HTML',\n  'CSS',\n  'Git',\n    'AWS',\n    'AI/ML'\n]\n\nconst contact = {\n  // email is optional - if left empty Contact section won't show up\n  email: 'james@cuadra.uk',\n}\n\nexport { header, about, projects, skills, contact }\n","import { useContext, useState } from 'react'\nimport Brightness2Icon from '@material-ui/icons/Brightness2'\nimport WbSunnyRoundedIcon from '@material-ui/icons/WbSunnyRounded'\nimport MenuIcon from '@material-ui/icons/Menu'\nimport CloseIcon from '@material-ui/icons/Close'\nimport { ThemeContext } from '../../contexts/theme'\nimport { projects, skills, contact } from '../../portfolio'\nimport './Navbar.css'\n\nconst Navbar = () => {\n  const [{ themeName, toggleTheme }] = useContext(ThemeContext)\n  const [showNavList, setShowNavList] = useState(false)\n\n  const toggleNavList = () => setShowNavList(!showNavList)\n\n  return (\n    <nav className='center nav'>\n      <ul\n        style={{ display: showNavList ? 'flex' : null }}\n        className='nav__list'\n      >\n        {projects.length ? (\n          <li className='nav__list-item'>\n            <a\n              href='#projects'\n              onClick={toggleNavList}\n              className='link link--nav'\n            >\n              Projects\n            </a>\n          </li>\n        ) : null}\n\n        {skills.length ? (\n          <li className='nav__list-item'>\n            <a\n              href='#skills'\n              onClick={toggleNavList}\n              className='link link--nav'\n            >\n              Skills\n            </a>\n          </li>\n        ) : null}\n\n        {contact.email ? (\n          <li className='nav__list-item'>\n            <a\n              href='#contact'\n              onClick={toggleNavList}\n              className='link link--nav'\n            >\n              Contact\n            </a>\n          </li>\n        ) : null}\n      </ul>\n\n      <button\n        type='button'\n        onClick={toggleTheme}\n        className='btn btn--icon nav__theme'\n        aria-label='toggle theme'\n      >\n        {themeName === 'dark' ? <WbSunnyRoundedIcon /> : <Brightness2Icon />}\n      </button>\n\n      <button\n        type='button'\n        onClick={toggleNavList}\n        className='btn btn--icon nav__hamburger'\n        aria-label='toggle navigation'\n      >\n        {showNavList ? <CloseIcon /> : <MenuIcon />}\n      </button>\n    </nav>\n  )\n}\n\nexport default Navbar\n","import { header } from '../../portfolio'\nimport Navbar from '../Navbar/Navbar'\nimport './Header.css'\n\nconst Header = () => {\n  const { homepage, title } = header\n\n  return (\n    <header className='header center'>\n      <h3>\n        {homepage ? (\n          <a href={homepage} className='link'>\n            {title}\n          </a>\n        ) : (\n          title\n        )}\n      </h3>\n      <Navbar />\n    </header>\n  )\n}\n\nexport default Header\n","import GitHubIcon from '@material-ui/icons/GitHub'\nimport LinkedInIcon from '@material-ui/icons/LinkedIn'\nimport { about } from '../../portfolio'\nimport './About.css'\n\nconst About = () => {\n  const { name, role, description, resume, social } = about\n\n  return (\n    <div className='about center'>\n      {name && (\n        <h1>\n          Hi, I&apos;m <span className='about__name'>{name}.</span>\n        </h1>\n      )}\n\n      {role && <h2 className='about__role'>An {role}.</h2>}\n      <p className='about__desc'>{description && description}</p>\n\n      <div className='about__contact center'>\n        {resume && (\n          <a href={resume} target='_blank' rel='noopener noreferrer'>\n            <span type='button' className='btn btn--outline'>\n              CV\n            </span>\n          </a>\n        )}\n\n        {social && (\n          <>\n            {social.github && (\n              <a\n                href={social.github}\n                aria-label='github'\n                className='link link--icon'\n                target='_blank'\n                rel='noopener noreferrer'\n              >\n                <GitHubIcon />\n              </a>\n            )}\n\n            {social.linkedin && (\n              <a\n                href={social.linkedin}\n                aria-label='linkedin'\n                className='link link--icon'\n                target='_blank'\n                rel='noopener noreferrer'\n              >\n                <LinkedInIcon />\n              </a>\n            )}\n          </>\n        )}\n      </div>\n    </div>\n  )\n}\n\nexport default About\n","import uniqid from 'uniqid'\nimport GitHubIcon from '@material-ui/icons/GitHub'\nimport LaunchIcon from '@material-ui/icons/Launch'\nimport './ProjectContainer.css'\n\nconst ProjectContainer = ({ project }) => (\n  <div className='project'>\n    <h3>{project.name}</h3>\n\n    <p className='project__description'>{project.description}</p>\n    {project.stack && (\n      <ul className='project__stack'>\n        {project.stack.map((item) => (\n          <li key={uniqid()} className='project__stack-item'>\n            {item}\n          </li>\n        ))}\n      </ul>\n    )}\n\n    {project.sourceCode && (\n      <a\n        href={project.sourceCode}\n        aria-label='source code'\n        className='link link--icon'\n        target='_blank'\n        rel='noopener noreferrer'\n      >\n        <GitHubIcon />\n      </a>\n    )}\n\n    {project.livePreview && (\n      <a\n        href={project.livePreview}\n        aria-label='live preview'\n        className='link link--icon'\n        target='_blank'\n        rel='noopener noreferrer'\n      >\n        <LaunchIcon />\n      </a>\n    )}\n  </div>\n)\n\nexport default ProjectContainer\n","import uniqid from 'uniqid'\nimport { projects } from '../../portfolio'\nimport ProjectContainer from '../ProjectContainer/ProjectContainer'\nimport './Projects.css'\n\nconst Projects = () => {\n  if (!projects.length) return null\n\n  return (\n    <section id='projects' className='section projects'>\n      <h2 className='section__title'>Projects</h2>\n\n      <div className='projects__grid'>\n        {projects.map((project) => (\n          <ProjectContainer key={uniqid()} project={project} />\n        ))}\n      </div>\n    </section>\n  )\n}\n\nexport default Projects\n","import uniqid from 'uniqid'\nimport { skills } from '../../portfolio'\nimport './Skills.css'\n\nconst Skills = () => {\n  if (!skills.length) return null\n\n  return (\n    <section className='section skills' id='skills'>\n      <h2 className='section__title'>Skills</h2>\n      <ul className='skills__list'>\n        {skills.map((skill) => (\n          <li key={uniqid()} className='skills__list-item btn btn--plain'>\n            {skill}\n          </li>\n        ))}\n      </ul>\n    </section>\n  )\n}\n\nexport default Skills\n","import React, { useEffect, useState } from 'react'\nimport ArrowUpwardIcon from '@material-ui/icons/ArrowUpward'\nimport './ScrollToTop.css'\n\nconst ScrollToTop = () => {\n  const [isVisible, setIsVisible] = useState(false)\n\n  useEffect(() => {\n    const toggleVisibility = () =>\n      window.pageYOffset > 500 ? setIsVisible(true) : setIsVisible(false)\n\n    window.addEventListener('scroll', toggleVisibility)\n    return () => window.removeEventListener('scroll', toggleVisibility)\n  }, [])\n\n  return isVisible ? (\n    <div className='scroll-top'>\n      <a href='#top'>\n        <ArrowUpwardIcon fontSize='large' />\n      </a>\n    </div>\n  ) : null\n}\n\nexport default ScrollToTop\n","import { contact } from '../../portfolio'\nimport './Contact.css'\n\nconst Contact = () => {\n  if (!contact.email) return null\n\n  return (\n    <section className='section contact center' id='contact'>\n      <h2 className='section__title'>Contact</h2>\n      <a href={`mailto:${contact.email}`}>\n        <span type='button' className='btn btn--outline'>\n          Email me\n        </span>\n      </a>\n    </section>\n  )\n}\n\nexport default Contact\n","import './Footer.css'\n\nconst Footer = () => <footer className='footer'>Created By James Cuadra</footer>\n\nexport default Footer\n","import { useContext } from 'react'\nimport { ThemeContext } from './contexts/theme'\nimport Header from './components/Header/Header'\nimport About from './components/About/About'\nimport Projects from './components/Projects/Projects'\nimport Skills from './components/Skills/Skills'\nimport ScrollToTop from './components/ScrollToTop/ScrollToTop'\nimport Contact from './components/Contact/Contact'\nimport Footer from './components/Footer/Footer'\nimport './App.css'\n\nconst App = () => {\n  const [{ themeName }] = useContext(ThemeContext)\n\n  return (\n    <div id='top' className={`${themeName} app`}>\n      <Header />\n\n      <main>\n        <About />\n        <Projects />\n        <Skills />\n        <Contact />\n      </main>\n\n      <ScrollToTop />\n      <Footer />\n    </div>\n  )\n}\n\nexport default App\n","import { render } from 'react-dom'\nimport App from './App'\nimport { ThemeProvider } from './contexts/theme'\nimport './index.css'\n\nrender(\n  <ThemeProvider>\n    <App />\n  </ThemeProvider>,\n  document.getElementById('root')\n)\n"],"sourceRoot":""}