My portfolio site

index.html

<!--Navbar HTML-->
<div class="topnav" id="navBar">
  <a href="#home">Home</a>
  <a href="#whoIAm">Who I Am</a>
  <a href="#myWork">My Work</a>
  <a href="#contactMe">Contact me!</a>
  <a href="javascript:void(0);" class="icon" onclick="myFunction()">&#9776;</a>
</div>
<!--Page body-->
<div class="container-fluid" style="background-color: #1d1d1e;">
<div class="container">
  <div class="row">
    <div class="col-md-12">
      <h1 class="text-center" style="color: #cacace;">Web Development Done <strong style="color: #5f84e2">Right</strong></h1>
    </div>
  </div>
  <div class="row">
    <div class="col-md-12">
      <h1 class="text-center" style="color: #cacace">Welcome to my Portfolio</h1>
    </div>
  </div>
  <div class="row">
      <div class="jumbotron jumbotron-adjust color-elements">
        <img src="http://66.media.tumblr.com/9f40e5f7262fc83848ace085929198e2/tumblr_inline_od4m05CUIY1srbbz1_1280.png" class="img-responsive col-md-12" />
      </div>
  </div>
  <div class="row">
    <div class="col-sm-4 equal">
      <div class="jumbotron">
      <p>It is an honor to have a visit from you! Permit me to be ceremonian and let me introduce myself right away:</p>
      </div>
  </div>
    <div class="col-sm-8 equal">
      <div class="jumbotron">
      <h1>Name's Carlos Eduardo Perez</h1>
        <h5>I'm a full-stack web developer ready to make your dreamed website become real. I only use cutting edge technologies on my work; your site will never feel outdated!</h5>
        <small>trust me!</small>
      </div>
    </div>
</div>
  <div class="row">
    <div class="col-md-12">
      <h1 class="text-center" style="color: #cacace">Now, let's take a look at my work:</h1>
    </div>
  </div>
  <div class="gallery">
  <a target="_blank" href="http://wolves.digital">
    <img src="http://www.wolves.digital/wp-content/uploads/2017/02/Recurso-V3_1-e1488069640173.png" alt="Digital Wolves' logo" width="300" height="200">
  </a>
  <div class="desc">Digital Wolves' main site</div>
</div>

<div class="gallery">
  <a target="_blank" href="https://github.com/CarlosP97">
    <img src="https://softwareengineeringdaily.com/wp-content/uploads/2017/01/freecodecamp.jpeg" alt="Forest" width="300" height="200">
  </a>
  <div class="desc">My future FreeCodeCamp Projects!</div>
</div>

<div class="gallery">
  <a target="_blank" href="lights.jpg">
    <img src="lights.jpg" alt="Northern Lights" width="300" height="200">
  </a>
  <div class="desc">Add a description of the image here</div>
</div>

<div class="gallery">
  <a target="_blank" href="mountains.jpg">
    <img src="mountains.jpg" alt="Mountains" width="300" height="200">
  </a>
  <div class="desc">Add a description of the image here</div>
</div>
  </div>

my-portfolio-site.markdown

My portfolio site

A Pen by Carlos Eduardo Perez Villanueva on CodePen.

License.

script.js

/* Toggle between adding and removing the "responsive" class to topnav when the user clicks on the icon */
function myFunction() {
    var x = document.getElementById("myTopnav");
    if (x.className === "topnav") {
        x.className += " responsive";
    } else {
        x.className = "topnav";
    }
}

scripts

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>

style.css

 /* Add a black background color to the top navigation */
.topnav {
    background-color: #333;
    overflow: hidden;
}

/* Style the links inside the navigation bar */
.topnav a {
    float: left;
    display: block;
    color: #f2f2f2;
    text-align: center;
    padding: 14px 16px;
    text-decoration: none;
    font-size: 17px;
}

/* Change the color of links on hover */
.topnav a:hover {
    background-color: #ddd;
    color: black;
}

/* Hide the link that should open and close the topnav on small screens */
.topnav .icon {
    display: none;
}

 /* When the screen is less than 600 pixels wide, hide all links, except for the first one ("Home"). Show the link that contains should open and close the topnav (.icon) */
@media screen and (max-width: 600px) {
  .topnav a:not(:first-child) {display: none;}
  .topnav a.icon {
    float: right;
    display: block;
  }
}

/* The "responsive" class is added to the topnav with JavaScript when the user clicks on the icon. This class makes the topnav look good on small screens (display the links vertically instead of horizontally) */
@media screen and (max-width: 600px) {
  .topnav.responsive {position: relative;}
  .topnav.responsive a.icon {
    position: absolute;
    right: 0;
    top: 0;
  }
  .topnav.responsive a {
    float: none;
    display: block;
    text-align: left;
  }
}

.equal {
  display: flex;
  display: -webkit-box;
  display: -webkit-flex;
}

.color-elements {
  background-color: #e6e8ed;
  border-color: #8e9196;
  border-style: solid;
}

.jumbotron-adjust {
  background-size: 100% 100%; 
}

div.gallery {
    margin: 5px;
    border: 1px solid #ccc;
    float: left;
    width: 180px;
}

div.gallery:hover {
    border: 1px solid #777;
}

div.gallery img {
    width: 100%;
    height: auto;
}

div.desc {
    padding: 15px;
    text-align: center;
}

styles

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