{"version":3,"sources":["components/Transitions/TransitionPopInSwitchKeyFrames.jsx","components/Transitions/TransitionSwitchHOC.js","Routes/About.jsx","Routes/Home.jsx","Routes/Projects.jsx","App.js","index.js"],"names":["TransitionSwitchHOC","AnimatorComponent","props","children","inClass","outClass","firstClass","className","render","location","transitionKey","pathname","timeout","swapChildren","setState","classname","prevChild","prevUniqId","state","curChild","curUniqId","uniqId","prevProps","prevState","type","this","setTimeout","clearTimeout","React","Component","About","Container","Row","Col","sm","md","Card","Img","variant","src","Footer","Home","Jumbotron","allowtransparency","frameborder","scrolling","seamless","width","height","Projects","useState","framePopup","setframePopup","lg","style","backgroundImage","Body","Title","Text","href","target","Button","onClick","title","url","IframeModal","show","onHide","Modal","size","aria-labelledby","centered","Header","closeButton","id","display","position","App","menuOpen","setMenuOpen","menuButtonClass","to","v","path","ReactDOM","document","getElementById"],"mappings":"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","file":"static/js/main.72db5618.chunk.js","sourcesContent":["import React from \"react\";\r\nimport \"./TransitionPopIn.css\";\r\nimport TransitionSwitchHOC from \"./TransitionSwitchHOC\";\r\n\r\n//based on code by https://stephencookdev.co.uk/\r\nclass TransitionSwtichComp extends React.Component {\r\n  constructor(props) {\r\n    super(props);\r\n\r\n    this.state = {\r\n      classname: this.props.firstClass || \"\",\r\n      curChild: props.children,\r\n      curUniqId: props.uniqId,\r\n      prevChild: null,\r\n      prevUniqId: null\r\n    };\r\n  }\r\n\r\n  timeout = null;\r\n\r\n  componentDidUpdate(prevProps, prevState) {\r\n    const prevUniqId = prevProps.transitionKey || prevProps.children.type;\r\n    const uniqId = this.props.transitionKey || this.props.children.type;\r\n\r\n    if (prevUniqId !== uniqId) {\r\n      this.setState({\r\n        classname: this.props.outClass || \"fadeout-animation\",\r\n        curChild: this.props.children,\r\n        curUniqId: uniqId,\r\n        prevChild: prevProps.children,\r\n        prevUniqId\r\n      });\r\n      this.timeout = setTimeout(() => {\r\n        this.swapChildren();\r\n      },375);\r\n    }\r\n  }\r\n\r\n  componentDidMount() {\r\n    if(this.timeout)\r\n      clearTimeout(this.timeout);\r\n  }\r\n  \r\n\r\n  swapChildren = () => {\r\n    this.setState({\r\n      classname: this.props.inClass || \"fadein-animation\",\r\n      prevChild: null,\r\n      prevUniqId: null\r\n    });\r\n  };\r\n\r\n  render() {\r\n    return (\r\n      <div className={this.state.classname + (this.props.className ? ` ${this.props.className}` : '')}>\r\n        {this.state.prevChild || this.state.curChild}\r\n      </div>\r\n    );\r\n  }\r\n}\r\n\r\n\r\nexport default TransitionSwitchHOC(TransitionSwtichComp);\r\n","import React from \"react\";\r\nimport { Route, Switch } from \"react-router-dom\";\r\n\r\nconst TransitionSwitchHOC = (AnimatorComponent) => (props) => {\r\n  const { children, inClass, outClass, firstClass, className } = props;\r\n  return (\r\n    <Route\r\n      render={({ location }) => (\r\n        <AnimatorComponent transitionKey={location.pathname} className={className} inClass={inClass} outClass={outClass} firstClass={firstClass}>\r\n          <Switch location={location}>\r\n            {children}\r\n          </Switch>\r\n        </AnimatorComponent>\r\n      )}\r\n    />\r\n  );\r\n};\r\n\r\nexport default TransitionSwitchHOC;\r\n","import React from \"react\";\r\n\r\nimport Container from \"react-bootstrap/Container\";\r\nimport Row from \"react-bootstrap/Row\";\r\nimport Card from \"react-bootstrap/Card\";\r\nimport Col from \"react-bootstrap/Col\";\r\n\r\nfunction About() {\r\n  return (\r\n    <Container>\r\n      <Row>\r\n        <Col sm={12} md={4}>\r\n            <h1>About.</h1>\r\n            <p>A dedicated developer and passionate learner. I write software, design, create and build embeded systems, web interfaces, custom circuit boards, model aircraft, voice applications, mobile apps, and more.</p>\r\n        </Col>\r\n        <Col sm={12} md={4}>\r\n            <div className=\"text-right\">\r\n                <h3>DiamondDrake</h3>\r\n                <p className=\"text-muted\">Rickey Ward</p>\r\n            </div>\r\n        </Col>\r\n        <Col sm={12} md={4}>\r\n        <Card className=\"h-100\">\r\n                <Card.Img className=\"flipx\" variant=\"top\" src=\"/img/about.jpg\" />\r\n                <Card.Footer className=\"text-right\">\r\n                  <small className=\"text-muted\">Rickey Ward 2017</small>\r\n                </Card.Footer>\r\n              </Card>\r\n        </Col>\r\n      </Row>\r\n    </Container>\r\n  );\r\n}\r\n\r\nexport default About;\r\n","import React from 'react';\r\n\r\nimport Jumbotron from \"react-bootstrap/Jumbotron\";\r\nimport Container from \"react-bootstrap/Container\";\r\nimport Row from \"react-bootstrap/Row\";\r\nimport Col from \"react-bootstrap/Col\";\r\n\r\nfunction Home() {\r\n    return (\r\n        <Container>\r\n            <Row>\r\n                <Col md={8}>\r\n                    <Jumbotron className=\"h-100\">\r\n                        <h1>Welcome.</h1>\r\n                        <p>This site has changed a lot over the years. It once hosted hundreds of custom myspace layouts and a flash applet layout generator. A blog of all my endevors learning programming the years before I went to university for it, and well that too is gone. If you came here for that nostaliga, it's lost to the ages.</p>\r\n                        <p>I don't think anyone enjoys reading quite enough to read a blog I'd write. I don't think dev blogs really make that much sense anyway. What we want are tutorials, places to shove code with a little metadata so we can find it easily. Github is a wonderous wealth of information, but its aim is sharing code and its revison. I'd like to store more transient code here. collections of tools and links. I've got a ton of great projects I've been working on and I'll share them here just as soon as I find the time. I hope you find something here useful.</p>\r\n                        <p className=\"ml-auto\">-DiamondDrake</p>\r\n                    </Jumbotron>\r\n                </Col>\r\n                <Col md={4}><iframe className=\"ghiframe\" allowtransparency=\"true\" frameborder=\"0\" scrolling=\"no\" seamless=\"seamless\"\r\n                    src=\"http://colmdoyle.github.io/gh-activity/gh-activity.html?user=rickeyward&type=user\" width=\"100%\" height=\"100%\"></iframe>\r\n                </Col>\r\n            </Row>\r\n        </Container>\r\n    );\r\n}\r\n\r\nexport default Home;","import React, { useState } from \"react\";\r\nimport Iframe from \"react-iframe\";\r\n\r\nimport Jumbotron from \"react-bootstrap/Jumbotron\";\r\nimport Container from \"react-bootstrap/Container\";\r\nimport Card from \"react-bootstrap/Card\";\r\nimport Row from \"react-bootstrap/Row\";\r\nimport Col from \"react-bootstrap/Col\";\r\nimport Button from \"react-bootstrap/Button\";\r\nimport Modal from \"react-bootstrap/Modal\";\r\n\r\nfunction Projects() {\r\n  const [framePopup, setframePopup] = useState(false);\r\n\r\n  return (\r\n    <Container>\r\n      <Row>\r\n        <Col>\r\n          <div>\r\n            <h1>Projects.</h1>\r\n            <p>I'm always up to something, seldom documenting it...</p>\r\n          </div>\r\n          <Row>\r\n            <Col sm={12} md={6} lg={4} className=\"mt-4\">\r\n              <Card className=\"h-100\">\r\n                <div\r\n                  className=\"project-card-image card-img-top\"\r\n                  style={{\r\n                    backgroundImage:\r\n                      \"url('https://cdn.instructables.com/FM9/XLGA/IATHJ03J/FM9XLGAIATHJ03J.LARGE.jpg?auto=webp&width=1024&fit=bounds')\"\r\n                  }}\r\n                />\r\n                {/* <Card.Img variant=\"top\" src=\"https://cdn.instructables.com/FM9/XLGA/IATHJ03J/FM9XLGAIATHJ03J.LARGE.jpg?auto=webp&width=1024&fit=bounds\" /> */}\r\n                <Card.Body className=\"d-flex flex-column\">\r\n                  <Card.Title>RC Transmitter to USB Gamepad Using Arduino (Instructable Article)</Card.Title>\r\n                  <Card.Text>\r\n                    Great for practicing your RC pilot skills, but you can do this cheaper and easier with a digispark\r\n                    clone. I should probably share that code soon.\r\n                  </Card.Text>\r\n                  <a\r\n                    href=\"https://www.instructables.com/id/RC-Transmitter-to-USB-Gamepad-Using-Arduino/\"\r\n                    target=\"_blank\"\r\n                    className=\"btn btn-primary btn-block mt-auto\">\r\n                    Go to Article\r\n                  </a>\r\n                </Card.Body>\r\n                <Card.Footer>\r\n                  <small className=\"text-muted\">Published Jun 13th, 2015</small>\r\n                </Card.Footer>\r\n              </Card>\r\n            </Col>\r\n\r\n            <Col sm={12} md={6} lg={4} className=\"mt-4\">\r\n              <Card className=\"h-100\">\r\n                <div\r\n                  className=\"project-card-image card-img-top\"\r\n                  style={{ backgroundImage: \"url('/img/cursor-flashlight.png')\" }}\r\n                />\r\n                <Card.Body className=\"d-flex flex-column\">\r\n                  <Card.Title>Cursor Flashlight (Windows App)</Card.Title>\r\n                  <Card.Text>\r\n                    Darken your screen everywhere except around the cursor when holding left-ctrl + left-win. Useful for explaining things on screen.\r\n                  </Card.Text>\r\n                  <div className=\"d-flex mt-auto cardbuttons2 justify-content-between\">\r\n                  <a\r\n                      href=\"https://github.com/RickeyWard/CursorFlashlight/releases/download/0.1a/CursorFlashlight.exe\"\r\n                      target=\"_blank\"\r\n                      className=\"btn btn-primary d-block mr-10\">\r\n                      Download\r\n                    </a>\r\n                    <a\r\n                      href=\"https://github.com/RickeyWard/CursorFlashlight\"\r\n                      target=\"_blank\"\r\n                      className=\"btn btn-primary d-block\">\r\n                      Code\r\n                    </a>\r\n                  </div>\r\n                </Card.Body>\r\n                <Card.Footer>\r\n                  <small className=\"text-muted\">Published Feb 22, 2020</small>\r\n                </Card.Footer>\r\n              </Card>\r\n            </Col>\r\n\r\n            <Col sm={12} md={6} lg={4} className=\"mt-4\">\r\n              <Card className=\"h-100\">\r\n                <div\r\n                  className=\"project-card-image card-img-top\"\r\n                  style={{ backgroundImage: \"url('/img/bullet-snake.png')\" }}\r\n                />\r\n                <Card.Body className=\"d-flex flex-column\">\r\n                  <Card.Title>Bullet Snake! (Silly game in p5js)</Card.Title>\r\n                  <Card.Text>\r\n                    This was made to just play around with the p5js web editor, ended up being a ton of fun!\r\n                  </Card.Text>\r\n                  <div className=\"d-flex mt-auto cardbuttons2 justify-content-between\">\r\n                    <Button\r\n                      variant=\"primary\"\r\n                      className=\"d-block mr-10\"\r\n                      onClick={() =>\r\n                        setframePopup({\r\n                          title: \"Bullet Snake!\",\r\n                          url: \"https://editor.p5js.org/diamondrake/present/onJcf4UJE\",\r\n                          width: \"400px\",\r\n                          height: \"400px\"\r\n                        })\r\n                      }>\r\n                      Play\r\n                    </Button>\r\n                    <a\r\n                      href=\"https://editor.p5js.org/diamondrake/sketches/onJcf4UJE\"\r\n                      target=\"_blank\"\r\n                      className=\"btn btn-primary d-block\">\r\n                      Code\r\n                    </a>\r\n                  </div>\r\n                </Card.Body>\r\n                <Card.Footer>\r\n                  <small className=\"text-muted\">Published Jul 6, 2019</small>\r\n                </Card.Footer>\r\n              </Card>\r\n            </Col>\r\n\r\n            <Col sm={12} md={6} lg={4} className=\"mt-4\">\r\n              <Card className=\"h-100\">\r\n                <div\r\n                  className=\"project-card-image card-img-top\"\r\n                  style={{ backgroundImage: \"url('/img/minesweeper.png')\" }}\r\n                />\r\n                <Card.Body className=\"d-flex flex-column\">\r\n                  <Card.Title>Worst Minesweeper? (first tinker with p5js)</Card.Title>\r\n                  <Card.Text>\r\n                    I had minesweeper on the mind, this is the worst version ever made. No flagging, no first click\r\n                    detection. Just messy minsweeping. One day I'll revisit it. First time I ever used p5js\r\n                  </Card.Text>\r\n                  <div className=\"d-flex mt-auto cardbuttons2 justify-content-between\">\r\n                    <Button\r\n                      variant=\"primary\"\r\n                      className=\"d-block mr-10\"\r\n                      onClick={() =>\r\n                        setframePopup({\r\n                          title: \"Worst Minesweeper?\",\r\n                          url: \"https://editor.p5js.org/diamondrake/present/r19kqNo3X\",\r\n                          width: \"400px\",\r\n                          height: \"400px\"\r\n                        })\r\n                      }>\r\n                      Play\r\n                    </Button>\r\n                    <a\r\n                      href=\"https://editor.p5js.org/diamondrake/sketches/r19kqNo3X\"\r\n                      target=\"_blank\"\r\n                      className=\"btn btn-primary d-block\">\r\n                      Code\r\n                    </a>\r\n                  </div>\r\n                </Card.Body>\r\n                <Card.Footer>\r\n                  <small className=\"text-muted\">Published Nov 3, 2018</small>\r\n                </Card.Footer>\r\n              </Card>\r\n            </Col>\r\n\r\n            <Col sm={12} md={6} lg={4} className=\"mt-4\">\r\n              <Card className=\"h-100\">\r\n                <div\r\n                  className=\"project-card-image card-img-top\"\r\n                  style={{ backgroundImage: \"url('/img/css-skyline.png')\" }}\r\n                />\r\n                {/* <Card.Img variant=\"top\" src=\"/img/pl-git.png\" /> */}\r\n                <Card.Body className=\"d-flex flex-column\">\r\n                  <Card.Title>CSS Skyline</Card.Title>\r\n                  <Card.Text>\r\n                    Experimenting with drawing in pure CSS, First time giving it a shot.\r\n                  </Card.Text>\r\n                  <a href=\"https://codepen.io/diamonddrake/full/dyoORxv\" target=\"_blank\" className=\"btn btn-primary btn-block mt-auto\">\r\n                    Go to Codepen\r\n                  </a>\r\n                </Card.Body>\r\n                <Card.Footer>\r\n                  <small className=\"text-muted\">Published Feb 22, 2020</small>\r\n                </Card.Footer>\r\n              </Card>\r\n            </Col>\r\n\r\n            <Col sm={12} md={6} lg={4} className=\"mt-4\">\r\n              <Card className=\"h-100\">\r\n                <div\r\n                  className=\"project-card-image card-img-top\"\r\n                  style={{ backgroundImage: \"url('/img/pl-git.png')\" }}\r\n                />\r\n                {/* <Card.Img variant=\"top\" src=\"/img/pl-git.png\" /> */}\r\n                <Card.Body className=\"d-flex flex-column\">\r\n                  <Card.Title>More to come</Card.Title>\r\n                  <Card.Text>\r\n                    I never seem to find time to post my projects here, so if you want to see more I have a few public\r\n                    repos and gists on Github.\r\n                  </Card.Text>\r\n                  <a href=\"https://github.com/rickeyward\" target=\"_blank\" className=\"btn btn-primary btn-block mt-auto\">\r\n                    Check out my Github\r\n                  </a>\r\n                </Card.Body>\r\n                <Card.Footer>\r\n                  <small className=\"text-muted\">Updated daily, practically.</small>\r\n                </Card.Footer>\r\n              </Card>\r\n            </Col>\r\n          </Row>\r\n        </Col>\r\n      </Row>\r\n      <IframeModal show={!!framePopup} onHide={() => setframePopup(null)} {...framePopup} />\r\n    </Container>\r\n  );\r\n}\r\n\r\nexport default Projects;\r\n\r\nfunction IframeModal(props) {\r\n  return (\r\n    <Modal\r\n      {...{ show: props.show, onHide: props.onHide }}\r\n      size=\"lg\"\r\n      aria-labelledby=\"contained-modal-title-vcenter\"\r\n      centered>\r\n      <Modal.Header closeButton>\r\n        <Modal.Title id=\"contained-modal-title-vcenter\">{props.title && props.title}</Modal.Title>\r\n      </Modal.Header>\r\n      <Modal.Body className=\"d-flex justify-content-center align-content-center\">\r\n        <Iframe\r\n          url={props.url && props.url}\r\n          width={props.width && props.width}\r\n          height={props.height && props.height}\r\n          id=\"reactSnake\"\r\n          className=\"no-border\"\r\n          display=\"initial\"\r\n          position=\"relative\"\r\n        />\r\n      </Modal.Body>\r\n      <Modal.Footer>\r\n        <Button variant=\"secondary\" onClick={props.onHide}>\r\n          I hate games\r\n        </Button>\r\n      </Modal.Footer>\r\n    </Modal>\r\n  );\r\n}\r\n","import React, { useState } from 'react';\r\nimport { HashRouter as Router, Link, Route } from \"react-router-dom\";\r\nimport './App.css';\r\nimport TransitionPopInSwitch from './components/Transitions/TransitionPopInSwitchKeyFrames';\r\nimport About from \"./Routes/About\";\r\nimport Home from \"./Routes/Home\";\r\nimport Projects from \"./Routes/Projects\";\r\n\r\nfunction App() {\r\n  const [menuOpen, setMenuOpen] = useState(false);\r\n  const menuButtonClass = \"MenuButton\" + (menuOpen ? \" Open\" : \"\");\r\n  return (\r\n    <div className=\"App\">\r\n      <Router>\r\n      <div className=\"NavMain\">\r\n        <div className=\"d-flex align-items-center\">\r\n          <div className=\"NavLogo\"><img src=\"/img/dd-logo.svg\"></img></div>\r\n          <div className=\"NavBrand ml-3\">Diamonddrake.com</div>\r\n        </div>\r\n        <div className=\"NavLinks\">\r\n          <Link to=\"/\">Home</Link>\r\n          <Link to=\"/Projects\">Projects</Link>\r\n          <Link to=\"/About\">About</Link>\r\n          <a href=\"https://github.com/rickeyward\">Github</a>\r\n        </div>\r\n        <div\r\n          className={menuButtonClass}\r\n          onClick={() => {\r\n            setMenuOpen(v => !v);\r\n          }}\r\n        >\r\n          <div />\r\n          <div />\r\n          <div />\r\n        </div>\r\n      </div>\r\n      {menuOpen && (\r\n        <div className=\"NavLinksMini\">\r\n          <Link to=\"/\">Home</Link>\r\n          <Link to=\"/Projects\">Projects</Link>\r\n          <Link to=\"/About\">About</Link>\r\n          <a href=\"https://github.com/rickeyward\">Github</a>\r\n        </div>\r\n      )}\r\n      <div className=\"body\">\r\n        <div className=\"content\">\r\n        <TransitionPopInSwitch>\r\n          <Route path=\"/about\">\r\n            <About />\r\n          </Route>\r\n          <Route path=\"/projects\">\r\n            <Projects />\r\n          </Route>\r\n          <Route path=\"/\">\r\n            <Home />\r\n          </Route>\r\n        </TransitionPopInSwitch>\r\n        </div>\r\n      </div>\r\n      </Router>\r\n    </div>\r\n  );\r\n}\r\n\r\nexport default App;\r\n","import React from 'react';\r\nimport ReactDOM from 'react-dom';\r\nimport './index.css';\r\nimport App from './App';\r\nimport './bootstrap.min.css';\r\n\r\nReactDOM.render(<App />, document.getElementById('root'));"],"sourceRoot":""}