add notes and web pages for them

2025-08-06 01:15:18 +01:00
parent 5dc7db36f8
commit 2936ab3384
12 changed files with 212 additions and 22 deletions
--- a/src/components/Header.astro
+++ b/src/components/Header.astro
@@ -6,5 +6,6 @@ import Link from "./Link.astro";
 	<nav class="flex flex-row items-center space-x-4">
 		<p class="font-bold text-lg">kennethnym</p>
 		<Link href="/">home</Link>
+		<Link href="/read">books</Link>
 	</nav>
 </header>
--- a/src/content/config.ts
+++ b/src/content/config.ts
@@ -14,4 +14,13 @@ const blog = defineCollection({
 	}),
 });

-export const collections = { blog };
+const read = defineCollection({
+	type: "content",
+	schema: z.object({
+		title: z.string(),
+		author: z.string(),
+		goodReadLink: z.string().optional(),
+	}),
+});
+
+export const collections = { blog, read };
--- a/src/content/read/being-you.md
+++ b/src/content/read/being-you.md
@@ -0,0 +1,6 @@
+---
+title: Being You
+author: Anil Seth
+---
+
+I am still organizing my notes for this book.
--- a/src/content/read/the-creative-act.md
+++ b/src/content/read/the-creative-act.md
@@ -0,0 +1,34 @@
+---
+title: The Creative Act
+author: Rick Rubin
+goodReadLink: https://www.goodreads.com/book/show/60965426-the-creative-act
+---
+
+## Everyone is a creator
+
+- To live as an artist is a way of being in the world
+
+## Tuning in
+
+- We are all participating in a larger creative act we are not conducting. We are being conducted. The artist is on a cosmic timetable, just like all of nature.
+- In this great unfolding, ideas and thoughts, themes and songs and other works of art exist in the aether and ripen on schedule, ready to find expression in the physical world.
+As artists, it is our job to draw down this information, transmute it, and share it.
+- We are all antennae for creative thought.
+- To pick up on signals, don't look for it, or try to predict and analyze our way into it. Instead, create an open space that allows it. A space so free of the normal overpacked condition of our minds that it functions as a vacuum.
+- Practicing a way of being that allows you to see the world through uncorrupted, innocent eyes can free you to act in concert with the universe's timetable.
+
+## The source of creativity
+
+- The Source is out there. A wisdom surrounding us, an inexhaustible offering that is always available.
+- Art is a circulation of energetic ideas. What makes them appear new is that they are combining differently each time they come back.
+
+## Awareness
+
+- The universe is only as large as our perception of it. When we cultivate our awareness, we are expanding the universe.
+
+## The Vessal and the Filter
+
+- The vessel holds the sum of our thoughts, feelings, dreams, and experiences in the world.
+- Information is filtered uniquely for each person before entering the vessel.
+- Artists seek to restore childlike perceptions, a more innocent state of wonder and appreciation untethered to utility or survival.
+- One can think of the creative act as taking the sum of our vessel's contents as potential material, selecting for elements that seem useful or significant in the moment, and re-representing them.
--- a/src/content/read/user-friendly.md
+++ b/src/content/read/user-friendly.md
@@ -0,0 +1,7 @@
+---
+title: User Friendly
+author: Cliff Kuang, Robert Fabricant
+goodReadLink: https://www.goodreads.com/book/show/41940285-user-friendly
+---
+
+I will start making notes here when I start reading this book.
--- a/src/content/read/zero-to-one.md
+++ b/src/content/read/zero-to-one.md
@@ -0,0 +1,7 @@
+---
+title: Zero to One
+author: Peter Thiel, Blake Masters
+goodReadLink: https://www.goodreads.com/book/show/18050143-zero-to-one
+---
+
+I will start making notes here when I start reading this book.
--- a/src/layouts/BookRead.astro
+++ b/src/layouts/BookRead.astro
@@ -0,0 +1,58 @@
+---
+import type { CollectionEntry } from "astro:content";
+import BaseHead from "../components/BaseHead.astro";
+
+type Props = CollectionEntry<"read">["data"];
+
+const { title, author, goodReadLink } = Astro.props;
+---
+
+<!doctype html>
+<html lang="en">
+	<head>
+		<BaseHead
+			title={`Kenneth's Read - ${title}`}
+			description={`Notes I made for the book ${title}`}
+		/>
+	</head>
+	<body
+		class="w-full reads -z-2 bg-stone-200 dark:bg-stone-900 flex justify-center dark:text-stone-300 pt-20 md:py-40"
+	>
+		<header
+			class="fixed scroll-to-blur w-full -z-1 top-0 left-0 right-0 flex justify-center py-12"
+		>
+			<div
+				class="w-full max-w-[calc(65ch+var(--spacing)*24)] px-8 md:px-12 py-4 opacity-80"
+			>
+				<h1 class="font-bold text-sm">Kenneth's Read</h1>
+				<h2 class="text-sm">Quotes and notes from my readings.</h2>
+			</div>
+		</header>
+		<main
+			class="relative w-full max-w-[calc(65ch+var(--spacing)*24)] px-8 md:px-12 py-10 rounded-t-2xl md:rounded-2xl shadow-lg border border-stone-300 dark:border-stone-600 bg-stone-100 dark:bg-stone-800 min-h-[calc(100vh-var(--spacing)*28)]"
+		>
+			<article>
+				<div class="flex justify-between items-center w-full mb-10">
+					<header class="flex flex-col">
+						<h1 class="font-bold">{title}</h1>
+						<h2 class="font-medium">{author}</h2>
+					</header>
+					<a href={goodReadLink} class="underline">GoodRead</a>
+				</div>
+				<div
+					class="prose dark:prose-invert prose-headings:font-medium prose-headings:tracking-tight prose-h2:mb-0.5 dark:prose-headings:text-stone-300 dark:text-stone-300 dark:marker:text-stone-300 prose-ul:list-none prose-ul:p-0 prose-li:p-0 prose-li:before:content-['•'] prose-li:relative prose-li:before:absolute prose-li:before:left-0 prose-li:before:-translate-x-4"
+				>
+					<slot />
+				</div>
+			</article>
+			<div
+				class="absolute left-6 top-0 -translate-y-1/2 transition-all rounded-lg bg-stone-100 dark:bg-stone-800 border border-stone-300 dark:border-stone-700 shadow-lg h-min"
+			>
+				<a
+					class="block px-2 py-0.5 text-sm opacity-80 transition-all"
+					href="/read">&lt;- All books</a
+				>
+			</div>
+		</main>
+	</body>
+</html>
--- a/src/pages/blog/[...slug].astro
+++ b/src/pages/blog/[...slug].astro
@@ -1,15 +1,15 @@
 ---
-import { type CollectionEntry, getCollection } from 'astro:content';
-import BlogPost from '../../layouts/BlogPost.astro';
+import { type CollectionEntry, getCollection } from "astro:content";
+import BlogPost from "../../layouts/BlogPost.astro";

 export async function getStaticPaths() {
-	const posts = await getCollection('blog');
+	const posts = await getCollection("blog");
 	return posts.map((post) => ({
 		params: { slug: post.slug },
 		props: post,
 	}));
 }
-type Props = CollectionEntry<'blog'>;
+type Props = CollectionEntry<"blog">;

 const post = Astro.props;
 const { Content } = await post.render();
--- a/src/pages/index.astro
+++ b/src/pages/index.astro
@@ -25,7 +25,11 @@ const posts = (await getBlogs()).sort(
 				<p class="font-bold text-2xl">kennethnym</p>
 			</header>
 			<main class="py-8">
-				<p>dumping ground for my thoughts. all opinions are my own.</p>
+				<p>
+					software engineer @ <Link href="https://www.gitpod.io">gitpod</Link>.
+					all opinions are my own.
+				</p>
+				<p>check out <Link href="/read">the books I am reading!</Link></p>
 				<h1 class="font-bold mt-8 mb-2 text-lg visited">current projects:</h1>
 				<ul class="not-prose space-y-4 md:space-y-2">
 					<li>
@@ -68,9 +72,14 @@ const posts = (await getBlogs()).sort(
 			>
 				<header class="font-bold text-center">KENNETHNYM v23.5</header>
 				<p class="leading-none">&nbsp;</p>
-				<p class="text-center">software engineer. unpaid hhkb salesman.</p>
+				<p class="text-center">
+					software engineer @ <Link href="https://www.gitpod.io">gitpod</Link>.
+					unpaid hhkb salesman.
+				</p>
 				<p>&nbsp;</p>
 				<p>&nbsp;</p>
+				<Link href="/read" class="w-full">books i am reading</Link>
+				<p>&nbsp;</p>
 				<ul
 					aria-label="recent blog posts"
 					class="w-full space-y-2 sm:space-y-0"
--- a/src/pages/reads.astro
+++ b/src/pages/reads.astro
@@ -1,5 +1,20 @@
 ---
+import { getCollection } from "astro:content";
 import BaseHead from "../components/BaseHead.astro";
+
+const nowReading = {
+	title: "The Creative Act",
+	slug: "the-creative-act",
+};
+const quote = {
+	content:
+		"Practicing a way of being that allows you to see the world through uncorrupted, innocent eyes can free you to act in concert with the universe's timetable.",
+	bookTitle: "The Creative Act",
+};
+
+const books = (await getCollection("read")).filter(
+	(book) => book.slug !== nowReading.slug,
+);
 ---

 <!doctype html>
@@ -31,7 +46,7 @@ import BaseHead from "../components/BaseHead.astro";
 			<div class="md:justify-self-end col-span-10 md:col-span-3">
 				<div class="flex items-center opacity-70 mb-2 md:mb-20">
 					<div
-						class="w-2 h-2 bg-green-500 border-2 border-green-300 rounded-full animate-pulse mr-2"
+						class="w-3 h-3 bg-green-500 border-green-200 dark:bg-green-500 border-2 dark:border-green-300 rounded-full animate-pulse mr-2"
 					>
 					</div>
 					<h2 class="tracking-tight">Now Reading</h2>
@@ -39,7 +54,9 @@ import BaseHead from "../components/BaseHead.astro";
 			</div>

 			<div class="col-span-10 md:col-span-8 md:ml-12 mb-16 md:mb-20">
-				<p class="font-medium underline">The Creative Act</p>
+				<a class="font-medium underline" href={`/read/${nowReading.slug}`}
+					>{nowReading.title}</a
+				>
 			</div>

 			<div
@@ -47,15 +64,13 @@ import BaseHead from "../components/BaseHead.astro";
 			>
 				<p class="text-6xl leading-none font-black select-none">“</p>
 				<h2 class="leading-none -translate-y-8 tracking-tight">
-					The Creative Act
+					{quote.bookTitle}
 				</h2>
 			</div>
 			<p
 				class="col-span-10 md:col-span-8 max-w-prose md:ml-12 text-2xl md:text-4xl tracking-tight mb-20"
 			>
-				Practicing a way of being that allows you to see the world through
-				uncorrupted, innocent eyes can free you to act in concert with the
-				universe's timetable.
+				{quote.content}
 			</p>

 			<h2
@@ -64,15 +79,15 @@ import BaseHead from "../components/BaseHead.astro";
 				All Books
 			</h2>
 			<ul class="col-span-10 md:col-span-8 md:ml-12 space-y-2">
-				<li>
-					<a class="underline">User Friendly</a>
-				</li>
-				<li>
-					<a class="underline">Zero To One</a>
-				</li>
-				<li>
-					<a class="underline">Being You</a>
-				</li>
+				{
+					books.map((book) => (
+						<li>
+							<a class="underline" href={`/read/${book.slug}`}>
+								{book.data.title}
+							</a>
+						</li>
+					))
+				}
 			</ul>
 		</main>
 	</body>
--- a/src/pages/read/[...slug].astro
+++ b/src/pages/read/[...slug].astro
@@ -0,0 +1,20 @@
+---
+import { type CollectionEntry, getCollection } from "astro:content";
+import BookRead from "../../layouts/BookRead.astro";
+
+export async function getStaticPaths() {
+	const posts = await getCollection("read");
+	return posts.map((post) => ({
+		params: { slug: post.slug },
+		props: post,
+	}));
+}
+type Props = CollectionEntry<"read">;
+
+const post = Astro.props;
+const { Content } = await post.render();
+---
+
+<BookRead {...post.data}>
+	<Content />
+</BookRead>
--- a/src/styles/global.css
+++ b/src/styles/global.css
@@ -92,3 +92,27 @@ body.reads * {
 .nf {
 	font-family: "NerdFont";
 }
+
+.scroll-to-blur {
+	animation-name: scroll-to-blur;
+	animation-duration: 1ms; /* Firefox requires this to apply the animation */
+	animation-timeline: scroll(block nearest);
+}
+
+@keyframes scroll-to-blur {
+	0% {
+		filter: blur(0px);
+	}
+
+	20% {
+		filter: blur(5px);
+		transform: scale(0.99);
+		opacity: 0%;
+	}
+
+	100% {
+		filter: blur(5px);
+		transform: scale(0.99);
+		opacity: 0%;
+	}
+}