From 2cdf6f1c198665352e9bb22867d7aedbdee974dd Mon Sep 17 00:00:00 2001
From: Angus Goody <angus.goody@gmail.com>
Date: Thu, 21 Dec 2023 21:29:49 +0000
Subject: [PATCH] Tweaks (#13)

* updated readme

* added about desc
---
 README.md                          |  4 ++--
 components/project/ProjectShow.vue |  3 +--
 pages/about.vue                    | 18 +++++++++++++++++-
 tailwind.config.js                 |  2 +-
 4 files changed, 21 insertions(+), 6 deletions(-)

diff --git a/README.md b/README.md
index f5db2a2..3fd95b8 100644
--- a/README.md
+++ b/README.md
@@ -1,6 +1,6 @@
-# Nuxt 3 Minimal Starter
+# Portfolio 2023
 
-Look at the [Nuxt 3 documentation](https://nuxt.com/docs/getting-started/introduction) to learn more.
+A portfolio site built in [Nuxt.js](https://nuxtjs.org) and [Tailwind CSS](https://tailwindcss.com).
 
 ## Setup
 
diff --git a/components/project/ProjectShow.vue b/components/project/ProjectShow.vue
index d729b09..f8da19f 100644
--- a/components/project/ProjectShow.vue
+++ b/components/project/ProjectShow.vue
@@ -40,7 +40,7 @@
         <div class="mx-auto w-full mt-14 max-w-2xl sm:mt-16 lg:col-span-3 lg:row-span-2 lg:row-end-2 lg:mt-0 lg:max-w-none">
           <div class="flex flex-col-reverse">
             <div class="">
-              <h1 class="text-2xl font-bold tracking-tight sm:text-3xl text-zinc-900 dark:text-zinc-200">{{ project.title }}</h1>
+              <h1 class="text-2xl font-bold tracking-tight sm:text-3xl text-zinc-700 dark:text-zinc-100">{{ project.title }}</h1>
 
               <h2 id="information-heading" class="sr-only">Date created</h2>
               <p class="mt-2 text-sm text-lunar-700 dark:text-lunar-300 dark:opacity-80">
@@ -143,7 +143,6 @@ const props = defineProps({
 })
 
 const {getFullUrl} = useApiData();
-const {jsonToHtml} = useSerialize();
 
 const formatDate = (date: string) => {
   return new Date(date).toLocaleDateString('en-GB', { year: 'numeric', month: 'short' });
diff --git a/pages/about.vue b/pages/about.vue
index 766ce1b..682d1d9 100644
--- a/pages/about.vue
+++ b/pages/about.vue
@@ -3,6 +3,17 @@
       <div v-if="pageData" class="text-center sm:text-left">
         <TitleAndSubtitle :title="pageData.tagline" :subtitle="pageData.subtitle" />
       </div>
+      <!-- About -->
+      <div v-if="aboutData && !aboutError" class="my-10 sm:my-16">
+        <div class="prose prose-polo dark:prose-invert" v-html="aboutData.intro_html">
+
+        </div>
+      </div>
+      <div v-else-if="aboutError">
+        <ErrorState class="text-center">
+          Error fetching about section
+        </ErrorState>
+      </div>
 
       <!-- Setup -->
       <div class="my-20">
@@ -40,11 +51,16 @@ import {FavouriteSection} from "~/types/Favourites";
 import {usePageSetup} from "~/composables/usePageSetup";
 import {useApiData} from "~/composables/useApiData";
 
-const { fetchData} = useApiData();
+const { fetchData, fetchItem} = useApiData();
 const { setupPageHead, fetchPageData } = usePageSetup();
 
+type aboutSection = {
+  intro_html: string;
+}
+
 // Fetch about content
 const { data: allSections, error: error} = await fetchData<FavouriteSection[]>('/favourite-sections');
+const { data: aboutData, error: aboutError} = await fetchItem<aboutSection>('/globals/about');
 
 // Fetch page content
 const {pageData, pageError} = await fetchPageData();
diff --git a/tailwind.config.js b/tailwind.config.js
index 6f26be8..1d29b6d 100644
--- a/tailwind.config.js
+++ b/tailwind.config.js
@@ -75,7 +75,7 @@ export default {
       typography: ({ theme }) => ({
         polo: {
           css: {
-            '--tw-prose-body': theme('colors.zinc[800]'),
+            '--tw-prose-body': theme('colors.zinc[700]'),
             '--tw-prose-headings': theme('colors.evening-sea[900]'),
             '--tw-prose-lead': theme('colors.zinc[700]'),
             '--tw-prose-links': theme('colors.lunar[700]'),