fun improvements (#1)

Reviewed-on: #1

app/globals.css

@@ -130,3 +130,13 @@ body {
 .prose :not(pre) > code::after {
   content: none !important;
 }
+
+/* ── Corner ribbon animation ── */
+@keyframes blink {
+  0%, 100% { opacity: 1; }
+  50% { opacity: 0.4; }
+}
+
+@utility animate-blink {
+  animation: blink 0.8s ease-in-out infinite;
+}

app/not-found.tsx

@@ -0,0 +1,49 @@
+import Link from "next/link";
+import Window from "@/components/window";
+import GoBackButton from "@/components/go-back-button";
+
+export default function NotFound() {
+  return (
+    <div className="mx-auto max-w-md pt-16">
+      <Window title="Oopsie doopsie! You're lost!">
+        <div className="flex items-start gap-4 mb-6">
+          <div className="flex-shrink-0 flex h-10 w-10 items-center justify-center rounded-full bg-red-600 shadow-inner">
+            <svg
+              width="18"
+              height="18"
+              viewBox="0 0 18 18"
+              fill="none"
+              xmlns="http://www.w3.org/2000/svg"
+            >
+              <path
+                d="M3 3L15 15M3 15L15 3"
+                stroke="white"
+                strokeWidth="2.5"
+                strokeLinecap="round"
+              />
+            </svg>
+          </div>
+          <div>
+            <h2 className="font-bold text-gray-900 text-base mb-1">
+              404 — Not Found
+            </h2>
+            <p className="text-sm text-gray-600 leading-relaxed">
+              The page you're looking for doesn't exist. Check the address or
+              head back home.
+            </p>
+          </div>
+        </div>
+
+        <div className="border-t border-gray-200/60 pt-4 flex justify-end gap-2">
+          <GoBackButton />
+          <Link
+            href="/"
+            className="px-4 py-1.5 text-sm bg-gradient-to-b from-blue-100 to-blue-200 border border-blue-300 rounded hover:from-blue-200 hover:to-blue-300 transition-colors"
+          >
+            Home
+          </Link>
+        </div>
+      </Window>
+    </div>
+  );
+}

app/page.tsx

@@ -1,12 +1,20 @@
 import { getSortedPostsData, PostMeta } from "../lib/posts";
 import Link from "next/link";
 import Window from "../components/window";
+import Badges from "../components/badges";
+
+function isNew(dateStr: string): boolean {
+  const postDate = new Date(dateStr);
+  const now = new Date();
+  const diffDays = (now.getTime() - postDate.getTime()) / (1000 * 60 * 60 * 24);
+  return diffDays <= 30;
+}
 
 export default function Home() {
   const allPostsData: PostMeta[] = getSortedPostsData();
 
   return (
-    <div className="space-y-12">
+    <div className="space-y-6">
       <header className="text-center">
         <h1 className="text-5xl font-bold text-white [text-shadow:_2px_2px_4px_rgb(0_0_0_/_40%)]">
           Gabriel's Kaszewski Blog
@@ -17,16 +25,25 @@ export default function Home() {
       </header>
 
       <section>
-        {/* The list of posts is displayed inside our custom Window component */}
-        <Window title="Blog Posts">
+        <Window title="Blog Posts" showRss>
           {allPostsData.length > 0 ? (
             <ul className="space-y-4">
-              {allPostsData.map(({ id, date, title }) => (
+              {allPostsData.map(({ id, date, title, wip }) => (
                 <li key={id}>
                   <Link
                     href={`/posts/${id}`}
-                    className="block rounded-md bg-white/50 p-4 transition-all duration-200 hover:bg-white/80 hover:shadow-md"
+                    className="relative block overflow-hidden rounded-md bg-white/50 p-4 transition-all duration-200 hover:bg-white/80 hover:shadow-md"
                   >
+                    {isNew(date) && !wip && (
+                      <div className="animate-blink absolute top-[10px] right-[-24px] w-[100px] rotate-[35deg] bg-[#e05010] py-0.5 text-center text-[9px] font-bold text-white shadow-sm">
+                        NEW!
+                      </div>
+                    )}
+                    {wip && (
+                      <div className="absolute top-[10px] right-[-24px] w-[100px] rotate-[35deg] bg-amber-500 py-0.5 text-center text-[9px] font-bold text-white shadow-sm">
+                        🚧 WIP
+                      </div>
+                    )}
                     <h3 className="font-bold text-lg text-blue-800">{title}</h3>
                     <small className="text-gray-600">
                       {new Date(date).toLocaleDateString("en-US", {

app/posts/[slug]/page.tsx

@@ -1,70 +1,95 @@
 import Link from "next/link";
 import { getPostData, getAllPostIds } from "@/lib/posts";
 import type { PostData } from "@/lib/posts";
-import Window from "../../../components/window";
+import Window from "@/components/window";
+import TableOfContents from "@/components/table-of-contents";
 import { MDXRemote } from "next-mdx-remote/rsc";
 import rehypePrettyCode from "rehype-pretty-code";
+import rehypeSlug from "rehype-slug";
 
 interface PageProps {
-  params: {
-    slug: string;
-  };
+  params: Promise<{ slug: string }>;
 }
 
-// This function tells Next.js which blog posts exist at build time
 export async function generateStaticParams() {
   const paths = getAllPostIds();
   return paths.map((path) => ({ slug: path.params.slug }));
 }
 
-// Generates metadata (like the title tag) for each blog post page
 export async function generateMetadata({ params }: PageProps) {
-  const postData = await getPostData(params.slug);
+  const { slug } = await params;
+  const postData = await getPostData(slug);
   return {
     title: `${postData.title} | Gabriel's Kaszewski Blog`,
   };
 }
 
 export default async function Post({ params }: PageProps) {
-  // Fetch the specific post's content based on the URL slug
-  const postData: PostData = await getPostData(params.slug);
+  const { slug } = await params;
+  const postData: PostData = await getPostData(slug);
 
   return (
-    <div className="mx-auto max-w-4xl">
-      <Window title={postData.title}>
-        <article>
-          <div className="mb-4 text-gray-500 flex flex-col gap-1">
-            <span>
-              {new Date(postData.date).toLocaleDateString("en-US", {
-                year: "numeric",
-                month: "long",
-                day: "numeric",
-              })}
-            </span>
-            <span className="text-sm text-gray-400">
-              {postData.readingTime}
-            </span>
-          </div>
-          <div className="prose lg:prose-xl max-w-none">
-            <MDXRemote
-              source={postData.content}
-              options={{
-                mdxOptions: {
-                  rehypePlugins: [
-                    [
-                      rehypePrettyCode,
-                      {
-                        theme: "github-dark-dimmed",
-                        keepBackground: false,
-                      },
+    <div className="mx-auto max-w-6xl">
+      <div className="lg:flex lg:gap-4 lg:items-start">
+        <Window title={postData.title} showProgress className="lg:flex-1 min-w-0">
+          <article>
+            <div className="mb-4 text-gray-500 flex flex-col gap-1">
+              <span>
+                {new Date(postData.date).toLocaleDateString("en-US", {
+                  year: "numeric",
+                  month: "long",
+                  day: "numeric",
+                })}
+              </span>
+              <span className="text-sm text-gray-400">{postData.readingTime}</span>
+            </div>
+
+            {postData.wip && (
+              <div className="mb-6 flex items-center gap-3 rounded-lg border border-amber-300 bg-amber-50/70 px-4 py-3 text-sm text-amber-800">
+                <span className="text-lg">🚧</span>
+                <span>This post is a work in progress — content may change.</span>
+              </div>
+            )}
+
+            {/* Mobile TOC — inline above article, hidden on lg+ */}
+            {postData.headings.length > 0 && (
+              <div className="lg:hidden mb-6 bg-white/20 backdrop-blur border border-white/30 rounded-lg p-4">
+                <TableOfContents headings={postData.headings} />
+              </div>
+            )}
+
+            <div className="prose lg:prose-lg max-w-none">
+              <MDXRemote
+                source={postData.content}
+                options={{
+                  mdxOptions: {
+                    rehypePlugins: [
+                      rehypeSlug,
+                      [
+                        rehypePrettyCode,
+                        {
+                          theme: "github-dark-dimmed",
+                          keepBackground: false,
+                        },
+                      ],
                     ],
-                  ],
-                },
-              }}
-            />
+                  },
+                }}
+              />
+            </div>
+          </article>
+        </Window>
+
+        {/* Desktop TOC — separate Aero Window, sticky on the right */}
+        {postData.headings.length > 0 && (
+          <div className="hidden lg:block w-56 flex-shrink-0 sticky top-8">
+            <Window title="Contents">
+              <TableOfContents headings={postData.headings} />
+            </Window>
           </div>
-        </article>
-      </Window>
+        )}
+      </div>
+
       <div className="mt-8 text-center">
         <Link
           href="/"