adding curated books

src/static/css/App.css

@@ -253,7 +253,7 @@ a {
 
 .foregroundContent {
   padding-left: 8rem;
-  max-width: calc(100%-8rem);
+  padding-right: 2em;
   padding-bottom: 1rem;
 }
 
@@ -902,10 +902,17 @@ a {
 
 .booklist {
   margin: min(10em, 10%);
-  margin-bottom: 20em;
+  margin-bottom: 2em;
   margin-top: 2em;
 }
 
+.boxed {
+  background-color: rgba(24, 24, 24, 0.85);
+  border: solid 0.5em rgba(139, 36, 36, 0.5);
+  border-radius: 0.5em;
+  padding: 1em;
+}
+
 .timeitem {
   transition: .4s;
   overflow-y: clip;

src/static/js/responsive.js

@@ -37,6 +37,6 @@ async function goto(location, { push = true } = {}) {
 }
 
 function backButton() {
-  const location = window.location.pathname;
+  const location = window.location.href;
   goto(location.substring(1), { push: false }); // remove slash, goto already does that
 }

src/static/json/books.json

@@ -1,9 +1,13 @@
 {
   "selection": [
+    "The Rational Optimist",  
+    "The End of the World is Just the Beginning",
     "The Tyranny of Metrics",
     "When to Rob a Bank",
-    "The End of the World is Just the Beginning",
-    "The Rational Optimist"
+    "Freakonomics",
+    "The Accidental Superpower",
+    "Verbal Judo",
+    "Zero To One"
   ],
   "books": {
     "Fooled By Randomness": {

src/templates/books.html

@@ -1,9 +1,22 @@
 {% block content %}
 <div class="foreground"></div>
 <div class="foregroundContent">
-  <h2>These are some of the books I've read since 2020, vaguely sorted by topic.</h2>
-  <h3>"You can't judge a book by its cover but you can judge a person by their bookshelf" - Me, today.</h3>
-  <h4>Hover to reveal review<br />Read to reveal KNOWLEDGE</h4>
+  <h2>"You can't judge a book by its cover but you can judge a person by their bookshelf" - Me, today.</h2>
+  <p>Hover to reveal review<br />Read to reveal KNOWLEDGE</p>
+  <h3>My Favorites</h3>
+  <div class='flex wrap boxed'>
+    {% for i in var.books.selection %}
+    <div>
+      <a href="#'{{i}}'">
+        <img
+          class="bookcover"
+          alt="{{i}} cover"
+          src="{{ url_for('static', filename=('photos/books/' + var.books.books[i].filename))}}"
+        />
+      </a>
+    </div>
+    {% endfor %}
+  </div>
   <div class="booklist flex wrap mobileV">
     {% for i in var.books.books %}
     <div id="'{{i}}'" class="bookReview">

src/templates/home.html

@@ -6,7 +6,7 @@
     alt="logo"
   />
   <h1 id="homeName" class="textGrad">Andrew Simonson</h1>
-  <h2 class="textGrad">Data Science Beyond Theoretical Environments</h2>
+  <h2 class="textGrad">Data Science Beyond Theoreticals</h2>
 </div>
 {% endmacro %}
 
@@ -37,12 +37,11 @@
           <br />
           My philosophy is that if it isn't explainable then you didn't learn
           anything. Data without sound methodology is at best meaningless and at
-          worst counterproductive and costly. Bringing logical transparency and
-          literal deductions back into digital analysis enables us to learn
-          about the world through computing, rather than letting computers make
-          decisions for the world we think we know. We as data scientists
-          shouldn't just be building heuristics. We should be making discoveries
-          and building new knowledge.
+          worst counterproductive and costly. That's why I focus on
+          hypothesis-driven multivariate analysis, bringing logical transparency
+          and literal deductions back into digital analysis. Rather than letting
+          heuristics make decisions for the world we think we know, we should be
+          making discoveries and building new knowledge.
           <br />
           <br />
           <strong>Bring the scientific method to AI.</strong>

src/templates/partials/bookshelf.html

@@ -5,7 +5,7 @@
       <p class='nomargin'>See More >></p>
     </div>
     <div class="bookContainer">
-      {% for i in books.selection %} {% set book = books.books[i] %}
+      {% for i in books.selection[:4] %} {% set book = books.books[i] %}
       <a href="/books#'{{i}}'">
         <div class="book">
           <img