<section id="portfolio-2" class="section colored-wrapper">
    <div class="container">
        <ul class="portfolio-filter nav nav-pills">
            <li class="active"><a href="#" data-filter="*">All</a></li>
            <% AppType.all.each do |app_type| %>
            <li><a href="#" data-filter=".<%= app_type.slug %>"><%= app_type.name %></a></li>
            <% end %>
        </ul>
        <!-- /.portfolio-filter -->
        <div class="row">
            <div id="isotope-portfolio-container">
                <% @projects.each do |project| %>
                <div class="col-xs-12 col-sm-6 col-md-4 portfolio-item-wrapper <%= project.app_types.map(&:slug).join(' ') %>">
                    <div class="portfolio-item">
                        <div class="portfolio-thumb">
                            <img src="<%= raw("#{project.screenshot_path}_medium.png") %>" class="img-responsive">
                            <div class="image-overlay"></div>
                            <a href="<%= raw("#{project.screenshot_path}_large.png") %>" rel="prettyPhoto[pp_gal]"  class="portfolio-zoom"><i class="icon-eye-open"></i></a>
                            <%= link_to raw("<i class=\"icon-link\"></i>"), project, class: "portfolio-link" %>
                        </div>
                        <div class="portfolio-content">
                            <h5><%= link_to project.display_name, project %></h5>
                            <p><%= project.brief_description %></p>
                        </div>
                    </div>
                </div>
                <!-- /.portfolio-item-wrapper -->
                <% end %>
            </div>
            <!-- /.isotope-portfolio-container -->
        </div>
        <!-- /.row -->
    </div>
    <!-- /.container -->
</section>
<!-- /#main-wrapper -->
<script type="text/javascript">
    $(document).ready(function () {
        // PrettyPhoto
        $("a[rel^='prettyPhoto']").prettyPhoto({
            theme: 'light_square',
            social_tools: false
        });
    });
    // Isotope Portfolio
    var $container = $('#isotope-portfolio-container');
    var $filter = $('.portfolio-filter');
    $(window).load(function () {
        // Initialize Isotope
        $container.isotope({
            itemSelector: '.portfolio-item-wrapper'
        });
        $('.portfolio-filter a').click(function () {
            var selector = $(this).attr('data-filter');
            $container.isotope({ filter: selector });
            return false;
        });
        $filter.find('a').click(function () {
            var selector = $(this).attr('data-filter');
            $filter.find('a').parent().removeClass('active');
            $(this).parent().addClass('active');
        });
    });
    $(window).smartresize(function () {
        $container.isotope('reLayout');
    });            
</script>
<!-- Custom Script For This Template -->
<script type="text/javascript">
    $(document).ready(function () {
        $().UItoTop({ easingType: 'easeOutQuart' });
    });
</script>

Make project index page display display_name, not name
Make project index page display display_name, not name
