{"version":3,"sources":["components/Footer/Footer.js","components/Button/Button.js","components/HeroSection/HeroSection.js","components/pages/Home.js","components/pages/Projects.js","components/pages/Experience.js","components/pages/ContactMe.js","components/Navbar/SidebarData.js","components/Navbar/Sidebar.js","App.js","index.js"],"names":["Footer","className","STYLES","SIZES","LINKS","Button","children","type","onClick","buttonStyle","buttonSize","buttonLink","checkButtonStyle","includes","checkButtonSize","checkButtonLink","to","HeroSection","jobs","useState","jobState","setJob","React","useEffect","intervalId","setInterval","clearTimeout","text","length","springConfig","presets","wobbly","noOverflow","src","alt","style","clear","Home","Projects","Experience","ContactMe","SidebarData","title","icon","class","link","Sidebar","click","setClick","rel","href","target","map","val","key","window","location","pathname","width","height","App","path","exact","component","ReactDOM","render","document","getElementById"],"mappings":"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","file":"static/js/main.6021387f.chunk.js","sourcesContent":["import React from 'react'\nimport \"./Footer.css\"\n\nfunction Footer() {\n    return (\n        <div className='footer-container'>\n            <span></span>\n        </div>\n    )\n}\n\nexport default Footer","import React from 'react';\nimport {Link} from 'react-router-dom';\nimport './Button.css';\n\nconst STYLES = ['btn--primary', 'btn--outline'];\n\nconst SIZES = ['btn--medium', 'btn--large'];\n\nconst LINKS = ['/', '/projects', '/contactme', '/experience']\n\nexport const Button =({children, type, onClick, buttonStyle, buttonSize, buttonLink}) => {\n    const checkButtonStyle = STYLES.includes(buttonStyle) ? buttonStyle : STYLES[0];\n\n    const checkButtonSize = SIZES.includes(buttonSize) ? buttonSize : SIZES[0];\n\n    const checkButtonLink = LINKS.includes(buttonLink) ? buttonLink : LINKS[0];\n\n    return(\n        <Link to={buttonLink} className=\"btn-mobile\">\n            <button \n            className={`btn ${checkButtonStyle} ${checkButtonSize} ${checkButtonLink}`} \n            onClick={onClick} \n            type={type}>\n                {children}\n            </button>\n        </Link>\n    );\n};","import React, { useState } from 'react'\nimport { Button } from '../Button/Button'\nimport TextTransition, { presets } from 'react-text-transition'\nimport \"./HeroSection.css\"\nimport \"../../App.css\"\nfunction HeroSection() {\n    const jobs = [\"student\", \"web developer\", \"java enthusiast\"]\n\n    const [jobState, setJob] = useState(0);\n\n    React.useEffect(() => {\n        const intervalId = setInterval(() =>\n            setJob(jobState => jobState + 1),\n            2000\n        );\n        return () => clearTimeout(intervalId);\n    }, []);\n\n    return (\n        <div className=\"hero-container\">\n            <h1 className='hero-text'>Hi! <br />\n                I'm Ch4se,<br />\n                <span className='hero-job'>\n                    <TextTransition\n                        text={jobs[jobState % jobs.length]}\n                        springConfig={presets.wobbly}\n                        noOverflow\n                    />\n                </span>\n            </h1>\n            <img className='hero-img' src='/images/Avatar.png' alt='awangImage'/>\n            <div style={{clear:'both'}}></div>\n            <div className=\"hero-btns\">\n                <Button className=\"contactButton\" buttonStyle={\"btn--outline\"} buttonSize={\"btn--large\"} buttonLink={\"/contactme\"}>get in touch</Button>\n            </div>\n        </div>\n    )\n}\n\nexport default HeroSection\n","import \"../../App.css\"\nimport Footer from \"../Footer/Footer\";\nimport HeroSection from \"../HeroSection/HeroSection\"\n\nfunction Home() {\n    return (\n        <>\n            <HeroSection />\n            <Footer/>\n        </>\n    );\n}\n\nexport default Home;","import React from 'react'\nimport '../../App.css'\n\nfunction Projects() {\n    return (\n        <div>\n            <h1 className='projects'>Projects</h1>\n        </div>\n    )\n}\n\nexport default Projects\n","import React from 'react'\n\nfunction Experience() {\n    return (\n        <div>\n            <h1 className='experience'>Experience</h1>\n        </div>\n    )\n}\n\nexport default Experience\n\n","import React from 'react'\nimport '../../App.css'\n\nfunction ContactMe() {\n    return (\n        <div>\n            <h1 className='contactMe'>Contact Me</h1>\n        </div>\n    )\n}\n\nexport default ContactMe\n","import React from 'react'\n\nexport const SidebarData = [\n    {\n        title:\"about\",\n        icon:<i class=\"fas fa-user\"/>,\n        link: \"/\"\n    },\n    {\n        title:\"projects\",\n        icon:<i class=\"fas fa-file-code\"/>,\n        link: \"/projects\"\n    },\n    {\n        title:\"experience\",\n        icon:<i class=\"fas fa-briefcase\"/>,\n        link: \"/experience\"\n    },\n    {\n        title:\"contact\",\n        icon:<i class=\"fas fa-envelope\"/>,\n        link: \"/contactme\"\n    }\n    \n]\n","import React, { useState } from 'react'\nimport { Link } from 'react-router-dom'\nimport './Sidebar.css'\nimport { SidebarData } from './SidebarData'\n\nfunction Sidebar() {\n    const [click, setClick] = useState(false);\n\n    const handleClick = () => setClick(!click);\n    const closeMobileMenu = () => setClick(false);\n\n    return (\n        <>\n            <div className='menu-icon' onClick={handleClick}>\n                <i className={click ? 'fas fa-times' : 'fas fa-bars'} />\n            </div>\n\n            <nav className={click ? 'sidebar active' : 'sidebar'}>\n                <div className='sidebar-container'>\n                    <Link to=\"/\" className={click ? 'sidebar-logo active' : 'sidebar-logo'} onClick={closeMobileMenu}>\n                        <div className='logo-container'>\n                            <img className='logo-img' src=\"/images/Avatar.png\" alt=\"awangLogo\"></img>\n                            <h1 className='logo-name'>Ch4se</h1>\n                            <p className='logo-job'>Web Developer</p>\n                        </div>\n                    </Link>\n\n                    <ul className={click ? 'sidebar-socials active' : 'sidebar-socials'}>\n                        <li>\n                            <a className='social-links' rel=\"noreferrer\" href=\"https://github.com/alexwangcoquitlam\" target=\"_blank\">\n                                <i class=\"fab fa-github\" />\n                            </a>\n                        </li>\n                        <li>\n                            <a className='social-links' rel=\"noreferrer\" href=\"https://www.linkedin.com/in/alexander-wang-364504126/\" target=\"_blank\">\n                                <i class=\"fab fa-linkedin-in\" />\n                            </a>\n                        </li>\n                    </ul>\n\n                    <ul className={click ? 'sidebar-list active' : 'sidebar-list'}>\n                        {SidebarData.map((val, key) => {\n                            return (\n                                <li className='sidebar-row' key={key} onClick={() => { window.location.pathname = val.link }}>\n                                    <div className='sidebar-row-icon'>{val.icon}</div>\n                                    <div className='sidebar-row-text'>{val.title}</div>\n                                </li>\n                            )\n                        })}\n                    </ul>\n                    <div className={click ? 'sidebar-footer active' : 'sidebar-footer'} style={{ width: \"100%\", height: \"5%\" }} />\n                </div>\n            </nav>\n        </>\n    )\n}\n\nexport default Sidebar\n","import React from 'react';\nimport { BrowserRouter as Router, Switch, Route } from 'react-router-dom';\nimport './App.css';\nimport Home from \"./components/pages/Home\"\nimport Projects from \"./components/pages/Projects\"\nimport Experience from './components/pages/Experience';\nimport ContactMe from './components/pages/ContactMe';\nimport Sidebar from './components/Navbar/Sidebar';\n\nfunction App() {\n  return (\n    <div className=\"App\">\n      <Router>\n        <Sidebar/>\n        <Switch>\n          <Route path=\"/\" exact component={Home}></Route>\n          <Route path=\"/projects\" component={Projects}></Route>\n          <Route path=\"/experience\" component={Experience}></Route>\n          <Route path=\"/contactMe\" component={ContactMe}></Route>\n        </Switch>\n      </Router>\n    </div>\n  );\n}\n\nexport default App;\n","import React from 'react';\nimport ReactDOM from 'react-dom';\nimport App from './App';\n\nReactDOM.render(\n  <App/>,\n  document.getElementById('root')\n);\n"],"sourceRoot":""}