A Pen by Luke Brown.

index.html

<div class="container">

        <div class = "panel panel-info">

            <div class = "panel-heading">
                <h3 style = "text-align: center;">
                  <a class="navbar-brand2" href="#">
                    <img src="http://demo.luke.sx/minetract/img/logo-img.png" alt="MINETRACT">
                    <img src="http://demo.luke.sx/minetract/img/logo.png" alt="MINETRACT">
                  </a>
              </h3>

                <div class="creations-filter">

                    <a href="#all" data-filter="*" class="current">All Projects</a>
                    <a href="#main" data-filter=".m">Main Project</a>
                    <a href="#small" data-filter=".s">Small Project</a>
                    <a href="#open" data-filter=".o">Open Sourced</a>

                </div>
            </div>

            <div class = "panel-body center">

             <div class="creations-container">

                <div class="col-md-4 m">
                    <img src="http://placehold.it/440x250&text=C to the C to the S" alt="image">
                </div> 
<div class="row portfolio m">
  <div class="col-md-4"><br>
		<img src="assets/img/ChromaHills.png" width="100%" align="right">
	</div>
	<div class="col-md-8">
		<h2>Chroma Hills</h2>
		<p>I was hired in 2013 to join the Chroma Hills teams as the system administrator for their upcoming gaming network. Through my time there I have set up and kept a number of servers online and running whilst providing constant maintenance on security, back end productions and web related products. Chroma Hills has over one million downloads of the resource pack and a following of over 100,000 people.</p>
		<p>My visible work that the public can views is the main website that constantly been updated to have a full login, forum and stat tracking system that works hand in hand with the network itself. From that other projects like a Google Chrome extension, billing software and management solutions have became a successful production.</p>
		
		<a class="btn btn-info" href="http://chromahills.net" target="_blank"><i class="fa fa-globe fa-lg"> </i>&nbsp;&nbsp;Visit Website</a>
		<a class="btn btn-primary" href="https://chrome.google.com/webstore/detail/chromahills-network-app/ekeioodpmcbhkjjhfpdcdgfomejnkkmm"><i class="fa fa-google fa-lg"> </i>  Visit Chrome App</a>

	</div>
</div>


                <div class="col-md-4 s">
                    <img src="http://placehold.it/440x250&text=le HTML" alt="image">
                </div> 

                <div class="col-md-4 js">
                    <img src="http://placehold.it/440x250&text=JS Scribing" alt="image">
                </div> 

                <div class="col-md-4 js">
                    <img src="http://placehold.it/440x250&text=Javascript God" alt="image">
                </div> 

                <div class="col-md-4 php">
                    <img src="http://placehold.it/440x250&text=Another PHP Project" alt="image">
                </div> 

                <div class="col-md-4 php">
                    <img src="http://placehold.it/440x250&text=A PHP Project" alt="image">
                </div> 

                 
            </div>

        </div>



    </div> <!-- END container div -->

Minetract-Portfolio-Example-.markdown

Minetract Portfolio Example

Animation using the isotope.js features. This example would show the users projects on their portfolio

A Pen by Luke Brown on CodePen.

License.

script.js

$(window).load(function(){
    var $container = $('.creations-container');
    $container.isotope({
        filter: '*',
        animationOptions: {
            duration: 750,
            easing: 'linear',
            queue: false
        }
    });

    $('.creations-filter a').click(function(){
        $('.creations-filter .current').removeClass('current');
        $(this).addClass('current');

        var selector = $(this).attr('data-filter');
        $container.isotope({
            filter: selector,
            animationOptions: {
                duration: 750,
                easing: 'linear',
                queue: false
            }
         });
         return false;
        }); 
    });

style.css

* {
  font-family: 'Raleway', sans-serif;
}
body {
  padding: 15px;
}
.creations-filter a { 
margin-right: 10px; 
color:#666;
text-decoration:none;
}

.creations-filter a.current { 
    font-weight:bold;
}
.creations-container {
       -webkit-transition: all 0.3s ease;
         -moz-transition: all 0.3s ease;
           -o-transition: all 0.3s ease;
          -ms-transition: all 0.3s ease;
              transition: all 0.3s ease;
}
.creations-filter {
    text-align: center;
}

.panel-body {
    width: 100%;
    margin:auto;
}
.panel-heading {
    background-color: #4A4A4A !important;
    color: white;
}
.panel-info, .panel-info>  .panel-heading {
border-color: #4A4A4A !important;  
  }
.creations-filter a {
  margin-right: 10px;
  color: white;
  text-decoration: none;
}
.creations-container {

}
img {
    margin:5px;
}

.isotope-item {
    z-index: 2;
}
.isotope-hidden.isotope-item {
    pointer-events: none;
    z-index: 1;
}
.isotope,
.isotope .isotope-item {
  /* change duration value to whatever you like */

    -webkit-transition-duration: 0.8s;
    -moz-transition-duration: 0.8s;
    transition-duration: 0.8s;
}
.isotope {
    -webkit-transition-property: height, width;
    -moz-transition-property: height, width;
    transition-property: height, width;
}
.isotope .isotope-item {
    -webkit-transition-property: -webkit-transform, opacity;
    -moz-transition-property: -moz-transform, opacity;
    transition-property: transform, opacity;
}
.creations-container > div > img {
  max-width: 100%;
  max-height: 193px;
}
.navbar-brand2 > img:first-child {
width: 43px;
margin-top: -7px;
}
.navbar-brand2 > img:last-child {
margin-top: -7px;
padding-left: 7px;
}