First iteration bookshelf

src/static/css/App.css

@@ -25,6 +25,7 @@
 
 html, body {
   overflow-x: hidden;
+  scroll-behavior: smooth;
 }
 
 body {
@@ -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;

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"
     }
 }

src/templates/books.html

@@ -0,0 +1,22 @@
+{% block content %}
+<div class="foreground">
+  <h2>These are my books lol</h2>
+  <h3>
+    This page is under construction but I felt like at least publishing a list
+    of books even if they didn't have reviews on them yet
+  </h3>
+  {% for i in var.books.books %}
+    <div id="'{{i}}'" class="bookReview">
+      <h4>{{i}}</h4>
+      <div>
+        <img
+          class="bookcover"
+          alt="{{i}} cover"
+          src="{{ url_for('static', filename=('photos/books/' + var.books.books[i].filename))}}"
+        />
+        <p>{{ var.books.books[i].review }}</p>
+      </div>
+    </div>
+  {% endfor %}
+</div>
+{% endblock %}

src/templates/home.html

@@ -13,10 +13,13 @@
         class="langstats"
         alt="Language stats"
       />
+      <br />
       <div class="chess">
         {% from 'partials/chess.html' import chess %} {{ chess('asimonson1125')
         }}
       </div>
+      <br />
+      {% from 'partials/bookshelf.html' import bookshelf %} {{ bookshelf(var.books) }}
     </div>
   </div>
 </div>

src/templates/partials/bookshelf.html

@@ -0,0 +1,17 @@
+{% macro bookshelf(books) %}
+<a href="/books">
+  <div class="bookshelf">
+    {% for i in books.selection %} {% set book = books.books[i] %}
+    <a href="/books#'{{i}}'">
+      <div class="book">
+        <img
+          alt="{{ i }} cover"
+          src="{{ url_for('static', filename=('photos/books/' + book.filename))}}"
+        />
+        <h4>{{ i }}</h4>
+      </div>
+    </a>
+    {% endfor %}
+  </div>
+</a>
+{% endmacro %}