{"version":3,"sources":["components/Typewriter.jsx","logo.svg","components/Navbar.jsx","down.svg","pages/Home.js","App.js","reportWebVitals.js","index.js"],"names":["TypeWriter","texts","options","strings","autoStart","cursor","loop","deleteSpeed","Navbar","NavWrapper","className","href","src","logo","alt","styled","div","Portfolio","lazy","Home","useEffect","window","scrollTo","top","behavior","HomeWrapper","width","height","down","id","fallback","type","color","timeout","name","method","netlify","placeholder","required","rel","target","App","Fragment","exact","path","component","reportWebVitals","onPerfEntry","Function","then","getCLS","getFID","getFCP","getLCP","getTTFB","ReactDOM","render","StrictMode","document","getElementById","console","log"],"mappings":"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","file":"static/js/main.8f071150.chunk.js","sourcesContent":["import React from 'react';\nimport Typewriter from 'typewriter-effect';\n\n\nconst TypeWriter = ({ texts }) => (\n  <Typewriter\n    options={{\n      strings: texts,\n      autoStart: true,\n      cursor: '!',\n      loop: true,\n      deleteSpeed: 50,\n    }}\n  />\n);\n\nexport default TypeWriter;","export default __webpack_public_path__ + \"static/media/logo.77d757da.svg\";","import React from 'react';\nimport styled from \"styled-components\";\nimport logo from '../../src/logo.svg';\n\nconst Navbar = () => (\n  <NavWrapper>\n    <ul className=\"menu\">\n      <li className=\"nav-item logo\" ><a href=\"/\" ><img src={logo} alt=\"logo\" /></a></li>\n      <li className=\"nav-item mt-2\"><a href=\"#portfolio\" >Portfolio</a></li>\n      <li className=\"nav-item mt-2\"><a href=\"#about\" >About</a></li>\n      <li className=\"nav-item mt-2\"><a href=\"#contact\" >Contact</a></li>\n    </ul>\n  </NavWrapper>\n);\n\nexport default Navbar;\n\nconst NavWrapper = styled.div`\nbackground-color:#000000;\nbox-shadow: inset 0 0 1000px 1000px rgba(0, 0, 0, 0.747);\nmargin:0;\n\n.menu {\n  display: -webkit-box; \n  display: -moz-box;\n  display: -ms-flexbox;\n  display: -webkit-flex; \n  display: flex;\n}\n.mt-2{\n  margin-top:1rem;\n}\nul {\n  list-style-type: none;\n  margin-block-start: 0;\n  margin-block-end: 0;\n  padding: 1rem 2rem;\n}\n\n.nav-item{\n  color:#ffffff;\n  margin-right: 1rem;\n}\n\n.logo{\n  margin-right:auto;\n}\n@media only screen and (max-width: 767px) { \n  ul {\n    padding: 1rem 1.5rem;\n  }\n    .nav-item{\n      margin-right: .75rem;\n    \n  }\n`","export default __webpack_public_path__ + \"static/media/down.ad124a2f.svg\";","import React, { useEffect, lazy, Suspense } from 'react'\nimport TypeWriter from '../components/Typewriter'\nimport styled from \"styled-components\";\nimport Navbar from '../components/Navbar'\nimport down from '../../src/down.svg';\nimport Loader from 'react-loader-spinner'\n\nconst Portfolio = lazy(() => import('../components/Portfolio'));\n\nfunction Home() {\n    const words = [\n        \"Hi\",\n        `I'm Olu\\u0301waka\\u0301yo\\u0300d\\u00E9`,\n        \"A Software Developer \",\n        \"A Designer \",\n        \"Open source Contributor\"\n    ]\n\n    useEffect(() => {\n        window.scrollTo({ top: 0, behavior: 'smooth' })\n        return () => {\n        }\n    }, [])\n\n    return (\n        <HomeWrapper>\n            <Navbar />\n            <section className=\"top\">\n                <div className=\"caption\" >\n                    <div className=\"box\">\n                        <h2 className=\"\"><TypeWriter className=\"\" texts={words} /> </h2>\n                        <h2 className=\"l\"> 👋 </h2>\n                    </div>\n                </div>\n                <a className=\"arrow\" href=\"#portfolio\"> <img width=\"70px\" height=\"70px\" src={down} alt=\"down-arrow\" /></a>\n            </section>\n            <div className=\"portfolio\" id=\"portfolio\" >\n                <Suspense fallback={<Loader\n                    className=\"cen\"\n                    type=\"BallTriangle\"\n                    color=\"#000\"\n                    height={100}\n                    width={100}\n                    timeout={5000} //5 secs\n                />}>\n                    <Portfolio />\n                </Suspense>\n            </div>\n\n            <section className=\"footer\">\n                <div className=\"form\" id=\"contact\">\n                    <form name=\"reach\" method=\"POST\" netlify>\n                        <p className=\"col\">Please feel free to contact me for freelance projects and collaborations</p>\n                        <input type=\"text\" id=\"name\" name=\"name\" placeholder=\"Name\" required />\n                        <input type=\"email\" id=\"email\" name=\"email\" placeholder=\"Email\" required />\n                        <textarea type=\"text\" id=\"message\" name=\"message\" placeholder=\"Message\" required></textarea>\n                        <input type=\"submit\" className=\"btn-send\" />\n                    </form>\n                </div>\n                <h1>Contact</h1>\n                <ul className=\"links\">\n                    <li className=\"icon\"><a href=\"https://github.com/lollykrown\"><i className=\"fa fa-github\"></i></a></li>\n                    <li className=\"icon\"><a href=\"https://twitter.com/oluwakayy\"><i className=\"fa fa-twitter \"></i></a></li>\n                    <li className=\"icon\"><a href=\"https://wa.me/+2347034750495\"><i className=\"fa fa-whatsapp \"></i></a></li>\n                </ul>\n                <h3 className=\"email-label\">Email</h3>\n                <a className=\"email\" href=\"mailto:lollykrown@gmail.com\">lollykrown@gmail.com</a>\n                <h3 className=\"skype-label\">Skype</h3>\n                <p className=\"skype\">Oluwakayy</p>\n\n                <p className=\"footnotes\">&copy; 2020 <a href=\"https://oluwakayode.netlify.app\"\n                    rel=\"noopener noreferrer\" target=\"_blank\">Ol&#250;wak&#225;y&#242;d&#233;.</a> All rights reserved.</p>\n            </section>\n        </HomeWrapper >\n    )\n}\n\nexport default Home\n\nconst HomeWrapper = styled.div`\n.cen{\n    margin: 36%;\n    padding:5rem;\n}\n.top{\n    height: 88vh;\n    width: 100%;\n    background: url('/img/bg.webp');\n    background-size: cover;\n    background-repeat: no-repeat;\n    box-shadow: inset 0 0 1000px 1000px rgba(0, 0, 0, 0.747);\n    display: flex;\n    flex-direction: column;\n    position: relative;\n    box-sizing: border-box;\n    z-index:1;\n}\n\n  .box{\n    margin:0 auto;\n    z-index:-1;\n    padding-left:.5rem;\n    width:400px;\n    height:200px;\n    border: 3px solid #ffffff;\n  }\n  .caption {\n    display: flex;\n    flex-direction: column;\n    margin: auto;\n    flex-grow: 1;\n    width: 100%;\n    justify-content: center;\n    align-items: center;\n  }\n  h2{\n      width:max-content;\n      overflow-x:visible;\n  }\n  .caption h2 {\n    text-align: center;\n    font-size: 3rem;\n    color: #fff;\n  }\n  .l{\n      margin:0 auto;\n  }\n\n  .btn {\n    font-size: 16px;\n    border-radius: 3px;\n  }\n  .arrow{\n      margin:0 auto 1.75rem auto;\n      padding: 1rem;\n  }\n  .arrow:hover {\n    background-color:rgba(255, 255, 255, 0.3);\n    border-radius: 3rem;   \n    cursor:grab;   \n}\n  \n  .row {\n    display:grid;\n    grid-template-columns: 50% 50%;\n    justify-items:center;\n    padding-left:1.125rem;\n  }\n.img {\n    width: 90%;\n    height: 70%;\n    margin-left: 1rem;\n    z-index: 11;\n    box-shadow: 5px 15px 15px 15px rgba(0,0,0,0.35)\n}\n.portfolio-container {\n    position: relative;\n    margin: 0 0 3em 0;\n}\n.portfolio-title {\n    margin-left: 1rem;\n    margin-top: 0;\n    color: #ffffff;\n    max-width: 400px; */\n}\n.center {\n    text-align:center;\n    font-size: 3rem;\n    text-shadow: 4px 4px 6px rgba(0,0,0,0.4);\n}\n.bg {\n    width: 90%;\n    height: 92%;\n    position: absolute;\n    left:0;\n    top:2rem;\n    z-index: -1;\n}\n.bg, .footer, .btn-send {\n    color:#fff;\n    background-color: #000fff;\n    box-shadow: inset 0 0 1000px 1000px rgba(0, 0, 0, 0.747);\n}\n.footer {\n    background-color: #000;\n    padding: 1rem 5rem;\n    margin-top: 2em;\n}\n.links{\n    padding-inline-start: 0;\n}\n.links li{\n    display: inline;\n}\n.icon {\n    margin-right: 1.4rem;\n}\na {\n    color: #6d6d6d;\n    font-size:1.25rem;\n    text-decoration:none;\n    transition: 2s linear;\n}\na:hover {\n    color: #fff;\n    font-weight:500;\n}\n.form {\n    position: relative;\n    bottom: 4.5rem;\n}\nform {\n    background-color: #fff;\n    color: #ffffff;\n    padding: 3em;\n    width: 30%;\n    float: right;\n    box-shadow: 5px 10px 15px 10px rgba(0,0,0,0.7);\n}\n.col{\n    color:#000;\n}\ninput, textarea {\n    width: 100%;\n    border: none;\n    border: 1px solid #000;\n    background-color: rgba(0,0,0,0.075);\n    color: #000;\n}\ninput {\n    margin-top: 1.5em;\n    margin-bottom: 0.5em;\n}\ninput:focus {\n    border: none;\n    border-bottom: 1px solid #d1d1d1;\n  }\n::placeholder,::-webkit-input-placeholder, :-ms-input-placeholder {\n    color: #ffffff;\n}\n\ntextarea {\n    height: 4rem;\n    margin-bottom: 1.75rem;\n}\n.btn-send {\n    padding: .75em 4em;\n    font-weight: 600;\n    text-transform: uppercase;\n    display: block;\n    width: max-content;\n}\n.footnotes {\n    margin-top: 3rem;\n}\n\n@media only screen and (max-width: 767px) { \n    .footer {\n        padding: 1em 2rem;\n    }\n    .caption h2 {\n        font-size: 1.5rem;\n      }\n      .box{\n          width:220px;\n          height:120px;\n      }\n    .top {\n        height: 82vh;\n      }\n      .row {\n          display:table;\n        }\n    .email, .email-label, .skype,.skype-label {\n        display: none;\n    }\n    form {\n        padding: 2em;\n        width: 100%;\n    }\n    .fa:hover{\n        font-size:1.35rem;\n    }\n}\n@media only screen and (min-width: 768px) and (max-width: 991px) { \n    form {\n        padding: 2em;\n        width: 50%;\n        padding: 10px;\n    }\n}\n@media only screen and (min-width: 992px) and (max-width: 1200px) { \n    form {\n        padding: 2em;\n        width: 40%;\n        padding: 10px;\n    }\n}\n\n`;\n","import React from 'react';\nimport { Switch, Route } from 'react-router-dom'\nimport './App.css';\nimport Home from './pages/Home';\n\nfunction App() {\n  return (\n    <React.Fragment>\n    <Switch>\n      <Route exact path=\"/\" component={Home} />\n    </Switch>\n  </React.Fragment>\n  );\n}\n\nexport default App;","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 \"./index.css\";\nimport App from \"./App\";\nimport { BrowserRouter as Router } from \"react-router-dom\";\nimport reportWebVitals from './reportWebVitals';\n\nReactDOM.render(\n  <React.StrictMode>\n    <Router>\n      <App />\n    </Router>\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(console.log);\n"],"sourceRoot":""}