refactor: overhaul view transitions with granular per-page animation components

- Replace single `<ViewTransition>` wrapper in layout with `FadeTransition` and `DirectionalTransition` components applied per page
- Add `components/page-transition.tsx` with reusable transition wrappers
- Expand view transition CSS with named classes: fade, slide, nav-forward/back, morph, text-morph, scale — all driven by CSS custom property durations
- Use React `<ViewTransition name=... share="text-morph">` for shared note title element between list and detail views
- Wrap comments suspense boundary with enter/exit slide transitions
- Add `persistent-nav` and `persistent-footer` view-transition-name groups to keep chrome static during navigation
- Fix reduced-motion override to target delay and duration instead of `animation: none`
- Add tracking-tight and letter-spacing tweaks to home page typography

app/projects/page.tsx

@@ -4,6 +4,7 @@ import { Suspense } from "react";
 
 import { ActivityCalendar } from "@/components/activity-calendar";
 import { PageTitle } from "@/components/layout/page-title";
+import { FadeTransition } from "@/components/page-transition";
 import { RelativeTime } from "@/components/relative-time";
 import { Button } from "@/components/ui/button";
 import { Skeleton } from "@/components/ui/skeleton";
@@ -30,10 +31,10 @@ const Page = async () => {
   const [contributions, repos] = await Promise.all([getContributions(), getRepos()]);
 
   return (
-    <>
+    <FadeTransition>
       <PageTitle canonical="/projects">Projects</PageTitle>
 
-      <h2 className="my-3.5 text-xl font-medium">
+      <h2 className="my-3.5 text-lg font-medium">
         <a
           href={`https://github.com/${process.env.NEXT_PUBLIC_GITHUB_USERNAME}`}
           target="_blank"
@@ -56,7 +57,7 @@ const Page = async () => {
         )}
       </Suspense>
 
-      <h2 className="my-3.5 text-xl font-medium">
+      <h2 className="my-3.5 text-lg font-medium">
         <a
           href={`https://github.com/${process.env.NEXT_PUBLIC_GITHUB_USERNAME}?tab=repositories&sort=stargazers`}
           target="_blank"
@@ -171,7 +172,7 @@ const Page = async () => {
           <ExternalLinkIcon className="inline-block size-3.5 shrink-0" aria-hidden="true" />
         </Button>
       </p>
-    </>
+    </FadeTransition>
   );
 };