The MixItUp library is a great plugin that sorts and filters items. I have modified the stylesheet and JavaScript files to also feature a nice text-on-hover.
Code revised as of 3/17/16
<!DOCTYPE html>
<html>
<head>
<title>Your title</title>
<!--Favicon-->
<link rel="icon" type="../image/png" href="img/favicon.png">
<!--CSS Links-->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<link rel="stylesheet" href="http://naokiyokoyama.github.io/webdesign/cdn/portfolio.css">
</head>
<body>
<!--Navbar begins-->
<div class="navbar navbar-inverse navbar-static-top ">
<div class="container">
<div class="navbar-header">
<a href="#" class="navbar-brand">Website Title</a>
<button class="navbar-toggle" data-toggle="collapse" data-target=".navHeaderCollapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button></div>
<div class="collapse navbar-collapse navHeaderCollapse">
<ul class="nav navbar-nav navbar-left">
<li><a href="#">Home</a></li>
<li><a href="#">Portfolio</a></li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown Menu<b class="caret"></b></a>
<ul class="dropdown-menu">
<li><a href="">Drop 1</a></li>
<li><a href="">Drop 2</a></li>
</ul>
</li>
</ul>
</div>
</div>
</div>
<!--Navbar ends-->
<div class="row">
<div class="col-lg-1"></div>
<div class="col-lg-10">
<div class="panel panel-default">
<div class="panel-body">
<div class="page-header">
<center>
<h3>Portfolio</h3>
</center>
</div>
<div id="Container">
<center>
<div style="padding-bottom: 6px;">
<span>Sort by: </span>
<button type="button" aria-hidden="true" class="btn btn-default btn-mid sort" data-sort="default">Default</button>
<button type="button" aria-hidden="true" class="btn btn-default btn-mid sort" data-sort="date-order:desc">Newest First</button>
<button type="button" aria-hidden="true" class="btn btn-default btn-mid sort" data-sort="date-order:asc">Oldest First</button>
<br>
</div>
<span>Filter: </span>
<button type="button" aria-hidden="true" class="btn btn-default btn-mid filter" data-filter="all">All</button>
<button type="button" aria-hidden="true" class="btn btn-default btn-mid filter" data-filter=".filter1">Filter 1</button>
<button type="button" aria-hidden="true" class="btn btn-default btn-mid filter" data-filter=".filter2">Filter 2</button>
</center>
<br><br>
<center>
<div class="item mix filter1" data-date-order="0">
<div class="imagem">
<a href="Project.html">
<img class="mockup" src="http://lorempixel.com/400/200/" height="250" width="375">
<p class="icon-descrip">Lorem ipsum dolor sit amet, consectetur adipisicing elit. </p>
</a>
</div>
<p class="icon-caption">Project</p>
</div>
<div class="item mix filter2" data-date-order="2">
<div class="imagem">
<a href="Project.html">
<img class="mockup" src="http://lorempixel.com/400/200/" height="250" width="375">
<p class="icon-descrip">Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
</a>
</div>
<p class="icon-caption">Project</p>
</div>
<div class="item mix filter1" data-date-order="1">
<div class="imagem">
<a href="Project.html">
<img class="mockup" src="http://lorempixel.com/400/200/" height="250" width="375">
<p class="icon-descrip">Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
</a>
</div>
<p class="icon-caption">Project</p>
</div>
<div class="item mix filter2" data-date-order="3">
<div class="imagem">
<a href="Project.html">
<img class="mockup" src="http://lorempixel.com/400/200/" height="250" width="375">
<p class="icon-descrip">Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
</a>
</div>
<p class="icon-caption">Project</p>
</div>
<div class="item mix filter1" data-date-order="4">
<div class="imagem">
<a href="Project.html">
<img class="mockup" src="http://lorempixel.com/400/200/" height="250" width="375">
<p class="icon-descrip">Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
</a>
</div>
<p class="icon-caption">Project</p>
</div>
</center>
</div>
</div>
</div>
</div>
</div>
<!--Scripts-->
<script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
<script src="http://cdn.jsdelivr.net/jquery.mixitup/latest/jquery.mixitup.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<script type="text/javascript" src="http://naokiyokoyama.github.io/webdesign/cdn/portfolio.js"></script>
</body>
</html>