jslightham/old-personal-website
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

blog

Browse Source
This commit is contained in:
Johnathon Slightham
2022-07-04 01:06:34 -04:00
parent 73701dac71
commit a08829b9a7
5 changed files with 138 additions and 3 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
public/index.html
View File

@@ -9,7 +9,7 @@
<style>
html {
background: #111827;
overflow-y: scroll;
}
</style>
</head>

8
src/App.vue
View File

@@ -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

6
src/router/index.js
View File

@@ -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({

122
src/views/Blog.vue Normal file
View File

@@ -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>

3
src/views/Work.vue
View File

@@ -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>