Add experience pages

src/content/config.ts

@@ -5,6 +5,10 @@ import { defineCollection } from 'astro:content';
 import { glob } from 'astro/loaders';
 
 // 3. Define your collection(s)
+const experiences = defineCollection({
+    loader: glob({ pattern: "*.md", base: "src/content/experience" })
+})
+
 const projects = defineCollection({
     loader: glob({ pattern: "*.md", base: "src/content/projects" })
 })
@@ -13,4 +17,4 @@ const hobbies = defineCollection({
 })
 
 // 4. Export a single `collections` object to register your collection(s)
-export const collections = { projects, hobbies };
+export const collections = { experiences, projects, hobbies };

src/pages/experience/[id].astro

@@ -0,0 +1,18 @@
+---
+import {getCollection, render} from 'astro:content';
+import BaseLayout from "../../layouts/BaseLayout.astro";
+// 1. Generate a new path for every collection entry
+export async function getStaticPaths() {
+    const experiences = await getCollection('experiences');
+    return experiences.map(experience => ({
+        params: {id: experience.id},
+        props: {project: experience},
+    }));
+}
+// 2. For your template, you can get the entry directly from the prop
+const {experience} = Astro.props;
+const {Content} = await render(experience);
+---
+<BaseLayout title={experience.id}>
+    <Content/>
+</BaseLayout>