Tweaks (#13)

* updated readme

* added about desc

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
 

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' });

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();

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]'),