From a08829b9a7f7db087c3bb9b5595b5332ec9e16a3 Mon Sep 17 00:00:00 2001
From: Johnathon Slightham <slighthamj@gmail.com>
Date: Mon, 4 Jul 2022 01:06:34 -0400
Subject: [PATCH] blog

---
 public/index.html   |   2 +-
 src/App.vue         |   8 ++-
 src/router/index.js |   6 +++
 src/views/Blog.vue  | 122 ++++++++++++++++++++++++++++++++++++++++++++
 src/views/Work.vue  |   3 ++
 5 files changed, 138 insertions(+), 3 deletions(-)
 create mode 100644 src/views/Blog.vue

diff --git a/public/index.html b/public/index.html
index 5ccef4d..43fb68f 100644
--- a/public/index.html
+++ b/public/index.html
@@ -9,7 +9,7 @@
     <style>
       html {
         background: #111827;
-
+        overflow-y: scroll;
       }
     </style>
   </head>
diff --git a/src/App.vue b/src/App.vue
index d58cb3c..66c6345 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -24,7 +24,7 @@
             md:mb-0
           "
         >
-          <span class="ml-3 text-xl">Johnathon Slightham</span>
+          <span class="ml-3 text-xl" style="margin-left: auto; margin-right: auto;">Johnathon Slightham</span>
         </a>
         <nav
           class="
@@ -34,6 +34,7 @@
             text-base
             justify-center
           "
+          style="margin-left: auto; margin-right: auto;"
         >
           <router-link to="/"
             ><a class="mr-5 hover:text-white">Home</a></router-link
@@ -41,7 +42,10 @@
           <router-link to="Work"
             ><a class="mr-5 hover:text-white">Work</a></router-link
           >
-          <router-link to="/resume"> <a class="mr-5 hover:text-white">Resume</a> </router-link>
+          <router-link to="Blog"
+            ><a class="mr-5 hover:text-white">Blog</a></router-link
+          >
+          <router-link to="/resume"> <a class="mr-5 hover:text-white">Resume</a></router-link>
         </nav>
         <a href="https://github.com/jslightham">
         <button
diff --git a/src/router/index.js b/src/router/index.js
index 602cb33..e1cfc28 100644
--- a/src/router/index.js
+++ b/src/router/index.js
@@ -4,6 +4,7 @@ import Work from "@/views/Work.vue";
 import Zork from "@/views/Zork.vue";
 import CodeServer from "@/views/CodeServer.vue";
 import Resume from "@/views/Resume.vue";
+import Blog from "@/views/Blog.vue";
 
 const routes = [
     {
@@ -31,6 +32,11 @@ const routes = [
         name: "Resume",
         component: Resume,
     },
+    {
+        path: "/blog",
+        name: "Blog",
+        component: Blog,
+    },
 ];
 
 const router = createRouter({
diff --git a/src/views/Blog.vue b/src/views/Blog.vue
new file mode 100644
index 0000000..3626b17
--- /dev/null
+++ b/src/views/Blog.vue
@@ -0,0 +1,122 @@
+<template>
+    <section class="text-gray-400 bg-gray-900 body-font overflow-hidden">
+      <div class="container px-5 py-24 mx-auto">
+        <h1 class="sm:text-3xl text-2xl font-medium title-font mb-4 text-white">
+          Blog
+        </h1>
+          <br>
+          
+        <section class="text-gray-400 bg-gray-900 body-font overflow-hidden">
+
+          <div class="container px-5 py-24 mx-auto">
+            <div class="flex flex-wrap -m-12">
+              <div class="p-12 md:w-1/2 flex flex-col items-start">
+                <span class="inline-block py-1 px-2 rounded bg-gray-800 text-gray-400 text-opacity-75 text-xs font-medium tracking-widest">CATEGORY</span>
+                <h2 class="sm:text-3xl text-2xl title-font font-medium text-white mt-4 mb-4">Roof party normcore before they sold out, cornhole vape</h2>
+                <p class="leading-relaxed mb-8">Live-edge letterpress cliche, salvia fanny pack humblebrag narwhal portland. VHS man braid palo santo hoodie brunch trust fund. Bitters hashtag waistcoat fashion axe chia unicorn. Plaid fixie chambray 90's, slow-carb etsy tumeric. Cray pug you probably haven't heard of them hexagon kickstarter craft beer pork chic.</p>
+                <div class="flex items-center flex-wrap pb-4 mb-4 border-b-2 border-gray-800 border-opacity-75 mt-auto w-full">
+                  <a class="text-blue-400 inline-flex items-center">Learn More
+                    <svg class="w-4 h-4 ml-2" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round">
+                      <path d="M5 12h14"></path>
+                      <path d="M12 5l7 7-7 7"></path>
+                    </svg>
+                  </a>
+                  <span class="text-gray-500 mr-3 inline-flex items-center ml-auto leading-none text-sm pr-3 py-1 border-r-2 border-gray-800">
+                    <svg class="w-4 h-4 mr-1" stroke="currentColor" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round" viewBox="0 0 24 24">
+                      <path d="M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z"></path>
+                      <circle cx="12" cy="12" r="3"></circle>
+                    </svg>1.2K
+                  </span>
+                  <span class="text-gray-500 inline-flex items-center leading-none text-sm">
+                    <svg class="w-4 h-4 mr-1" stroke="currentColor" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round" viewBox="0 0 24 24">
+                      <path d="M21 11.5a8.38 8.38 0 01-.9 3.8 8.5 8.5 0 01-7.6 4.7 8.38 8.38 0 01-3.8-.9L3 21l1.9-5.7a8.38 8.38 0 01-.9-3.8 8.5 8.5 0 014.7-7.6 8.38 8.38 0 013.8-.9h.5a8.48 8.48 0 018 8v.5z"></path>
+                    </svg>6
+                  </span>
+                </div>
+                <a class="inline-flex items-center">
+                  <img alt="blog" src="https://dummyimage.com/104x104" class="w-12 h-12 rounded-full flex-shrink-0 object-cover object-center">
+                  <span class="flex-grow flex flex-col pl-4">
+                    <span class="title-font font-medium text-white">Holden Caulfield</span>
+                    <span class="text-gray-500 text-xs tracking-widest mt-0.5">UI DEVELOPER</span>
+                  </span>
+                </a>
+              </div>
+              <div class="p-12 md:w-1/2 flex flex-col items-start">
+                <span class="inline-block py-1 px-2 rounded bg-gray-800 text-gray-400 text-opacity-75 text-xs font-medium tracking-widest">CATEGORY</span>
+                <h2 class="sm:text-3xl text-2xl title-font font-medium text-white mt-4 mb-4">Roof party normcore before they sold out, cornhole vape</h2>
+                <p class="leading-relaxed mb-8">Live-edge letterpress cliche, salvia fanny pack humblebrag narwhal portland. VHS man braid palo santo hoodie brunch trust fund. Bitters hashtag waistcoat fashion axe chia unicorn. Plaid fixie chambray 90's, slow-carb etsy tumeric. Cray pug you probably haven't heard of them hexagon kickstarter craft beer pork chic.</p>
+                <div class="flex items-center flex-wrap pb-4 mb-4 border-b-2 border-gray-800 border-opacity-75 mt-auto w-full">
+                  <a class="text-blue-400 inline-flex items-center">Learn More
+                    <svg class="w-4 h-4 ml-2" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round">
+                      <path d="M5 12h14"></path>
+                      <path d="M12 5l7 7-7 7"></path>
+                    </svg>
+                  </a>
+                  <span class="text-gray-500 mr-3 inline-flex items-center ml-auto leading-none text-sm pr-3 py-1 border-r-2 border-gray-800">
+                    <svg class="w-4 h-4 mr-1" stroke="currentColor" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round" viewBox="0 0 24 24">
+                      <path d="M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z"></path>
+                      <circle cx="12" cy="12" r="3"></circle>
+                    </svg>1.2K
+                  </span>
+                  <span class="text-gray-500 inline-flex items-center leading-none text-sm">
+                    <svg class="w-4 h-4 mr-1" stroke="currentColor" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round" viewBox="0 0 24 24">
+                      <path d="M21 11.5a8.38 8.38 0 01-.9 3.8 8.5 8.5 0 01-7.6 4.7 8.38 8.38 0 01-3.8-.9L3 21l1.9-5.7a8.38 8.38 0 01-.9-3.8 8.5 8.5 0 014.7-7.6 8.38 8.38 0 013.8-.9h.5a8.48 8.48 0 018 8v.5z"></path>
+                    </svg>6
+                  </span>
+                </div>
+                <a class="inline-flex items-center">
+                  <img alt="blog" src="https://dummyimage.com/104x104" class="w-12 h-12 rounded-full flex-shrink-0 object-cover object-center">
+                  <span class="flex-grow flex flex-col pl-4">
+                    <span class="title-font font-medium text-white">Holden Caulfield</span>
+                    <span class="text-gray-500 text-xs tracking-widest mt-0.5">UI DEVELOPER</span>
+                  </span>
+                </a>
+              </div>
+              
+              
+              <div class="p-12 md:w-1/2 flex flex-col items-start">
+                <span class="inline-block py-1 px-2 rounded bg-gray-800 text-gray-400 text-opacity-75 text-xs font-medium tracking-widest">CATEGORY</span>
+                <h2 class="sm:text-3xl text-2xl title-font font-medium text-white mt-4 mb-4">Pinterest DIY dreamcatcher gentrify single-origin coffee</h2>
+                <p class="leading-relaxed mb-8">Live-edge letterpress cliche, salvia fanny pack humblebrag narwhal portland. VHS man braid palo santo hoodie brunch trust fund. Bitters hashtag waistcoat fashion axe chia unicorn. Plaid fixie chambray 90's, slow-carb etsy tumeric.</p>
+                <div class="flex items-center flex-wrap pb-4 mb-4 border-b-2 border-gray-800 border-opacity-75 mt-auto w-full">
+                  <a class="text-blue-400 inline-flex items-center">Learn More
+                    <svg class="w-4 h-4 ml-2" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round">
+                      <path d="M5 12h14"></path>
+                      <path d="M12 5l7 7-7 7"></path>
+                    </svg>
+                  </a>
+                  <span class="text-gray-500 mr-3 inline-flex items-center ml-auto leading-none text-sm pr-3 py-1 border-r-2 border-gray-800">
+                    <svg class="w-4 h-4 mr-1" stroke="currentColor" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round" viewBox="0 0 24 24">
+                      <path d="M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z"></path>
+                      <circle cx="12" cy="12" r="3"></circle>
+                    </svg>1.2K
+                  </span>
+                  <span class="text-gray-500 inline-flex items-center leading-none text-sm">
+                    <svg class="w-4 h-4 mr-1" stroke="currentColor" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round" viewBox="0 0 24 24">
+                      <path d="M21 11.5a8.38 8.38 0 01-.9 3.8 8.5 8.5 0 01-7.6 4.7 8.38 8.38 0 01-3.8-.9L3 21l1.9-5.7a8.38 8.38 0 01-.9-3.8 8.5 8.5 0 014.7-7.6 8.38 8.38 0 013.8-.9h.5a8.48 8.48 0 018 8v.5z"></path>
+                    </svg>6
+                  </span>
+                </div>
+                <a class="inline-flex items-center">
+                  <img alt="blog" src="https://dummyimage.com/103x103" class="w-12 h-12 rounded-full flex-shrink-0 object-cover object-center">
+                  <span class="flex-grow flex flex-col pl-4">
+                    <span class="title-font font-medium text-white">Alper Kamu</span>
+                    <span class="text-gray-500 text-xs tracking-widest mt-0.5">DESIGNER</span>
+                  </span>
+                </a>
+              </div>
+            </div>
+          </div>
+        </section>
+      </div>
+    </section>
+</template>
+
+<script>
+export default {
+    name: "WorkComponent",
+};
+</script>
+
+<style>
+</style>
\ No newline at end of file
diff --git a/src/views/Work.vue b/src/views/Work.vue
index d56a0b2..ef8f37e 100644
--- a/src/views/Work.vue
+++ b/src/views/Work.vue
@@ -1,6 +1,9 @@
 <template>
     <section class="text-gray-400 bg-gray-900 body-font overflow-hidden">
       <div class="container px-5 py-24 mx-auto">
+        <h1 class="sm:text-3xl text-2xl font-medium title-font mb-4 text-white">
+          My Work
+        </h1>
           <p>Check out some of my projects! I'm not yet done setting up each project on my VPS yet, so not every project is hosted.</p>
           <br>