Redid the work section. Added Advent of Code. 2025 books

kabbagepatch · kabbagepatch · commit db921fdd1926 · 2025-03-28T01:58:07.000-05:00
diff --git a/README.md b/README.md
@@ -1,4 +1,4 @@
-# Kavisherlock.Github.io
+# kabbagepatch.github.io
 
 My personal website made using Vue.js
 
diff --git a/package.json b/package.json
@@ -1,5 +1,5 @@
 {
-  "name": "kavisherlock",
+  "name": "kabbagepatch",
   "version": "0.1.0",
   "private": true,
   "scripts": {
diff --git a/public/index.html b/public/index.html
@@ -4,14 +4,14 @@
     <meta charset="utf-8">
     <meta http-equiv="X-UA-Compatible" content="IE=edge">
     <meta name="viewport" content="width=device-width,initial-scale=1.0">
-    <link rel="icon" href="kavisherlock.github.io/favicon.ico" />
+    <link rel="icon" href="kabbagepatch.github.io/favicon.ico" />
     <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Homemade Apple">
     <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Cairo">
     <title>Kavish</title>
   </head>
   <body>
     <noscript>
-      <strong>We're sorry but kavisherlock.github.io doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
+      <strong>We're sorry but kabbagepatch.github.io doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
     </noscript>
     <div id="app"></div>
     <!-- built files will be auto injected -->
diff --git a/src/App.vue b/src/App.vue
@@ -2,8 +2,9 @@
   <div
     id="app"
     v-bind:class="{
-      blueMajority: $route.name === 'Home',
-      purpleMajority: $route.name !== 'Home',
+      greyGradient: $route.name === 'Home',
+      blueGradient: $route.name === 'Books',
+      brownGradient: $route.name === 'Work' || $route.name === 'AoC',
     }"
   >
     <Header
@@ -18,10 +19,12 @@
   </div>
   <footer
     v-bind:class="{
-      bookfooter: $route.name !== 'Home',
+      bluefooter: $route.name === 'Books',
+      brownfooter: $route.name === 'Work',
+      brownfooter: $route.name === 'AoC',
     }"
   >
-    <p>All rights reserved &#169; 2022 | Designed & developed by <a href="https://twitter.com/kavisherlock">Kavish</a></p>
+    <p>Designed & developed by <a href="https://twitter.com/kavisherlock">Kavish</a></p>
     <p class="credit">
       Glitchy buttons in the header based on <a href="https://codepen.io/jh3y/pen/PoGbxLp">
         https://codepen.io/jh3y/pen/PoGbxLp
@@ -38,7 +41,7 @@ export default {
   name: 'app',
   data() {
     return {
-      tabs: ['Books', 'Work'],
+      tabs: ['Books', 'Work', 'AoC'],
       apiKey: 'AIzaSyBj6pwMyPi8NVKBybSPJ3WWwGfx3__Nr4I',
     };
   },
@@ -63,12 +66,16 @@ export default {
     padding: 0 2% 2% 2%;
   }
 
-  .blueMajority {
+  .greyGradient {
     background: linear-gradient(to bottom right, hsl(0, 5%, 33%) 20%, hsl(292, 38%, 92%));
   }
 
-  .purpleMajority {
-    background: linear-gradient(to bottom right, hsl(212, 51%, 31%) 10%, hsl(204, 39%, 35%));
+  .blueGradient {
+    background: linear-gradient(to bottom right, hsl(212, 51%, 31%) 10%, hsl(204, 36%, 47%));
+  }
+
+  .brownGradient {
+    background: linear-gradient(to top right, hsl(11, 84%, 7%) 50%, hsl(37, 22%, 51%));
   }
 
   .fade-enter-active,
@@ -83,8 +90,7 @@ export default {
 
   footer {
     text-align: center;
-    padding: 20px 0 40px 0;
-    margin-top: -30px;
+    padding: 10px 0 40px 0;
     min-width: 480px;
     height: 70px;
     background: hsla(292, 38%, 92%, 50%);
@@ -95,13 +101,22 @@ export default {
     color: hsl(335, 99%, 68%);
   }
 
-  .bookfooter {
+  .bluefooter {
     background: hsl(202, 20%, 92%);
     color: hsl(204, 39%, 55%)
   }
 
-  .bookfooter a {
-    color: rgb(0, 102, 190);
+  .bluefooter a {
+    color: hsl(208, 100%, 37%);
+  }
+
+  .brownfooter {
+    background: hsl(37, 55%, 76%);
+    color: hsl(11, 84%, 7%)
+  }
+
+  .brownfooter a {
+    color: hsl(12, 40%, 24%);
   }
 
   footer .credit {
diff --git a/src/components/Books/Book.vue b/src/components/Books/Book.vue
@@ -52,7 +52,6 @@ export default {
 };
 </script>
 
-<!-- Add "scoped" attribute to limit CSS to this component only -->
 <style scoped>
   .book {
     text-align: center;
diff --git a/src/components/Books/BookSection.vue b/src/components/Books/BookSection.vue
@@ -53,7 +53,6 @@ export default {
 };
 </script>
 
-<!-- Add "scoped" attribute to limit CSS to this component only -->
 <style scoped>
   .book-section-inner {
     padding: 0 5%;
diff --git a/src/components/Button.vue b/src/components/Button.vue
@@ -16,7 +16,6 @@ export default {
 };
 </script>
 
-<!-- Add "scoped" attribute to limit CSS to this component only -->
 <style scoped>
   .cybr-btn + .cybr-btn {
     margin-top: 2rem;
diff --git a/src/components/Header.vue b/src/components/Header.vue
@@ -35,7 +35,6 @@ export default {
 };
 </script>
 
-<!-- Add "scoped" attribute to limit CSS to this component only -->
 <style scoped>
 .header {
   padding-bottom: 20px;
@@ -47,6 +46,7 @@ export default {
   margin: 0;
   display: inline;
   padding: 20px;
+  padding-left: 10px;
 }
 
 #title a {
diff --git a/src/components/HomeCanvas/HomeCanvas.vue b/src/components/HomeCanvas/HomeCanvas.vue
@@ -105,7 +105,7 @@ export default {
     },
 
     startMessage() {
-      const message = 'sup nerd'.split('');
+      const message = 'omg hey'.split('');
       if (message[this.startMessageIndex].match(/[a-z]/i) || message[this.startMessageIndex].match(/[0-9]/i)) {
         this.renderLetter(message[this.startMessageIndex]);
       }
diff --git a/src/components/Work/RepoInfo.vue b/src/components/Work/RepoInfo.vue
@@ -25,11 +25,11 @@ export default {
 };
 </script>
 
-<!-- Add "scoped" attribute to limit CSS to this component only -->
 <style scoped>
   .repo {
     color: hsl(292, 38%, 92%);
-    padding: 0 15px 20px 15px;
+    margin-top: 10px;
+    padding: 0 15px;
     font-size: 18px;
     line-height: 1.2em;
   }
diff --git a/src/components/Work/RepoSection.vue b/src/components/Work/RepoSection.vue
@@ -0,0 +1,28 @@
+<template>
+  <div>
+    <section>
+      <h3>{{this.title}}</h3>
+      <slot />
+    </section>
+    <br /><hr />
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'RepoSection',
+  props: {
+    title: {
+      type: String,
+      default: '',
+    },
+  },
+};
+</script>
+
+<style scoped>
+  h3 {
+    color: hsl(292, 38%, 92%);
+    margin-bottom: 0px;
+  }
+</style>
diff --git a/src/pages/AoC.vue b/src/pages/AoC.vue
@@ -0,0 +1,42 @@
+<template>
+  <div>
+    <h1>Advent of Code</h1>
+    <div class='wip'><h2>Work in progress</h2></div>
+    <ul>
+      <li
+        class="repo"
+        v-for="n in 7"
+        :key="'advent' + n"
+      >
+        <div>
+          <h3>
+            <a :href="'https://github.com/kabbagepatch/AdventOfCode' + (2017 + n)" target="_blank">
+              Advent of Code {{2017 + n}}
+            </a>
+          </h3>
+        </div>
+      </li>
+    </ul>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'AoC',
+};
+</script>
+
+<style scoped>
+  .wip {
+    text-align: center;
+    width: 100%;
+  }
+
+  a {
+    color: hsl(292, 38%, 92%);
+  }
+
+  a:hover {
+    color: hsl(293, 26%, 75%);
+  }
+</style>
diff --git a/src/pages/Books.vue b/src/pages/Books.vue
@@ -16,6 +16,7 @@
 
 <script>
 import BookSection from '../components/Books/BookSection.vue';
+import bookList2025 from '../resources/books/bookList2025.txt';
 import bookList2024 from '../resources/books/bookList2024.txt';
 import bookList2023 from '../resources/books/bookList2023.txt';
 import bookList2022 from '../resources/books/bookList2022.txt';
@@ -48,12 +49,12 @@ export default {
       bookList2022.split('\n'),
       bookList2023.split('\n'),
       bookList2024.split('\n'),
+      bookList2025.split('\n'),
     ];
   },
 };
 </script>
 
-<!-- Add "scoped" attribute to limit CSS to this component only -->
 <style scoped>
 .books-container {
   text-align: center;
diff --git a/src/pages/Home.vue b/src/pages/Home.vue
@@ -7,10 +7,10 @@
           <h1>About Me</h1>
           <h2>Software Engineer since 2016</h2>
           <h2>Reading since 2017</h2>
-          <h2>Blogged between 2018-2020</h2>
+          <h2>Blogging since 2018 <span class='subtext'>(on hiatus)</span></h2>
           <h2>Gaming since 2020</h2>
           <h2>Have a Cat since 2021</h2>
-          <h2>Drawing since 2023</h2>
+          <h2>Watercoloring since 2023</h2>
         </div>
       </div>
     </div>
@@ -28,7 +28,6 @@ export default {
 };
 </script>
 
-<!-- Add "scoped" attribute to limit CSS to this component only -->
 <style scoped>
 .content {
   text-align: center;
@@ -79,6 +78,10 @@ export default {
   color: hsl(335, 99%, 68%);
 }
 
+.subtext {
+  font-size: 12px;
+}
+
 .about h2:nth-child(3), .about h2:nth-child(5), .about h2:nth-child(7) {
   margin-left: 350px;
 }
diff --git a/src/pages/Work.vue b/src/pages/Work.vue
diff --git a/src/resources/books/bookList2024.txt b/src/resources/books/bookList2024.txt
diff --git a/src/resources/books/bookList2025.txt b/src/resources/books/bookList2025.txt
diff --git a/src/router.js b/src/router.js
diff --git a/src/store.js b/src/store.js
diff --git a/yarn.lock b/yarn.lock

Original file line number	Diff line number	Diff line change
`@@ -1,4 +1,4 @@`
`1`		`-# Kavisherlock.Github.io`
	`1`	`+# kabbagepatch.github.io`
`2`	`2`
`3`	`3`	`My personal website made using Vue.js`
`4`	`4`
Original file line number	Diff line number	Diff line change
`@@ -1,5 +1,5 @@`
`1`	`1`	`{`
`2`		`- "name": "kavisherlock",`
	`2`	`+ "name": "kabbagepatch",`
`3`	`3`	`"version": "0.1.0",`
`4`	`4`	`"private": true,`
`5`	`5`	`"scripts": {`
Original file line number	Diff line number	Diff line change
`@@ -105,7 +105,7 @@ export default {`
`105`	`105`	`},`
`106`	`106`
`107`	`107`	`startMessage() {`
`108`		`- const message = 'sup nerd'.split('');`
	`108`	`+ const message = 'omg hey'.split('');`
`109`	`109`	`if (message[this.startMessageIndex].match(/[a-z]/i) \|\| message[this.startMessageIndex].match(/[0-9]/i)) {`
`110`	`110`	`this.renderLetter(message[this.startMessageIndex]);`
`111`	`111`	`}`