{"version":3,"sources":["components/Button/Button.js","components/HeroSection/HeroSection.js","components/ProjectsSection/ProjectsSection.js","components/pages/Home.js","components/pages/AboutMe.js","components/pages/Projects.js","components/pages/Experience.js","components/pages/ContactMe.js","components/Navbar/Sidebar.js","App.js","index.js"],"names":["STYLES","SIZES","LINKS","Button","children","type","onClick","buttonStyle","buttonSize","buttonLink","checkButtonStyle","includes","checkButtonSize","checkButtonLink","to","className","HeroSection","jobs","useState","jobState","setJob","React","useEffect","intervalId","setInterval","clearTimeout","text","length","springConfig","presets","wobbly","noOverflow","src","alt","style","clear","ProjectsSection","id","Home","AboutMe","Projects","Experience","ContactMe","Sidebar","click","setClick","class","rel","href","target","width","height","App","path","exact","component","ReactDOM","render","document","getElementById"],"mappings":"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","file":"static/js/main.9d112eb5.chunk.js","sourcesContent":["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            <div className='hero-left'>\n            <h1 className='hero-text'>Hi! <br />\n                I'm Alex,<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            <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            <img className='hero-img' src='/images/picture.jpg' alt='awangPhoto'/>\n            <div style={{clear:'both'}}></div>\n\n        </div>\n    )\n}\n\nexport default HeroSection\n","import React from 'react';\nimport \"./ProjectsSection.css\"\nimport \"../../App.css\"\nfunction ProjectsSection() {\n    return (\n        <div id=\"projectsContainer\" className='projects-container'>\n            <h1 className='projects-text'>\n                My work\n            </h1>\n        </div>\n    )\n}\n\nexport default ProjectsSection;\n","import \"../../App.css\"\nimport HeroSection from \"../HeroSection/HeroSection\"\nimport ProjectsSection from \"../ProjectsSection/ProjectsSection\";\n\nfunction Home() {\n    return (\n        <div className=\"page-container\">\n            <HeroSection />\n            <ProjectsSection id=\"projectsSection\"/>\n        </div>\n    );\n}\n\nexport default Home;","import React from 'react'\nimport './AboutMe.css'\n\nfunction AboutMe() {\n  return (\n    <div className='about-me-container'>\n      <h1 className=\"aboutMe\">About Me</h1>\n    </div>\n  )\n}\n\nexport default AboutMe;","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, { useState } from 'react'\nimport { Link } from 'react-router-dom'\nimport '../pages/Projects.js'\nimport './Sidebar.css'\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/logoMin.png\" alt=\"awangLogo\"></img>\n                            <h1 className='logo-name'>Alex</h1>\n                            <p className='logo-job'>Student</p>\n                        </div>\n                    </Link>\n\n                    <ul className={click ? 'sidebar-list active' : 'sidebar-list'}>\n                        <Link to=\"/aboutme\">\n                            <li className='sidebar-row'>\n                                <div className='sidebar-row-icon'><i class=\"fas fa-user\" /></div>\n                                <div className='sidebar-row-text'>about</div>\n                            </li>\n                        </Link>\n                        <Link to=\"/projects\">\n                            <li className='sidebar-row'>\n                                <div className='sidebar-row-icon'><i class=\"fas fa-file-code\" /></div>\n                                <div className='sidebar-row-text'>projects</div>\n                            </li>\n                        </Link>\n                        <Link to=\"/experience\">\n                            <li className='sidebar-row'>\n                                <div className='sidebar-row-icon'><i class=\"fas fa-desktop\" /></div>\n                                <div className='sidebar-row-text'>experience</div>\n                            </li>\n                        </Link>\n                        <Link to=\"/contactme\">\n                            <li className='sidebar-row'>\n                                <div className='sidebar-row-icon'><i class=\"fas fa-address-book\" /></div>\n                                <div className='sidebar-row-text'>contact</div>\n                            </li>\n                        </Link>\n                    </ul>\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                    <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 AboutMe from \"./components/pages/AboutMe\"\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=\"/aboutMe\" component={AboutMe}></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":""}