{"version":3,"sources":["components/Navbar.js","components/Intro.js","images/gameroom.jpeg","images/jokesonus.jpeg","images/landmarkers.jpeg","components/Portfolio.js","components/Menu.js","components/Contact.js","App.js","index.js"],"names":["Navbar","menuOpen","setMenuOpen","className","id","href","onClick","Intro","strings","typeSpeed","backSpeed","loop","src","alt","align","width","height","Portfolio","url","controls","vidmeConfig","Menu","Contact","onSubmit","e","preventDefault","emailjs","sendForm","target","then","result","console","log","text","error","alert","reset","type","name","value","App","useState","ReactDOM","render","StrictMode","document","getElementById"],"mappings":"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","file":"static/js/main.5b257c42.chunk.js","sourcesContent":["import React from 'react'\nimport './navbar.scss'\nimport FaceIcon from '@material-ui/icons/Face';\n// import WorkIcon from '@material-ui/icons/Work';\n// import AlternateEmailIcon from '@material-ui/icons/AlternateEmail';\n\n\nconst Navbar = ({ menuOpen, setMenuOpen}) => {\n    return (\n        <div className={\"navbar \" + ( menuOpen && \"active\")} id=\"navbar\">\n            <div className=\"wrapper\">\n                <div className=\"left\">\n                    {/* <a href=\"#intro\" className=\"logo\"> <img className=\"profilePic\" src={profile} alt=\"profile-pic\" /></a> */}\n                    <a href=\"#intro\" className=\"logo\">Bio.</a>\n                    <div className=\"itemContainer\">\n                        <FaceIcon className=\"icon\"/>\n                        <span>StevenWuBC@gmail.com</span>\n                        \n                    </div>\n\n                    {/* <a href=\"#portfolio\" className=\"logo\">portfolio</a>\n                    <a href=\"#contact\" className=\"logo\">contact</a> */}\n                    \n                </div>\n                <div className=\"right\">\n                    <div className=\"hamburger\" onClick={()=>setMenuOpen(!menuOpen)}>\n                        <span className=\"line1\"></span>\n                        <span className=\"line2\"></span>\n                        <span className=\"line3\"></span>\n                    </div>\n                </div>\n                \n            </div>\n        </div>\n    )\n}\n\nexport default Navbar\n","import React from 'react'\nimport './intro.scss'\nimport Typed from 'react-typed'\n\nconst Intro = () => {\n    return (\n        <div className=\"intro\" id=\"intro\">\n            <wrapper>\n\n                <h1>Steven Wu - Full Stack Developer</h1>\n                \n                <Typed\n                    className=\"typed-text\"\n                    strings={[\"Web Design\", \"React UI\", \"RESTful Apis\", \"JavaScript\", \"Ruby on Rails\"]}\n                    typeSpeed={100}\n                    backSpeed={40}\n                    loop={true}\n                />\n                {/* <br></br> */}\n                \n                <p>As an avid gamer, it has always been one of my dreams to learn how to program and I fell in love after writing my first few lines of code. A day later, I've decided to turn my dreams into reality by enrolling in The Flatiron School's Immersive Software Engineering bootcamp.</p>\n                {/* <br /> */}\n                <p>Along with my coding knowledge, I have over twelve years of experience in the restaurant industry with the last six years as a manager for a busy ramen restaurant in midtown Manhattan where I handled duties such as employee scheduling, inventory management and the daily front house operation.</p>\n                <br />\n    \n                <h1>Languages:</h1>\n                {/* <br /> */}\n                <div className=\"intro-icons\">\n                    <img src=\"https://img.icons8.com/color/48/000000/html-5--v1.png\" alt=\"html\" align=\"left\" width=\"40\" height=\"40\"/>\n\n                    <img src=\"https://img.icons8.com/color/48/000000/css3.png\" alt=\"css3\" align=\"left\"  height=\"40\"/>\n                            \n                    <img src=\"https://img.icons8.com/color/48/000000/javascript.png\" alt=\"js\" align=\"left\" width=\"40\" height=\"40\"/>\n                            \n                    <img src=\"https://img.icons8.com/color/48/000000/react-native.png\" alt=\"react\" align=\"left\" width=\"40\" height=\"40\"/>\n                            \n                    <img src=\"https://img.icons8.com/officel/80/000000/ruby-programming-language.png\" alt=\"ruby\" align=\"left\" width=\"40\" height=\"40\"/>\n                    <img src=\"https://img.icons8.com/color/144/000000/postgreesql.png\" alt=\"postgres\" align=\"left\" width=\"40\" height=\"40\"/>\n                </div>\n                {/* <br /> */}\n                \n\n\n            </wrapper>\n        </div>\n    )\n}\n\nexport default Intro\n","export default __webpack_public_path__ + \"static/media/gameroom.8fbf54b5.jpeg\";","export default __webpack_public_path__ + \"static/media/jokesonus.d86979d4.jpeg\";","export default __webpack_public_path__ + \"static/media/landmarkers.764167ba.jpeg\";","import React, { useState } from 'react'\nimport './portfolio.scss'\n// import Project from './Project'\nimport gameroomImg from '../images/gameroom.jpeg'\nimport jokesonusImg from '../images/jokesonus.jpeg'\nimport landmarkersImg from '../images/landmarkers.jpeg'\nimport ReactPlayer from 'react-player'\n\nconst Portfolio = () => {\n\n    // const [selected,setSelected] = useState(\"active\")\n\n    // const projectstList = [\n    //     {\n    //         id:\"gameroom\",\n    //         title:\"GameRoom\",\n    //         img: gameroomImg\n    //     },\n    //     {\n    //         id:\"landmarkers\",\n    //         title:\"Landmarkers\",\n    //         img: landmarkersImg\n    //     },\n    //     {\n    //         id:\"jokesonus\",\n    //         title:\"JokesOnUs\",\n    //         img: jokesonusImg\n    //     }\n    // ]\n\n    return (\n        <div className=\"portfolio\" id=\"portfolio\">\n            {/* <h1>Portfolio</h1> */}\n            {/* <ul>\n                {\n                    projectstList.map((item) => (\n                        <Project\n                            id={item.id} \n                            title={item.title}\n                            active={selected === item.id}\n                            setSelected={setSelected}\n                            img={item.img}\n                        />\n                    ))\n                }\n            </ul> */}\n            {/* <div className=\"container\">\n                <div className=\"item\">\n                    <img width=\"150px\"\n                     src=\"https://images.unsplash.com/photo-1593505681742-8cbb6f44de25?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=1189&q=80\" alt=\"\" \n                    />\n                    <h3>App</h3>\n                </div>\n                <div className=\"item\">\n                    <img width=\"150px\"\n                     src=\"https://images.unsplash.com/photo-1593505681742-8cbb6f44de25?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=1189&q=80\" alt=\"\" \n                    />\n                    <h3>App</h3>\n                </div>\n                <div className=\"item\">\n                    <img width=\"150px\"\n                     src=\"https://images.unsplash.com/photo-1593505681742-8cbb6f44de25?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=1189&q=80\" alt=\"\" \n                    />\n                    <h3>App</h3>\n                </div>\n                \n                \n            </div> */}\n\n            <div className=\"container\">\n                <div className=\"item\">\n                    \n                    <div className=\"portfolio-player\">\n                        <ReactPlayer\n                            className=\"portfolio-player\"\n                            url=\"https://www.youtube.com/watch?v=x1XqqEM3NuE\"\n                            controls\n                            vidmeConfig=\"1080p\"\n                        />\n\n                    </div>\n        \n                    <div className=\"text\">\n                        <h1 className=\"title\">Game Room</h1>\n                        <p>Being a avid gamer, I would frequent alot of gaming review sites such as GameRanx.com or Ign.com. So for my capstone project at The Flatiron School, I thought it would be fun to try to build a gaming community website on my own and I ended up having a blast and learning a ton as well. I used React with Redux for the frontend and I created a custom backend API server using Ruby on Rails  </p>\n\n                    </div>\n                </div>\n            \n                <div className=\"item\">\n                    \n                    <ReactPlayer\n                        className=\"portfolio-player\"\n                        url=\"https://www.youtube.com/watch?v=81gCyDGc3vg\" \n                        controls\n                        vidmeConfig=\"1080p\"\n                    />\n                    <div className=\"text\">\n                        <h1>Landmarkers</h1>\n                        \n                        <p>During the pandemic my friends and I would constantly reminisce about our favorite local establishments or hangout spots, so I built this webapp for sharing our favorite locations/landmarks with friends and family. I built this with my friend Karina who handled most of the styling while I worked on implementing the google maps and geocode API functions.</p>\n                        \n                    </div>\n                </div>\n                <div className=\"item\">\n                    \n                    <ReactPlayer\n                    className=\"portfolio-player\"\n                    url=\"https://www.youtube.com/watch?v=d-inxohHvKk\"\n                    controls\n                    vidmeConfig=\"1080p\"\n                    />\n                    <div className=\"text\">\n                        \n                        <h1>JokesOnUs</h1>\n                        <p>This my first webapp built using only Ruby on Rails. I had a friend who was a standup comedian and I thought it would be funny to build a crappy 90s style social media website but for his fellow comedians to share jokes and review comedy gigs. </p>\n                    </div>\n\n                </div>\n            \n            \n            \n            </div>\n\n        </div>\n    )\n}\n\nexport default Portfolio\n","import React from 'react'\nimport './menu.scss'\n\nconst Menu = ({ menuOpen, setMenuOpen }) => {\n    return (\n        <div className={\"menu \" + (menuOpen && \"active\")} id=\"menu\">\n            <ul>\n                <li onClick={()=>setMenuOpen(false)}>\n                    <a href=\"#intro\">Home</a>\n                </li>\n                <li onClick={()=>setMenuOpen(false)}>\n                    <a href=\"#portfolio\">Portfolio</a>\n                </li>\n                <li onClick={()=>setMenuOpen(false)}>\n                    <a href=\"#contact\"> Contact</a>\n                </li>\n            </ul>\n            \n        </div>\n    )\n}\n\nexport default Menu\n","import React from 'react'\nimport './contact.scss'\nimport emailjs from 'emailjs-com'\n\nconst Contact = () => {\n\n    function sendEmail(e){\n        e.preventDefault()\n\n        emailjs.sendForm('Gmail', 'template_aqdx4iw', e.target, 'user_9g8wroGHVK37aC43tSjIw')\n        .then((result) => {\n            console.log(result.text)\n        }, (error) => {\n            console.log(error.text)\n        });\n        alert(\"message sent\")\n        e.target.reset()\n\n    }\n\n\n    return (\n        <div className=\"contact\" id=\"contact\">\n            \n            <div className=\"form-box\">\n\n                <div className=\"contact-icons\">\n\n                    <a href=\"https://www.linkedin.com/in/stevenwubc/\">\n                    <img src=\"https://img.icons8.com/fluent/240/000000/linkedin.png\" \n                    alt=\"linkedin\" align=\"left\" width=\"60px\" height=\"60\"></img>\n                    </a>\n\n                    <a href=\"https://github.com/StevenWuTG\">\n                    <img src=\"https://img.icons8.com/fluent/240/000000/github.png\" \n                    alt=\"linkedin\" align=\"left\" width=\"60px\" height=\"60\"></img>\n                    </a>\n\n                    \n                    <a href=\"https://stevenwu91.medium.com/\">\n                    <img src=\"https://img.icons8.com/ios-filled/250/000000/medium-monogram--v1.png\" \n                    alt=\"linkedin\" align=\"left\" width=\"60px\" height=\"60\"></img>\n                    </a>\n                    \n\n                </div>\n                \n                <form className=\"contact-form\" onSubmit={sendEmail}>\n                    {/* <input type=\"hidden\" name=\"contact_number\" /> */}\n                    <label>Subject:</label>\n                    <input type=\"text\" name=\"subject\" />\n                    <br />\n                    <label>Name:</label>\n                    <input type=\"text\" name=\"name\" />\n                    <label>Email:</label>\n                    <input type=\"email\" name=\"email\" />\n                    <label>Message:</label>\n                    <input className=\"message-text\" name=\"message\" />\n                    <br />\n                    <input className=\"btn btn-primary\"  type=\"submit\" value=\"Send\" />\n                </form>\n            </div>\n\n        </div>\n    )\n}\n\nexport default Contact\n","import Navbar from './components/Navbar'\nimport Intro from './components/Intro'\nimport Portfolio from './components/Portfolio'\nimport Menu from './components/Menu'\nimport Contact from './components/Contact'\nimport { useState } from 'react'\n// import './App.css';\nimport './app.scss';\n\nfunction App() {\n\n  const [ menuOpen,setMenuOpen ] = useState(false)\n\n  return (\n\n    <div className=\"app\">\n      \n      <Navbar menuOpen={menuOpen} setMenuOpen={setMenuOpen}/>\n      <Menu  menuOpen={menuOpen} setMenuOpen={setMenuOpen}/>\n      <div className=\"sections\">\n        <Intro/>\n        <Portfolio/>\n        <Contact/>\n      </div>\n\n    </div>\n  );\n}\n\nexport default App;\n","import React from 'react';\nimport ReactDOM from 'react-dom';\nimport './App.css';\nimport App from './App';\n\nReactDOM.render(\n  <React.StrictMode>\n    <App />\n  </React.StrictMode>,\n  document.getElementById('root')\n);\n"],"sourceRoot":""}