{"version":3,"sources":["components/home-visual/home-visual.js","components/header/header.js","components/footer/footer.js","assets/avater_no_wall.png","components/about/about.js","components/projects/projects.js","App.js","reportWebVitals.js","index.js"],"names":["HomeVisual","className","href","Header","onClick","window","location","reload","scroller","scrollTo","duration","delay","smooth","process","Footer","About","src","avatar","alt","text","aboutMe","p1","p2","p3","p4","proj_info","require","ProjectContainer","props","link","name","description","techStack","map","str","idx","Projects","projects","project","proj","App","reportWebVitals","onPerfEntry","Function","then","getCLS","getFID","getFCP","getLCP","getTTFB","ReactDOM","render","StrictMode","document","getElementById"],"mappings":"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","file":"static/js/main.326e5540.chunk.js","sourcesContent":["import './home-visual.css'\n\nconst HomeVisual = () => {\n\n    return (\n        <div className='home-visual'>\n            \n\n            <div className='slogan-text'>\n                <h1 className=\"home-intro\">Yichi Zhang</h1>\n                <div className='divider'></div>\n                <h3 className='home-sub-intro'>I handle web. Yes, the whole Internet</h3>\n            </div>\n\n            <div className='scroll-down-container'>\n                <span className=\"scroll-down-text\">Scroll Down</span>\n                <i className=\"zoom icon mouse fas fa-mouse\"></i>\n                <i className=\"zoom icon finger fa fa-hand-o-down\"></i>\n            </div>\n\n            <div className='icon-container'>\n                <a href='https://github.com/azerous1' className='icon zoom fab fa-github'>{}</a>\n                <a href='https://www.linkedin.com/in/yichi-zhang-107bba173/' className='icon zoom fab fa-linkedin'>{}</a>\n            </div>\n        </div>\n    )\n}\n\nexport default HomeVisual;","import './header.css'\nimport { scroller} from 'react-scroll'\n\nconst Header = () => {\n\n    const path = process.env.PUBLIC_URL\n\n    const handleRefresh = () => {\n        window.location.reload();\n    }\n\n    const handleAboutAutoScroll = () => {\n        scroller.scrollTo('about-container', {\n            duration: 800,\n            delay: 0,\n            smooth: \"easeInOutQuart\",\n        })\n    }\n\n    const handleProjectScroll = () => {\n        scroller.scrollTo('project-container', {\n            duration: 800,\n            delay: 0,\n            smooth: \"easeInOutQuart\",\n        })\n    }\n\n    return (\n        <div className='header-container'>\n            <h1 className='brand' onClick={() => handleRefresh()}>Yichi Zhang</h1>\n            <nav className='nav-desktop'>\n                <ul>\n                    <li className='zoom' onClick={() => handleAboutAutoScroll()}>About Me</li>\n                    <li className='zoom' onClick={() => handleProjectScroll()}>Projects</li>\n                    <li className='zoom'>\n                        <a className='nav-link' href=\"https://www.linkedin.com/in/yichiz5/\">Contact</a>\n                    </li>\n                </ul>\n\n                <button className=\"zoom resume\">\n                    <a className='resume-link' href={`${path}/resume.pdf`} >Resume</a>\n                </button>\n            </nav>\n\n            <nav className='nav-mobile'>\n            </nav>\n        </div>\n    )\n}\n\nexport default Header;\n","import './footer.css'\n\nconst Footer = () => {\n\n    return (\n        <footer>\n            <div className='icons'>\n                <a href='https://github.com/azerous1' className='icons zoom fab fa-github'>{}</a>\n                <a href='https://www.linkedin.com/in/yichi-zhang-107bba173/' className='icons zoom fab fa-linkedin'>{}</a>\n            </div>\n            <p className='copyright'>Designed and Built by Yichi</p>\n        </footer>\n    )\n}\n\nexport default Footer;","export default __webpack_public_path__ + \"static/media/avater_no_wall.76a7654a.png\";","import './about.css'\nimport avatar from '../../assets/avater_no_wall.png'\nimport text from \"../../text-content.json\"\n\nconst About = () => {\n\n    return (\n        <div className=\"about-container\">\n            \n            <div className=\"text-content\">\n                <h1 className='about-header'>Hi, I am Yichi</h1>\n                \n                <div className='divider'></div>\n\n                <img className=\"avatar-mobile\" src={avatar} alt='A personal avatar'/>\n\n                <p className='content'>{text.aboutMe.p1}</p>\n                <p className='content'>{text.aboutMe.p2}</p>\n                <p className='content'>{text.aboutMe.p3}</p>\n                <p className='content'>{text.aboutMe.p4}</p>\n            </div>\n            <img className=\"avatar\" src={avatar} alt='A personal avatar'/>\n        </div>\n    )\n}\n\nexport default About;","import './projects.css'\n\nconst proj_info = require(\"../text.json\") \n\nconst Projects = () => {\n\n    const projects = proj_info.project.map((proj) => {\n        return ProjectContainer(proj)\n    })\n\n    return (\n        <div className='projects-section'>\n            <h1 className='header'>My Work</h1>\n            <div className='divider'></div>\n\n            <div className=\"projects container\">\n                {projects}\n            </div>\n        </div>\n    )\n}\n\nconst ProjectContainer = (props) => {\n    return (\n        <div className=\"project-container\">\n             <div className='icon-container'>\n                <a href={props.link} className='icon zoom fas fa-link'>{}</a>\n            </div>\n        \n            <div className=\"text-container\">\n                <div className='title'>{props.name}</div>\n                <div className='subtitle'>{props.description}</div>\n            </div>\n            <div className=\"tech-stack\">\n                {props.techStack.map((str, idx) => {\n                    return <p key={`${str}${idx}`}>{str}</p>\n                })}\n            </div>\n        </div>\n    )\n}\n\nexport default Projects;\n","import HomeVisual from './components/home-visual/home-visual'\nimport Header from './components/header/header'\nimport './style/app.css'\nimport Footer from './components/footer/footer'\nimport About from './components/about/about'\nimport Projects from './components/projects/projects'\n\nconst App = () => {\n  return (\n    <>\n      <Header/>\n      <HomeVisual/>\n      <About/>\n      <Projects/>\n      <Footer/>\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 App from './App';\nimport reportWebVitals from './reportWebVitals';\n\nReactDOM.render(\n  <React.StrictMode>\n    <App />\n  </React.StrictMode>,\n  document.getElementById('root')\n);\n\n// If you want to start measuring performance in your app, pass a function\n// to log results (for example: reportWebVitals(console.log))\n// or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals\nreportWebVitals();\n"],"sourceRoot":""}