Personal Portfolio Page

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

This is the project required to pass the challenge under https://www.freecodecamp.org/challenges/build-a-personal-portfolio-webpage for FreeCodeCamp.

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

Technologies

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

<head>
  <meta charset="UTF-8">
  <title>Personal Portfolio Page</title>
  <meta name="viewport" content="width=device-width, initial-scale=1">
  
  <link rel='stylesheet prefetch' href='http://netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css'>
<link rel='stylesheet prefetch' href='https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css'>

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

  
</head>

<body>

  <div id="app"></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/react/15.6.1/react.min.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/react/15.6.1/react-dom.min.js'></script>

  

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




</body>

</html>

/*Downloaded from https://www.codeseek.co/Gh05d/personal-portfolio-page-WEmwPr */
body {
  padding-top: 50px;
}

.btn-instagram {
  background-color: #8a3ab9;
  color: #FFF;
}

.btn-linkedin {
  background-color: #007bb5;
  color: #FFF;
}

.btn-github {
  background-color: #000;
  color: #FFF;
}

.self-desc {
  font-size: 16px;
  color: #000;
  padding-top: 20px;
}

span .footer-link {
   display: block;
   float: left;
   margin: 3px 0 0 2px;
}

#Portfolio, #Contact, .white {
  color: white;
}

#pic-desc {
  background-image: url(https://res.cloudinary.com/domxil2ks/image/upload/s--cOs6m3xP--/v1504451104/beautiful_nature_image_autumn_forest-wallpaper-2880x1620_hi6dwu.jpg);
  background-size: cover;
  background-attachment: fixed;
  background-position: center;
  background-repeat: no-repeat;
}

.portfolio-item {
  margin-bottom: 20px;
}

footer {
  color: white;
  margin-top: 20px;
}

#about {
  margin-top: 20px;
}

/*Downloaded from https://www.codeseek.co/Gh05d/personal-portfolio-page-WEmwPr */
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; }

$(".navigation ul li").click(function () {
  $("li").removeclass("active");
  $(this).addclass("active");
});

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

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

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

  _createClass(PortfolioPage, [{
    key: "render",
    value: function render() {
      var navBarLinks = ["About", "Portfolio", "Contact"];
      var renderNavBarLinks = navBarLinks.map(function (link, key) {
        return React.createElement(
          "li",
          { id: "li" + (key + 1) },
          React.createElement(
            "a",
            { href: "#" + link },
            link
          )
        );
      });

      var portfolioItems = [{ link: "https://codepen.io/Gh05d/project/full/AVYKkN/",
        image: "http://res.cloudinary.com/domxil2ks/image/upload/s--YPiFZ3US--/v1504448772/tribute-page_ycb28z.png", alt: "A tribute page to Richard Feynman",
        title: "Tribute Page", description: "A Tribute Page for Richard Feynman",
        technologies: ["HTML", "CSS", "Bootstrap", "React"] }, { link: "https://doppelkinn-domme.herokuapp.com/",
        image: "https://res.cloudinary.com/domxil2ks/image/upload/s--LwW_6WQm--/v1504448769/doppelkinn-domme_wsh2qw.png",
        alt: "Doppelkinn-Domme Ausredengenerator",
        title: "Doppelkinn-Domme Ausredengenerator",
        description: "A generator for excuses if you don't feel like hanging out with your friends",
        technologies: ["HTML", "CSS", "Bootstrap", "JavaScript", "Mustache", "Node.js"] }, {
        link: "https://party-tube.herokuapp.com/",
        image: "https://res.cloudinary.com/domxil2ks/image/upload/s--wOvj0meQ--/v1504448775/party-tube_bqkb2d.png", alt: "Partytube",
        title: "Partytube",
        description: "A simple site which takes content from youtube and makes searching for several videos in the same page possible",
        technologies: ["HTML", "CSS", "Bootstrap", "React", "Node.js"]
      }, {
        link: "https://codepen.io/Gh05d/full/VMYxOd/",
        image: "https://res.cloudinary.com/domxil2ks/image/upload/s--7_Y5WLUl--/v1505473542/donald_trump_quotes_wq6e1i.png", alt: "Random quotes from Donald Trump",
        title: "Random Donald Trump Quotes",
        description: "A page which fetches Quotes from Donald Trump from an external API",
        technologies: ["HTML", "CSS", "Bootstrap", "React", "Axios", "Font Awesome"]
      }, {
        link: "https://codepen.io/Gh05d/full/OxyPdo/",
        image: "https://res.cloudinary.com/domxil2ks/image/upload/s--VryfryAJ--/v1505574673/weather-app_nexuad.png", alt: "weather app",
        title: "Weather App",
        description: "This app shows you the weather at your current location",
        technologies: ["HTML", "CSS", "Bootstrap", "React", "Axios"]
      }, {
        link: "https://codepen.io/Gh05d/full/wrKPVq/",
        image: "https://res.cloudinary.com/domxil2ks/image/upload/s--hLJr51Ra--/v1505679848/wikipedia-viewer_egz6j8.png", alt: "Wikipedia Viewer",
        title: "Wikipedia Viewer",
        description: "An app which fetches data from wikipedia in realtime as soon as the user enters a searchterm",
        technologies: ["HTML", "CSS", "Bootstrap", "React", "Axios"]
      }, {
        link: "https://codepen.io/Gh05d/full/gGaVBo/",
        image: "https://res.cloudinary.com/domxil2ks/image/upload/s--_k3LLABI--/v1505816819/twitch_uoymax.png", alt: "Twitch.tv channels",
        title: "Twitch.tv Viewer",
        description: "This app shows some channels from Twitch.tv and let's you filter them if they're on- or offline",
        technologies: ["HTML", "CSS", "Bootstrap", "W3.CSS", "React", "Axios"]
      }, {
        link: "https://codepen.io/Gh05d/full/OxOBdE/",
        image: "https://res.cloudinary.com/domxil2ks/image/upload/s--0ZBPTsRt--/v1507209038/calculator_dnlcwi.png",
        alt: "Onlince Calculator", title: "Online Calculator",
        description: "An online calculator to do simple math operations",
        technologies: ["HTML", "CSS", "Bootstrap", "React"]
      }, {
        link: "https://codepen.io/Gh05d/full/wrpdmy/",
        image: "https://res.cloudinary.com/domxil2ks/image/upload/s--MSw2HnI8--/v1507296310/pomodoro_fifjw1.png",
        alt: "Pomodoro", title: "Pomodoro Timer",
        description: "An online pomodoro clock",
        technologies: ["HTML", "CSS", "W3.CSS", "React", "Ajax"]
      }, {
        link: "https://codepen.io/Gh05d/full/XeZKZd/",
        image: "https://res.cloudinary.com/domxil2ks/image/upload/s--LYfcvEHs--/v1507894477/tictactoe_fw6svr.png",
        alt: "Tic Tac Toe", title: "Tic Tac Toe Game",
        description: "A Tic Tac Toe Game with an Implementation of the MiniMax-Algorithm",
        technologies: ["HTML", "CSS", "W3CSS", "React", "lodash"]
      }, {
        link: "https://github.com/Gh05d/simon",
        image: "https://res.cloudinary.com/domxil2ks/image/upload/s--hl1D9N8U--/v1508335651/simon_s6drwp.png",
        alt: "Simon Game", title: "Simon",
        description: "The classic Simon Game from the 90ies",
        technologies: ["HTML", "CSS", "Scss", "W3.CSS", "React", "Redux", "lodash", "Flexbox"]
      }, {
        link: "https://codepen.io/Gh05d/full/boyero/",
        image: "https://res.cloudinary.com/domxil2ks/image/upload/s--RusNXE3B--/v1508829664/Markdown-Previewer_z4zyjd.png",
        alt: "Markdown Previewer", title: "Markdown Previewer",
        description: "A simple App to which shows you a preview of a text using markup from github. Integrates the marked library",
        technologies: ["HTML", "Scss", "React", "marked"]
      }, {
        link: "https://codepen.io/Gh05d/full/yzWrzd/",
        image: "https://res.cloudinary.com/domxil2ks/image/upload/s--NBRma6A_--/v1508844489/leaderboard_ulnjxn.png",
        alt: "Leaderboard", title: "Camper Leaderboard",
        description: "An app which shows the current ranking of people posting on the gitter channel of freeCodeCamp",
        technologies: ["HTML", "Scss", "React", "Bootstrap", "Axios"]
      }];

      var renderPortfolioItems = portfolioItems.map(function (item) {
        return React.createElement(
          "div",
          { className: "col-xs-6 portfolio-item" },
          React.createElement(
            "a",
            { href: item.link, className: "thumbnail", target: "_blank" },
            React.createElement("img", { src: item.image, alt: item.alt })
          ),
          React.createElement(
            "div",
            { className: "caption" },
            React.createElement(
              "h3",
              null,
              item.title
            ),
            React.createElement(
              "p",
              null,
              item.description
            ),
            React.createElement(
              "p",
              null,
              "Technologies used:"
            ),
            item.technologies.map(function (technologie) {
              return React.createElement(
                "span",
                { className: "label label-primary footer-link" },
                technologie
              );
            })
          )
        );
      });

      var socialButtons = [{ link: "https://github.com/Gh05d", style: "btn btn-github",
        symbol: "fa fa-github" }, { link: "https://www.linkedin.com/in/pascal-clanget-545956ba/",
        style: "btn btn-linkedin", symbol: "fa fa-linkedin" }, { link: "https://www.instagram.com/gh05d/?hl=de", style: "btn btn-instagram",
        symbol: "fa fa-instagram" }];
      var renderSocialButtons = socialButtons.map(function (_ref) {
        var link = _ref.link,
            style = _ref.style,
            symbol = _ref.symbol;
        return React.createElement(
          "li",
          null,
          React.createElement(
            "a",
            { target: "_blank", href: link },
            React.createElement(
              "button",
              { type: "button", className: style },
              React.createElement("i", { className: symbol })
            )
          )
        );
      });

      return React.createElement(
        "div",
        null,
        React.createElement(
          "nav",
          { className: "navbar navbar-inverse navbar-fixed-top" },
          React.createElement(
            "div",
            { className: "container-fluid" },
            React.createElement(
              "div",
              { className: "navbar-header" },
              React.createElement(
                "button",
                { type: "button", className: "navbar-toggle",
                  "data-toggle": "collapse", "data-target": "#main-navbar" },
                React.createElement("span", { className: "icon-bar" }),
                React.createElement("span", { className: "icon-bar" }),
                React.createElement("span", { className: "icon-bar" })
              ),
              React.createElement(
                "a",
                { href: "#", className: "navbar-brand" },
                "Gh05d"
              )
            ),
            React.createElement(
              "div",
              { className: "collapse navbar-collapse navbar-right navigation", id: "main-navbar" },
              React.createElement(
                "ul",
                { className: "nav navbar-nav" },
                renderNavBarLinks
              )
            )
          )
        ),
        React.createElement(
          "div",
          { className: "container-fluid", id: "pic-desc" },
          React.createElement(
            "div",
            { id: "About", className: "row self-desc" },
            React.createElement(
              "div",
              { className: "col-xs-8" },
              React.createElement(
                "p",
                null,
                "Front-End-Developer with a degree in Business Informatics"
              ),
              React.createElement(
                "p",
                null,
                "Currently fluent in HTML5, CSS, React, Redux, Node.js and GraphQL"
              ),
              React.createElement(
                "p",
                null,
                "Devoted to learn as much and deep as I can"
              ),
              React.createElement("hr", null),
              React.createElement(
                "ul",
                { className: "list-inline text-center" },
                React.createElement(
                  "li",
                  null,
                  "Developer"
                ),
                React.createElement(
                  "li",
                  null,
                  "Enthuasist"
                ),
                React.createElement(
                  "li",
                  null,
                  "Engineer"
                )
              )
            ),
            React.createElement(
              "div",
              { className: "col-xs-4" },
              React.createElement("img", { src: "http://hd.wallpaperswide.com/thumbs/cod_ghosts-t2.jpg", alt: "Picture of an awesome guy", className: "img-responsive" })
            )
          ),
          React.createElement(
            "div",
            { id: "Portfolio" },
            React.createElement(
              "h1",
              { className: "text-center" },
              "Portfolio"
            ),
            React.createElement(
              "div",
              { className: "row" },
              renderPortfolioItems
            )
          ),
          React.createElement(
            "div",
            { id: "Contact" },
            React.createElement(
              "h1",
              { className: "text-center" },
              "Contact Me"
            ),
            React.createElement(
              "div",
              { className: "row" },
              React.createElement(
                "div",
                { className: "col-xs-6" },
                React.createElement(
                  "form",
                  { action: "mailto:pascal.clanget@googlemail.com", id: "contact" },
                  React.createElement(
                    "div",
                    { className: "form-group" },
                    React.createElement("input", { className: "form-control", type: "text", placeholder: "Name" })
                  ),
                  React.createElement(
                    "div",
                    { className: "form-group" },
                    React.createElement("input", { className: "form-control", type: "email", placeholder: "Email" })
                  ),
                  React.createElement(
                    "div",
                    { className: "form-group" },
                    React.createElement("input", { className: "form-control", type: "phone", placeholder: "Phone" })
                  ),
                  React.createElement(
                    "div",
                    { className: "form-group" },
                    React.createElement("textarea", { className: "form-control", rows: "5", placeholder: "Your Message" })
                  ),
                  React.createElement(
                    "button",
                    { type: "submit", className: "btn btn-primary" },
                    "Submit"
                  )
                )
              ),
              React.createElement(
                "div",
                { className: "col-xs-6" },
                React.createElement(
                  "p",
                  null,
                  "Want to get in touch with me? Be it to request more info about myself or my experience, to ask for my resume, how I built this awesome little portfolio page, which footballer is the best in the world and what the hell OMAD is... Just feel free to drop me a line anytime."
                ),
                React.createElement(
                  "p",
                  null,
                  "Don't expect me to reply directly, I am a very lazy person ^^"
                )
              )
            )
          ),
          React.createElement(
            "div",
            { id: "about" },
            React.createElement(
              "div",
              { className: "row" },
              React.createElement(
                "div",
                { className: "col-xs-6 white" },
                React.createElement(
                  "h3",
                  { className: "text-center" },
                  "ABOUT THIS PAGE"
                ),
                React.createElement(
                  "p",
                  { className: "text-center" },
                  "Build with HTML, CSS, jQuery, React and Bootstrap"
                )
              ),
              React.createElement(
                "div",
                { className: "col-xs-6" },
                React.createElement(
                  "h3",
                  { className: "text-center white" },
                  "AROUND THE WEB"
                ),
                React.createElement(
                  "ul",
                  { className: "list-inline text-center" },
                  renderSocialButtons
                )
              )
            )
          ),
          React.createElement(
            "footer",
            { className: "footer" },
            React.createElement("hr", null),
            React.createElement(
              "p",
              null,
              "Created by: Gh05d"
            ),
            React.createElement(
              "p",
              null,
              React.createElement(
                "time",
                null,
                new Date().getFullYear()
              )
            )
          )
        )
      );
    }
  }]);

  return PortfolioPage;
}(React.Component);

ReactDOM.render(React.createElement(PortfolioPage, null), document.getElementById("app"));

Comments