fix book read layout header overlap on mobile

astro.config.mjs

@@ -4,12 +4,13 @@ import sitemap from "@astrojs/sitemap";
 import remarkMath from "remark-math";
 import rehypeKatex from "rehype-katex";
 
-import tailwind from "@astrojs/tailwind";
+import tailwindcss from "@tailwindcss/vite";
 
 // https://astro.build/config
 export default defineConfig({
 	site: "https://kennethnym.com",
-	integrations: [mdx(), sitemap(), tailwind()],
+	integrations: [mdx(), sitemap()],
+
 	markdown: {
 		shikiConfig: {
 			// Choose from Shiki's built-in themes (or add your own)
@@ -19,4 +20,8 @@ export default defineConfig({
 		remarkPlugins: [remarkMath],
 		rehypePlugins: [rehypeKatex],
 	},
+
+	vite: {
+		plugins: [tailwindcss()],
+	},
 });

package.json

@@ -1,31 +1,31 @@
 {
-  "name": "website",
-  "type": "module",
-  "version": "0.0.1",
-  "scripts": {
-    "dev": "astro dev",
-    "start": "astro dev",
-    "build": "astro check && astro build",
-    "preview": "astro preview",
-    "astro": "astro"
-  },
-  "dependencies": {
-    "@astrojs/check": "^0.5.6",
-    "@astrojs/mdx": "^2.1.1",
-    "@astrojs/rss": "^4.0.5",
-    "@astrojs/sitemap": "^3.1.1",
-    "@astrojs/tailwind": "^5.1.0",
-    "astro": "^4.4.15",
-    "tailwindcss": "^3.4.1",
-    "typescript": "^5.4.2"
-  },
-  "devDependencies": {
-    "@catppuccin/tailwindcss": "^0.1.6",
-    "@flydotio/dockerfile": "latest",
-    "@tailwindcss/typography": "^0.5.10",
-    "prettier": "^3.2.5",
-    "prettier-plugin-astro": "^0.13.0",
-    "rehype-katex": "^7.0.1",
-    "remark-math": "^6.0.0"
-  }
-}
+	"name": "website",
+	"type": "module",
+	"version": "0.0.1",
+	"scripts": {
+		"dev": "astro dev",
+		"start": "astro dev",
+		"build": "astro check && astro build",
+		"preview": "astro preview",
+		"astro": "astro"
+	},
+	"dependencies": {
+		"@astrojs/check": "^0.5.6",
+		"@astrojs/mdx": "^2.1.1",
+		"@astrojs/rss": "^4.0.5",
+		"@astrojs/sitemap": "^3.1.1",
+		"@tailwindcss/vite": "^4.1.11",
+		"astro": "^4.4.15",
+		"tailwindcss": "^4.1.11",
+		"typescript": "^5.4.2"
+	},
+	"devDependencies": {
+		"@catppuccin/tailwindcss": "1.0.0",
+		"@flydotio/dockerfile": "latest",
+		"@tailwindcss/typography": "^0.5.10",
+		"prettier": "^3.2.5",
+		"prettier-plugin-astro": "^0.13.0",
+		"rehype-katex": "^7.0.1",
+		"remark-math": "^6.0.0"
+	}
+}

src/components/BaseHead.astro

@@ -1,7 +1,7 @@
 ---
 // Import the global.css file here so that it is included on
 // all pages through the use of the <BaseHead /> component.
-import '../styles/global.css';
+import "../styles/global.css";
 
 interface Props {
 	title: string;
@@ -11,7 +11,7 @@ interface Props {
 
 const canonicalURL = new URL(Astro.url.pathname, Astro.site);
 
-const { title, description, image = '/blog-placeholder-1.jpg' } = Astro.props;
+const { title, description, image = "/blog-placeholder-1.jpg" } = Astro.props;
 ---
 
 <!-- Global Metadata -->
@@ -23,11 +23,19 @@ const { title, description, image = '/blog-placeholder-1.jpg' } = Astro.props;
 <link rel="canonical" href={canonicalURL} />
 
 <!-- RSS autodiscovery -->
-<link rel="alternate" type="application/rss+xml" title={title}  href={`${Astro.site}rss.xml`} />
+<link
+	rel="alternate"
+	type="application/rss+xml"
+	title={title}
+	href={`${Astro.site}rss.xml`}
+/>
 
-<link rel="preconnect" href="https://fonts.googleapis.com">
-<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
-<link href="https://fonts.googleapis.com/css2?family=Source+Serif+4:ital,opsz,wght@0,8..60,200..900;1,8..60,200..900&display=swap" rel="stylesheet">
+<link rel="preconnect" href="https://fonts.googleapis.com" />
+<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
+<link
+	href="https://fonts.googleapis.com/css2?family=Source+Serif+4:ital,opsz,wght@0,8..60,200..900;1,8..60,200..900&display=swap"
+	rel="stylesheet"
+/>
 
 <!-- Primary Meta Tags -->
 <title>{title}</title>

src/components/CommandLine.astro

@@ -1,15 +1,15 @@
-<div id="command-line" class="w-full flex flex-row bg-base">
+<div id="command-line" class="w-full flex flex-row bg-ctp-base">
 	<input
 		aria-hidden="true"
 		id="command-line-input"
 		type="text"
-		class="bg-base focus:outline-none active:outline-none cursor-default caret-transparent m-0"
+		class="bg-ctp-base focus:outline-none active:outline-none cursor-default caret-transparent m-0"
 	/>
 	<div id="caret" aria-hidden="true" class="bg-text inline-block">&nbsp;</div>
 	<p
 		aria-hidden="true"
 		id="status-text"
-		class="absolute w-full h-full bg-base hidden italic"
+		class="absolute w-full h-full bg-ctp-base hidden italic"
 	>
 	</p>
 </div>
@@ -94,7 +94,7 @@
 		} else {
 			statusText.innerHTML = `E492: Not an editor command: ${command}`;
 			statusText.classList.remove("hidden");
-			statusText.classList.add("text-red");
+			statusText.classList.add("text-ctp-red");
 		}
 	}
 

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>

src/components/Link.astro

@@ -6,9 +6,9 @@ const { href, class: className, ...props } = Astro.props;
 	href={href}
 	class:list={[
 		"underline",
-		"text-blue",
-		"hover:text-lavender",
-		"visited:text-mauve",
+		"text-ctp-blue",
+		"hover:text-ctp-lavender",
+		"visited:text-ctp-mauve",
 		className,
 	]}><slot /></a
 >

src/components/LuaLine.astro

@@ -4,10 +4,10 @@ import CommandLine from "./CommandLine.astro";
 ---
 
 <div class="hidden sm:block absolute w-full bottom-0">
-	<footer class="w-full bg-crust flex flex-row leading-tight">
+	<footer class="w-full bg-ctp-mantle flex flex-row leading-tight">
 		<span
 			id="status-indicator"
-			class="bg-blue font-bold text-base inline-block leading-tight"
+			class="bg-ctp-blue font-bold text-ctp-base inline-block leading-tight"
 			>&nbsp;NORMAL&nbsp;</span
 		>
 		<div id="project-list" class="flex flex-row bg-surface0">
@@ -40,14 +40,14 @@ import CommandLine from "./CommandLine.astro";
 
 	cmdLine.addEventListener("cmdmodeenabled", () => {
 		statusIndicator.innerHTML = "&nbsp;COMMAND&nbsp;";
-		statusIndicator.classList.remove("bg-blue");
-		statusIndicator.classList.add("bg-peach");
+		statusIndicator.classList.remove("bg-ctp-blue");
+		statusIndicator.classList.add("bg-ctp-peach");
 	});
 
 	cmdLine.addEventListener("cmdmodedisabled", () => {
 		statusIndicator.innerHTML = "&nbsp;NORMAL&nbsp;";
-		statusIndicator.classList.add("bg-blue");
-		statusIndicator.classList.remove("bg-peach");
+		statusIndicator.classList.add("bg-ctp-blue");
+		statusIndicator.classList.remove("bg-ctp-peach");
 	});
 
 	window.addEventListener("openhelp", () => {

src/content/blog/ask-what-not-why.md

@@ -0,0 +1,23 @@
+---
+title: ask what, not why
+description: stop questioning and start wondering
+pubDate: Jul 30 2025
+---
+
+*Disclaimer: this is subjective, and may not apply to everyone*
+
+One mindset shift I have been practicing is avoiding using "why" when asking questions, and instead ask "what". For example, in the context of software engineering, instead of asking, "why are you using framework *x* instead of *y*, ask "what led you to decide on using framework *x*?". This shift has caused me to question less and wonder more.
+
+Firstly, it drives me away from putting blames. Asking "why" brings an undertone of questioning, whether intentional or not. The questionee, including myself, as a result of feeling questioned, may shift into defensive mode and subconsciously look for excuses first, rather than exploring something more productive. It may also make them feel invalidated or judge. As an example, consider the difference, as a listener, between "why are you sad?" and "what made you sad?" The former, subtly or otherwise, invalidates your feeling of sadness, while the latter demonstrates a level of rapport and understanding.
+
+Secondly, asking "why" puts the subject under the spotlight, whereas asking "what" shifts the focus to the outside world, allowing both sides to view the situation at hand more objectively and holistically. Consider the two questions, "why did you do this?" and "what caused you to do this?" The first question focuses on the subjective intention of the person. Instead, the second question is looking for the external factors that effected their action. This is important if the situation at hand calls for an objective review, for example when dissecting architectural decisions in the context of engineering.
+
+Here are more examples.
+- "Why is the bus delayed again?" turns into "what caused the delay of the bus?"
+- "Why can't we ship this feature by this Friday?" turns into "what are the blockers and challenges that prohibit us from shipping this feature by this Friday?"
+- "Why am I feeling anxious" turns into "what is the source of my anxiety?"
+- "Why do you like playing the piano?" turns into "what about piano makes you interested in it?"
+
+This is a challenging practice that requires conscious effort. Every time I find myself using the word "why", I stop and think, "how can I rephrase this question so that I am not asking why?" As a result, however, I find that it not only fosters further discussions, but it also makes me less judgemental as a person.
+
+If you do decide to give this a go, I would love to hear what you think about this, and how it shifts your mindset and perspective. Until then, thank you for reading, and see you in my next post.

src/content/blog/the-pathological-desire-for-validation.md

@@ -0,0 +1,23 @@
+---
+title: the pathological desire for validation
+description: the experience of someone who struggles with self perception
+pubDate: Jul 04 2025
+---
+
+I have a pathological crave for validation, be it in my career, or in my relationships and friendships. Unfortunately, I am still suffering from this disease, and I do not yet have the solution, but I believe I have found the trace to the problem. This is a self reflection for people who are interested in the experience of being a person who has tragically low to no self worth and are struggling to crawl out of the trench. Even more tragically is the fact that I had normalized this for most of my life until recently.
+
+I was raised in an environment where emotions were strictly suppressed (man are not supposed to show emotions, remember!), and where love was transactional. I was conditioned from a young age that achievement was an expectation. I was taught that love and affections are manifested as efforts made to raise me, and I have this looming pressure that I need to pay it back when I grow older. I would only receive minimal affections when i had made an achievement, such as getting good grades or winning a competition. On the other hand, mistakes would bring upon severe punishments. On top of that, I was under the care of someones who lacked the ability to openly communicate and have conversations. Talking to them was like walking on eggshells. I had to be hyper attuned to their moods and be careful with my words so as to not trigger them. When I was in school, I had to hide my grades from my parents, because i knew they would not be nearly satisfactory. It would not be long, however, until the truth would drop, and then I would be met with visceral reactions and punishments.
+
+In school, even though I would not consider myself to be bullied, I would very often be the butt of the joke, or be the target to be pranked. back then, I brushed it off as my classmates being playful, but I most definitely did not enjoy the experience. I was also strictly prohibited from developing romantic relationships with anyone, which further stunned my emotional development. The only thing I was decent at was programming, but no one at school took it seriously. 
+
+Fast forward into my early adulthood, I managed to get myself into several romantic situations online. Each further tramped on my self worth, and made me question whether I would ever, ever, be worthy of love and affection, despite all the efforts I had put in.
+
+To this day, I still don't know what love and affection is, and thus how it feels to be the receiving end of it. My past experience had taught me that love is something I need to fight for. I need to work in order to receive affection. I need to put in effort to receive validations and approvals. If I don't receive them, it means that i am not working hard enough, and therefore not worthy and deserving of anything. In career, it means doubting my software engineering ability. In relationships and friendships, it means doubting myself as a person, constantly questioning my place in another person. Hanging out with friends brings me anxiety about how they view me; romantic interests even more so. When I bring this up with a person (which I only do if they are a very very significant person), I will receive my dose of validation, but the high will wear off shortly, like nicotine or alcohol, then I will need it again. Not only do I struggle to trust and internalize that validation, I constantly desire more of it to soothe myself.
+
+The thirst for validation also affects how i view others. I perceive myself as inferior to all my peers and friends. They write code better. They work on cooler things. They have more friends. They have way cooler interests. They have broader perspective of the world. They are cooler and smarter. They (you if you are reading this) may reject this, but I struggle to view myself in any other way.
+
+This is why it is deeply pathological - it is excessive, uncontrollable, and projects onto other people. It is extremely crippling, and it is unsustainable in the long term. I only recently started therapy, and I don't know how long or what it will take to pull myself out of this misery.
+
+Before then, I want to express my deepest gratitude to the person who I admire most admire, for revealing this deep rooted issue of mine that I have set aside for the longest time, for making me self reflect more, and for giving the reassurances when I needed them.
+
+Finally, if you have made it to here, I hope you find my experience helpful, and thank you for following along.

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 };

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.

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.

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.

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.

src/layouts/BlogPost.astro

@@ -18,7 +18,7 @@ const {
 ---
 
 <!doctype html>
-<html lang="en" class="latte dark:mocha">
+<html lang="en" class="dark:mocha">
 	<head>
 		<BaseHead title={title} description={description} image={heroImage} />
 		{
@@ -31,7 +31,7 @@ const {
 		}
 	</head>
 
-	<body class="blog bg-base text-text max-w-prose m-auto p-8">
+	<body class="blog bg-ctp-base text-ctp-text max-w-prose m-auto p-8">
 		<Header />
 		<main class="py-10">
 			<article>

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"
+		>
+			<div
+				class="w-full max-w-[calc(65ch+var(--spacing)*24)] px-8 md:px-12 py-4 md:py-12 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>

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();

src/pages/index.astro

@@ -13,19 +13,23 @@ const posts = (await getBlogs()).sort(
 ---
 
 <!doctype html>
-<html lang="en" class="latte dark:mocha bg-base">
+<html lang="en" class="dark:mocha bg-ctp-base">
 	<head>
 		<BaseHead title={SITE_TITLE} description={SITE_DESCRIPTION} />
 	</head>
 	<body
-		class="tilde-background text-text h-screen m-auto sm:flex items-center justify-center sm:overflow-hidden"
+		class="tilde-background text-ctp-text h-screen m-auto sm:flex items-center justify-center sm:overflow-hidden"
 	>
 		<div class="visible p-8 sm:hidden">
 			<header>
 				<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"

src/pages/read.astro

@@ -0,0 +1,94 @@
+---
+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>
+<html
+	lang="en"
+	class="bg-stone-200 dark:bg-stone-900 text-stone-700 dark:text-stone-400"
+>
+	<head>
+		<BaseHead
+			title="Kenneth's Reads"
+			description="Quotes and notes from my readings."
+		/>
+	</head>
+	<body class="reads px-8">
+		<main class="mt-8 mb-20 md:mt-0 max-w-4xl grid grid-cols-11">
+			<header class="col-span-11 grid grid-cols-11">
+				<h1
+					class="col-span-10 md:col-span-3 md:justify-self-end text-lg font-bold mt-8"
+				>
+					<a href="/" class="hover:underline">Kenneth</a>&#39;s Reads
+				</h1>
+				<p
+					class="col-span-10 md:col-span-8 text-lg font-medium mb-10 md:mb-20 md:ml-12 md:mt-8"
+				>
+					Quotes and notes from my readings.
+				</p>
+			</header>
+
+			<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-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>
+				</div>
+			</div>
+
+			<div class="col-span-10 md:col-span-8 md:ml-12 mb-16 md:mb-20">
+				<a class="font-medium underline" href={`/read/${nowReading.slug}`}
+					>{nowReading.title}</a
+				>
+			</div>
+
+			<div
+				class="md:justify-self-end col-span-10 md:col-span-3 flex flex-col md:items-end opacity-70"
+			>
+				<p class="text-6xl leading-none font-black select-none">“</p>
+				<h2 class="leading-none -translate-y-8 tracking-tight">
+					{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"
+			>
+				{quote.content}
+			</p>
+
+			<h2
+				class="col-span-10 md:col-span-3 tracking-tight md:justify-self-end mb-4"
+			>
+				All Books
+			</h2>
+			<ul class="col-span-10 md:col-span-8 md:ml-12 space-y-2">
+				{
+					books.map((book) => (
+						<li>
+							<a class="underline" href={`/read/${book.slug}`}>
+								{book.data.title}
+							</a>
+						</li>
+					))
+				}
+			</ul>
+		</main>
+	</body>
+</html>

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>

src/styles/global.css

@@ -1,3 +1,11 @@
+@import "tailwindcss";
+@import "@catppuccin/tailwindcss/mocha.css";
+@import url("https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&display=swap");
+
+@plugin "@tailwindcss/typography";
+
+@source inline("text-ctp-red");
+
 @font-face {
 	font-family: "CommitMono";
 	src: url("/fonts/CommitMono-400-Regular.otf") format("opentype");
@@ -77,6 +85,34 @@ body.blog {
 	font-family: "Source Serif 4", "Georgia", serif;
 }
 
+body.reads * {
+	font-family: "Inter", sans-serif;
+}
+
 .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%;
+	}
+}