portfolio category filter

I want to add a portfolio section to my website where my works are divided into different categories.
I have downloaded a filter demo as a starting point, adjusted it so I can show enlarged images in a bootstrap modal.
The categories in the demo are: All – App – Card – Icon – Logo – Web
What I want is to remove the “All” category so only the ‘main categories’ remain and that “App” is the first category loaded.

In the filterbutton div I can remove the “All” button, but ..of course.. the All-category still exists in the javascript and doesn’t load the App category first.
I have been googling for information about filtering on portfolio category, but I haven’t found any solution.
Below can you find the most important code. If that’s not enough, I have uploaded the filter demo here: [url]http://speedy.sh/wgFv6/portfoliofilter.rar[/url]
I hope someone can tell me what to do. Thanks!

[code=php]<script type=”text/javascript”>
$(function () {
var filterList = {
init: function () {
// MixItUp plugin
// http://mixitup.io
$(‘#portfoliolist’).mixitup({
targetSelector: ‘.portfolio’,
filterSelector: ‘.filter’,

effects: [‘fade’],
easing: ‘snap’,
// call the hover effect
onMixEnd: filterList.hoverEffect()
});
},
hoverEffect: function () {
// Simple parallax effect
$(‘#portfoliolist .portfolio’).hover(
function () {
$(this).find(‘.label’).stop().animate({bottom: 0}, 200, ‘easeOutQuad’);
$(this).find(‘img’).stop().animate({top: -30}, 500, ‘easeOutQuad’);
},
function () {
$(this).find(‘.label’).stop().animate({bottom: -40}, 200, ‘easeInQuad’);
$(this).find(‘img’).stop().animate({top: 0}, 300, ‘easeOutQuad’);
}
);
}
};
// Run the show!
filterList.init();
});
</script>[/code]

The filter buttons:

[code=html]<div class=”container”>
<ul id=”filters” class=”clearfix”>
<li><span class=”filter active” data-filter=”app card icon logo web”>All</span></li>
<li><span class=”filter” data-filter=”app”>App</span></li>
<li><span class=”filter” data-filter=”card”>Card</span></li>
<li><span class=”filter” data-filter=”icon”>Icon</span></li>
<li><span class=”filter” data-filter=”logo”>Logo</span></li>
<li><span class=”filter” data-filter=”web”>Web</span></li>
</ul>
</div>[/code]

The code of one image (“app” category):

[code=html]<div id=”portfoliolist”>
<div class=”portfolio app”>
<div class=”portfolio-wrapper”>
<a href=”img/groot.jpg” title=”Titel van project” data-gallery><img src=”img/thumb.jpg” alt=””></a>
</div>
</div>[/code]

Also in #JavaScript _↴