app/page.tsx

@@ -1,6 +1,7 @@
 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);
@@ -62,6 +63,12 @@ export default function Home() {
           )}
         </Window>
       </section>
+
+      <section>
+        <Window title="About this site">
+          <Badges />
+        </Window>
+      </section>
     </div>
   );
 }

components/badges.tsx

@@ -0,0 +1,78 @@
+import React from "react";
+
+interface BadgeProps {
+  href?: string;
+  children: React.ReactNode;
+  style?: React.CSSProperties;
+}
+
+function Badge({ href, children, style }: BadgeProps) {
+  const base = (
+    <div
+      className="flex items-center justify-center border border-white/40 text-center font-mono leading-tight select-none"
+      style={{ width: 88, height: 31, fontSize: 9, ...style }}
+    >
+      {children}
+    </div>
+  );
+
+  if (href) {
+    return (
+      <a href={href} target="_blank" rel="noopener noreferrer" className="hover:opacity-80 transition-opacity">
+        {base}
+      </a>
+    );
+  }
+  return base;
+}
+
+export default function Badges() {
+  return (
+    <div className="flex flex-wrap gap-1.5">
+      <Badge
+        href="https://nextjs.org"
+        style={{ background: "linear-gradient(135deg, #0d0d0d, #1a1a2e)", color: "#7dd3fc", borderColor: "#334155" }}
+      >
+        <span>⬛ Next.js</span>
+      </Badge>
+
+      <Badge
+        href="https://bun.sh"
+        style={{ background: "linear-gradient(135deg, #1a0a00, #2d1500)", color: "#fb923c", borderColor: "#7c2d12" }}
+      >
+        🍞 Powered by Bun
+      </Badge>
+
+      <Badge
+        style={{ background: "linear-gradient(135deg, #0c1a3a, #1e3a6e)", color: "#93c5fd", borderColor: "#1e40af" }}
+      >
+        <div>
+          <div>Best viewed</div>
+          <div>1024×768</div>
+        </div>
+      </Badge>
+
+      <Badge
+        href="/feed.xml"
+        style={{ background: "linear-gradient(135deg, #431407, #7c2d12)", color: "#fde68a", borderColor: "#b45309" }}
+      >
+        📡 Valid RSS
+      </Badge>
+
+      <Badge
+        style={{ background: "linear-gradient(135deg, #0f172a, #1e1b4b)", color: "#c4b5fd", borderColor: "#4c1d95" }}
+      >
+        Made with ♥
+      </Badge>
+
+      <Badge
+        style={{ background: "linear-gradient(135deg, #0369a1, #0ea5e9)", color: "white", borderColor: "#38bdf8" }}
+      >
+        <div>
+          <div style={{ fontSize: 8 }}>✦ Frutiger</div>
+          <div style={{ fontSize: 8 }}>Aero ✦</div>
+        </div>
+      </Badge>
+    </div>
+  );
+}