From 6b9b394bf79b69e5fa19ba947babb037e8401f4a Mon Sep 17 00:00:00 2001
From: Brandon Winger-Air <brandonwinger-air@outlook.com>
Date: Thu, 28 Dec 2023 02:25:23 -0500
Subject: [PATCH] create footer button, format component file and update readme

---
 README.md                      | 13 ++++++-------
 components/EstimateLinkBtn.vue | 11 +++++++++--
 components/Site/SiteFooter.vue | 17 +++++++++++++----
 3 files changed, 28 insertions(+), 13 deletions(-)

diff --git a/README.md b/README.md
index ba500aa..42edcac 100644
--- a/README.md
+++ b/README.md
@@ -28,7 +28,10 @@ Redesign based on a [tutorial series](https://www.youtube.com/playlist?list=PL4c
 
 ```Dotenv
 # GitHub API for Projects page
-GH_TOKEN=YOUR_PERSONAL_ACCESS_TOKEN
+GH_TOKEN=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
+
+# Optional: Enable search engine crawl & index
+# SEO_ENV=production
 
 # Optional: Set port if required
 # PORT=3000
@@ -37,13 +40,9 @@ GH_TOKEN=YOUR_PERSONAL_ACCESS_TOKEN
 # NUXT_APP_BASE_URL='/portfolio-nuxt-tailwind-graphql'
 ```
 
-### How to enable SEO (nuxt.config.ts)
-
-```js
-site: { indexable: true },
-```
+### SEO Configuration (nuxt.config.ts)
 
-Check out the [module documentation](https://nuxtseo.com/robots/getting-started/installation) for more information.
+Check out the [robots module documentation](https://nuxtseo.com/robots/getting-started/installation) for more information.
 
 ### Make sure to install the dependencies
 
diff --git a/components/EstimateLinkBtn.vue b/components/EstimateLinkBtn.vue
index a32b3f9..27cd756 100644
--- a/components/EstimateLinkBtn.vue
+++ b/components/EstimateLinkBtn.vue
@@ -1,6 +1,13 @@
 <template>
-  <a href="https://brandonwinger-air.com/web-project-calculator/" target="_blank" class="hidden md:block justify-self-end mt-12">
-    <button type="button" class="w-42 h-14 text-gray-900 bg-gray-100 hover:bg-gray-200 focus:outline-none focus:ring-4 focus:ring-gray-300 font-medium rounded-md text-sm px-5 py-1 me-2 mb-2 dark:bg-gray-800 dark:hover:bg-gray-700 dark:focus:ring-gray-700 dark:border-gray-700 opacity-90 border-neutral-800">
+  <a 
+    href="https://brandonwinger-air.com/web-project-calculator/" 
+    target="_blank" 
+    class="hidden md:block justify-self-end mt-12"
+  >
+    <button 
+      type="button" 
+      class="w-42 h-14 text-gray-900 bg-gray-100 hover:bg-gray-200 focus:outline-none focus:ring-4 focus:ring-gray-300 font-medium rounded-md text-sm px-5 py-1 me-2 mb-2 dark:bg-gray-800 dark:hover:bg-gray-700 dark:focus:ring-gray-700 dark:border-gray-700 opacity-90 border-neutral-800"
+    >
       <Icon name="uil:calculator" size="1.5rem" class="text-cyan-600 mr-1"/> Time & Cost Estimate Calculator
     </button>
   </a>
diff --git a/components/Site/SiteFooter.vue b/components/Site/SiteFooter.vue
index d18116b..f875ccf 100644
--- a/components/Site/SiteFooter.vue
+++ b/components/Site/SiteFooter.vue
@@ -1,10 +1,19 @@
 <template>
   <footer class="bg-gray-800">
-    <section class="h-16 mx-auto max-w-7xl px-2 sm:px-4 lg:py-6 text-gray-300 flex flex-row items-center">
-      <p class="flex-1 ml-1">&copy; Brandon Winger-Air | 2023.</p>
+    <section class="h-40 md:h-24 lg:h-17 mx-auto max-w-7xl px-2 sm:px-4 lg:py-6 text-gray-300 flex flex-row items-center grid md:grid-cols-3 grid-rows-2 md:grid-rows-1">
+      <p class="ml-2 lg:ml-3 justify-self-center md:justify-self-start">&copy; Brandon Winger-Air | 2023.</p>
 
-      <div class="flex flex-row justify-center gap-4 mr-2">
-        <a v-for="link in links" :key="link.name" :href="link.href">
+      <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-emerald-600 hover:bg-emerald-700 focus:outline-none focus:ring-4 focus:ring-emerald-300 font-semibold rounded-md text-sm px-5 py-1 dark:bg-emerald-100 dark:hover:bg-emerald-200 dark:focus:ring-emerald-200 dark:border-emerald-200 opacity-90 border-neutral-400 mb-5 sm:mb-0 ml-1 lg:ml-0"
+        >
+          Support future development <Icon name="uil:coffee" size="1.5rem" class="text-amber-900 hover:text-amber-400"/>
+        </button>
+      </a>
+
+      <div class="justify-self-center md:justify-self-end flex flex-row justify-center gap-4 mr-5 mb-4 sm:mb-0">
+        <a v-for="link in links" :key="link.name" :href="link.href" target="_blank">
           <Icon :name="link.icon" size="1.5rem" class="text-gray-300"/>
         </a>
       </div>