essays.html

<section id="writing">
	<header>
		<h1>{{header}}</h1>
		<hr>
	</header>
<section class="container-fluid">
	<div class="row justify-content-center">
		<div class="col-12 figure"> 
			<article class="border border-info piece" ng-repeat="essay in essays | limitTo:1:articleNum">
				<p>	{{essay.date}}
					<h2 class="article-title">{{essay.title}}</h2><br> 
					<span ng-bind-html="essay.body"> 
					{{essay.body}} </span>
				</p>
			</article> 
			<div class="row justify-content-center">
			  <ul class="pagination">
			    <li class="page-item" id='prev'>
			      <a ng-click="prevEssay()" total-items="essays.length" class="page-link" items-per-page=1 aria-label="Previous">
			        <span aria-hidden="true">&laquo;</span>
			        <span class="sr-only">Previous</span>
			      </a>
			    </li>
			    <li class="page-item" id='next'>
			      <a ng-click="nextEssay()" total-items="essays.length" class="page-link" items-per-page=1 aria-label="Next">
			        <span aria-hidden="true">&raquo;</span>
			        <span class="sr-only">Next</span>
			      </a>
			    </li>
			  </ul>
			</div>
		</div>
	</div>
</section>
	<hr />
	<footer class="container links">
	<div class="row">
		 
		<a class="col-sm text-center" href="#/about" ng-click="selectNewPage()">Me</a>
		<a class="col-sm text-center" href="#/store" ng-click="selectNewPage()">Store</a>
		<a class="col-sm text-center" href="#/photos" ng-click="selectNewPage()">Photos</a>
		<a class="col-sm text-center" href="#/music" ng-click="selectNewPage()">Music </a>
		<a class="col-sm text-center" href="#/writing" ng-click="selectNewPage()">Writing </a>
		<a class="col-sm text-center" href="#/travel" ng-click="selectNewPage()">Travel </a>
		<a class="col-sm text-center" href="#/black-lives-matter" ng-click="selectNewPage()">BLM </a>
	</div>
	</footer>
</section>