fix page titles & spacing, blog & case studies pages and update article

BrandonWingerAir · Dec 29, 2023 · dafc717 · dafc717
1 parent 8601de0
commit dafc717
Show file tree

Hide file tree

Showing 7 changed files with 60 additions and 41 deletions.
diff --git a/content/blog/hello-world.md b/content/blog/hello-world.md
@@ -8,15 +8,15 @@ tags:
   - demo
 ---
 
-# Hello, World 👋🏻
+# This is a heading size 1 👋🏻
 
 This is a paragraph.
 
 This is another paragraph.
 
 ![Randomized Placeholder](/images/blog/nasa-Q1p7bh3SHj8-unsplash.jpg)
 
-## This is a heading 2
+## This is a heading size 2
 
 You can use lists
 
@@ -39,6 +39,8 @@ You can use links
 
 [This is a link](https://github.com/BrandonWingerAir)
 
+### This is a heading size 3
+
 You can use tables
 
 | Column 1 | Column 2 |

diff --git a/pages/about.vue b/pages/about.vue
@@ -1,5 +1,5 @@
 <template>
-  <section class="grid md:grid-cols-2">
+  <section class="grid md:grid-cols-2 mb-4">
     <h1 class="text-3xl md:text-5xl mt-10 mt-14 mb-4">
       🖱️ Website Dev /
       <span class="font-semibold">About</span>
@@ -8,7 +8,7 @@
     <SiteTagline/>
   </section>
 
-  <section class="flex flex-col md:flex-row transparent-bg-gray text-neutral-200 mt-4 md:mb-12">
+  <section class="flex flex-col md:flex-row transparent-bg-gray text-neutral-200 md:mb-12">
     <div class="order-last md:order-first md:w-3/4 pt-0 md:pt-8 p-8 md:pr-2">
       <div class="flex justify-between">
         <h2 class="w-full text-2xl md:text-4xl font-thin text-center md:text-left mb-1">

diff --git a/pages/blog/[...slug].vue b/pages/blog/[...slug].vue
@@ -1,17 +1,18 @@
 <template>
-  <h1 class="text-3xl md:text-5xl mt-10 mt-14 mb-6">
-    🖱️ Website Dev /
-    <span class="font-semibold">Blog</span>
-  </h1>
-  <SiteTagline/>
+  <section class="mb-6">
+    <h1 class="text-3xl md:text-5xl mt-10 md:mt-14 mb-6">
+      🖱️ Website Dev /
+      <span class="font-semibold">Blog</span>
+    </h1>
+    <SiteTagline/>
+  </section>
 
-  <section class="w-full transparent-bg-dark mt-8 p-8 text-white">
+  <section class="w-full transparent-bg-dark p-8 text-white">
     <main>
-      <p class="text-lg mb-5">
-        Under Construction 🚧
-      </p>
-      <hr class="w-48">
-      <ContentRenderer :value="data" class="prose prose-invert my-4 mx-auto max-w-7xl"/>
+      <h2 class="text-2xl md:text-3xl mb-6 font-semibold border-b-2 inline-block pb-7">
+        {{ data.title }} | Demo Article 🚧
+      </h2>
+      <ContentRenderer :value="data" class="prose prose-invert mb-4 mx-auto max-w-7xl"/>
       <div class="my-8">
         <!-- TODO: Create Tags Page -->
         <!-- <a 

diff --git a/pages/blog/index.vue b/pages/blog/index.vue
@@ -1,12 +1,16 @@
 <template>
-  <h1 class="text-3xl md:text-5xl mt-10 mt-14 mb-6">
-    🖱️ Website Dev /
-    <span class="font-semibold">Blog</span>
-  </h1>
-  <SiteTagline/>
+  <section class="mb-6">
+    <h1 class="text-3xl md:text-5xl mt-10 md:mt-14 mb-6">
+      🖱️ Website Dev /
+      <span class="font-semibold">Blog</span>
+    </h1>
+    <SiteTagline/>
+  </section>
 
-  <section class="transparent-bg mt-8 p-8">
-    <h1 class="text-3xl mb-8">Blog Posts</h1>
+  <section class="transparent-bg p-8">
+    <h2 class="text-2xl md:text-3xl mb-6 font-semibold">
+      Blog Posts
+    </h2>
     <hr class="w-36 mb-8">
     <BlogPosts :posts="posts"/>
   </section>

diff --git a/pages/case-studies.vue b/pages/case-studies.vue
@@ -1,25 +1,35 @@
 <template>
-  <h1 class="text-3xl md:text-5xl mt-10 mt-14 mb-6">
-    🖱️ Website Dev /
-    <span class="font-semibold">Case Studies</span>
-  </h1>
-  <SiteTagline/>
+  <section class="mb-6">
+    <h1 class="text-3xl md:text-5xl mt-10 mt-14 mb-6">
+      🖱️ Website Dev /
+      <span class="font-semibold">Studies</span>
+    </h1>
+    <SiteTagline/>
+  </section>
+
+  <section class="mb-8 transparent-bg p-8">
+    <h2 class="text-2xl md:text-3xl font-semibold mb-4">
+      Case Studies | Under Construction 🚧
+    </h2>
 
-  <section class="mb-8 transparent-bg p-8 mt-8">
     <p class="text-lg mb-7">
-      Design choices, feature additions and use cases during my work & studies.
+      Design choices, feature additions and use cases during my work and studies.
     </p>
 
-    <hr class="w-1/2">
+    <hr class="w-1/3 mb-5">
+
+    <h2 class="text-3xl font-bold mb-4">
+      Project - Blog & Portolio Site
+    </h2>
 
-    <h2 class="text-2xl font-bold mt-8 mb-2">This website was built with:</h2>
+    <h2 class="text-2xl font-semibold mt-8 mb-2">This website was built with:</h2>
     <ul class="list-disc">
       <li class="ml-8 py-1"><a href="https://nuxt.com" target="_blank">Nuxt 3</a></li>
       <li class="ml-8 py-1"><a href="https://tailwindcss.com" target="_blank">Tailwind CSS</a></li>
       <li class="ml-8 py-1"><a href="https://graphql.org" target="_blank">GraphQL</a></li>
     </ul>
 
-    <h2 class="text-2xl font-bold mt-8 mb-2">Custom Features:</h2>
+    <h2 class="text-2xl font-semibold mt-8 mb-2">Custom Features:</h2>
     <ul class="list-disc">
       <li class="ml-8 py-1">Color scheme, spacing & UI additions</li>
       <li class="ml-8 py-1">Animated gradient background</li>
@@ -29,7 +39,7 @@
       <li class="ml-8 py-1">Responsive styles and graphic design</li>
     </ul>
 
-    <h2 class="text-2xl font-bold mt-8 mb-2">Based on a tutorial series by:</h2>
+    <h2 class="text-2xl font-semibold mt-8 mb-2">Based on a tutorial series by:</h2>
     <button class="rounded-md border-0 bg-red-600 hover:bg-red-600 p-2 pt-1 mt-4 mr-3 mb-7">
       <a 
         href="https://www.youtube.com/playlist?list=PL4cUxeGkcC9gqdtrsPXR3K7nJhvYugyni" 

diff --git a/pages/index.vue b/pages/index.vue
@@ -1,5 +1,5 @@
 <template>
-  <section class="grid md:grid-cols-2">
+  <section class="grid md:grid-cols-2 mb-4">
     <h1 class="text-3xl md:text-5xl mt-10 md:mt-14 mb-4">
       🖱️ Website Dev /
       <span class="font-semibold">Home</span>
@@ -8,10 +8,11 @@
     <SiteTagline/>
   </section>
 
-  <section class="transparent-bg p-8 mt-3 mb-10">
-    <h2 class="text-2xl md:text-3xl font-bold">
-      Latest Blog Posts
+  <section class="transparent-bg p-8 mb-10">
+    <h2 class="text-2xl md:text-3xl font-semibold mb-6">
+      Recent Blog Posts
     </h2>
+    <hr class="w-64 mb-8">
     <BlogPosts :posts="posts"/>
   </section>
 

diff --git a/pages/projects.vue b/pages/projects.vue
@@ -1,5 +1,5 @@
 <template>
-  <section class="grid md:grid-cols-2">
+  <section class="grid md:grid-cols-2 mb-4">
     <h1 class="text-3xl md:text-5xl mt-10 mt-14 mb-4">
       🖱️ Website Dev /
       <span class="font-semibold">Projects</span>
@@ -8,11 +8,12 @@
     <SiteTagline/>
   </section>
 
-  <section class="mb-8 transparent-bg p-8 mt-8">
-    <h2 class="text-3xl font-bold mb-8">
+  <section class="mb-8 transparent-bg p-8">
+    <h2 class="text-2xl md:text-3xl mb-6 font-semibold">
       Recent Projects
     </h2>
-    <hr class="w-56 mb-6">
+    <hr class="w-56 mb-4">
+
     <section class="grid md:grid-cols-2 gap-10">
       <div 
         v-for="project in data?.viewer.repositories.nodes"