How can I convert my html gallery into wp?

This is my raw theme:

https://drive.google.com/folderview?id=0Bz3anDpOi54VZGpKNWFQdTdYX0E&usp=sharing

In this theme in portfolio section there are a image gallery with tab.I want to convert my whole portfolio section into wp and the style should be same as raw.
For your convenient the html of portfolio section are:

<section class="portfolio section" id="portfolio">
<div class="container">
<div class="divider">
</div>
<div class="heading">
<h2>PORTFOLIO</h2>
</div>
<div class="filter row">
<ul id="filters">
<li><a href="#" data-filter="*" class="current">ALL</a></li>
<li><a href="#" data-filter=".photos">PHOTOS</a></li>
<li><a href="#" data-filter=".branding">BRANDING</a></li>
<li><a href="#" data-filter=".illustration">ILLUSTRATION</a></li>
</ul>
</div>
<div class="items">

<ul class="row portfolio-items">

<li class="photos col-xs-6 col-sm-4 col-md-3 col-lg-3" onclick="">
<div class="item">
<img src="images/portfolio/thumb/1.jpg" alt="">
<div class="icons">
<a href="images/portfolio/1.jpg" title="Caption">
<i class="glyphicon glyphicon-search">
</i></a>
<a href="#">
<i class="glyphicon glyphicon-link">
</i>
</a>
</div>
<div class="mask"></div>
</div>

<li class="branding col-xs-6 col-sm-4 col-md-3 col-lg-3" onclick="">
<div class="item">
<img src="images/portfolio/thumb/2.jpg" alt="">
<div class="icons">
<a href="images/portfolio/2.jpg" title="Caption">
<i class="glyphicon glyphicon-search"></i>
</a>
<a href="#">
<i class="glyphicon glyphicon-link"></i>
</a>
</div>
<div class="mask"></div>
</div>

<li class="illustration col-xs-6 col-sm-4 col-md-3 col-lg-3" onclick="">
<div class="item">
<img src="images/portfolio/thumb/3.jpg" alt="">
<div class="icons">
<a href="images/portfolio/3.jpg" title="Caption">
<i class="glyphicon glyphicon-search"></i>
</a>
<a href="#">
<i class="glyphicon glyphicon-link"></i>
</a>
</div>
<div class="mask">
</div>
</div>

<li class="illustration col-xs-6 col-sm-4 col-md-3 col-lg-3" onclick="">
<div class="item">
<img src="images/portfolio/thumb/4.jpg" alt="">
<div class="icons">
<a href="images/portfolio/4.jpg" title="Caption">
<i class="glyphicon glyphicon-search"></i>
</a>
<a href="#">
<i class="glyphicon glyphicon-link"></i>
</a>
</div>
<div class="mask">
</div>
</div>

<li class="illustration col-xs-6 col-sm-4 col-md-3 col-lg-3" onclick="">
<div class="item">
<img src="images/portfolio/thumb/5.jpg" alt="">
<div class="icons">
<a href="images/portfolio/5.jpg" title="Caption">
<i class="glyphicon glyphicon-search"></i>
</a>
<a href="#">
<i class="glyphicon glyphicon-link"></i>
</a>
</div>
<div class="mask">
</div>
</div>

<li class="photos col-xs-6 col-sm-4 col-md-3 col-lg-3" onclick="">
<div class="item">
<img src="images/portfolio/thumb/6.jpg" alt="">
<div class="icons">
<a href="images/portfolio/6.jpg" title="Caption">
<i class="glyphicon glyphicon-search"></i>
</a>
<a href="#">
<i class="glyphicon glyphicon-link"></i>
</a>
</div>
<div class="mask">
</div>
</div>

<li class="photos col-xs-6 col-sm-4 col-md-3 col-lg-3" onclick="">
<div class="item">
<img src="images/portfolio/thumb/7.jpg" alt="">
<div class="icons">
<a href="images/portfolio/7.jpg" title="Caption">
<i class="glyphicon glyphicon-search"></i>
</a>
<a href="#">
<i class="glyphicon glyphicon-link"></i>
</a>
</div>
<div class="mask">
</div>
</div>

<li class="photos col-xs-6 col-sm-4 col-md-3 col-lg-3" onclick="">
<div class="item">
<img src="images/portfolio/thumb/8.jpg" alt="">
<div class="icons">
<a href="images/portfolio/8.jpg" title="Caption">
<i class="glyphicon glyphicon-search"></i>
</a>
<a href="#">
<i class="glyphicon glyphicon-link"></i>
</a>
</div>
<div class="mask">
</div>
</div>

</div>
</div>
</section>

How can I do it into wordpress?Please help…..