chore: updated about me section to be an mdx file

Author: ringoldsdev

src/components/ParallaxTextOverlay.astro

@@ -1,7 +1,7 @@
 ---
 // src/components/ParallaxTextOverlay.astro
 export interface Props {
-	text: string;
+	text: string | string[];
 }
 
 const { text } = Astro.props;

src/content.config.ts

@@ -9,7 +9,15 @@ const blog = defineCollection({
 	}),
 });
 
+const me = defineCollection({
+	loader: glob({ pattern: "**/*.{md,mdx}", base: "./src/content/me" }),
+	schema: z.object({
+		skills: z.array(z.string()),
+	}),
+});
+
 // Ensure MDX files are included in the content collection
 export const collections = {
 	blog,
+	me,
 };

src/content/me/about.mdx

@@ -0,0 +1,23 @@
+---
+skills:
+  - Python
+  - Node.js
+  - Typescript
+  - Serverless
+  - PostgreSQL
+  - BigQuery
+  - Github Actions
+  - Terraform
+  - GCP
+  - AWS
+---
+
+I'm <b>Ringolds&nbsp;Leščinskis</b>,
+
+a <b>data engineer</b> architecting <b>serverless data&nbsp;pipelines</b>.
+
+I leverage full-stack experience to build <b>scalable backend systems</b> on solid
+fundamentals (LLM-ready) and develop integrations by <b>reverse engineering</b>
+undocumented&nbsp;APIs.
+
+...and I make mean milk washed cocktails.

src/layouts/BlogLayout.astro

@@ -10,7 +10,7 @@ import "@/styles/global.css";
 
 export interface Props {
 	title: string;
-	backgroundText: string;
+	backgroundText: string | string[];
 }
 const { title, backgroundText } = Astro.props as Props;
 ---

src/pages/index.astro

@@ -2,30 +2,19 @@
 import BlogLayout from "@/layouts/BlogLayout.astro";
 import Tags from "@/components/Tags.astro";
 import Tag from "@/components/Tag.astro";
-import { getCollection } from "astro:content";
+import { getCollection, getEntry } from "astro:content";
 import TagLinkSmall from "@/components/TagLinkSmall.astro";
+import { render } from "astro:content";
 
-// Personal bio and skills
-const bio = [
-	"I'm <b class='font-semibold text-white'>Ringolds&nbsp;Leščinskis</b>,",
+// Fetch about me content
+const about = await getEntry("me", "about");
+const skills = about?.data?.skills ?? [];
 
-	"a <b class='font-semibold text-white'>data engineer</b> architecting  <b class='font-semibold text-white'>serverless data&nbsp;pipelines</b>.",
-	"I leverage full-stack experience to build <b class='font-semibold text-white'>scalable backend systems</b> on solid fundamentals (LLM-ready) and develop integrations by <b class='font-semibold text-white'>reverse engineering</b> undocumented&nbsp;APIs.",
-	"...and I make mean milk washed cocktails.",
-];
+if (!about) {
+	throw new Error("About me content not found");
+}
 
-const skills = [
-	"Python",
-	"Node.js",
-	"Typescript",
-	"Serverless",
-	"PostgreSQL",
-	"BigQuery",
-	"Github Actions",
-	"Terraform",
-	"GCP",
-	"AWS",
-];
+const { Content: AboutMeContent } = await render(about);
 
 // Fetch and sort blog posts by date (descending)
 const posts = (await getCollection("blog")).sort((a, b) => {
@@ -50,14 +39,11 @@ const posts = (await getCollection("blog")).sort((a, b) => {
 <BlogLayout title="Ringolds Leščinskis" backgroundText={skills}>
 	<div slot="hero" class="pb-8 md:text-center text-white">
 		<div class="max-w-screen-md mx-auto mt-10 sm:mt-0 md:px-20">
-			{
-				bio.map((line) => (
-					<p
-						class="text-xl text-gray-200 font-light md:text-2xl mb-4"
-						set:html={line}
-					/>
-				))
-			}
+			<div
+				class="prose prose-invert prose-p:text-xl prose-p:md:text-2xl prose-p:mb-4 prose-p:font-light prose-p:text-gray-200 [&_b]:font-semibold [&_b]:text-white"
+			>
+				<AboutMeContent />
+			</div>
 
 			<Tags class="-ml-4 sm:ml-0 mt-8">
 				{