First iteration bookshelf

src/static/css/App.css

@@ -25,6 +25,7 @@
 
 html, body {
   overflow-x: hidden;
+  scroll-behavior: smooth;
 }
 
 body {
@@ -323,7 +324,7 @@ a {
 .col {
   width: calc(50% - 3rem);
   margin-bottom: 3em;
-  float: left; 
+  float: left;
 }
 
 .rightCol {
@@ -662,6 +663,40 @@ a {
   color: #db7e3b;
 }
 
+.bookshelf {
+  width: 360px;
+  padding: 10px;
+  display: flex;
+  justify-content: space-around;
+  flex-wrap: wrap;
+  background-color: #a58a45;
+}
+
+.book {
+  width: 90px;
+  display: inline-block;
+}
+
+.book img {
+  display: block;
+  margin: auto;
+  width: 75px;
+  height: 112px;
+}
+
+.book h4 {
+  font-size: x-small;
+  color: black;
+}
+
+.bookReview {
+  margin-top: 3em;
+}
+
+.bookcover {
+  width: 10em;
+}
+
 .timeitem {
   transition: .4s;
   overflow-y: clip;
@@ -781,7 +816,7 @@ a {
     position: inherit;
     margin-right: inherit;
   }
-  
+
   .footer {
     position: relative;
     width: 100%;

src/static/json/books.json

@@ -0,0 +1,13 @@
+{
+  "selection": ["Freakonomics", "Zero To One", "The Accidental Superpower", "Courage is Calling"],
+  "books": {
+    "Freakonomics": { "filename": "freakonomics.jpeg" },
+    "Disunited Nations": { "filename": "disunitedNations.jpeg" },
+    "The Accidental Superpower": { "filename": "theAccidentalSuperpower.jpeg" },
+    "Give Me a Break": { "filename": "giveMeABreak.jpeg" },
+    "Zero To One": { "filename": "zeroToOne.jpeg" },
+    "Courage is Calling": { "filename": "courageIsCalling.jpeg"},
+    "On Grand Strategy": { "filename": "onGrandStrategy.jpeg"},
+    "The Parasitic Mind": { "filename": "theParasiticMind.jpeg"}
+  }
+}

src/static/json/pages.json

@@ -16,5 +16,11 @@
         "title": "Andrew Simonson - About Me",
         "description": "About Andrew Simonson",
         "canonical": "/about"
+    },
+    "books": {
+        "template": "books.html",
+        "title": "Andrew Simonson - Bookshelf",
+        "description": "Some of the books I've read",
+        "canonical": "/books"
     }
 }