refactor: update landing to use markdown content

assets/css/main.css

@@ -25,3 +25,13 @@
 .page-leave-active {
 	opacity: 0;
 }
+
+a:not([href]) {
+	opacity: 0.5;
+	pointer-events: none;
+}
+
+p + p,
+p + blockquote {
+	@apply mt-4;
+}

components/StaticMarkdownRenderer.server.ts

@@ -0,0 +1,18 @@
+import { h } from 'vue'
+import { ContentRendererMarkdown } from '#components'
+
+export default defineComponent({
+	// eslint-disable-next-line vue/require-default-prop
+	props: { path: String },
+	async setup(props) {
+		if (process.dev) {
+			const { data } = await useAsyncData(() =>
+				queryContent(props.path!).findOne()
+			)
+			return () => h(ContentRendererMarkdown, { value: data.value! })
+		}
+		// eslint-disable-next-line vue/no-setup-props-destructure
+		const value = await queryContent(props.path!).findOne()
+		return () => h(ContentRendererMarkdown, { value })
+	},
+})

components/content/ProseA.vue

@@ -0,0 +1,22 @@
+<script setup lang="ts">
+defineProps({
+	href: {
+		type: String,
+		default: '',
+	},
+	target: {
+		type: String,
+		default: undefined,
+		required: false,
+	},
+})
+</script>
+<template>
+	<NuxtLink
+		:href="href"
+		:target="target"
+		class="hover:underline text-zinc-950 font-firasans font-medium dark:text-white"
+	>
+		<slot />
+	</NuxtLink>
+</template>

content/about.md

@@ -0,0 +1,23 @@
+---
+title: About
+description: Fractional CTO | Passionate Open Source Enthusiast | Vue.js & Nuxt Fullstack Developer | Mentor | Technical Writer
+---
+
+He founded Actif, an Age-tech SaaS startup and continues contributing to the European developer community.
+
+He is a passionate open-source enthusiast and a Vue.js & Nuxt full-stack developer. He is also a mentor and technical writer.
+
+He aims to craft solid and scalable digital products while helping others find their passion for coding. He is all about combining innovative development and critical thinking to make ideas a reality.
+
+His passion lies in curiosity by envisioning ideas and turning them into reality. You can find his [complete projects list here](/projects).
+
+He is deeply involved in the vibrant open-source community by contributing to [Nuxt-validate](https://github.com/lewyuburi/nuxt-validate), [@nuxtjs/eslint-module](https://github.com/nuxt-modules/eslint), [@nuxtjs/google-fonts](https://github.com/nuxt-modules/google-fonts) and more.
+
+These projects span various domains, from input validation and full-stack applications to Azure AI certification resources and Nuxt.js modules. I actively contribute to these projects and continue to maintain and improve them.
+
+Let's Collaborate:
+He is your person if you're looking for a skilled Vue.js developer to build responsive and user-friendly interfaces for your web applications. My focus on clean, high-quality, well-documented code ensures I deliver scalable applications on time and within budget.
+
+He is available for freelance projects, mentorship opportunities, and technical writing engagements. Let's work together to bring your project to life and make a lasting impact.
+
+When I'm not coding, I indulge in music. I play the drum 🥁 and guitar 🎸, fueling my creativity and inspiring my development journey. I also enjoy photography and thrills, seeking inspiration from the world around me.

content/index.md

@@ -0,0 +1,18 @@
+---
+title: Dami Sparks
+description: Fractional CTO | Passionate Open Source Enthusiast | Vue.js & Nuxt Fullstack Developer | Mentor | Technical Writer
+---
+
+He founded [Actif](https://www.actif.online/), an Age-tech SaaS startup and continues contributing to the European developer community.
+
+He aims to craft solid and scalable digital products while helping others find their passion for coding. He is all about combining innovative development and critical thinking to make ideas a reality.
+
+His passion lies in curiosity by envisioning ideas and turning them into reality. You can find my [complete projects list here](/projects) including [@nuxtjs/eslint-module](https://github.com/nuxt-modules/eslint), [@nuxtjs/google-fonts](https://github.com/nuxt-modules/google-fonts).
+
+Read more 👉🏾[About me](/about)
+
+When I'm not coding, I indulge in music. I play the drum 🥁 and guitar 🎸, fueling my creativity and inspiring my development journey. I also enjoy playing tennis and dancing, seeking inspiration from the world around me.
+
+Suppose you like my work or you're looking for a [Vue.js](https://vuejs.org) developer to work on your project. In that case, He is available for freelance projects, mentorship opportunities, and technical writing engagements. Let's work together to bring your project to life and make a lasting impact.
+
+Find him on his socials.

nuxt.config.ts

@@ -1,3 +1,4 @@
+import { useNuxt } from '@nuxt/kit'
 // https://nuxt.com/docs/api/configuration/nuxt-config
 export default defineNuxtConfig({
 	// https://content.nuxtjs.org/guide/recipes/sitemap
@@ -6,6 +7,21 @@ export default defineNuxtConfig({
 			routes: ['/sitemap.xml'],
 		},
 	},
+	// https://nuxt.com/docs/guide/going-further/hooks
+	hooks: {
+		'components:extend': components => {
+			/**
+			 * @description This code ensures that we can run our markdown renderer on the client side in development mode (for HMR).
+			 * @see https://github.com/danielroe/roe.dev/blob/main/nuxt.config.ts
+			 */
+			const nuxt = useNuxt()
+			for (const comp of components) {
+				if (comp.pascalName === 'StaticMarkdownRenderer' && nuxt.options.dev) {
+					comp.mode = 'all'
+				}
+			}
+		},
+	},
 	app: {
 		head: {
 			htmlAttrs: { lang: 'en' },
@@ -54,7 +70,7 @@ export default defineNuxtConfig({
 					href: 'https://fonts.gstatic.com',
 				},
 				{
-					href: 'https://fonts.googleapis.com/css2?Montserrat:ital,wght@0,300;0,400;0,500;0,600;0,700;1,400;1,500;1,600;1,700&family=Fira+Sans:ital,wght@0,100;0,400;0,600;0,700;1,400&display=swap',
+					href: 'https://fonts.googleapis.com/css2?Montserrat:ital,wght@0,300;0,400;0,500;0,600;0,700;1,400;1,500;1,600;1,700&family=Fira+Sans:ital,wght@0,100;0,400;0,500;0,600;0,700;1,400&display=swap',
 					rel: 'stylesheet',
 				},
 			],

package.json

@@ -45,6 +45,7 @@
 	},
 	"dependencies": {
 		"@headlessui/vue": "1.7.14",
+		"@nuxt/kit": "3.6.5",
 		"@tailwindcss/aspect-ratio": "0.4.2",
 		"@tailwindcss/forms": "0.5.3"
 	}

pages/index.vue

@@ -1,185 +1,13 @@
-<script lang="ts" setup>
-import { projectSpotlight as spotlights } from '@/constants'
-const me = ref({
-	name: 'Dami',
-	shortDescription: `I'm a digital freelance full-stack developer, mentor and technical writer passionate about crafting solid and scalable digital products and helping others find their passion for coding. I'm all about combining innovative development and product thinking to bring ideas into reality.`,
-	title: 'Freelance Vue.js Fullstack Developer for Hire',
-	role: 'Vue.js Fullstack Software Developer | Mentor | Digital Freelancer',
-	wantCriteria: [
-		'A skilled Vue.js developer to build responsive and user-friendly interfaces for your web applications',
-		'Expertise in integrating Vue.js with RESTful APIs and deploying on cloud platforms like AWS, Azure and Google Cloud',
-		'A reliable and experienced freelance developer who can deliver scalable applications timely within the budget for clients across various industries',
-		'A developer who focuses on clean, high-quality and well-documented code',
-	],
-	specialisation: `I specialise in frontend and backend development, testing, data science, and cloud computing. So let's work together to bring your project to life.`,
-})
-</script>
-
 <template>
 	<NuxtLayout>
-		<div class="sm:py-24 sm:px-6 lg:px-8">
-			<header class="mt-8">
-				<div class="mx-auto max-w-2xl lg:max-w-5xl">
-					<h1
-						class="text-4xl font-normal tracking-tight text-zinc-800 dark:text-zinc-100 sm:text-5xl"
-					>
-						{{ me.title }}
-					</h1>
-				</div>
+		<div class="py-4 sm:py-8 lg:px-8">
+			<header class="leading-none mb-[1vw]">
+				<AppTitle>Dami Sparks Omifare</AppTitle>
 			</header>
-
-			<section class="space-y-7 pt-8 lg:pt-16 mx-auto max-w-2xl lg:max-w-5xl">
-				<div>
-					<span
-						class="font-montserrat leading-tight text-3xl md:text-4xl lg:text-5xl text-zinc-600 dark:text-zinc-400 text-left"
-					>
-						Do you need:
-					</span>
-				</div>
-				<div>
-					<ul class="text-left space-y-7">
-						<li
-							v-for="(cr, idx) in me.wantCriteria"
-							:key="`wantcriteria-${idx}`"
-						>
-							<span
-								class="font-firasans text-base font-normal text-zinc-600 dark:text-zinc-400 tracking-tight"
-							>
-								<Icon
-									name="fluent:checkmark-circle-24-filled"
-									class="h-6 w-6 text-ds-teal"
-									aria-hidden="true"
-								/>
-								{{ cr }}
-							</span>
-						</li>
-					</ul>
-				</div>
-			</section>
-			<section>
-				<hr class="my-10 h-px border-0 bg-zinc-200 dark:bg-zinc-300" />
-
-				<div class="flex flex-col gap-10 pt-12 sm:flex-row">
-					<NuxtImg
-						loading="lazy"
-						class="aspect-[4/5] w-56 flex-none rounded-2xl object-cover"
-						provider="cloudinary"
-						src="/damisparks.com/ds-portrait-tiny.webp"
-						height="800"
-						width="800"
-						format="webp"
-						alt="dami sparks omifare"
-					/>
-					<div class="max-w-xl flex-auto">
-						<h3
-							class="text-lg font-firasans font-semibold leading-8 tracking-tight text-zinc-800 dark:text-zinc-100"
-						>
-							<NuxtLink :to="{ name: 'about' }" class="underline">
-								I am {{ me.name }}
-							</NuxtLink>
-						</h3>
-						<p class="text-base leading-7 text-zinc-600 dark:text-zinc-400">
-							{{ me.role }}
-						</p>
-						<p
-							class="mt-6 text-base leading-7 text-zinc-600 dark:text-zinc-400"
-						>
-							{{ me.specialisation }}
-						</p>
-						<div role="list" class="mt-6 flex gap-x-6">
-							<AppSocials />
-						</div>
-					</div>
-				</div>
-				<div class="mt-16 sm:max-w-xl sm:mx-auto text-center">
-					<NuxtLink
-						:to="{ name: 'contact' }"
-						class="btn btn-ds-blue font-firasans font-semibold w-full block"
-					>
-						<Icon name="fa6-solid:laptop-code" class="h-6 w-5 mr-3" />
-						<span>Hire me</span>
-					</NuxtLink>
-				</div>
-			</section>
-
-			<hr class="my-10 h-px border-0 bg-zinc-200 dark:bg-zinc-300" />
-			<section>
-				<p
-					class="uppercase text-xl sm:text-2xl md:text-3xl tracking-widest font-light text-zinc-800 dark:text-ds-orange my-6"
-				>
-					project spotlights
-				</p>
-
-				<ProjectSpotlightAccordion
-					v-for="(spot, idx) in spotlights"
-					:key="`spotlights-${idx}`"
-					class="my-6"
-				>
-					<template #header>
-						<span class="text-sm sm:text-base max-w-xs">
-							{{ spot.description }}
-						</span>
-					</template>
-					<template #content>
-						<div>
-							<NuxtLink
-								class="text-zinc-600 dark:text-zinc-400"
-								:to="spot.client.website"
-								target="_blank"
-							>
-								<span class="font-bold mr-2">Client:</span>
-								<span
-									class="hover:underline hover:dark:text-ds-orange-darker hover:text-ds-teal"
-								>
-									<Icon name="heroicons:link-20-solid" class="h-5 w-5" />
-									{{ spot.client.name }}
-								</span>
-							</NuxtLink>
-							<div class="mt-3">
-								<p
-									class="text-base text-zinc-800 dark:text-zinc-100 font-semibold capitalize"
-								>
-									main contributions:
-								</p>
-								<ul
-									class="list-disc list-inside text-sm text-zinc-600 dark:text-zinc-400"
-								>
-									<li
-										v-for="(ct, cIdx) in spot.contributions"
-										:key="`contributions-${cIdx}`"
-										class="py-2"
-									>
-										{{ ct }}
-									</li>
-								</ul>
-							</div>
-							<div class="mt-3">
-								<p
-									class="text-base text-zinc-800 dark:text-zinc-100 font-semibold capitalize mb-1"
-								>
-									tech stack:
-								</p>
-								<ul class="flex flex-wrap gap-2">
-									<li
-										v-for="(st, sIdx) in spot.techStack"
-										:key="`techStack-${sIdx}`"
-									>
-										<span
-											class="inline-flex items-center gap-x-1.5 rounded-md px-2 py-1 text-xs bg-indigo-100 dark:bg-ds-blue-accent-200 text-ds-blue font-firasans"
-										>
-											<Icon
-												name="fluent:circle-16-filled"
-												class="h-2 w-2 fill-ds-blue-accent-500"
-											/>
-											{{ st }}
-										</span>
-									</li>
-								</ul>
-							</div>
-						</div>
-					</template>
-				</ProjectSpotlightAccordion>
-			</section>
+			<main class="text-zinc-600 dark:text-zinc-300">
+				<hr class="my-4 h-px border-0 bg-zinc-200 dark:bg-zinc-300" />
+				<StaticMarkdownRenderer path="/" />
+			</main>
 		</div>
 	</NuxtLayout>
 </template>