add case study images, revise about description and update section ti…

…tle & footer button

components/AboutDescription.vue

@@ -9,8 +9,8 @@
     I have been developing for 8+ years using my knowledge, research and diverse experience to help clients achieve their goals. 
   </p>
   <p class="text-lg py-2">
-    In my personal life I have two cats and an interest in the arts, cooking, media production and technology.
-    I enjoy playing instruments, video games, nature, staying fit, mountain biking or skateboarding, reading and watching shows or documentaries.
+    In my personal life I have two cats and an interest in the arts, media production and technology.
+    I enjoy playing instruments, video games, nature, cooking, staying fit, mountain biking or skateboarding, reading and watching shows or documentaries.
   </p>
   <p class="text-lg font-bold pt-2">
     I am currently seeking any long-term/permanent for hire opportunities and open to temporary contracts or freelance projects.

components/Site/SiteFooter.vue

@@ -6,7 +6,8 @@
       <a href="https://streamelements.com/brandonwinger-air/tip" target="_blank" class="justify-self-center">
         <button 
           type="button" 
-          class="w-42 h-10 text-white bg-sky-600 hover:bg-sky-700 focus:outline-none focus:ring-4 focus:ring-sky-300 font-semibold rounded-md text-sm px-5 py-1 dark:bg-sky-100 dark:hover:bg-sky-200 dark:focus:ring-sky-200 dark:border-sky-200 opacity-90 border-neutral-400 mb-5 sm:mb-0 ml-1 lg:ml-0"
+          id="contribute-btn"
+          class="w-42 h-10 text-white bg-sky-600 hover:bg-sky-700 focus:outline-none focus:ring-4 focus:ring-sky-300 font-semibold rounded-md text-sm px-5 py-1 dark:bg-sky-100 dark:hover:bg-sky-200 dark:focus:ring-sky-200 dark:border-sky-200 opacity-90 border-sky-300 mb-5 sm:mb-0 ml-1 lg:ml-0"
         >
           Support future development <Icon name="uil:coffee" size="1.5rem" class="text-neutral-400 hover:text-neutral-300"/>
         </button>
@@ -26,4 +27,10 @@ const links = [
   { name: 'Github', href: 'https://github.com/BrandonWingerAir', icon: 'uil:github' },
   { name: 'LinkedIn', href: 'https://www.linkedin.com/in/bwingerair/', icon: 'uil:linkedin' }
 ]
-</script>
+</script>
+
+<style>
+#contribute-btn {
+  border-width: 1px;
+}
+</style>

content/studies/nuxt-tailwind-graphql.md

@@ -1,16 +1,18 @@
 ---
-title: Nuxt 3 + Tailwind CSS + GraphQL
+title: Nuxt 3 + Tailwind CSS + GraphQL & Server Deployment
 description: Redesign of a Blog & Portfolio website, based on a tutorial series by Dan Vega with custom features added. 
 date: 2024-01-01
-cover: tutorial-blog-screenshot.png
+cover: responsive-thumbnail-blog-portfolio.png
 tags:
   - case study
 ---
 
-<h2 class="text-3xl font-bold mb-4">
-  Project - Blog & Portolio Site
+<h2 class="text-3xl font-semibold mb-9">
+  Project - Design and Development - Blog & Portolio Site
 </h2>
 
+<img src="/images/studies/responsive-thumbnail-blog-portfolio.png" alt="" class="mb-6"/>
+
 <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>
@@ -44,4 +46,17 @@ tags:
 
 <h3 class="text-center">
   Tutorial published by <a href="https://www.youtube.com/playlist?list=PL4cUxeGkcC9gqdtrsPXR3K7nJhvYugyni" target="_blank" class="font-bold hover:underline">Net Ninja</a>
-</h3>
+</h3>
+
+<hr class="w-1/2 mx-auto mt-9 mb-8">
+
+<h4 class="text-xl text-center">
+  <a 
+    href="https://github.com/BrandonWingerAir/portfolio-nuxt-tailwind-graphql" 
+    aria-label="Dan Vega on YouTube"
+    target="_blank"
+    class="text-white"
+  >
+    <span class="font-semibold">Code files</span> on <span class="font-semibold">Github</span> <Icon name="uil:github" size="1.1rem"/>
+  </a>
+</h4>

pages/studies/[...slug].vue

@@ -10,7 +10,7 @@
   <section class="w-full transparent-bg-dark p-8 text-white">
     <main>
       <h2 class="text-2xl md:text-3xl font-semibold border-b-2 inline-block mb-8 pb-7">
-        {{ data.title }}
+        Case Study <span class="font-thin">| {{ data.title }}</span>
       </h2>
       <ContentRenderer :value="data" class="prose prose-invert mb-4 mx-auto max-w-7xl"/>
       <div class="my-8">