github.html

<script type="text/javascript">
$(document).ready(function(){
  
        $.ajax({
          type: 'GET', 
          url:'https://api.github.com/users/kdr213/repos',
          dataType: 'json',
          success: function(data) {
            $("#repos").html('');
            console.log(data[0].pushed_at);
            data.sort(function(a,b) {
              a = new Date(a.pushed_at);
              b = new Date(b.pushed_at);
              return a>b ? -1 : a<b ? 1 : 0;
            });
            var repoHTML = "";
            $.each(data, function(index, element){

              repoHTML = `<div class="col-sm-4 masonry__item">
                <a href="` + element.html_url + `" target="_blank">
                  <div class="boxed bg--white box-shadow">`
              repoHTML += "<span>" + element.name + "</span>";
              if(element.description) repoHTML += "<h5>" + element.description + "</h5>";

              repoHTML+= 
		              	`<hr>
		               		<p>Latest push: ` + formatDate(new Date(element.pushed_at)) + `<br>
		               		Created: ` + formatDate(new Date(element.created_at)) +
		               		`</p>
		            	</div>
		        	</a>
             	</div>`
              //console.log(repoHTML);
              $("#repos").append(repoHTML);
            });
            
          }
        });

 });

function formatDate(date) {
  var monthNames = [
    "Jan", "Feb", "Mar",
    "Apr", "May", "Jun", "Jul",
    "Aug", "Sep", "Oct",
    "Nov", "Dec"
  ];

  var day = date.getDate();
  var monthIndex = date.getMonth();
  var year = date.getFullYear();

  return day + ' ' + monthNames[monthIndex] + ' ' + year;
}
</script>
<section class="bg--secondary">

  <div class="container github-container">
    <div class="row">
      <div class="masonry">
        <div class="masonry__container masonry--active masonry--animate" id="repos">
        </div>
      </div>
    </div>
  </div>
</section>