diff --git a/public/assets/images/sketchnotes/being-a-good-listener.jpg b/public/assets/images/sketchnotes/being-a-good-listener.jpg new file mode 100644 index 0000000..0440ec9 Binary files /dev/null and b/public/assets/images/sketchnotes/being-a-good-listener.jpg differ diff --git a/public/assets/images/sketchnotes/better-conversation.jpg b/public/assets/images/sketchnotes/better-conversation.jpg new file mode 100644 index 0000000..12663bb Binary files /dev/null and b/public/assets/images/sketchnotes/better-conversation.jpg differ diff --git a/public/assets/images/sketchnotes/bikablo-practice-1.jpg b/public/assets/images/sketchnotes/bikablo-practice-1.jpg new file mode 100644 index 0000000..dbc430d Binary files /dev/null and b/public/assets/images/sketchnotes/bikablo-practice-1.jpg differ diff --git a/public/assets/images/sketchnotes/bikablo-practice-2.jpg b/public/assets/images/sketchnotes/bikablo-practice-2.jpg new file mode 100644 index 0000000..892e7a8 Binary files /dev/null and b/public/assets/images/sketchnotes/bikablo-practice-2.jpg differ diff --git a/public/assets/images/sketchnotes/bikablo-practice-3.jpg b/public/assets/images/sketchnotes/bikablo-practice-3.jpg new file mode 100644 index 0000000..fcebe8f Binary files /dev/null and b/public/assets/images/sketchnotes/bikablo-practice-3.jpg differ diff --git a/public/assets/images/sketchnotes/bikablo-practice-4.jpg b/public/assets/images/sketchnotes/bikablo-practice-4.jpg new file mode 100644 index 0000000..1473f6e Binary files /dev/null and b/public/assets/images/sketchnotes/bikablo-practice-4.jpg differ diff --git a/public/assets/images/sketchnotes/how-to-speak.jpg b/public/assets/images/sketchnotes/how-to-speak.jpg new file mode 100644 index 0000000..23bda63 Binary files /dev/null and b/public/assets/images/sketchnotes/how-to-speak.jpg differ diff --git a/public/assets/images/sketchnotes/random-sketches-1.jpg b/public/assets/images/sketchnotes/random-sketches-1.jpg new file mode 100644 index 0000000..9786a99 Binary files /dev/null and b/public/assets/images/sketchnotes/random-sketches-1.jpg differ diff --git a/public/assets/images/sketchnotes/random-sketches-2.jpg b/public/assets/images/sketchnotes/random-sketches-2.jpg new file mode 100644 index 0000000..9011fd7 Binary files /dev/null and b/public/assets/images/sketchnotes/random-sketches-2.jpg differ diff --git a/public/assets/images/sketchnotes/random-sketches-3.jpg b/public/assets/images/sketchnotes/random-sketches-3.jpg new file mode 100644 index 0000000..acbd98a Binary files /dev/null and b/public/assets/images/sketchnotes/random-sketches-3.jpg differ diff --git a/public/assets/images/sketchnotes/random-sketches-4.jpg b/public/assets/images/sketchnotes/random-sketches-4.jpg new file mode 100644 index 0000000..78ac8a6 Binary files /dev/null and b/public/assets/images/sketchnotes/random-sketches-4.jpg differ diff --git a/public/assets/images/sketchnotes/random-sketches-5.jpg b/public/assets/images/sketchnotes/random-sketches-5.jpg new file mode 100644 index 0000000..816a960 Binary files /dev/null and b/public/assets/images/sketchnotes/random-sketches-5.jpg differ diff --git a/public/assets/images/sketchnotes/random-sketches-6.jpg b/public/assets/images/sketchnotes/random-sketches-6.jpg new file mode 100644 index 0000000..9602684 Binary files /dev/null and b/public/assets/images/sketchnotes/random-sketches-6.jpg differ diff --git a/public/assets/images/sketchnotes/random-sketches-7.jpg b/public/assets/images/sketchnotes/random-sketches-7.jpg new file mode 100644 index 0000000..46fd112 Binary files /dev/null and b/public/assets/images/sketchnotes/random-sketches-7.jpg differ diff --git a/public/assets/images/sketchnotes/random-sketches-8.jpg b/public/assets/images/sketchnotes/random-sketches-8.jpg new file mode 100644 index 0000000..26eebf3 Binary files /dev/null and b/public/assets/images/sketchnotes/random-sketches-8.jpg differ diff --git a/public/assets/images/sketchnotes/self-actualization.jpg b/public/assets/images/sketchnotes/self-actualization.jpg new file mode 100644 index 0000000..4541e5c Binary files /dev/null and b/public/assets/images/sketchnotes/self-actualization.jpg differ diff --git a/public/assets/images/sketchnotes/the-art-of-enough.jpg b/public/assets/images/sketchnotes/the-art-of-enough.jpg new file mode 100644 index 0000000..5f1104a Binary files /dev/null and b/public/assets/images/sketchnotes/the-art-of-enough.jpg differ diff --git a/public/assets/images/sketchnotes/this-is-water-1.jpg b/public/assets/images/sketchnotes/this-is-water-1.jpg new file mode 100644 index 0000000..a037ee2 Binary files /dev/null and b/public/assets/images/sketchnotes/this-is-water-1.jpg differ diff --git a/public/assets/images/sketchnotes/this-is-water-2.jpg b/public/assets/images/sketchnotes/this-is-water-2.jpg new file mode 100644 index 0000000..36af8fc Binary files /dev/null and b/public/assets/images/sketchnotes/this-is-water-2.jpg differ diff --git a/public/assets/images/sketchnotes/title-lettering.jpg b/public/assets/images/sketchnotes/title-lettering.jpg new file mode 100644 index 0000000..3c7a231 Binary files /dev/null and b/public/assets/images/sketchnotes/title-lettering.jpg differ diff --git a/public/assets/images/sketchnotes/weight-idea.jpg b/public/assets/images/sketchnotes/weight-idea.jpg new file mode 100644 index 0000000..26cbf85 Binary files /dev/null and b/public/assets/images/sketchnotes/weight-idea.jpg differ diff --git a/public/assets/images/sketchnotes/wim-hof-method.jpg b/public/assets/images/sketchnotes/wim-hof-method.jpg new file mode 100644 index 0000000..f4774bb Binary files /dev/null and b/public/assets/images/sketchnotes/wim-hof-method.jpg differ diff --git a/src/components/GalleryDetail.astro b/src/components/GalleryDetail.astro new file mode 100644 index 0000000..3b10fc5 --- /dev/null +++ b/src/components/GalleryDetail.astro @@ -0,0 +1,57 @@ +--- +import cx from 'classnames'; + +import Picture from './Picture.astro'; +import { Headline } from '.'; + +const { entry } = Astro.props; + +function randomPosition() { + const positions = ['start', 'center', 'end']; + const randomIndex = Math.floor(Math.random() * positions.length); + return positions[randomIndex]; +} + +const imageLength = entry.data.images.length; +--- + +
+
+
+ {entry.data.title} + +
+
+
1, + 'lg:justify-items-center lg:items-center': imageLength === 1, + } + )} + > + { + entry.data.images.map(({ src }: { src: string }, index: number) => ( + 1 && index > 0, + 'justify-self-center lg:col-start-2': + randomPosition() === 'center' && imageLength > 1 && index > 0, + 'justify-self-end lg:col-start-3': + randomPosition() === 'end' && imageLength > 1 && index > 0, + 'lg:col-start-2': imageLength === 1 || index === 0, + })} + format={['webp', 'avif']} + src={src} + /> + )) + } +
+
diff --git a/src/content/config.ts b/src/content/config.ts index 2e087a3..aef013a 100644 --- a/src/content/config.ts +++ b/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, }; diff --git a/src/content/sketchnotes/being-a-good-listener.mdx b/src/content/sketchnotes/being-a-good-listener.mdx new file mode 100644 index 0000000..2478fcc --- /dev/null +++ b/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**. diff --git a/src/content/sketchnotes/better-conversation.mdx b/src/content/sketchnotes/better-conversation.mdx new file mode 100644 index 0000000..e060ac1 --- /dev/null +++ b/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). diff --git a/src/content/sketchnotes/bikablo-practice.mdx b/src/content/sketchnotes/bikablo-practice.mdx new file mode 100644 index 0000000..d6aebd2 --- /dev/null +++ b/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/). diff --git a/src/content/sketchnotes/how-to-speak-so-that-people-want-to-listen.mdx b/src/content/sketchnotes/how-to-speak-so-that-people-want-to-listen.mdx new file mode 100644 index 0000000..b19cf71 --- /dev/null +++ b/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**. diff --git a/src/content/sketchnotes/random-sketches.mdx b/src/content/sketchnotes/random-sketches.mdx new file mode 100644 index 0000000..47ab82d --- /dev/null +++ b/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. diff --git a/src/content/sketchnotes/self-actualization-vs-self-image-actualization.mdx b/src/content/sketchnotes/self-actualization-vs-self-image-actualization.mdx new file mode 100644 index 0000000..d3e1db6 --- /dev/null +++ b/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. diff --git a/src/content/sketchnotes/the-art-of-enough.mdx b/src/content/sketchnotes/the-art-of-enough.mdx new file mode 100644 index 0000000..922880b --- /dev/null +++ b/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. diff --git a/src/content/sketchnotes/the-wim-hof-method.mdx b/src/content/sketchnotes/the-wim-hof-method.mdx new file mode 100644 index 0000000..fc77c1b --- /dev/null +++ b/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. diff --git a/src/content/sketchnotes/this-is-water.mdx b/src/content/sketchnotes/this-is-water.mdx new file mode 100644 index 0000000..f5bbfe7 --- /dev/null +++ b/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**. diff --git a/src/content/sketchnotes/title-lettering.mdx b/src/content/sketchnotes/title-lettering.mdx new file mode 100644 index 0000000..d6b1918 --- /dev/null +++ b/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. diff --git a/src/content/sketchnotes/weight-idea.mdx b/src/content/sketchnotes/weight-idea.mdx new file mode 100644 index 0000000..9c17f3b --- /dev/null +++ b/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. diff --git a/src/pages/sketchnotes/[...slug].astro b/src/pages/sketchnotes/[...slug].astro index cf068d3..a292cf9 100644 --- a/src/pages/sketchnotes/[...slug].astro +++ b/src/pages/sketchnotes/[...slug].astro @@ -6,14 +6,14 @@ import { sortBySortKey } from '../../utils/sort-by-sortkey'; import BaseLayout from '../../layouts/BaseLayout.astro'; import PageHeader from '../../components/PageHeader.astro'; import Pagination from '../../components/Pagination.astro'; -import { Headline } from '../../components'; +import GalleryDetail from '../../components/GalleryDetail.astro'; import { mapping } from '../../mdx-components'; export async function getStaticPaths() { const sketchnotesEntries = await getCollection('sketchnotes'); const numberOfPages = sketchnotesEntries.length; - sketchnotesEntries.sort(sortBySortKey).reverse(); + sketchnotesEntries.sort(sortBySortKey); return sketchnotesEntries.map((entry, index) => ({ params: { slug: entry.slug }, @@ -33,35 +33,15 @@ const { Content } = await entry.render(); --- -
+
-
-
-
- {entry.data.title} - -
-
-
- { - entry.data.images.map(({ src }: { src: string }) => ( -
- {entry.data.title} -
- )) - } -
-
+ + +