Book titles

Author: kabbagepatch

src/App.vue

@@ -24,9 +24,9 @@
       brownfooter: $route.name === 'AoC',
     }"
   >
-    <p>Designed & developed by <a href="https://twitter.com/kavisherlock">Kavish</a></p>
+    <p>Designed & developed by <a href="https://twitter.com/kavisherlock" target="_blank">Kavish</a></p>
     <p class="credit">
-      Glitchy buttons in the header based on <a href="https://codepen.io/jh3y/pen/PoGbxLp">
+      Glitchy buttons in the header based on <a href="https://codepen.io/jh3y/pen/PoGbxLp" target="_blank">
         https://codepen.io/jh3y/pen/PoGbxLp
       </a>
     </p>
@@ -41,7 +41,7 @@ export default {
   name: 'app',
   data() {
     return {
-      tabs: ['Books', 'Work', 'AoC'],
+      tabs: ['Books', 'Work'],
       apiKey: 'AIzaSyBj6pwMyPi8NVKBybSPJ3WWwGfx3__Nr4I',
     };
   },
@@ -91,7 +91,7 @@ export default {
   footer {
     text-align: center;
     padding: 10px 0 40px 0;
-    min-width: 480px;
+    min-width: 500px;
     height: 70px;
     background: hsla(292, 38%, 92%, 50%);
     color: hsl(331, 86%, 75%);

src/components/Books/Book.vue

@@ -2,6 +2,7 @@
   <transition enter-active-class="bouncein" leave-active-class="bounceout">
     <div class="book" v-if="this.imageThumbnail">
       <img :src='this.imageThumbnail' :alt='this.bookTitle' />
+      <div class="overlay">{{ this.bookName.replace(/\b[A-Z0-9]{5,}\b/g, '') }}</div>
     </div>
   </transition>
 </template>
@@ -54,6 +55,7 @@ export default {
 
 <style scoped>
   .book {
+    position: relative;
     text-align: center;
     width: auto;
     height: 190px;
@@ -63,6 +65,27 @@ export default {
     height: 190px;
   }
 
+  .overlay {
+    position: absolute;
+    top: 0;
+    left: 0;
+    background: rgba(0, 0, 0, 0.7);
+    color: white;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    width: auto;
+    padding: 2rem 0.5rem;
+    margin-left: 1px;
+    text-align: center;
+    opacity: 0;
+    transition: opacity 0.3s ease;
+  }
+
+  .book:hover .overlay {
+    opacity: 1;
+  }
+
   .bouncein {
     animation: bouncein 0.8s linear both;
   }

src/components/Books/BookSection.vue

@@ -23,6 +23,11 @@
         </div>
       </transition>
     </div>
+    <div v-if=showBooks>
+      <!-- eslint-disable-next-line -->
+      <p>Disclaimer: The book images above are the first image result from a Google Books Search call on the book title, and therefore might not match the actual book I read</p>
+      <p>Hover/Click the books to display the actual title</p>
+    </div>
     <br />
   </div>
 </template>
@@ -88,6 +93,11 @@ export default {
     animation: rollin 0.5s cubic-bezier(0.55, 0.085, 0.68, 0.53) both;
   }
 
+  p {
+    margin-bottom: -5px;
+    color: hsl(212, 51%, 31%);
+  }
+
   @keyframes rollin {
     0% {
       opacity: 0;

src/pages/Books.vue

@@ -1,7 +1,11 @@
 <template>
   <div class="books-container">
     <h2 class="subtext">Yearly Target: 52 Books</h2>
-    <p class="subtext">Old Blog: <a href="https://kavishandbooks.wordpress.com/" target="_blank">Kavish and Books</a></p>
+    <p class="subtext">
+      <a href="https://app.thestorygraph.com/profile/kabbagepatch/" target="_blank">StoryGraph</a>,&nbsp;
+      <a href="https://www.goodreads.com/user/show/88782158-kavi" target="_blank">Goodreads</a>
+    </p>
+    <p class="subtext">Blog: <a href="https://kavibooks.wordpress.com/" target="_blank">Kavi's Books</a></p>
     <BookSection
       v-for="(booksList, index) in books.slice().reverse()"
       :key="2017 + books.length - 1 - index"
@@ -71,6 +75,6 @@ export default {
 
 p.subtext {
   margin-top: -10px;
-  margin-bottom: 30px;
+  margin-bottom: 10px;
 }
 </style>

src/pages/Home.vue

@@ -7,10 +7,10 @@
           <h1>About Me</h1>
           <h2>Software Engineer since 2016</h2>
           <h2>Reading since 2017</h2>
-          <h2>Blogging since 2018 <span class='subtext'>(on hiatus)</span></h2>
+          <h2>Blogging since 2018</h2>
           <h2>Gaming since 2020</h2>
           <h2>Have a Cat since 2021</h2>
-          <h2>Watercoloring since 2023</h2>
+          <h2>Making Art since 2023</h2>
         </div>
       </div>
     </div>
@@ -95,7 +95,7 @@ export default {
     margin-left: 100px;
   }
 
-  .about h2:nth-child(3), .about h2:nth-child(5) {
+  .about h2:nth-child(3), .about h2:nth-child(5), .about h2:nth-child(7) {
     margin-left: 200px;
   }
 }
@@ -116,7 +116,7 @@ export default {
     margin-left: 150px;
   }
 
-  .about h2:nth-child(3), .about h2:nth-child(5) {
+  .about h2:nth-child(3), .about h2:nth-child(5), .about h2:nth-child(7) {
     margin-left: 250px;
   }
 }
@@ -146,7 +146,7 @@ export default {
     width: 350px;
   }
 
-  .about h2:nth-child(3), .about h2:nth-child(5) {
+  .about h2:nth-child(3), .about h2:nth-child(5), .about h2:nth-child(7) {
     margin-left: 250px;
   }
 }
@@ -160,7 +160,7 @@ export default {
     margin-left: 100px;
   }
 
-  .about h2:nth-child(3), .about h2:nth-child(5) {
+  .about h2:nth-child(3), .about h2:nth-child(5), .about h2:nth-child(7) {
     margin-left: 180px;
   }
 }

src/pages/Work.vue

@@ -43,6 +43,10 @@
         class="repo"
         :repo="myRepos.filter(repo => repo.name.toLowerCase().includes('jumptorecipe'))[0]"
       />
+      <repo
+        class="repo"
+        :repo="myRepos.filter(repo => repo.name.toLowerCase().includes('feather'))[0]"
+      />
     </repo-section>
     <repo-section title="Old Projects">
       <h3>Machine Learning</h3>

src/resources/books/bookList2025.txt

@@ -1,12 +1,17 @@
 Tress of the Emerald Sea 9781938570346
 One Night at the Call Center
-The Fellowship of the Ring 9780007322497
+The Fellowship of the Ring by JRR Tolkien 9780007322497
 The Grim Steeper
-Rogue Protocol
-The Bees Laline Paull
-Road to Ruin Hana Lee
+Rogue Protocol by Martha Wells
+The Bees by Laline Paull
+Road to Ruin by Hana Lee
 The Will of the Many 9781982141172
 Purrder She Wrote
-11/22/63 9781451660807
-Before They Are Hanged
-Oathbringer 076532637X
+2001 A Space Odyssey 0143111574
+The Two Towers by JRR Tolkien
+Oathbringer by Brandon Sanderson 076532637X
+Foundation by Isaac Asimov 9780553293357
+Dark Days by Derek Landy
+Dawnshard by Brandon Sanderson
+The Dollmakers by Lynn Buchanan
+Exit Strategy Martha Wells