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

This awesome code was written by 1bladesforhire, you can see more from this user in the personal repository.
You can find the original code on Codepen.io
Copyright 1bladesforhire ©
  • HTML
  • CSS
  • JavaScript
    <script src="https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js"></script>
    <nav id="navbar" class="navbar navbar navbar-default navbar-fixed-top">
        <div class="container-fluid">
            <!-- Brand and toggle get grouped for better mobile display -->
            <div class="navbar-header">
                <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1"
                    <span class="sr-only">Toggle navigation</span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                <a class="navbar-brand" href="#">Blades</a>

            <!-- Collect the nav links, forms, and other content for toggling -->
            <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
                <ul class="nav navbar-nav">
                    <li class="active">
                        <a href="#about">About
                            <span class="sr-only">(current)</span>
                        <a href="#projects">Projects</a>
                        <a href="#contact">Contact</a>

            <!-- /.navbar-collapse -->
        <!-- /.container-fluid -->

    <div class="container">
      <section id="welcome-section">
        <h1>Welcome to assorted things I may have made by myself or as part of a group</h1>
        <div id="about">
            <h2>Beer and fishing are the best </h2>
            <p>I like making things n stuffs</p>
        <div id="projects">
          <div class="row">
            <p>I get to work on interesting things</p>
            <div class="row">
              <div class="col-sm-4 project-tile">
                <a href="http://velonews.com">Velonews</a>
                <p class="description">Part of a small team of comandos who rebuilt the site 100% with a new design. We retrofitted the existing content and added tons of new functionality.</p>
              <div class="col-sm-4 project-tile"></div>
              <div class="col-sm-4 project-tile"></div>
        <div id="contact">
            <h2>Reach out</h2>
                Get in touch.
                <a href="https://github.com/1bladesforhire" target="_blank" id="profile-link">Check me on github</a>
    <footer class="container-fluid">
        <div class="social">
          <a href="https://github.com/1bladesforhire" taget="_blank">
           <svg height="32" class="octicon" viewBox="0 0 16 16" version="1.1" width="32" aria-hidden="true"><path fill-rule="evenodd" d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.21 1.87.87 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 1.27.82 2.15 0 3.07-1.87 3.75-3.65 1.48 0 1.07-.01 1.93-.01 2.2 0 . 8.013 0 0 0 16 8c0-4.42-3.58-8-8-8z"></path></svg></a>
          <a href="https://www.linkedin.com/in/rachelblades/"><img src="https://upload.wikimedia.org/wikipedia/commons/c/ca/LinkedIn_logo_initials.png"></a>



/*Downloaded from https://www.codeseek.co/1bladesforhire/portfolio-WJmxVY */
    @green: #003322;
body { padding-top: 70px; }
  background: lighten( @green, 30%);
  min height: 200px;
  padding: 20px 0;
  @media (max-width: 480px) {

    display: none;

    float: left;
    margin-right: 5px;
    width: 32px;
    height: 32px;

  height: 100vh;

/*Downloaded from https://www.codeseek.co/1bladesforhire/portfolio-WJmxVY */