I recently worked on a portfolio page to showcase some of my past projects. I decided to style it similar to my blog so that I had the option to add it in at a later date. I had no major issues during this project so I focused on learning new things. It was my first time creating a scrolling page so I learned how to use a few different tools.

Navbar – I used a sticky top navbar and edited the colors in CSS. I also added links which scroll you to the correct section of the page when you click them.

<nav class="navbar sticky-top navbar-toggleable-xl navbar-light border">
  <ul class="navbar-nav" id="navbar-jump">
    <li><a class="nav-link" href="#top">Home</a></li>
    <li><a class="nav-link" href="#about">About</a></li>
    <li><a class="nav-link" href="#portfolio">Portfolio</a></li>
    <li><a class="nav-link" href="#contact">Contact</a></li>
  </ul>
</nav>

Cards – I used cards to display my past projects, one for each project. I went with images at the top and made sure the cards stayed aligned for all screen sizes.

<div class="card text-center">
  <img class="card-img-top" src="..." width="100%">
  <div class="card-block">
    <h4 class="card-title">Tribute</h4>
    <p class="card-text">...</p>
    <a href="..." target="_blank" class="btn btn-primary">...</a>
  </div>
</div>

Icons – I learned how to pull Font Awesome icons into my portfolio and used them as social media icons in my contact section.

<head>
  <script src="https://use.font..."></script>
</head>
<body>
  <a class="link" href="https://twitter..." target="_blank">
    <i class="fa fa-twitter fa-2x" aria-hidden="true"></i>
  </a>
</body>

Check out my GitHub repo here!

Leave a Reply

Your email address will not be published. Required fields are marked *