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!