feat: add gallery detail page and component

src/content/config.ts

@@ -49,7 +49,21 @@ const projectCollection = defineCollection({
 	}),
 });
 
+const sketchnotesCollection = defineCollection({
+	schema: z.object({
+		title: z.string(),
+		sort: z.number().optional(),
+		images: z.array(
+			z.object({
+				src: z.string(),
+				aspectRatio: z.number(),
+			})
+		),
+	}),
+});
+
 export const collections = {
 	haiku: haikuCollection,
 	projects: projectCollection,
+	sketchnotes: sketchnotesCollection,
 };

src/content/sketchnotes/being-a-good-listener.mdx

@@ -0,0 +1,9 @@
+---
+title: Being a Good Listener
+sort: 100
+images:
+  - src: /assets/images/sketchnotes/being-a-good-listener.jpg
+    aspectRatio: 1.35
+---
+
+Sketchnote of the video [Being A Good Listener](https://youtu.be/-BdbiZcNBXg) by **The School of Life**.

src/content/sketchnotes/better-conversation.mdx

@@ -0,0 +1,9 @@
+---
+title: Better Conversations
+sort: 90
+images:
+  - src: /assets/images/sketchnotes/better-conversation.jpg
+    aspectRatio: 0.75
+---
+
+A Sketchnote I did of the TED Talk **Celeste Headlee** [10 ways to have a better conversation](https://www.ted.com/talks/celeste_headlee_10_ways_to_have_a_better_conversation).

src/content/sketchnotes/bikablo-practice.mdx

@@ -0,0 +1,15 @@
+---
+title: Bikablo Practice
+sort: 80
+images:
+  - src: /assets/images/sketchnotes/bikablo-practice-1.jpg
+    aspectRatio: 0.75
+  - src: /assets/images/sketchnotes/bikablo-practice-2.jpg
+    aspectRatio: 0.75
+  - src: /assets/images/sketchnotes/bikablo-practice-3.jpg
+    aspectRatio: 0.75
+  - src: /assets/images/sketchnotes/bikablo-practice-4.jpg
+    aspectRatio: 0.75
+---
+
+I practiced the vocabulary from the [Bikablo books](https://bikablo.com/en/tools/).

src/content/sketchnotes/how-to-speak-so-that-people-want-to-listen.mdx

@@ -0,0 +1,9 @@
+---
+title: How to Speak So That People Want to Listen
+sort: 70
+images:
+  - src: /assets/images/sketchnotes/how-to-speak.jpg
+    aspectRatio: 0.75
+---
+
+Sketchnote of the TED-Talk [How to speak so that people want to listen](https://www.ted.com/talks/julian_treasure_how_to_speak_so_that_people_want_to_listen#t-185141) by **Julian Treasure**.

src/content/sketchnotes/random-sketches.mdx

@@ -0,0 +1,23 @@
+---
+title: Random Sketches
+sort: 60
+images:
+  - src: /assets/images/sketchnotes/random-sketches-1.jpg
+    aspectRatio: 0.75
+  - src: /assets/images/sketchnotes/random-sketches-2.jpg
+    aspectRatio: 0.75
+  - src: /assets/images/sketchnotes/random-sketches-3.jpg
+    aspectRatio: 0.75
+  - src: /assets/images/sketchnotes/random-sketches-4.jpg
+    aspectRatio: 0.75
+  - src: /assets/images/sketchnotes/random-sketches-5.jpg
+    aspectRatio: 0.75
+  - src: /assets/images/sketchnotes/random-sketches-6.jpg
+    aspectRatio: 0.75
+  - src: /assets/images/sketchnotes/random-sketches-7.jpg
+    aspectRatio: 0.75
+  - src: /assets/images/sketchnotes/random-sketches-8.jpg
+    aspectRatio: 0.75
+---
+
+A collection of random sketches where I tried different visuals and lettering styles.

src/content/sketchnotes/self-actualization-vs-self-image-actualization.mdx

@@ -0,0 +1,9 @@
+---
+title: Self-Actualization vs. Self-Image Actualization
+sort: 50
+images:
+  - src: /assets/images/sketchnotes/self-actualization.jpg
+    aspectRatio: 1.35
+---
+
+**Bruce Lee** on the difference between **Self-Actualization** and **Self-Image Actualization**. Most people pursue only the first and never find their true selves.

src/content/sketchnotes/the-art-of-enough.mdx

@@ -0,0 +1,9 @@
+---
+title: The Art of Enough
+sort: 40
+images:
+  - src: /assets/images/sketchnotes/the-art-of-enough.jpg
+    aspectRatio: 0.75
+---
+
+Sketchnote for the article [The Art of Enough](https://experiencelife.com/article/the-art-of-enough/), about consumption, spending mindful, and buying quality.

src/content/sketchnotes/the-wim-hof-method.mdx

@@ -0,0 +1,9 @@
+---
+title: The Wim Hof Method
+sort: 10
+images:
+  - src: /assets/images/sketchnotes/wim-hof-method.jpg
+    aspectRatio: 0.75
+---
+
+Sketchnote of the **Wim Hof Method**. A breathing technique, which allowed him to hold 26 world records of the extreme kind: Walking on Mount Everest in shorts, buried in ice for hours.

src/content/sketchnotes/this-is-water.mdx

@@ -0,0 +1,11 @@
+---
+title: This is Water
+sort: 110
+images:
+  - src: /assets/images/sketchnotes/this-is-water-1.jpg
+    aspectRatio: 1.35
+  - src: /assets/images/sketchnotes/this-is-water-2.jpg
+    aspectRatio: 0.70
+---
+
+I always wanted to do a Sketchnote for the Commencement Speech **This Is Water** to Kenyon College class of 2005 by the late **David Foster Wallace**.

src/content/sketchnotes/title-lettering.mdx

@@ -0,0 +1,9 @@
+---
+title: Title Lettering
+sort: 30
+images:
+  - src: /assets/images/sketchnotes/title-lettering.jpg
+    aspectRatio: 1.35
+---
+
+Title lettering in one of my Sketchnote books.

src/content/sketchnotes/weight-idea.mdx

@@ -0,0 +1,9 @@
+---
+title: Weight Idea
+sort: 20
+images:
+  - src: /assets/images/sketchnotes/weight-idea.jpg
+    aspectRatio: 1.35
+---
+
+Some ideas I had about how to visualize weights for my training diary.