added new theme and articles

daveberning · Feb 2, 2022 · e1b122e · e1b122e
1 parent 53deb0f
commit e1b122e
Show file tree

Hide file tree

Showing 6 changed files with 219 additions and 96 deletions.
diff --git a/components/ThemePicker.vue b/components/ThemePicker.vue
@@ -1,62 +1,83 @@
 <template>
   <ul>
-    <li v-for="(theme, i) in listOfThemes" :key="i" @click="changeTheme(theme.name)">
-      <span :class="{active: $store.state.theme === theme.name}" :style="`background: ${theme.color}`" />
+    <li
+      v-for="(theme, i) in listOfThemes"
+      :key="i"
+      :class="{active: $store.state.theme === theme.name}"
+      @click="changeTheme(theme.name)">
+      <img v-if="theme.image" :src="`images/${theme.image}`" alt="theme logo">
+      <span v-else :style="`background: ${theme.color}`" />
     </li>
   </ul>
 </template>
 
 <script lang="ts">
-  import Vue from 'vue'
-  import { listOfThemes } from '@/data/theme-colors'
-  import { ThemeSwatch } from '~/types/theme'
-
-  export default Vue.extend({
-    data() {
-      return {
-        listOfThemes: listOfThemes as ThemeSwatch[]
-      }
-    },
-    methods: {
-      changeTheme(theme: string): void {
-        this.$store.dispatch('changeTheme', theme)
-      }
+import Vue from 'vue'
+import { listOfThemes } from '@/data/theme-colors'
+import { ThemeSwatch } from '~/types/theme'
+
+export default Vue.extend({
+  data() {
+    return {
+      listOfThemes: listOfThemes as ThemeSwatch[]
+    }
+  },
+  methods: {
+    changeTheme(theme: string): void {
+      this.$store.dispatch('changeTheme', theme)
     }
-  })
+  }
+})
 </script>
 
 <style lang="scss" scoped>
-  ul {
-    position: absolute;
-    left: 1rem;
-    bottom: 3rem;
-    display: none;
-    width: 25px;
-    z-index: 101;
-
-    @media screen and (min-width: 1025px) {
-      display: block;
-    }
+ul {
+  position: absolute;
+  z-index: 101;
+  bottom: 3rem;
+  left: 1rem;
+  display: none;
+  width: 25px;
 
-    li:hover {
-      cursor: pointer;
+  @media screen and (min-width: 1025px) {
+    display: block;
+  }
+
+  li {
+    width: 35px;
+
+    img {
+      width: 20px;
+      margin: 0 auto;
     }
 
-    li span {
+    span {
       display: block;
       width: 15px;
       height: 15px;
-      border-radius: 50%;
-      border: 1px solid lighten(#000000, 15%);
       margin: 1rem auto 0 auto;
       transition: all .2s ease;
+      border: 1px solid lighten(#000000, 15%);
+      border-radius: 50%;
+    }
+  }
+
+  li:hover {
+    cursor: pointer;
+  }
+
+  li.active {
+    span {
+      width: 25px;
+      height: 25px;
+      transition: all .2s ease;
+      border: 4px solid #000000;
+    }
 
-      &.active {
-        border: 4px solid #000000;
-        width: 25px;
-        height: 25px;
-        transition: all .2s ease;
-      }
+    img {
+      width: 35px;
+      height: auto;
     }
   }
+}
 </style>
diff --git a/data/theme-colors.ts b/data/theme-colors.ts
@@ -35,16 +35,44 @@ const purpleTheme: Theme = {
   textColorDark: `#2a1e2b`
 }
 
+const bengalsTheme: Theme = {
+  background: lightenDarkenColor('#cb653a', 0),
+  backgroundDarker: lightenDarkenColor('#cb653a', -20), // darken 7% of background color
+  backgroundLighter: lightenDarkenColor('#cb653a', 15), // Lighten 6% of background color
+  textColorDark: `#000000`
+}
+
 export const listOfThemes: ThemeSwatch[] = [ // Order of swatches
-  { name: 'default', color: defaultTheme.background },
-  { name: 'green', color: greenTheme.background },
-  { name: 'blue', color: blueTheme.background },
-  { name: 'purple', color: purpleTheme.background },
-  { name: 'red', color: redTheme.background }
+  {
+    name: 'bengals',
+    color: bengalsTheme.background,
+    image: 'bengals-logo.svg',
+  },
+  {
+    name: 'default',
+    color: defaultTheme.background
+  },
+  {
+    name: 'green',
+    color: greenTheme.background
+  },
+  {
+    name: 'blue',
+    color: blueTheme.background
+  },
+  {
+    name: 'purple',
+    color: purpleTheme.background
+  },
+  {
+    name: 'red',
+    color: redTheme.background
+  }
 ]
 
 export function getThemeColors(theme: string): Theme {
   if (theme === 'red') return redTheme
+  else if (theme === 'bengals') return bengalsTheme
   else if (theme === 'green') return greenTheme
   else if (theme === 'blue') return blueTheme
   else if (theme === 'purple') return purpleTheme

diff --git a/data/writing.ts b/data/writing.ts
@@ -2,18 +2,53 @@ import { Writing } from '@/types'
 
 export const writing: Writing[] = [
   {
-    title: `Vue.js: Understanding It's Tools and Ecosystem`,
-    date: `October 2018`,
-    featured: true,
-    type: `Book`,
-    to: `https://www.amazon.com/Vue-Js-Understanding-Its-Tools-Ecosystem/dp/9388425022`
+    title: `How To Debug Components, State, and Events with Vue.js Devtools`,
+    date: `January 25, 2022`,
+    featured: false,
+    type: `Digital Ocean`,
+    to: `https://www.digitalocean.com/community/tutorials/how-to-debug-components-state-and-events-with-vue-js-devtools`
   },
   {
-    title: `Creating Interfaces With Bulma`,
-    date: `February 2018`,
-    featured: true,
-    type: `Book`,
-    to: `https://www.amazon.com/Creating-Interfaces-Bulma-Jeremy-Thomas-ebook/dp/B079M1BJG4/ref=sr_1_1?keywords=creating+interfaces+with+bulma&qid=1566873504&s=books&sr=1-1`
+    title: `How To Make Your Vue.js Application DRY with Slots, Mixins, and Composition API`,
+    date: `December 2, 2021`,
+    featured: false,
+    type: `Digital Ocean`,
+    to: `https://www.digitalocean.com/community/tutorials/how-to-make-your-vue-js-application-dry-with-slots-mixins-and-composition-api`
+  },
+  {
+    title: `How To Manage State in a Vue.js Application with Vuex`,
+    date: `September 30, 2021`,
+    featured: false,
+    type: `Digital Ocean`,
+    to: `https://www.digitalocean.com/community/tutorials/how-to-manage-state-in-a-vue-js-application-with-vuex`
+  },
+  {
+    title: `How To Use Built-In and Custom Directives in Vue.js`,
+    date: `August 12, 2021`,
+    featured: false,
+    type: `Digital Ocean`,
+    to: `https://www.digitalocean.com/community/tutorials/how-to-use-built-in-and-custom-directives-in-vue-js`
+  },
+  {
+    title: `How To Create User Interactions with Events in Vue`,
+    date: `May 28, 2021`,
+    featured: false,
+    type: `Digital Ocean`,
+    to: `https://www.digitalocean.com/community/tutorials/how-to-create-user-interactions-with-events-in-vue`
+  },
+  {
+    title: `How To Create Reusable Blocks of Code with Vue Single-File Components`,
+    date: `April 7, 2021`,
+    featured: false,
+    type: `Digital Ocean`,
+    to: `https://www.digitalocean.com/community/tutorials/how-to-create-reusable-blocks-of-code-with-vue-single-file-components`
+  },
+  {
+    title: `How To Navigate Between Views with Vue Router`,
+    date: `March 22, 2021`,
+    featured: false,
+    type: `Digital Ocean`,
+    to: `https://www.digitalocean.com/community/tutorials/how-to-navigate-between-views-with-vue-router`
   },
   {
     title: `How To Use Vue.js Environment Modes with a Node.js Mock Data Layer`,
@@ -43,6 +78,13 @@ export const writing: Writing[] = [
     type: `Digital Ocean`,
     to: `https://www.digitalocean.com/community/tutorials/vuejs-using-typescript-with-vue`
   },
+  {
+    title: `Vue.js: Understanding It's Tools and Ecosystem`,
+    date: `October 2018`,
+    featured: true,
+    type: `Book`,
+    to: `https://www.amazon.com/Vue-Js-Understanding-Its-Tools-Ecosystem/dp/9388425022`
+  },
   {
     title: `Getting Started with Server-Side Rendering Using Nuxt.js`,
     date: `April 16, 2018`,
@@ -57,6 +99,13 @@ export const writing: Writing[] = [
     type: `Digital Ocean`,
     to: `https://www.digitalocean.com/community/tutorials/vuejs-implementing-infinite-scroll`
   },
+  {
+    title: `Creating Interfaces With Bulma`,
+    date: `February 2018`,
+    featured: true,
+    type: `Book`,
+    to: `https://www.amazon.com/Creating-Interfaces-Bulma-Jeremy-Thomas-ebook/dp/B079M1BJG4/ref=sr_1_1?keywords=creating+interfaces+with+bulma&qid=1566873504&s=books&sr=1-1`
+  },
   {
     title: `Using Chart.js with Vue.js`,
     date: `January 28, 2018`,

diff --git a/pages/index.vue b/pages/index.vue
@@ -3,17 +3,22 @@
     <div class="wrapper">
       <div class="content">
         <picture>
-          <source ref="image" :srcset="`images/compressed/dave-optimized-sm-${$store.state.theme}.jpg`"
-                  media="(min-width: 1335px)">
-          <img src="images/dave-mobile.jpg" alt="PP">
+          <source
+            ref="image"
+            :srcset="`images/compressed/dave-optimized-sm-${$store.state.theme}.jpg`"
+            media="(min-width: 1335px)">
+          <img alt="PP" src="images/dave-mobile.jpg">
         </picture>
         <div>
           <theme-text tag="h1">{{ about.firstName }} {{ about.lastName }}</theme-text>
           <theme-text tag="h2">{{ about.role }} from {{ about.city }}, {{ about.state }}</theme-text>
-          <theme-text tag="p" class="left">
-            Photography by <a href="http://jmanstudios.com" target="_blank" :style="`${$store.getters.darkTextColor};`">Jason Bayer</a>
+          <theme-text class="left" tag="p">
+            Photography by
+            <a :style="`${$store.getters.darkTextColor};`" href="http://jmanstudios.com" target="_blank">Jason Bayer</a>
+          </theme-text>
+          <theme-text class="right" tag="p">
+            Copyright &copy {{ new Date().getFullYear() }}. All Rights Reserved.
           </theme-text>
-          <theme-text tag="p" class="right">Copyright &copy {{ new Date().getFullYear() }}. All Rights Reserved.</theme-text>
           <navigation :navigation="navigation" />
           <social-media-icons :social-media="socialMedia" />
         </div>
@@ -112,10 +117,10 @@ h2 {
 }
 
 p {
-  position: absolute;
   font-size: .75rem;
-  color: #cccccc;
+  position: absolute;
   bottom: 1rem;
+  color: #cccccc;
 }
 
 p.left {
@@ -128,12 +133,12 @@ p.left {
 }
 
 p.right {
-  left: 0;
   right: 0;
+  left: 0;
 
   @media screen and (min-width: 1400px) {
-    left: unset;
     right: 1rem;
+    left: unset;
   }
 }
 
@@ -158,15 +163,15 @@ ul li {
 }
 
 .wrapper {
+  position: relative;
+  z-index: -1;
   display: flex;
-  justify-content: flex-end;
   align-items: center;
+  justify-content: flex-end;
   max-width: 2000px;
-  margin: 0 auto;
   height: 100vh;
-  position: relative;
+  margin: 0 auto;
   padding: 2rem;
-  z-index: -1;
 
   @media screen and (min-width: 1760px) {
     padding: 0 16rem;
@@ -177,12 +182,12 @@ ul li {
   }
 
   .content {
-    margin-right: 0;
     width: 100%;
+    margin-right: 0;
 
     @media screen and (min-width: 1335px) {
-      margin-right: 1rem;
       width: auto;
+      margin-right: 1rem;
     }
 
     @media screen and (min-width: 1400px) {
@@ -203,10 +208,10 @@ ul li {
   }
 
   img {
+    z-index: -1;
     width: 150px;
-    border-radius: 100%;
     border: 5px solid #3e9e91;
-    z-index: -1;
+    border-radius: 100%;
 
     @media screen and (min-width: 812px) {
       width: 100px;
@@ -217,16 +222,16 @@ ul li {
     }
 
     @media screen and (min-width: 1336px) {
+      font-size: 8rem;
       position: absolute;
-      width: 100%;
       top: 5px;
-      -webkit-transform-style: preserve-3d;
-      border: none;
-      border-radius: unset;
+      left: 3rem;
       display: block;
-      font-size: 8rem;
+      width: 100%;
       max-width: 600px;
-      left: 3rem;
+      border: none;
+      border-radius: unset;
+      -webkit-transform-style: preserve-3d;
     }
 
     @media screen and (min-width: 1400px) {