I am hoping someone can help me out with styling my blog


I am hoping someone can help me out with styling my blog page in a timeline format. I feel like I am pretty close but having a few issues.

1. I can't get the posts to be organized by month & year. I would like all posts that are created within the month to be displayed and only show the date (i.e.: JUN 2014) one time even if there is 10 posts in June. Then continue forward in the same setup.

Here is a demo link: http://eeequipment.wpengine.com/blog/

Here is my code:

<?php get_header(); ?>

	<section id="banner">

		<div class="wrap">


			<img src="/wp-content/uploads/2014/06/bannerBlog.jpg" alt="">

		</div> <!-- /.wrap -->

	</section> <!-- /#banner -->

	<section id="breadcrumbs">

		<div class="wrap">

			<?php if(function_exists('bcn_display')) { bcn_display(); }?>

		</div> <!-- /.wrap -->

	</section> <!-- /#breadcrumbs -->

	<section id="content">


                 <div class="timeline-with">
                    <div class="timeline-head"><i class="icon-chat-1"></i></div>
                    <ul class="timeline">
							if(is_front_page()) { $paged = (get_query_var('page')) ? get_query_var('page') : 1;	} else { $paged = (get_query_var('paged')) ? get_query_var('paged') : 1;}

						<?php if(have_posts()) : while(have_posts()) : the_post(); ?>

                            <div class="timeline-post clearfix">
                                <div class="timeline-dot">
                                	<div class="timeline-date">
                                		<?php the_date('M Y', '<h5>', '</h5>'); ?>
                                	</div><!-- /.timeline-date -->
                                </div><!-- /.timeline-dot -->
                               <!-- <div class="timeline-date"><span><?php the_time(get_option('date_format'));?></span></div> -->
                                <div class="timeline-post-wrap">

									<?php if (has_post_thumbnail()) { ?>

										<?php the_post_thumbnail( 'full' ); ?>

									<?php } else { ?>

										<!-- Do Nothing -->

									<?php } ?>

									<div class="post_info">

										<h2 class="post-title"><a href="<?php the_permalink();?>"><?php the_title();?></a></h2>
										<span>by <?php the_author(); ?> | <?php the_time(get_option('date_format'));?></span>

									</div><!-- /.post_info -->

                                    <p><?php echo excerpt(25); ?></p>

                                    <div class="timeline-meta">
                                    	<a href="<?php the_permalink();?>" class="more"><?php echo __('Read More >')?></a>
                                    	<span class="timeline-comments"><i class="icon-comment"></i> <?php comments_number('0','1 comment','% comments')?></span>
                                    </div><!-- /.timeline-meta -->

                                </div><!-- /.timeline-post-wrap -->

                            </div><!-- /.timeline-post .clearfix -->

                        <?php endwhile; endif;?>

                    </ul><!-- /.timeline -->

                    <div class="timeline-nav">
                        <div class="timeline-dot"></div>
                            <li class="left-nav"><?php next_posts_link(__(' ', 'framework')); ?></li>
                            <li class="right-nav"><?php previous_posts_link(__(' ', 'framework')) ?></li>
                    </div><!-- /.timeline-nav -->

                    <?php  wp_reset_query(); //posts_nav_link(); ?>

                </div><!-- /.timeline-with -->

			<div class="clear"></div>


<?php get_footer(); ?>

Any input would be great. I have a feeling I am not calling my posts properly to accommodate for this.