What is the best practice to enable the user to view certain categories on a portfolio page?

What is the best practice to enable the user to view certain categories on
a portfolio page?

Here I have a portfolio page of 4 categories, when you first land on the
page you will see all of them. BUT you have the option to chose form the
menu which category to only show and hide all the rest.
<div class="wrapperA">
<div class="contentB">
<div id="portfolio-topSection">
<a href="#" class="categoryButton-All">All</a>
<a href="#" class="categoryButton-VisualIdentity">Visual Identity</a>
<a href="#" class="categoryButton-Photography">Photography</a>
</div>
</div>
</div>
<div class="wrapperB">
<div class="content">
<div id="portfolio-gallerySection">
<div class="grid">
<div class="itemWrapper categoryAll"> <a
href="index.html"><img alt=""
src="assets/images/me.png"></a>
<span><p>Click To View Project</p></span>
</div>
<div class="itemWrapper categoryWebDesign"> <a
href="index.html"><img alt=""
src="assets/images/11.png"></a>
<span><p>Click To View Project</p></span>
</div>
</div>
<div class="grid">
<div class="itemWrapper categoryVisualIdentity"> <a
href="index.html"><img alt=""
src="assets/images/me.png"></a>
<span><p>Click To View Project</p></span>
</div>
<div class="itemWrapper categoryPhotography"> <a
href="index.html"><img alt=""
src="assets/images/me.png"></a>
<span><p>Click To View Project</p></span>
</div>
</div>
<div class="grid">
<div class="itemWrapper category-WebDesign"> <a
href="index.html"><img alt=""
src="assets/images/11.png"></a>
<span><p>Click To View Project</p></span>
</div>
<div class="itemWrapper category-WebDesign"> <a
href="index.html"><img alt=""
src="assets/images/me.png"></a>
<span><p>Click To View Project</p></span>
</div>
</div>
</div>
</div>
</div>
In a fiddle: http://jsfiddle.net/4HFvx