Adding page transitions, image tilting option and design tweaks

src/templates/blog.js

@@ -4,11 +4,13 @@ import Link from 'gatsby-link'
 import PageIntro from '../components/PageIntro'
 import Card from '../components/Card'
 
+import PageTransition from 'gatsby-plugin-page-transitions'
+
 class Blog extends Component {
   render() {
     const data = this.props.data
     return (
-      <main>
+      <PageTransition>
         <PageIntro
           headline="Bugs keep us busy"
           text="but occasionally we have fun & publish"
@@ -31,7 +33,7 @@ class Blog extends Component {
             </div>
           ))}
         </div>
-      </main>
+      </PageTransition>
     )
   }
 }

src/templates/post-default.js

@@ -4,6 +4,8 @@ import Prism from 'prismjs'
 
 require('prismjs/themes/prism-solarizedlight.css')
 
+import PageTransition from 'gatsby-plugin-page-transitions'
+
 class PostDefault extends Component {
   componentDidMount() {
     Prism.highlightAll()
@@ -11,7 +13,7 @@ class PostDefault extends Component {
   render() {
     const { data } = this.props
     return (
-      <div>
+      <PageTransition>
         <Helmet
           title={`${data.wordpressPost.title} - Saburly.com`}
           meta={[
@@ -32,7 +34,7 @@ class PostDefault extends Component {
             }}
           />
         </main>
-      </div>
+      </PageTransition>
     )
   }
 }