Portfolio V2

In this example below you will see how to do a Portfolio V2 with some HTML / CSS and Javascript

Thumbnail
This awesome code was written by captnstarburst, you can see more from this user in the personal repository.
You can find the original code on Codepen.io
Copyright captnstarburst ©

Technologies

  • HTML
  • CSS
  • JavaScript
<!DOCTYPE html>
<html lang="en" >

<head>
  <meta charset="UTF-8">
  <title>Portfolio V2</title>
  <meta name="viewport" content="width=device-width, initial-scale=1">

<link href="https://fonts.googleapis.com/css?family=Diplomata+SC|Slabo+27px" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Arapey" rel="stylesheet">

<script src='https://www.google.com/recaptcha/api.js'></script>


  
  <link rel='stylesheet prefetch' href='https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha.6/css/bootstrap.min.css'>
<link rel='stylesheet prefetch' href='https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.css'>

      <link rel="stylesheet" href="css/style.css">

  
</head>

<body>

  <div id="root"></div>
  <script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/tether/1.4.0/js/tether.min.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha.6/js/bootstrap.min.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/react/15.4.2/react.min.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/react/15.4.2/react-dom.min.js'></script>

  

    <script  src="js/index.js"></script>




</body>

</html>

/*Downloaded from https://www.codeseek.co/captnstarburst/portfolio-v2-mmoQQw */
@charset "UTF-8";
body {
  background: #C3CDE6;
}

p {
  font-family: 'Arapey', serif;
}

nav {
  background-color: #736A62;
}

.navbar-brand {
  font-family: 'Diplomata SC', cursive;
}

.nav-link {
  font-family: 'Diplomata SC', cursive;
  cursor: pointer;
}

.profile-img {
  margin-top: 10%;
  width: 70%;
  border-radius: 100%;
  background: #000000;
}

.top-header {
  font-family: 'Diplomata SC', cursive;
  margin-top: 20%;
}

.portfolio-top-header {
  font-family: 'Diplomata SC', cursive;
  margin-top: 10%;
}

.portfolio-row {
  padding-bottom: 5%;
}

.portfolio-header {
  margin-bottom: 5%;
}

.portfolio-img {
  height: 150px;
  width: 50%;
  border: 1px solid black;
}

.portfolio-title {
  margin-top: 5%;
  margin-bottom: 2%;
}

hr {
  border-top: 5px solid #8c8b8b;
  text-align: center;
}

hr:after {
  content: '┬ž';
  display: inline-block;
  position: relative;
  top: -14px;
  padding: 0 10px;
  background: #C3CDE6;
  color: #8c8b8b;
  font-size: 18px;
  -ms-transform: rotate(60deg);
  -webkit-transform: rotate(60deg);
  -moz-transform: rotate(60deg);
  transform: rotate(60deg);
}

a:link {
  text-decoration: none;
  color: black;
}

a:visited {
  text-decoration: none;
  color: black;
}

a:hover {
  text-decoration: underline;
  color: black;
}

a:active {
  text-decoration: underline;
  color: black;
}

.header-link {
  font-family: 'Diplomata SC', cursive;
  display: inline-block;
  padding-right: 5%;
  cursor: pointer;
}

.work-header {
  font-family: 'Diplomata SC', cursive;
}

.work-img {
  width: 80%;
  height: 200px;
  background: #000000;
}

.deploy-img {
  width: 80%;
  height: 250px;
  background: #000000;
}

.img-header {
  font-family: 'Arapey', serif;
  font-size: 2em;
}

.center-arrow {
  margin-top: 20%;
  font-size: 5em;
}

.slanted-arrow {
  font-size: 6em;
  -webkit-transform: rotate(-30deg);
  -moz-transform: rotate(-30deg);
  transform: rotate(-30deg);
}

.tech-banner {
  padding-bottom: 1%;
  border-bottom: solid black;
  box-shadow: 0 10px 0 black;
}
.tech-banner img {
  width: 50px;
  border-radius: 10px;
  box-shadow: 5px 10px 5px black;
  padding: 5px;
}

.jumbotron {
  background-image: url("http://conorhinchee.tech/pictures/sketch.jpg");
  background-repeat: no-repeat;
  background-size: cover;
  max-height: 100%;
}

.top-contact-header {
  font-family: 'Diplomata SC', cursive;
  color: black;
  text-shadow: 1px 1px 1px white;
}

form {
  margin-top: 5%;
}

label {
  font-family: 'Arapey', serif;
  text-shadow: 1px 0 0 blue, 1px 1px 1px black, 2px 2px 0 white;
  font-size: 1.5em;
}

.sidebar {
  background: black;
}

.support-top-header {
  font-family: 'Diplomata SC', cursive;
  font-size: 2em;
  margin: 5%;
}

.text-body {
  font-family: 'Arapey', serif;
  font-size: 1.5em;
}

.red-text {
  color: red;
  text-shadow: 1px 0 0 black, 1px 1px 1px red;
}

/* Modal Header */
.modal-header {
  padding: 2px 16px;
  background-color: #5cb85c;
  color: white;
}

/* Modal Body */
.modal-body {
  padding: 2px 16px;
}

/* Modal Footer */
.modal-footer {
  padding: 2px 16px;
  background-color: #5cb85c;
  color: white;
}

/* Modal Content */
.modal-content {
  position: absolute;
  background-color: #fefefe;
  margin: auto;
  z-index: 1;
  padding: 0;
  border: 1px solid #888;
  width: 80%;
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
  -webkit-animation-name: animatetop;
  -webkit-animation-duration: 0.9s;
  animation-name: animatetop;
  animation-duration: 0.9s;
}

/* Add Animation */
@-webkit-keyframes animatetop {
  from {
    top: -300px;
    opacity: 0;
  }
  to {
    top: 0;
    opacity: 1;
  }
}
@keyframes animatetop {
  from {
    top: -300px;
    opacity: 0;
  }
  to {
    top: 0;
    opacity: 1;
  }
}
@media screen and (min-width: 2560px) {
  .navbar-brand {
    font-size: 3em;
  }

  .nav-link {
    font-size: 2em;
  }

  .top-header {
    font-size: 5em;
  }

  .portfolio-top-header {
    font-size: 5em;
  }

  .portfolio-header {
    font-size: 4em;
  }

  .portfolio-img {
    height: 300px;
  }

  .portfolio-title {
    font-size: 3em;
    margin-bottom: 2%;
  }

  p {
    font-size: 2.5em;
  }

  .header-link {
    font-size: 2.5em;
    margin-top: 5%;
  }

  .work-header {
    font-size: 3em;
    margin-top: 5%;
  }

  .work-img {
    height: 70%;
  }

  .img-header {
    font-size: 3em;
  }

  .deploy-img {
    height: 70%;
  }

  .center-arrow {
    font-size: 10em;
  }

  .slanted-arrow {
    font-size: 11em;
  }

  .tech-banner img {
    width: 150px;
  }

  .support-top-header {
    font-size: 4em;
  }

  .text-body {
    font-size: 3em;
  }

  .support-img {
    height: 30%;
    width: 80%;
  }
}
@media screen and (max-width: 425px) {
  .navbar-brand {
    font-size: .8em;
  }

  .portfolio-top-header {
    font-size: 1.5em;
  }

  .portfolio-img {
    height: 75px;
    width: 100%;
  }

  .portfolio-row {
    padding-bottom: 20%;
  }

  .portfolio-title {
    font-size: 1em;
  }

  .support-top-header {
    font-size: 1em;
    margin-bottom: 20%;
  }

  .text-body {
    font-size: .8em;
  }

  .support-img {
    height: 15%;
    width: 100%;
  }
}
@media screen and (max-width: 360px) {
  .navbar-brand {
    font-size: .8em;
  }

  .top-header {
    font-size: 1.5em;
  }

  .work-header {
    margin-top: 15%;
  }

  .work-img {
    height: 80px;
  }

  .deploy-img {
    height: 100px;
  }

  .center-arrow {
    font-size: 2em;
    margin-top: 60%;
  }

  .slanted-arrow {
    font-size: 3em;
  }

  .top-contact-header {
    font-size: 1.5em;
  }
}


/*Downloaded from https://www.codeseek.co/captnstarburst/portfolio-v2-mmoQQw */
var _createClass = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }();

function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }

function _possibleConstructorReturn(self, call) { if (!self) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return call && (typeof call === "object" || typeof call === "function") ? call : self; }

function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; }

var Home = function (_React$Component) {
  _inherits(Home, _React$Component);

  function Home() {
    _classCallCheck(this, Home);

    return _possibleConstructorReturn(this, (Home.__proto__ || Object.getPrototypeOf(Home)).apply(this, arguments));
  }

  _createClass(Home, [{
    key: "render",
    value: function render() {
      return React.createElement(
        "div",
        null,
        React.createElement(
          "nav",
          { className: "navbar navbar-light navbar-toggleable-sm sticky-top" },
          React.createElement(
            "button",
            {
              className: "navbar-toggler navbar-toggler-right",
              type: "button",
              "data-toggle": "collapse",
              "data-target": "#navbarBreakPoint",
              "aria-controls": "navbarBreakPoint",
              "aria-expanded": "false",
              "aria-label": "Toggle navigation"
            },
            React.createElement("span", { className: "navbar-toggler-icon" })
          ),
          React.createElement(
            "div",
            { className: "navbar-brand" },
            "Conor Hinchee"
          ),
          React.createElement(
            "div",
            {
              className: "collapse navbar-collapse justify-content-end",
              id: "navbarBreakPoint"
            },
            React.createElement(
              "ul",
              { className: "navbar-nav" },
              React.createElement(
                "li",
                { className: "nav-item active" },
                React.createElement(
                  "a",
                  { className: "nav-link" },
                  " ",
                  "About",
                  React.createElement(
                    "span",
                    { className: "sr-only" },
                    "(current)"
                  )
                )
              ),
              React.createElement(
                "li",
                { className: "nav-item" },
                React.createElement(
                  "a",
                  { className: "nav-link", onClick: this.props.viewPortfolio },
                  "Portfolio"
                )
              ),
              React.createElement(
                "li",
                { className: "nav-item" },
                React.createElement(
                  "a",
                  { className: "nav-link", onClick: this.props.viewContact },
                  " ",
                  "Contact"
                )
              ),
              React.createElement(
                "li",
                { className: "nav-item" },
                React.createElement(
                  "a",
                  { className: "nav-link", onClick: this.props.viewSupport },
                  " ",
                  "Support"
                )
              )
            )
          )
        ),
        React.createElement(
          "div",
          { className: "container-fluid" },
          React.createElement(
            "div",
            { className: "row hidden-sm-down" },
            React.createElement(
              "div",
              { className: "col-4 text-center" },
              React.createElement("img", {
                className: "img img-fluid img-thumbnail profile-img",
                src: "http://www.conorhinchee.tech/pictures/MeOnMyWedding.jpg",
                alt: "Conor Hinchee Profile Picture"
              })
            ),
            React.createElement(
              "div",
              { className: "col-8" },
              React.createElement(
                "h1",
                { className: "top-header" },
                "Welcome!"
              ),
              React.createElement("hr", null),
              React.createElement(
                "p",
                null,
                "My name is Conor Hinchee. I am a freelance software developer and a builder of cool things. I am passionate about clean code and agile software solutions. My philosophy for the web is to have mobile ready sites, featuring natively intuitive design concepts, and client oriented features. I am constantly learning and building new things and projects. Check out my blog for my most recent projects, follow me on github, and feel free to contact me."
              ),
              React.createElement(
                "div",
                { className: "col text-center" },
                React.createElement(
                  "a",
                  { href: "http://blog.conorhinchee.tech/", target: "_blank" },
                  React.createElement(
                    "h5",
                    { className: "header-link" },
                    "Blog ",
                    React.createElement("i", { className: "fa fa-wordpress", "aria-hidden": "true" })
                  )
                ),
                React.createElement(
                  "a",
                  { href: "https://github.com/captnstarburst", target: "_blank" },
                  React.createElement(
                    "h5",
                    { className: "header-link" },
                    "Github ",
                    React.createElement("i", { className: "fa fa-github-alt", "aria-hidden": "true" })
                  )
                ),
                React.createElement(
                  "a",
                  null,
                  React.createElement(
                    "h5",
                    { className: "header-link", onClick: this.props.viewContact },
                    "Contact",
                    " ",
                    React.createElement("i", { className: "fa fa-paper-plane", "aria-hidden": "true" })
                  )
                )
              ),
              React.createElement("hr", null)
            )
          ),
          React.createElement(
            "div",
            { className: "row hidden-sm-up" },
            React.createElement(
              "div",
              { className: "col text-center" },
              React.createElement(
                "h1",
                { className: "top-header" },
                "Welcome!"
              ),
              React.createElement("hr", null)
            )
          ),
          React.createElement(
            "div",
            { className: "row hidden-sm-up" },
            React.createElement(
              "div",
              { className: "col" },
              React.createElement("img", {
                className: "img img-fluid img-thumbnail profile-img",
                src: "http://www.conorhinchee.tech/pictures/MeOnMyWedding.jpg",
                alt: "Conor Hinchee Profile Pic"
              })
            ),
            React.createElement(
              "div",
              { className: "col-6" },
              React.createElement(
                "p",
                null,
                "My name is Conor Hinchee. I am a freelance software developer and a builder of cool things."
              )
            )
          ),
          React.createElement(
            "div",
            { className: "row hidden-sm-up" },
            React.createElement(
              "div",
              { className: "col" },
              React.createElement(
                "p",
                null,
                "I am passionate about clean code and agile software solutions. My philosophy for the web is to have mobile ready sites, featuring natively intuitive design concepts, and client oriented features. I am constantly learning and building new things and projects. Check out my blog for my most recent projects, follow me on github, and feel free to contact me."
              ),
              React.createElement("hr", null)
            )
          ),
          React.createElement(
            "div",
            { className: "row hidden-sm-up" },
            React.createElement(
              "div",
              { className: "col text-center" },
              React.createElement(
                "a",
                {
                  href: "http://blog.conorhinchee.tech/",
                  target: "_blank",
                  className: "btn btn-primary"
                },
                "Blog ",
                React.createElement("i", { className: "fa fa-wordpress", "aria-hidden": "true" })
              ),
              React.createElement(
                "a",
                {
                  href: "https://github.com/captnstarburst",
                  target: "_blank",
                  className: "btn btn-secondary"
                },
                "Github ",
                React.createElement("i", { className: "fa fa-github-alt", "aria-hidden": "true" }),
                " "
              ),
              React.createElement(
                "a",
                { onClick: this.props.viewContact, className: "btn btn-warning" },
                "Contact ",
                React.createElement("i", { className: "fa fa-paper-plane", "aria-hidden": "true" })
              )
            )
          ),
          React.createElement(
            "div",
            { className: "row" },
            React.createElement(
              "div",
              { className: "col text-center" },
              React.createElement(
                "h2",
                { className: "work-header" },
                "How I Work"
              )
            )
          ),
          React.createElement(
            "div",
            { className: "row" },
            React.createElement(
              "div",
              { className: "col-4 text-center" },
              React.createElement(
                "h5",
                { className: "img-header" },
                "Concept"
              ),
              React.createElement("img", {
                className: "img img-fluid img-thumbnail work-img",
                src: "http://conorhinchee.tech/WorkingPictures/Portfolio%20Images/About/Concept_Img.jpg",
                alt: "Concept Thumbnail"
              })
            ),
            React.createElement(
              "div",
              { className: "col-4 text-center" },
              React.createElement("i", {
                className: "fa fa-long-arrow-right center-arrow",
                "aria-hidden": "true"
              })
            ),
            React.createElement(
              "div",
              { className: "col-4 text-center" },
              React.createElement(
                "h5",
                { className: "img-header" },
                "Design"
              ),
              React.createElement("img", {
                className: "img img-fluid img-thumbnail work-img",
                src: "http://conorhinchee.tech/WorkingPictures/Portfolio%20Images/About/Design_Img.jpg",
                alt: "Design Thumbnail"
              })
            )
          ),
          React.createElement(
            "div",
            { className: "row" },
            React.createElement(
              "div",
              { className: "col text-center" },
              React.createElement(
                "i",
                {
                  className: "fa fa-long-arrow-left slanted-arrow",
                  "aria-hidden": "true"
                },
                " ",
                "to"
              )
            )
          ),
          React.createElement(
            "div",
            { className: "row" },
            React.createElement(
              "div",
              { className: "col-4 text-center" },
              React.createElement(
                "h5",
                { className: "img-header" },
                "Build"
              ),
              React.createElement("img", {
                className: "img img-fluid img-thumbnail work-img",
                src: "http://conorhinchee.tech/WorkingPictures/Portfolio%20Images/About/Build_Img.png",
                alt: "Build Thumbnail"
              })
            ),
            React.createElement(
              "div",
              { className: "col-4 text-center" },
              React.createElement("i", {
                className: "fa fa-long-arrow-right center-arrow",
                "aria-hidden": "true"
              })
            ),
            React.createElement(
              "div",
              { className: "col-4 text-center" },
              React.createElement(
                "h5",
                { className: "img-header" },
                "Test"
              ),
              React.createElement("img", {
                className: "img img-fluid img-thumbnail work-img",
                src: "http://conorhinchee.tech/WorkingPictures/Portfolio%20Images/About/Test_Img.jpg",
                alt: "Test Thumnail"
              })
            )
          ),
          React.createElement(
            "div",
            { className: "row" },
            React.createElement(
              "div",
              { className: "col-6 offset-3 text-center" },
              React.createElement(
                "h5",
                { className: "img-header" },
                "Deploy"
              ),
              React.createElement("img", {
                className: "img img-fluid img-thumbnail deploy-img",
                src: "http://conorhinchee.tech/WorkingPictures/Portfolio%20Images/About/Deploy_Img.jpg",
                alt: "Deploy Thumbnail"
              })
            )
          ),
          React.createElement(
            "div",
            { className: "row" },
            React.createElement(
              "div",
              { className: "col" },
              React.createElement("hr", null)
            )
          ),
          React.createElement(
            "div",
            { className: "row" },
            React.createElement(
              "div",
              { className: "col text-center" },
              React.createElement(
                "h2",
                { className: "work-header" },
                " Tools I Use"
              )
            )
          ),
          React.createElement(
            "div",
            { className: "row tech-banner" },
            React.createElement(
              "div",
              { className: "col text-center" },
              React.createElement("img", {
                className: "img-fluid",
                src: "http://conorhinchee.tech/WorkingPictures/ModifiedPixel/TechBanner/nodeJSlogo.jpg",
                alt: "NodeJS Logo",
                "data-toggle": "tooltip",
                "data-placement": "top",
                title: "Node JS"
              }),
              React.createElement("img", {
                className: "img-fluid",
                src: "http://conorhinchee.tech/WorkingPictures/ModifiedPixel/TechBanner/mongodblogo.png",
                alt: "MongoDB Logo",
                "data-toggle": "tooltip",
                "data-placement": "top",
                title: "MongoDB"
              }),
              React.createElement("img", {
                className: "img-fluid",
                src: "http://conorhinchee.tech/WorkingPictures/ModifiedPixel/TechBanner/ReactLogo.svg",
                alt: "React Logo",
                "data-toggle": "tooltip",
                "data-placement": "top",
                title: "React JS"
              }),
              React.createElement("img", {
                className: "img-fluid",
                src: "http://conorhinchee.tech/WorkingPictures/ModifiedPixel/TechBanner/BootstrapLogo.jpg",
                alt: "Bootstrap Logo",
                "data-toggle": "tooltip",
                "data-placement": "top",
                title: "Bootstrap 4"
              }),
              React.createElement("img", {
                className: "img-fluid",
                src: "http://conorhinchee.tech/WorkingPictures/ModifiedPixel/TechBanner/html5logo.jpg",
                alt: "HTML5 Logo",
                "data-toggle": "tooltip",
                "data-placement": "top",
                title: "HTML5"
              }),
              React.createElement("img", {
                className: "img-fluid",
                src: "http://conorhinchee.tech/WorkingPictures/ModifiedPixel/TechBanner/css3logo.jpg",
                alt: "CSS3 Logo",
                "data-toggle": "tooltip",
                "data-placement": "top",
                title: "CSS3"
              }),
              React.createElement("img", {
                className: "img-fluid",
                src: "http://conorhinchee.tech/WorkingPictures/ModifiedPixel/TechBanner/wordpress-logo.jpg",
                alt: "Wordpress Logo",
                "data-toggle": "tooltip",
                "data-placement": "top",
                title: "Wordpress & PHP"
              })
            )
          )
        )
      );
    }
  }]);

  return Home;
}(React.Component);

var Contact = function (_React$Component2) {
  _inherits(Contact, _React$Component2);

  function Contact() {
    _classCallCheck(this, Contact);

    var _this2 = _possibleConstructorReturn(this, (Contact.__proto__ || Object.getPrototypeOf(Contact)).call(this));

    _this2.state = {
      emailEntered: "Enter Email",
      initialEmail: true,
      validEmail: true,
      enteredName: "Enter Name",
      initialName: true,
      nameError: false,
      enteredMessage: "Message",
      initialMessage: true,
      messageError: false,
      confirmSendMount: false
    };
    return _this2;
  }

  _createClass(Contact, [{
    key: "onEnteredEmail",
    value: function onEnteredEmail(event) {
      var regex = /.+@.+/;
      var validity = regex.test(event.target.value);

      this.setState({
        emailEntered: event.target.value,
        initialEmail: false,
        validEmail: validity
      });
    }
  }, {
    key: "onEnteredName",
    value: function onEnteredName(event) {
      this.setState({
        enteredName: event.target.value,
        initialName: false
      });
    }
  }, {
    key: "onEnteredMessage",
    value: function onEnteredMessage(event) {
      this.setState({
        enteredMessage: event.target.value,
        initialMessage: false
      });
    }
  }, {
    key: "onAttemptSend",
    value: function onAttemptSend(e) {
      e.preventDefault();

      if (this.state.initialEmail) {
        this.setState({
          validEmail: false
        });
      } else if (this.state.initialName) {
        this.setState({
          nameError: true
        });
      } else if (this.state.initialMessage) {
        this.setState({
          messageError: true
        });
      } else if (!this.state.initialName && !this.state.initialMessage && this.state.validEmail) {
        this.setState({
          nameError: false,
          messageError: false,
          confirmSendMount: true
        });
      }
    }
  }, {
    key: "onWaitSend",
    value: function onWaitSend() {
      this.setState({
        confirmSendMount: false
      });
    }
  }, {
    key: "onSendEmail",
    value: function onSendEmail() {
      var data = {
        'key': 'Q5CS245pRMIItzOMcj96Cw',
        'message': {
          'from_email': this.state.emailEntered,
          'to': [{
            'email': 'conorphinchee@gmail.com',
            'name': this.state.enteredName,
            'type': 'to'
          }],
          'autotext': 'true',
          'subject': 'Sent From Codepen',
          'html': this.state.enteredMessage
        }
      };

      $.ajax({
        type: 'POST',
        url: 'https://mandrillapp.com/api/1.0/messages.send.json',
        data: data
      }).done(function (data) {
        self.clearForm();
      }).fail(function (jqXhr) {
        console.log("failed");
      });
    }
  }, {
    key: "render",
    value: function render() {
      var _this3 = this;

      return React.createElement(
        "div",
        null,
        React.createElement(
          "nav",
          {
            className: "navbar navbar-light navbar-toggleable-sm sticky-top",
            type: "button",
            "data-toggle": "collapse",
            "data-target": "#navbarBreakPoint",
            "aria-controls": "navbarBreakPoint",
            "aria-expanded": "false",
            "aria-label": "Toggle navigation"
          },
          React.createElement(
            "button",
            {
              className: "navbar-toggler navbar-toggler-right",
              type: "button",
              "data-toggle": "collapse",
              "data-target": "#navbarBreakPoint",
              "aria-controls": "navbarBreakPoint",
              "aria-expanded": "false",
              "aria-label": "Toggle navigation"
            },
            React.createElement("span", { className: "navbar-toggler-icon" })
          ),
          React.createElement(
            "div",
            { className: "navbar-brand" },
            "Conor Hinchee"
          ),
          React.createElement(
            "div",
            {
              className: "collapse navbar-collapse justify-content-end",
              id: "navbarBreakPoint"
            },
            React.createElement(
              "ul",
              { className: "navbar-nav" },
              React.createElement(
                "li",
                { className: "nav-item active" },
                React.createElement(
                  "a",
                  { className: "nav-link" },
                  " ",
                  "Contact",
                  React.createElement(
                    "span",
                    { className: "sr-only" },
                    "(current)"
                  )
                )
              ),
              React.createElement(
                "li",
                { className: "nav-item" },
                React.createElement(
                  "a",
                  { className: "nav-link", onClick: this.props.viewAbout },
                  " ",
                  "About"
                )
              ),
              React.createElement(
                "li",
                { className: "nav-item" },
                React.createElement(
                  "a",
                  { className: "nav-link", onClick: this.props.viewPortfolio },
                  " ",
                  "Portfolio"
                )
              ),
              React.createElement(
                "li",
                { className: "nav-item" },
                React.createElement(
                  "a",
                  { className: "nav-link", onClick: this.props.viewSupport },
                  " ",
                  "Support"
                )
              )
            )
          )
        ),
        React.createElement(
          "div",
          { className: "container-fluid" },
          React.createElement(
            "div",
            { className: "jumbotron" },
            React.createElement(
              "div",
              { className: "row" },
              React.createElement(
                "div",
                { className: "col text-center" },
                React.createElement(
                  "h1",
                  { className: "top-contact-header" },
                  "Contact Me"
                )
              )
            ),
            React.createElement(
              "div",
              { className: "row hidden-sm-down" },
              React.createElement(
                "div",
                { className: "col-6 offset-3 text-center" },
                this.state.confirmSendMount ? React.createElement(Confirm, { wait: this.onWaitSend.bind(this), send: this.onSendEmail.bind(this) }) : null
              ),
              React.createElement(
                "div",
                { className: "col-6 offset-3" },
                React.createElement(
                  "form",
                  { className: "form-horizontal", role: "form" },
                  React.createElement(
                    "div",
                    { className: "form-group" },
                    React.createElement(
                      "label",
                      { "for": "InputEmail" },
                      "Email Address"
                    ),
                    React.createElement("input", {
                      type: "email",
                      className: "form-control",
                      id: "InputEmail",
                      placeholder: this.state.emailEntered,
                      onChange: function onChange() {
                        return _this3.onEnteredEmail(event);
                      }
                    }),
                    this.state.initialEmail ? React.createElement(
                      "small",
                      { id: "emailHelp", className: "form-text text-muted" },
                      "Information is never shared"
                    ) : React.createElement("div", null),
                    this.state.validEmail ? React.createElement("div", null) : React.createElement(
                      "small",
                      {
                        id: "emailHelp",
                        className: "form-text text-muted red-text"
                      },
                      "Please enter a valid email"
                    )
                  ),
                  React.createElement(
                    "div",
                    { className: "form-group" },
                    React.createElement(
                      "label",
                      { "for": "InputName" },
                      "Name"
                    ),
                    React.createElement("input", {
                      type: "name",
                      className: "form-control",
                      id: "InputName",
                      placeholder: this.state.enteredName,
                      onChange: function onChange() {
                        return _this3.onEnteredName(event);
                      }
                    }),
                    this.state.nameError ? React.createElement(
                      "small",
                      {
                        id: "NameHelp",
                        className: "form-text text-muted red-text"
                      },
                      "Please enter name value"
                    ) : React.createElement("div", null)
                  ),
                  React.createElement(
                    "div",
                    { className: "form-group" },
                    React.createElement(
                      "label",
                      { "for": "InputMessage" },
                      "Message Body"
                    ),
                    React.createElement("textarea", {
                      className: "form-control",
                      rows: "4",
                      name: "message",
                      id: "InputMessage",
                      placeholder: this.state.enteredMessage,
                      onChange: function onChange() {
                        return _this3.onEnteredMessage(event);
                      }
                    }),
                    this.state.nameError ? React.createElement(
                      "small",
                      {
                        id: "NameHelp",
                        className: "form-text text-muted red-text"
                      },
                      "Please enter a message"
                    ) : React.createElement("div", null)
                  ),
                  React.createElement(
                    "div",
                    { className: "form-group" },
                    React.createElement(
                      "button",
                      {
                        className: "btn btn-primary",
                        id: "submit",
                        onClick: this.onAttemptSend.bind(this)
                      },
                      "Submit"
                    )
                  )
                )
              )
            ),
            React.createElement(
              "div",
              { className: "row hidden-sm-up" },
              React.createElement(
                "div",
                { className: "col-10 offset-1" },
                React.createElement(
                  "form",
                  { className: "form-horizontal", role: "form" },
                  React.createElement(
                    "div",
                    { className: "form-group" },
                    React.createElement(
                      "label",
                      { "for": "InputEmail" },
                      "Email Address"
                    ),
                    React.createElement("input", {
                      type: "email",
                      className: "form-control",
                      id: "InputEmail",
                      placeholder: "Enter email"
                    })
                  ),
                  React.createElement(
                    "div",
                    { className: "form-group" },
                    React.createElement(
                      "label",
                      { "for": "InputName" },
                      "Name"
                    ),
                    React.createElement("input", {
                      type: "name",
                      className: "form-control",
                      id: "InputName",
                      placeholder: "Enter Name"
                    })
                  ),
                  React.createElement(
                    "div",
                    { className: "form-group" },
                    React.createElement(
                      "label",
                      { "for": "InputMessage" },
                      "Message Body"
                    ),
                    React.createElement("textarea", {
                      className: "form-control",
                      rows: "4",
                      name: "message",
                      id: "InputMessage",
                      placeholder: "Message."
                    })
                  ),
                  React.createElement(
                    "div",
                    { className: "form-group" },
                    React.createElement(
                      "button",
                      {
                        "data-sitekey": "6LeWoSQUAAAAAPzJpu5FaoBWiAUhiRBgauZlxN8S",
                        "data-callback": "YourOnSubmitFn",
                        className: "btn btn-primary g-recaptcha"
                      },
                      "Submit",
                      " "
                    )
                  )
                )
              )
            )
          )
        )
      );
    }
  }]);

  return Contact;
}(React.Component);

var Portfolio = function (_React$Component3) {
  _inherits(Portfolio, _React$Component3);

  function Portfolio() {
    _classCallCheck(this, Portfolio);

    var _this4 = _possibleConstructorReturn(this, (Portfolio.__proto__ || Object.getPrototypeOf(Portfolio)).call(this));

    _this4.state = {
      learnRandomQuote: false,
      learnLocalWeather: false,
      learnWikipediaViewer: false,
      learnTwitchTV: false,
      learnCalculator: false,
      learnPomodoroClock: false,
      learnTicTacToe: false,
      learnSimon: false,
      learnGithub: false,
      learnLeaderboard: false,
      learnRecipeApp: false,
      learnTimeStampAPI: false,
      learnHeaderInfoAPI: false,
      learnURLShortnerAPI: false,
      learnImageSearchAPI: false,
      learnFileMetaDataAPI: false
    };
    return _this4;
  }

  _createClass(Portfolio, [{
    key: "onLearnMoreRandomQuote",
    value: function onLearnMoreRandomQuote() {
      this.setState({
        learnRandomQuote: !this.state.learnRandomQuote
      });
    }
  }, {
    key: "onLearnMoreLocalWeather",
    value: function onLearnMoreLocalWeather() {
      this.setState({
        learnLocalWeather: !this.state.learnLocalWeather
      });
    }
  }, {
    key: "onLearnMoreWikipediaViewer",
    value: function onLearnMoreWikipediaViewer() {
      this.setState({
        learnWikipediaViewer: !this.state.learnWikipediaViewer
      });
    }
  }, {
    key: "onLearnMoreTwitchTV",
    value: function onLearnMoreTwitchTV() {
      this.setState({
        learnTwitchTV: !this.state.learnTwitchTV
      });
    }
  }, {
    key: "onLearnMoreCalculator",
    value: function onLearnMoreCalculator() {
      this.setState({
        learnCalculator: !this.state.learnCalculator
      });
    }
  }, {
    key: "onLearnMorePomodoroClock",
    value: function onLearnMorePomodoroClock() {
      this.setState({
        learnPomodoroClock: !this.state.learnPomodoroClock
      });
    }
  }, {
    key: "onLearnMoreTicTacToe",
    value: function onLearnMoreTicTacToe() {
      this.setState({
        learnTicTacToe: !this.state.learnTicTacToe
      });
    }
  }, {
    key: "onLearnMoreSimon",
    value: function onLearnMoreSimon() {
      this.setState({
        learnSimon: !this.state.learnSimon
      });
    }
  }, {
    key: "onLearnMoreGithub",
    value: function onLearnMoreGithub() {
      this.setState({
        learnGithub: !this.state.learnGithub
      });
    }
  }, {
    key: "onLearnMoreLeaderboard",
    value: function onLearnMoreLeaderboard() {
      this.setState({
        learnLeaderboard: !this.state.learnLeaderboard
      });
    }
  }, {
    key: "onLearnMoreRecipeApp",
    value: function onLearnMoreRecipeApp() {
      this.setState({
        learnRecipeApp: !this.state.learnRecipeApp
      });
    }
  }, {
    key: "onLearnMoreTimeStampAPI",
    value: function onLearnMoreTimeStampAPI() {
      this.setState({
        learnTimeStampAPI: !this.state.learnTimeStampAPI
      });
    }
  }, {
    key: "onLearnMoreHeaderInfoAPI",
    value: function onLearnMoreHeaderInfoAPI() {
      this.setState({
        learnHeaderInfoAPI: !this.state.learnHeaderInfoAPI
      });
    }
  }, {
    key: "onLearnMoreURLShortnerAPI",
    value: function onLearnMoreURLShortnerAPI() {
      this.setState({
        learnURLShortnerAPI: !this.state.learnURLShortnerAPI
      });
    }
  }, {
    key: "onLearnMoreImageSearchAPI",
    value: function onLearnMoreImageSearchAPI() {
      this.setState({
        learnImageSearchAPI: !this.state.learnImageSearchAPI
      });
    }
  }, {
    key: "onLearnMoreFileMetaDataAPI",
    value: function onLearnMoreFileMetaDataAPI() {
      this.setState({
        learnFileMetaDataAPI: !this.state.learnFileMetaDataAPI
      });
    }
  }, {
    key: "render",
    value: function render() {
      return React.createElement(
        "div",
        null,
        React.createElement(
          "nav",
          { className: "navbar navbar-light navbar-toggleable-sm sticky-top" },
          React.createElement(
            "button",
            {
              className: "navbar-toggler navbar-toggler-right",
              type: "button",
              "data-toggle": "collapse",
              "data-target": "#navbarBreakPoint",
              "aria-controls": "navbarBreakPoint",
              "aria-expanded": "false",
              "aria-label": "Toggle navigation"
            },
            React.createElement("span", { className: "navbar-toggler-icon" })
          ),
          React.createElement(
            "div",
            { className: "navbar-brand" },
            "Conor Hinchee"
          ),
          React.createElement(
            "div",
            {
              className: "collapse navbar-collapse justify-content-end",
              id: "navbarBreakPoint"
            },
            React.createElement(
              "ul",
              { className: "navbar-nav" },
              React.createElement(
                "li",
                { className: "nav-item active" },
                React.createElement(
                  "a",
                  { className: "nav-link" },
                  "Portfolio",
                  React.createElement(
                    "span",
                    { className: "sr-only" },
                    "(current)"
                  )
                )
              ),
              React.createElement(
                "li",
                { className: "nav-item" },
                React.createElement(
                  "a",
                  { className: "nav-link", onClick: this.props.viewAbout },
                  "About"
                )
              ),
              React.createElement(
                "li",
                { className: "nav-item" },
                React.createElement(
                  "a",
                  { className: "nav-link", onClick: this.props.viewContact },
                  "Contact"
                )
              ),
              React.createElement(
                "li",
                { className: "nav-item" },
                React.createElement(
                  "a",
                  { className: "nav-link", onClick: this.props.viewSupport },
                  "Support"
                )
              )
            )
          )
        ),
        React.createElement(
          "div",
          { className: "container-fluid" },
          React.createElement(
            "div",
            { className: "row" },
            React.createElement(
              "div",
              { className: "col text-center" },
              React.createElement(
                "h1",
                { className: "portfolio-top-header" },
                "My Portfolio Of Projects"
              ),
              React.createElement("hr", null)
            )
          ),
          React.createElement(
            "div",
            { className: "row" },
            React.createElement(
              "div",
              { className: "col text-center" },
              React.createElement(
                "h3",
                { className: "portfolio-header" },
                "Intermediate Front End Projects"
              )
            )
          ),
          React.createElement(
            "div",
            { className: "row portfolio-row" },
            React.createElement(
              "div",
              { className: "col-6 text-center" },
              React.createElement(
                "a",
                {
                  href: "https://codepen.io/captnstarburst/full/WwPWMP/",
                  target: "_blank"
                },
                React.createElement("img", {
                  src: "http://conorhinchee.tech/WorkingPictures/Portfolio%20Images/intermediate/RandomQuote.PNG",
                  className: "img img-fluid portfolio-img",
                  alt: "Random Quote Generator"
                })
              )
            ),
            React.createElement(
              "div",
              { className: "col-6 text-center" },
              React.createElement(
                "h4",
                { className: "portfolio-title" },
                "Random Quote"
              ),
              this.state.learnRandomQuote ? React.createElement(
                "ol",
                null,
                React.createElement(
                  "li",
                  null,
                  "Click a button to show a new random quote."
                ),
                React.createElement(
                  "li",
                  null,
                  " Press a button to tweet out or share the quote."
                )
              ) : React.createElement(
                "button",
                {
                  className: "btn btn-primary btn-block",
                  onClick: this.onLearnMoreRandomQuote.bind(this)
                },
                "Learn More"
              )
            )
          ),
          React.createElement(
            "div",
            { className: "row portfolio-row" },
            React.createElement(
              "div",
              { className: "col-6 text-center" },
              React.createElement(
                "h4",
                { className: "portfolio-title" },
                "Local Weather"
              ),
              this.state.learnLocalWeather ? React.createElement(
                "ol",
                null,
                React.createElement(
                  "li",
                  null,
                  "See the weather in my current location."
                ),
                React.createElement(
                  "li",
                  null,
                  "See a different icon depending on the weather."
                ),
                React.createElement(
                  "li",
                  null,
                  "Push a button to toggle between Fahrenheit and Celsius."
                )
              ) : React.createElement(
                "button",
                {
                  className: "btn btn-primary btn-block",
                  onClick: this.onLearnMoreLocalWeather.bind(this)
                },
                "Learn More"
              )
            ),
            React.createElement(
              "div",
              { className: "col-6 text-center" },
              React.createElement(
                "a",
                {
                  href: "https://codepen.io/captnstarburst/full/VaNBwE/",
                  target: "_blank"
                },
                React.createElement("img", {
                  src: "http://conorhinchee.tech/WorkingPictures/Portfolio%20Images/intermediate/LocalWeather.PNG",
                  className: "img img-fluid portfolio-img",
                  alt: "Local Weather"
                })
              )
            )
          ),
          React.createElement(
            "div",
            { className: "row portfolio-row" },
            React.createElement(
              "div",
              { className: "col-6 text-center" },
              React.createElement(
                "a",
                {
                  href: "https://codepen.io/captnstarburst/full/NrqoBx/",
                  target: "_blank"
                },
                React.createElement("img", {
                  src: "http://conorhinchee.tech/WorkingPictures/Portfolio%20Images/intermediate/WikipediaView.PNG",
                  className: "img img-fluid portfolio-img",
                  alt: "Wikipedia Viewer"
                })
              )
            ),
            React.createElement(
              "div",
              { className: "col-6 text-center" },
              React.createElement(
                "h4",
                { className: "portfolio-title" },
                "Wikipedia Viewer"
              ),
              this.state.learnWikipediaViewer ? React.createElement(
                "ol",
                null,
                React.createElement(
                  "li",
                  null,
                  "Search Wikipedia entries in a search box and see the resulting Wikipedia entries."
                ),
                React.createElement(
                  "li",
                  null,
                  "Click a button to see a random Wikipedia entry."
                )
              ) : React.createElement(
                "button",
                {
                  className: "btn btn-primary btn-block",
                  onClick: this.onLearnMoreWikipediaViewer.bind(this)
                },
                "LearnMore"
              )
            )
          ),
          React.createElement(
            "div",
            { className: "row portfolio-row" },
            React.createElement(
              "div",
              { className: "col-6 text-center" },
              React.createElement(
                "h4",
                { className: "portfolio-title" },
                "Twitch TV"
              ),
              this.state.learnTwitchTV ? React.createElement(
                "ol",
                null,
                React.createElement(
                  "li",
                  null,
                  "See whether Free Code Camp is currently streaming on Twitch.tv."
                ),
                React.createElement(
                  "li",
                  null,
                  "Click the status output and be sent directly to the Free Code Camp's Twitch.tv channel"
                ),
                React.createElement(
                  "li",
                  null,
                  "If a Twitch user is currently streaming, I can see additional details about what they are streaming."
                )
              ) : React.createElement(
                "button",
                {
                  className: "btn btn-primary btn-block",
                  onClick: this.onLearnMoreTwitchTV.bind(this)
                },
                "Learn More"
              )
            ),
            React.createElement(
              "div",
              { className: "col-6 text-center" },
              React.createElement(
                "a",
                {
                  href: "https://codepen.io/captnstarburst/full/ezZqKQ/",
                  target: "_blank"
                },
                React.createElement("img", {
                  className: "img img-fluid portfolio-img",
                  src: "http://conorhinchee.tech/WorkingPictures/Portfolio%20Images/intermediate/TwitchTV.PNG",
                  alt: "Twitch TV"
                })
              )
            )
          ),
          React.createElement(
            "div",
            { className: "row" },
            React.createElement(
              "div",
              { className: "col" },
              React.createElement("hr", null)
            )
          ),
          React.createElement(
            "div",
            { className: "row" },
            React.createElement(
              "div",
              { className: "col text-center" },
              React.createElement(
                "h3",
                { className: "portfolio-header" },
                "Advanced Front End Projects"
              )
            )
          ),
          React.createElement(
            "div",
            { className: "row portfolio-row" },
            React.createElement(
              "div",
              { className: "col-6 text-center" },
              React.createElement(
                "a",
                {
                  href: "https://codepen.io/captnstarburst/full/RRJOyQ/",
                  target: "_blank"
                },
                React.createElement("img", {
                  src: "http://conorhinchee.tech/WorkingPictures/Portfolio%20Images/Advanced/Calculator.PNG",
                  className: "img img-fluid portfolio-img",
                  alt: "Calculator"
                })
              )
            ),
            React.createElement(
              "div",
              { className: "col-6 text-center" },
              React.createElement(
                "h4",
                { className: "portfolio-title" },
                "Calculator"
              ),
              this.state.learnCalculator ? React.createElement(
                "ol",
                null,
                React.createElement(
                  "li",
                  null,
                  "Add, subtract, multiply and divide two numbers."
                ),
                React.createElement(
                  "li",
                  null,
                  "Clear the input field with a clear button."
                ),
                React.createElement(
                  "li",
                  null,
                  "Keep chaining mathematical operations together until I hit the equal button, and the calculator will tell me the correct output."
                )
              ) : React.createElement(
                "button",
                {
                  className: "btn btn-primary btn-block",
                  onClick: this.onLearnMoreCalculator.bind(this)
                },
                "Learn More"
              )
            )
          ),
          React.createElement(
            "div",
            { className: "row portfolio-row" },
            React.createElement(
              "div",
              { className: "col-6 text-center" },
              React.createElement(
                "h4",
                { className: "portfolio-title" },
                "Pomodoro Clock"
              ),
              this.state.learnPomodoroClock ? React.createElement(
                "ol",
                null,
                React.createElement(
                  "li",
                  null,
                  "Start a 25 minute pomodoro, and the timer will go off once 25 minutes has elapsed."
                ),
                React.createElement(
                  "li",
                  null,
                  " Reset the clock for my next pomodoro."
                ),
                React.createElement(
                  "li",
                  null,
                  "Customize the length of each pomodoro."
                )
              ) : React.createElement(
                "button",
                {
                  className: "btn btn-primary btn-block",
                  onClick: this.onLearnMorePomodoroClock.bind(this)
                },
                "Learn More"
              )
            ),
            React.createElement(
              "div",
              { className: "col-6 text-center" },
              React.createElement(
                "a",
                {
                  href: "https://codepen.io/captnstarburst/full/xOZmyX/",
                  target: "_blank"
                },
                React.createElement("img", {
                  className: "img img-fluid portfolio-img",
                  src: "http://conorhinchee.tech/WorkingPictures/Portfolio%20Images/Advanced/PomodoroClock.PNG",
                  alt: "Pomodoro Clock"
                })
              )
            )
          ),
          React.createElement(
            "div",
            { className: "row portfolio-row" },
            React.createElement(
              "div",
              { className: "col-6 text-center" },
              React.createElement(
                "a",
                {
                  href: "https://codepen.io/captnstarburst/full/GjNmYY/",
                  target: "_blank"
                },
                React.createElement("img", {
                  src: "http://conorhinchee.tech/WorkingPictures/Portfolio%20Images/Advanced/TicTacToe.PNG",
                  className: "img img-fluid portfolio-img",
                  alt: "Tic-Tac-Toe"
                })
              )
            ),
            React.createElement(
              "div",
              { className: "col-6 text-center" },
              React.createElement(
                "h4",
                { className: "portfolio-title" },
                "Tic-Tac-Toe"
              ),
              this.state.learnTicTacToe ? React.createElement(
                "ol",
                null,
                React.createElement(
                  "li",
                  null,
                  "Play a game of Tic Tac Toe with the computer."
                ),
                React.createElement(
                  "li",
                  null,
                  "Game will reset as soon as it's over so I can play again."
                ),
                React.createElement(
                  "li",
                  null,
                  "Choose whether I want to play as X or O."
                )
              ) : React.createElement(
                "button",
                {
                  className: "btn btn-primary btn-block",
                  onClick: this.onLearnMoreTicTacToe.bind(this)
                },
                "Learn More"
              )
            )
          ),
          React.createElement(
            "div",
            { className: "row portfolio-row" },
            React.createElement(
              "div",
              { className: "col-6 text-center" },
              React.createElement(
                "h4",
                { className: "portfolio-title" },
                "Simon"
              ),
              this.state.learnSimon ? React.createElement(
                "ol",
                null,
                React.createElement(
                  "li",
                  null,
                  "Play the game of Simon up to level 20"
                ),
                React.createElement(
                  "li",
                  null,
                  "Hear a sound that corresponds to each button both when the series of button presses plays, and when I personally press a button."
                ),
                React.createElement(
                  "li",
                  null,
                  "Play in strict mode where if I get a button press wrong, it notifies me that I have done so, and the game restarts at a new random series of button presses."
                )
              ) : React.createElement(
                "button",
                {
                  className: "btn btn-primary btn-block",
                  onClick: this.onLearnMoreSimon.bind(this)
                },
                "Learn More"
              )
            ),
            React.createElement(
              "div",
              { className: "col-6 text-center" },
              React.createElement(
                "a",
                {
                  href: "https://codepen.io/captnstarburst/full/jVEaby/",
                  target: "_blank"
                },
                React.createElement("img", {
                  className: "img img-fluid portfolio-img",
                  src: "http://conorhinchee.tech/WorkingPictures/Portfolio%20Images/Advanced/Simon.PNG",
                  alt: "Simon Game"
                })
              )
            )
          ),
          React.createElement(
            "div",
            { className: "row" },
            React.createElement(
              "div",
              { className: "col" },
              React.createElement("hr", null)
            )
          ),
          React.createElement(
            "div",
            { className: "row" },
            React.createElement(
              "div",
              { className: "col text-center" },
              React.createElement(
                "h3",
                { className: "portfolio-header" },
                "ReactJS Projects"
              )
            )
          ),
          React.createElement(
            "div",
            { className: "row portfolio-row" },
            React.createElement(
              "div",
              { className: "col-6 text-center" },
              React.createElement(
                "a",
                {
                  href: "https://codepen.io/captnstarburst/full/dOEQjL/",
                  target: "_blank"
                },
                React.createElement("img", {
                  src: "http://conorhinchee.tech/WorkingPictures/Portfolio%20Images/ReactJS/GitHubMarkdown.PNG",
                  className: "img img-fluid portfolio-img",
                  alt: "GitHub Markdown"
                })
              )
            ),
            React.createElement(
              "div",
              { className: "col-6 text-center" },
              React.createElement(
                "h4",
                { className: "portfolio-title" },
                "GitHub Markdown"
              ),
              this.state.learnGithub ? React.createElement(
                "ol",
                null,
                React.createElement(
                  "li",
                  null,
                  "Type GitHub-flavored Markdown into a text area."
                ),
                React.createElement(
                  "li",
                  null,
                  "See a preview of the output of my markdown that is updated as I type."
                )
              ) : React.createElement(
                "button",
                {
                  className: "btn btn-primary btn-block",
                  onClick: this.onLearnMoreGithub.bind(this)
                },
                "Learn More"
              )
            )
          ),
          React.createElement(
            "div",
            { className: "row portfolio-row" },
            React.createElement(
              "div",
              { className: "col-6 text-center" },
              React.createElement(
                "h4",
                { className: "portfolio-title" },
                "FreeCodeCamp Leaderboard"
              ),
              this.state.learnLeaderboard ? React.createElement(
                "ol",
                null,
                React.createElement(
                  "li",
                  null,
                  "See a table of the Free Code Camp campers who've earned the most brownie points in the past 30 days"
                ),
                React.createElement(
                  "li",
                  null,
                  "See how many brownie points they've earned in the past 30 days, and how many they've earned total."
                ),
                React.createElement(
                  "li",
                  null,
                  "Toggle between sorting the list by how many brownie points they've earned in the past 30 days and by how many brownie points they've earned total."
                )
              ) : React.createElement(
                "button",
                {
                  className: "btn btn-primary btn-block",
                  onClick: this.onLearnMoreLeaderboard.bind(this)
                },
                "Learn More"
              )
            ),
            React.createElement(
              "div",
              { className: "col-6 text-center" },
              React.createElement(
                "a",
                {
                  href: "https://codepen.io/captnstarburst/full/jyaMrY/",
                  target: "_blank"
                },
                React.createElement("img", {
                  className: "img img-fluid portfolio-img",
                  src: "http://conorhinchee.tech/WorkingPictures/Portfolio%20Images/ReactJS/FreeCodeCampLeaderBoard.PNG",
                  alt: "FreeCodeCamp Leaderboard"
                })
              )
            )
          ),
          React.createElement(
            "div",
            { className: "row portfolio-row" },
            React.createElement(
              "div",
              { className: "col-6 text-center" },
              React.createElement(
                "a",
                {
                  href: "https://codepen.io/captnstarburst/full/NdYjBY/",
                  target: "_blank"
                },
                React.createElement("img", {
                  className: "img img-fluid portfolio-img",
                  src: "http://conorhinchee.tech/WorkingPictures/Portfolio%20Images/ReactJS/RecipeApp.PNG",
                  alt: "Recipe App"
                })
              )
            ),
            React.createElement(
              "div",
              { className: "col-6 text-center" },
              React.createElement(
                "h4",
                { className: "portfolio-title" },
                "Recipe App"
              ),
              this.state.learnRecipeApp ? React.createElement(
                "ol",
                null,
                React.createElement(
                  "li",
                  null,
                  "Create recipes that have names and ingredients."
                ),
                React.createElement(
                  "li",
                  null,
                  "Click into any of those recipes to view it."
                ),
                React.createElement(
                  "li",
                  null,
                  "Edit and delete recipes."
                ),
                React.createElement(
                  "li",
                  null,
                  "All new recipes I add are saved in my browser's local storage. If I refresh the page, these recipes will still be there."
                )
              ) : React.createElement(
                "button",
                {
                  className: "btn btn-primary btn-block",
                  onClick: this.onLearnMoreRecipeApp.bind(this)
                },
                "Learn More"
              )
            )
          ),
          React.createElement(
            "div",
            { className: "row" },
            React.createElement(
              "div",
              { className: "col" },
              React.createElement("hr", null)
            )
          ),
          React.createElement(
            "div",
            { className: "row" },
            React.createElement(
              "div",
              { className: "col text-center" },
              React.createElement(
                "h3",
                { className: "portfolio-header" },
                "API Projects"
              )
            )
          ),
          React.createElement(
            "div",
            { className: "row portfolio-row" },
            React.createElement(
              "div",
              { className: "col-6 text-center" },
              React.createElement(
                "a",
                {
                  href: "https://fierce-ocean-25947.herokuapp.com/",
                  target: "_blank"
                },
                React.createElement("img", {
                  className: "img img-fluid portfolio-img",
                  src: "http://conorhinchee.tech/WorkingPictures/Portfolio%20Images/API/TimeStamp.PNG",
                  alt: "Time Stamp API"
                })
              )
            ),
            React.createElement(
              "div",
              { className: "col-6 text-center" },
              React.createElement(
                "h4",
                { className: "portfolio-title" },
                "Time Stamp API"
              ),
              this.state.learnTimeStampAPI ? React.createElement(
                "ol",
                null,
                React.createElement(
                  "li",
                  null,
                  "Pass a string as a parameter, and it will check to see whether that string contains either a unix timestamp or a natural language date (example: January 1, 2016)."
                ),
                React.createElement(
                  "li",
                  null,
                  "Returns both the Unix timestamp and the natural language form of that date."
                )
              ) : React.createElement(
                "button",
                {
                  className: "btn btn-primary btn-block",
                  onClick: this.onLearnMoreTimeStampAPI.bind(this)
                },
                "Learn More"
              )
            )
          ),
          React.createElement(
            "div",
            { className: "row portfolio-row" },
            React.createElement(
              "div",
              { className: "col-6 text-center" },
              React.createElement(
                "h4",
                { className: "portfolio-title" },
                "Header Info API"
              ),
              this.state.learnHeaderInfoAPI ? React.createElement(
                "ol",
                null,
                React.createElement(
                  "li",
                  null,
                  "Get the IP address, language and operating system for my browser."
                )
              ) : React.createElement(
                "button",
                {
                  className: "btn btn-primary btn-block",
                  onClick: this.onLearnMoreHeaderInfoAPI.bind(this)
                },
                "Learn More"
              )
            ),
            React.createElement(
              "div",
              { className: "col-6 text-center" },
              React.createElement(
                "a",
                {
                  href: "https://whispering-anchorage-97783.herokuapp.com/",
                  target: "_blank"
                },
                React.createElement("img", {
                  className: "img img-fluid portfolio-img",
                  src: "http://conorhinchee.tech/WorkingPictures/Portfolio%20Images/API/HeaderInfo.PNG",
                  alt: "Header Info API"
                })
              )
            )
          ),
          React.createElement(
            "div",
            { className: "row portfolio-row" },
            React.createElement(
              "div",
              { className: "col-6 text-center" },
              React.createElement(
                "a",
                {
                  href: "https://tranquil-hollows-27076.herokuapp.com/",
                  target: "_blank"
                },
                React.createElement("img", {
                  className: "img img-fluid portfolio-img",
                  src: "http://conorhinchee.tech/WorkingPictures/Portfolio%20Images/API/URLShortner.PNG",
                  "class": "img img-fluid portfolio-img",
                  alt: "URL Shortner API"
                })
              )
            ),
            React.createElement(
              "div",
              { className: "col-6 text-center" },
              React.createElement(
                "h4",
                { className: "portfolio-title" },
                "URL Shortner API"
              ),
              this.state.learnURLShortnerAPI ? React.createElement(
                "ol",
                null,
                React.createElement(
                  "li",
                  null,
                  "Pass a URL as a parameter and I will receive a shortened URL in the JSON response."
                ),
                React.createElement(
                  "li",
                  null,
                  "Pass an invalid URL that doesn't follow the valid http://www.example.com format, the JSON response will contain an error instead."
                ),
                React.createElement(
                  "li",
                  null,
                  "When I visit that shortened URL, it will redirect me to my original link."
                )
              ) : React.createElement(
                "button",
                {
                  className: "btn btn-primary btn-block",
                  onClick: this.onLearnMoreURLShortnerAPI.bind(this)
                },
                "Learn More"
              )
            )
          ),
          React.createElement(
            "div",
            { className: "row portfolio-row" },
            React.createElement(
              "div",
              { className: "col-6 text-center" },
              React.createElement(
                "h4",
                { className: "portfolio-title" },
                "Flickr Image Search API"
              ),
              this.state.learnImageSearchAPI ? React.createElement(
                "ol",
                null,
                React.createElement(
                  "li",
                  null,
                  "Get the image URLs, alt text and page urls for a set of images relating to a given search string."
                ),
                React.createElement(
                  "li",
                  null,
                  "Paginate through the responses by adding a '?offset=2' parameter to the URL"
                ),
                React.createElement(
                  "li",
                  null,
                  "Get a list of the most recently submitted search strings."
                )
              ) : React.createElement(
                "button",
                {
                  className: "btn btn-primary btn-block",
                  onClick: this.onLearnMoreImageSearchAPI.bind(this)
                },
                "Learn More"
              )
            ),
            React.createElement(
              "div",
              { className: "col-6 text-center" },
              React.createElement(
                "a",
                {
                  href: "https://young-dawn-20354.herokuapp.com/",
                  target: "_blank"
                },
                React.createElement("img", {
                  className: "img img-fluid portfolio-img",
                  src: "http://conorhinchee.tech/WorkingPictures/Portfolio%20Images/API/ImageSearch.PNG",
                  alt: "Image Search API"
                })
              )
            )
          ),
          React.createElement(
            "div",
            { className: "row portfolio-row" },
            React.createElement(
              "div",
              { className: "col-6 text-center" },
              React.createElement(
                "a",
                {
                  href: "https://rocky-river-94267.herokuapp.com/",
                  target: "_blank"
                },
                React.createElement("img", {
                  className: "img img-fluid portfolio-img",
                  src: "http://conorhinchee.tech/WorkingPictures/Portfolio%20Images/API/FileMetaData.PNG",
                  alt: "File MetaData API"
                })
              )
            ),
            React.createElement(
              "div",
              { className: "col-6 text-center" },
              React.createElement(
                "h4",
                { className: "portfolio-title" },
                "File MetaData API"
              ),
              this.state.learnFileMetaDataAPI ? React.createElement(
                "ol",
                null,
                React.createElement(
                  "li",
                  null,
                  "Submit a FormData object that includes a file upload."
                ),
                React.createElement(
                  "li",
                  null,
                  "Receive the file size in bytes within the JSON response"
                )
              ) : React.createElement(
                "button",
                {
                  className: "btn btn-primary btn-block",
                  onClick: this.onLearnMoreFileMetaDataAPI.bind(this)
                },
                "Learn More"
              )
            )
          ),
          React.createElement(
            "div",
            { className: "row" },
            React.createElement(
              "div",
              { className: "col" },
              React.createElement("hr", null)
            )
          )
        )
      );
    }
  }]);

  return Portfolio;
}(React.Component);

var Support = function (_React$Component4) {
  _inherits(Support, _React$Component4);

  function Support() {
    _classCallCheck(this, Support);

    return _possibleConstructorReturn(this, (Support.__proto__ || Object.getPrototypeOf(Support)).apply(this, arguments));
  }

  _createClass(Support, [{
    key: "render",
    value: function render() {
      return React.createElement(
        "div",
        null,
        React.createElement(
          "nav",
          { className: "navbar navbar-light navbar-toggleable-sm sticky-top" },
          React.createElement(
            "button",
            {
              className: "navbar-toggler navbar-toggler-right",
              type: "button",
              "data-toggle": "collapse",
              "data-target": "#navbarBreakPoint",
              "aria-controls": "navbarBreakPoint",
              "aria-expanded": "false",
              "aria-label": "Toggle navigation"
            },
            React.createElement("span", { className: "navbar-toggler-icon" })
          ),
          React.createElement(
            "div",
            { className: "navbar-brand" },
            "Conor Hinchee"
          ),
          React.createElement(
            "div",
            {
              className: "collapse navbar-collapse justify-content-end",
              id: "navbarBreakPoint"
            },
            React.createElement(
              "ul",
              { className: "navbar-nav" },
              React.createElement(
                "li",
                { className: "nav-item active" },
                React.createElement(
                  "a",
                  { className: "nav-link" },
                  "Support",
                  React.createElement(
                    "span",
                    { className: "sr-only" },
                    "(current)"
                  )
                )
              ),
              React.createElement(
                "li",
                { className: "nav-item" },
                React.createElement(
                  "a",
                  { className: "nav-link", onClick: this.props.viewAbout },
                  "About"
                )
              ),
              React.createElement(
                "li",
                { className: "nav-item" },
                React.createElement(
                  "a",
                  { className: "nav-link", onClick: this.props.viewPortfolio },
                  "Portfolio"
                )
              ),
              React.createElement(
                "li",
                { className: "nav-item" },
                React.createElement(
                  "a",
                  { className: "nav-link", onClick: this.props.viewContact },
                  "Contact"
                )
              )
            )
          )
        ),
        React.createElement(
          "div",
          { className: "container-fluid" },
          React.createElement(
            "div",
            { className: "row" },
            React.createElement(
              "div",
              { className: "col-3 text-center sidebar" },
              React.createElement("img", {
                className: "img img-fluid img-thumbnail support-img",
                src: "https://www.ossygobbins.com/wp-content/uploads/2016/11/Computer-Repair-Thumbnail.jpg",
                alt: "Support Image"
              }),
              React.createElement("img", {
                className: "img img-fluid img-thumbnail support-img",
                src: "https://i.ytimg.com/vi/VlnjT2iSCpk/mqdefault.jpg",
                alt: "Support Image"
              }),
              React.createElement("img", {
                className: "img img-fluid img-thumbnail support-img",
                src: "https://upload.wikimedia.org/wikipedia/commons/d/d6/Laptop_DC_Jack_Repair.jpg",
                alt: "Support Image"
              })
            ),
            React.createElement(
              "div",
              { className: "col-6 text-center" },
              React.createElement(
                "h1",
                { className: "support-top-header" },
                "Remote Support"
              ),
              React.createElement("hr", null),
              React.createElement(
                "p",
                { className: "text-body" },
                "I provide remote support and remote virus removal. If interested in this service please contact me either through my contact page here or you can call me on my phone",
                " "
              ),
              React.createElement("hr", null),
              React.createElement(
                "p",
                { className: "text-body" },
                " ",
                "If we have discussed the service click the teamviewer download button below and follow the directions provided to allow me to connect to your computer"
              ),
              React.createElement(
                "div",
                {
                  className: "hidden-sm-down",
                  style: { position: "relative", width: "234px", height: "60px" }
                },
                React.createElement(
                  "a",
                  {
                    href: "http://www.teamviewer.com/link/?url=505374&id=1112055270",
                    style: { textDecoration: "none" }
                  },
                  React.createElement("img", {
                    src: "http://www.teamviewer.com/link/?url=945136&id=1112055270",
                    className: "img img-fluid",
                    alt: "TeamViewer Download for Support",
                    title: "TeamViewer for remote support",
                    border: "0"
                  }),
                  React.createElement(
                    "span",
                    {
                      style: {
                        position: "absolute",
                        top: "15px",
                        left: "55px",
                        display: "block",
                        cursor: "pointer",
                        color: "white",
                        fontfamily: "Arial",
                        fontsize: "13px",
                        width: "174px"
                      }
                    },
                    "TeamViewer for your ",
                    React.createElement("br", null),
                    " Remot Support!",
                    " "
                  )
                )
              ),
              React.createElement(
                "div",
                { className: "hidden-sm-up" },
                React.createElement(
                  "p",
                  null,
                  "My TeamViewer remote support is only available on Computers, if you require support for your mobile please contact me further."
                )
              )
            ),
            React.createElement(
              "div",
              { className: "col-3 text-center sidebar" },
              React.createElement("img", {
                className: "img img-fluid img-thumbnail support-img",
                src: "https://cdn.slidesharecdn.com/ss_thumbnails/e5cfplzqrle7rguurlki-signature-9520a71731d74bcafb8b5925c358d4af12dfe1b26946c6b5cfeb9aeec93f8bbf-poli-150619052344-lva1-app6892-thumbnail-3.jpg",
                alt: "Support Image"
              }),
              React.createElement("img", {
                className: "img img-fluid img-thumbnail support-img",
                src: "http://techteamsbiz.com/image/cache/catalog/icon9-228x228-500x500.png",
                alt: "Support Image"
              })
            )
          )
        )
      );
    }
  }]);

  return Support;
}(React.Component);

var Recaptcha = function (_React$Component5) {
  _inherits(Recaptcha, _React$Component5);

  function Recaptcha(props) {
    _classCallCheck(this, Recaptcha);

    var _this6 = _possibleConstructorReturn(this, (Recaptcha.__proto__ || Object.getPrototypeOf(Recaptcha)).call(this, props));

    _this6.state = {
      captcha: {}
    };
    return _this6;
  }

  _createClass(Recaptcha, [{
    key: "loadCaptcha",
    value: function loadCaptcha() {
      var captcha = grecaptcha.render(this.props.elementID, {
        sitekey: this.props.sitekey,
        callback: this.props.verifyCallback,
        "expired-callback": this.props.expiredCallback,
        theme: this.props.theme,
        render: this.props.render,
        type: this.props.type,
        size: this.props.size
      });
      this.setState({ captcha: captcha });
    }
  }, {
    key: "componentDidMount",
    value: function componentDidMount() {
      if (typeof grecaptcha !== "undefined") {
        this.loadCaptcha();
      } else {
        window[this.props.onloadCallbackName] = function () {
          this.loadCaptcha();
          if (this.props.onloadCallback) {
            this.props.onloadCallback();
          }
        }.bind(this);
      }
    }
  }, {
    key: "componentWillUnmount",
    value: function componentWillUnmount() {
      this.resetCaptcha();
    }
  }, {
    key: "componentWillReceiveProps",
    value: function componentWillReceiveProps(nextProps) {
      if (this.props.reset !== nextProps.reset && nextProps.reset) {
        this.resetCaptcha();
      }
    }
  }, {
    key: "resetCaptcha",
    value: function resetCaptcha() {
      if (typeof grecaptcha !== "undefined") {
        grecaptcha.reset(this.state.captcha);
      }
    }
  }, {
    key: "render",
    value: function render() {
      return React.createElement("div", { id: this.props.elementID });
    }
  }]);

  return Recaptcha;
}(React.Component);

var Confirm = function (_React$Component6) {
  _inherits(Confirm, _React$Component6);

  function Confirm() {
    _classCallCheck(this, Confirm);

    return _possibleConstructorReturn(this, (Confirm.__proto__ || Object.getPrototypeOf(Confirm)).apply(this, arguments));
  }

  _createClass(Confirm, [{
    key: "render",
    value: function render() {
      return React.createElement(
        "div",
        { className: "modal-content text-center" },
        React.createElement(
          "div",
          { className: "modal-header" },
          React.createElement(
            "span",
            { className: "close", onClick: this.props.wait },
            "\xD7"
          ),
          React.createElement(
            "h2",
            null,
            "Ready to Send?"
          )
        ),
        React.createElement(
          "div",
          { className: "modal-body" },
          React.createElement(
            "p",
            null,
            "Click Send and I will contact you back soon"
          )
        ),
        React.createElement(
          "div",
          { className: "modal-footer" },
          React.createElement(
            "button",
            { className: "btn btn-danger", onClick: this.props.wait },
            "Wait",
            " "
          ),
          React.createElement(
            "button",
            { className: "btn btn-primary", onClick: this.props.send },
            "Send it"
          )
        )
      );
    }
  }]);

  return Confirm;
}(React.Component);

var App = function (_React$Component7) {
  _inherits(App, _React$Component7);

  function App() {
    _classCallCheck(this, App);

    var _this8 = _possibleConstructorReturn(this, (App.__proto__ || Object.getPrototypeOf(App)).call(this));

    _this8.state = {
      aboutMount: true,
      contactMount: false,
      portfolioMount: false,
      supportMount: false
    };
    return _this8;
  }

  _createClass(App, [{
    key: "scrollTop",
    value: function scrollTop() {
      var doc = document.documentElement;
      var top = (window.pageYOffset || doc.scrollTop) - (doc.clientTop || 0);

      if (top > 0) {
        window.scrollTo(0, top - 15);
        setTimeout(this.scrollUp, 10);
      }
    }
  }, {
    key: "onViewContact",
    value: function onViewContact() {
      this.scrollTop();

      this.setState({
        aboutMount: false,
        portfolioMount: false,
        supportMount: false,
        contactMount: true
      });
    }
  }, {
    key: "onViewPortfolio",
    value: function onViewPortfolio() {

      this.scrollTop();

      this.setState({
        aboutMount: false,
        supportMount: false,
        contactMount: false,
        portfolioMount: true
      });
    }
  }, {
    key: "onViewSupport",
    value: function onViewSupport() {

      this.scrollTop();

      this.setState({
        aboutMount: false,
        portfolioMount: false,
        contactMount: false,
        supportMount: true
      });
    }
  }, {
    key: "onViewAbout",
    value: function onViewAbout() {

      this.scrollTop();

      this.setState({
        portfolioMount: false,
        contactMount: false,
        supportMount: false,
        aboutMount: true
      });
    }
  }, {
    key: "render",
    value: function render() {
      var index = "";

      if (this.state.aboutMount) {
        index = React.createElement(
          "div",
          null,
          React.createElement(Home, {
            viewContact: this.onViewContact.bind(this),
            viewPortfolio: this.onViewPortfolio.bind(this),
            viewSupport: this.onViewSupport.bind(this)
          })
        );
      } else if (this.state.contactMount) {
        index = React.createElement(
          "div",
          null,
          React.createElement(Contact, {
            viewAbout: this.onViewAbout.bind(this),
            viewPortfolio: this.onViewPortfolio.bind(this),
            viewSupport: this.onViewSupport.bind(this)
          })
        );
      } else if (this.state.portfolioMount) {
        index = React.createElement(
          "div",
          null,
          React.createElement(Portfolio, {
            viewAbout: this.onViewAbout.bind(this),
            viewContact: this.onViewContact.bind(this),
            viewSupport: this.onViewSupport.bind(this)
          })
        );
      } else if (this.state.supportMount) {
        index = React.createElement(
          "div",
          null,
          React.createElement(Support, {
            viewAbout: this.onViewAbout.bind(this),
            viewPortfolio: this.onViewPortfolio.bind(this),
            viewContact: this.onViewContact.bind(this)
          })
        );
      }

      return React.createElement(
        "div",
        null,
        index
      );
    }
  }]);

  return App;
}(React.Component);

ReactDOM.render(React.createElement(App, null), document.querySelector("#root"));

Comments