feat: display Mastodon post media inline (images, video, gif)

Co-authored-by: Cursor <cursoragent@cursor.com>
feat: HomeLab CSS art hero with Proxmox, Switch, NAS
2026-02-14 09:57:00 +08:00 · 2026-02-14 09:38:56 +08:00 · 2026-02-14 08:39:15 +08:00 · 2026-02-14 08:19:39 +08:00 · 2026-02-14 00:43:16 +08:00 · 2026-02-14 00:09:59 +08:00
35 changed files with 3247 additions and 404 deletions
--- a/app/blog/[slug]/page.tsx
+++ b/app/blog/[slug]/page.tsx
@@ -1,4 +1,4 @@
-import Link from 'next/link';
+import { Link } from 'next-view-transitions';
 import Image from 'next/image';
 import { notFound } from 'next/navigation';
 import type { Metadata } from 'next';
--- a/app/layout.tsx
+++ b/app/layout.tsx
@@ -1,11 +1,14 @@
 import '../styles/globals.css';
 import type { Metadata } from 'next';
 import { siteConfig } from '@/lib/config';
+import { getAllPostsSorted } from '@/lib/posts';
 import { LayoutShell } from '@/components/layout-shell';
 import { ThemeProvider } from 'next-themes';
 import { Playfair_Display, LXGW_WenKai_TC } from 'next/font/google';
 import { JsonLd } from '@/components/json-ld';
 import { WebVitals } from '@/components/web-vitals';
+import { ViewTransitions } from 'next-view-transitions';
+import NextTopLoader from 'nextjs-toploader';

 const playfair = Playfair_Display({
  subsets: ['latin'],
@@ -53,12 +56,15 @@ export const metadata: Metadata = {
  }
 };

-export default function RootLayout({
+export default async function RootLayout({
  children
 }: {
  children: React.ReactNode;
 }) {
  const theme = siteConfig.theme;
+  const recentPosts = getAllPostsSorted()
+    .slice(0, 5)
+    .map((p) => ({ title: p.title, url: p.url }));

  // WebSite Schema
  const websiteSchema = {
@@ -98,19 +104,27 @@ export default function RootLayout({
  };

  return (
-    <html lang={siteConfig.defaultLocale} suppressHydrationWarning className={`${playfair.variable} ${lxgwWenKai.variable}`}>
-      <head>
-        {/* Preconnect to Google Fonts for faster font loading */}
-        <link rel="preconnect" href="https://fonts.googleapis.com" />
-        <link rel="preconnect" href="https://fonts.gstatic.com" crossOrigin="anonymous" />
-      </head>
-      <body>
-        <JsonLd data={websiteSchema} />
-        <JsonLd data={organizationSchema} />
-        <style
-          // Set CSS variables for accent colors (light + dark variants)
-          dangerouslySetInnerHTML={{
-            __html: `
+    <ViewTransitions>
+      <html lang={siteConfig.defaultLocale} suppressHydrationWarning className={`${playfair.variable} ${lxgwWenKai.variable}`}>
+        <head>
+          {/* Preconnect to Google Fonts for faster font loading */}
+          <link rel="preconnect" href="https://fonts.googleapis.com" />
+          <link rel="preconnect" href="https://fonts.gstatic.com" crossOrigin="anonymous" />
+        </head>
+        <body>
+          <NextTopLoader
+            color={theme.accent}
+            height={3}
+            showSpinner={false}
+            speed={200}
+            shadow={`0 0 10px ${theme.accent}, 0 0 5px ${theme.accent}`}
+          />
+          <JsonLd data={websiteSchema} />
+          <JsonLd data={organizationSchema} />
+          <style
+            // Set CSS variables for accent colors (light + dark variants)
+            dangerouslySetInnerHTML={{
+              __html: `
              :root {
                --color-accent: ${theme.accent};
                --color-accent-soft: ${theme.accentSoft};
@@ -118,13 +132,14 @@ export default function RootLayout({
                --color-accent-text-dark: ${theme.accentTextDark};
              }
            `
-          }}
-        />
-        <ThemeProvider attribute="class" defaultTheme="system" enableSystem>
-          <LayoutShell>{children}</LayoutShell>
-        </ThemeProvider>
-        <WebVitals />
-      </body>
-    </html>
+            }}
+          />
+          <ThemeProvider attribute="class" defaultTheme="system" enableSystem>
+            <LayoutShell recentPosts={recentPosts}>{children}</LayoutShell>
+          </ThemeProvider>
+          <WebVitals />
+        </body>
+      </html>
+    </ViewTransitions>
  );
 }
--- a/app/not-found.tsx
+++ b/app/not-found.tsx
@@ -0,0 +1,25 @@
+import Link from 'next/link';
+
+export default function NotFound() {
+  return (
+    <div className="flex min-h-[60vh] flex-col items-center justify-center px-4">
+      <div className="max-w-md text-center">
+        <h1 className="type-display mb-2 text-6xl font-bold text-slate-300 dark:text-slate-600">
+          404
+        </h1>
+        <h2 className="mb-4 text-xl font-semibold text-slate-800 dark:text-slate-200">
+          找不到頁面
+        </h2>
+        <p className="mb-8 text-slate-600 dark:text-slate-400">
+          您造訪的連結可能已失效或不存在。
+        </p>
+        <Link
+          href="/"
+          className="inline-flex items-center rounded-lg bg-slate-800 px-6 py-3 text-sm font-medium text-white transition-colors hover:bg-slate-700 focus:outline-none focus:ring-2 focus:ring-slate-500 focus:ring-offset-2 dark:bg-slate-200 dark:text-slate-900 dark:hover:bg-slate-300"
+        >
+          返回首頁
+        </Link>
+      </div>
+    </div>
+  );
+}
--- a/app/page.tsx
+++ b/app/page.tsx
@@ -1,10 +1,11 @@
-import Link from 'next/link';
+import { Link } from 'next-view-transitions';
 import { getAllPostsSorted } from '@/lib/posts';
 import { siteConfig } from '@/lib/config';
 import { PostListItem } from '@/components/post-list-item';
 import { TimelineWrapper } from '@/components/timeline-wrapper';
 import { SidebarLayout } from '@/components/sidebar-layout';
 import { JsonLd } from '@/components/json-ld';
+import { HeroSection } from '@/components/hero-section';

 export default function HomePage() {
  const posts = getAllPostsSorted().slice(0, siteConfig.postsPerPage);
@@ -34,14 +35,13 @@ export default function HomePage() {
      <JsonLd data={collectionPageSchema} />
      <section className="space-y-6">
      <SidebarLayout>
-        <header className="space-y-1 text-center">
-          <h1 className="type-title font-bold text-slate-900 dark:text-slate-50">
-            {siteConfig.name} 的最新動態
-          </h1>
-          <p className="type-small text-slate-600 dark:text-slate-300">
-            {siteConfig.tagline}
-          </p>
-        </header>
+        <h1 className="sr-only">
+          {siteConfig.name} 的最新動態 — {siteConfig.tagline}
+        </h1>
+        <HeroSection
+          title={`${siteConfig.name} 的最新動態`}
+          tagline={siteConfig.tagline}
+        />

        <div>
          <div className="mb-3 flex items-baseline justify-between">
--- a/app/pages/[slug]/page.tsx
+++ b/app/pages/[slug]/page.tsx
@@ -1,4 +1,4 @@
-import Link from 'next/link';
+import { Link } from 'next-view-transitions';
 import Image from 'next/image';
 import { notFound } from 'next/navigation';
 import type { Metadata } from 'next';
@@ -10,6 +10,8 @@ import { PostLayout } from '@/components/post-layout';
 import { ScrollReveal } from '@/components/scroll-reveal';
 import { SectionDivider } from '@/components/section-divider';
 import { JsonLd } from '@/components/json-ld';
+import { DevEnvDeviceHero } from '@/components/dev-env-device-hero';
+import { HomeLabDeviceHero } from '@/components/homelab-device-hero';

 export function generateStaticParams() {
  const params = allPages.map((page) => ({
@@ -75,11 +77,11 @@ export default async function StaticPage({ params }: Props) {
    <>
      <JsonLd data={webPageSchema} />
      <ReadingProgress />
-      <PostLayout hasToc={hasToc} contentKey={slug}>
-        <div className="space-y-8">
+      <PostLayout hasToc={hasToc} contentKey={slug} wide={slug === 'dev-env' || slug === 'homelab'}>
+        <div className={slug === 'dev-env' || slug === 'homelab' ? 'space-y-4' : 'space-y-8'}>
          <SectionDivider>
            <ScrollReveal>
-              <header className="mb-6 space-y-4 text-center">
+              <header className={slug === 'dev-env' || slug === 'homelab' ? 'mb-4 space-y-3 text-center' : 'mb-6 space-y-4 text-center'}>
                {page.published_at && (
                  <p className="type-small text-slate-500 dark:text-slate-500">
                    {new Date(page.published_at).toLocaleDateString(
@@ -115,18 +117,24 @@ export default async function StaticPage({ params }: Props) {
                data-toc-content={slug}
                className="prose prose-lg prose-slate mx-auto max-w-none dark:prose-invert"
              >
-                {page.feature_image && (
-                  <div className="-mx-4 mb-8 transition-all duration-500 sm:-mx-12 lg:-mx-20 group-[.toc-open]:lg:-mx-4">
-                    <Image
-                      src={page.feature_image.replace('../assets', '/assets')}
-                      alt={page.title}
-                      width={1200}
-                      height={600}
-                      sizes="(max-width: 768px) 100vw, (max-width: 1200px) 90vw, 1200px"
-                      priority
-                      className="w-full rounded-xl shadow-lg"
-                    />
-                  </div>
+                {slug === 'dev-env' ? (
+                  <DevEnvDeviceHero />
+                ) : slug === 'homelab' ? (
+                  <HomeLabDeviceHero />
+                ) : (
+                  page.feature_image && (
+                    <div className="-mx-4 mb-8 transition-all duration-500 sm:-mx-12 lg:-mx-20 group-[.toc-open]:lg:-mx-4">
+                      <Image
+                        src={page.feature_image.replace('../assets', '/assets')}
+                        alt={page.title}
+                        width={1200}
+                        height={600}
+                        sizes="(max-width: 768px) 100vw, (max-width: 1200px) 90vw, 1200px"
+                        priority
+                        className="w-full rounded-xl shadow-lg"
+                      />
+                    </div>
+                  )
                )}
                <div dangerouslySetInnerHTML={{ __html: page.body.html }} />
              </article>
--- a/app/projects/page.tsx
+++ b/app/projects/page.tsx
@@ -1,6 +1,7 @@
-import Link from 'next/link';
+import { FaGithub } from 'react-icons/fa';
 import { fetchPublicRepos } from '@/lib/github';
 import { SidebarLayout } from '@/components/sidebar-layout';
+import { RepoCard } from '@/components/repo-card';

 export const revalidate = 3600;

@@ -20,53 +21,27 @@ export default async function ProjectsPage() {
          </h1>
          <p className="type-small text-slate-500 dark:text-slate-400">
            從我的 GitHub 帳號自動抓取公開的程式庫與專案。
+            {repos.length > 0 && (
+              <span className="ml-1">共 {repos.length} 個專案</span>
+            )}
          </p>
        </header>

        {repos.length === 0 ? (
-          <p className="mt-4 type-small text-slate-500 dark:text-slate-400">
-            目前沒有可顯示的 GitHub 專案，或暫時無法連線到 GitHub。
-          </p>
+          <div className="mt-6 flex flex-col items-center gap-3 rounded-2xl border border-dashed border-slate-200 bg-slate-50/50 p-8 text-center dark:border-slate-700 dark:bg-slate-900/30">
+            <FaGithub className="h-12 w-12 text-slate-400 dark:text-slate-500" />
+            <p className="type-small text-slate-500 dark:text-slate-400">
+              目前沒有可顯示的 GitHub 專案，或暫時無法連線到 GitHub。
+            </p>
+          </div>
        ) : (
          <ul className="mt-4 grid gap-4 sm:grid-cols-2">
-            {repos.map((repo) => (
-              <li
+            {repos.map((repo, index) => (
+              <RepoCard
                key={repo.id}
-                className="flex h-full flex-col rounded-lg border border-slate-200 bg-white p-4 shadow-sm transition hover:-translate-y-0.5 hover:shadow-md dark:border-slate-800 dark:bg-slate-900"
-              >
-                <div className="flex items-start justify-between gap-2">
-                  <Link
-                    href={repo.htmlUrl}
-                    prefetch={false}
-                    target="_blank"
-                    rel="noreferrer"
-                    className="type-base font-semibold text-slate-900 transition-colors hover:text-accent dark:text-slate-50"
-                  >
-                    {repo.name}
-                  </Link>
-                  {repo.stargazersCount > 0 && (
-                    <span className="inline-flex items-center gap-1 rounded-full bg-amber-50 px-2 py-0.5 text-xs font-medium text-amber-700 dark:bg-amber-900/40 dark:text-amber-300">
-                      ★ {repo.stargazersCount}
-                    </span>
-                  )}
-                </div>
-
-                {repo.description && (
-                  <p className="mt-2 flex-1 type-small text-slate-600 dark:text-slate-300">
-                    {repo.description}
-                  </p>
-                )}
-
-                <div className="mt-3 flex items-center justify-between text-xs text-slate-500 dark:text-slate-400">
-                  <span>{repo.language ?? '其他'}</span>
-                  <span suppressHydrationWarning>
-                    更新於{' '}
-                    {repo.updatedAt
-                      ? new Date(repo.updatedAt).toLocaleDateString('zh-TW')
-                      : '未知'}
-                  </span>
-                </div>
-              </li>
+                repo={repo}
+                animationDelay={index * 50}
+              />
            ))}
          </ul>
        )}
--- a/app/tags/page.tsx
+++ b/app/tags/page.tsx
@@ -1,4 +1,4 @@
-import Link from 'next/link';
+import { Link } from 'next-view-transitions';
 import type { Metadata } from 'next';
 import { FiTag, FiTrendingUp } from 'react-icons/fi';
 import { getAllTagsWithCount } from '@/lib/posts';
--- a/app/template.tsx
+++ b/app/template.tsx
@@ -1,20 +1,35 @@
 'use client';

-import { useEffect, useRef } from 'react';
+import { useEffect, useRef, useState } from 'react';

 export default function Template({ children }: { children: React.ReactNode }) {
  const containerRef = useRef<HTMLDivElement>(null);
+  const [prefersReducedMotion, setPrefersReducedMotion] = useState(true);
+
+  useEffect(() => {
+    const mq = window.matchMedia('(prefers-reduced-motion: reduce)');
+    setPrefersReducedMotion(mq.matches);
+    const handler = () => setPrefersReducedMotion(mq.matches);
+    mq.addEventListener('change', handler);
+    return () => mq.removeEventListener('change', handler);
+  }, []);

  useEffect(() => {
    const container = containerRef.current;
    if (!container) return;

+    if (prefersReducedMotion) {
+      container.style.animation = 'none';
+      container.style.opacity = '1';
+      container.style.transform = 'none';
+      return;
+    }
+
    // Trigger animation on mount
    container.style.animation = 'none';
-    // Force reflow
    void container.offsetHeight;
-    container.style.animation = 'pageEnter 0.3s cubic-bezier(0.32, 0.72, 0, 1) forwards';
-  }, [children]);
+    container.style.animation = 'pageEnter 0.45s cubic-bezier(0.32, 0.72, 0, 1) forwards';
+  }, [children, prefersReducedMotion]);

  return (
    <div ref={containerRef} className="page-transition">
--- a/components/dev-env-device-hero.tsx
+++ b/components/dev-env-device-hero.tsx
@@ -0,0 +1,97 @@
+'use client';
+
+import { SiArchlinux, SiUbuntu, SiLinux } from 'react-icons/si';
+
+/**
+ * Mac mini + 螢幕 3D 裝置展示
+ * 使用純 CSS 3D transforms，取代開發工作環境頁的 feature_image
+ */
+export function DevEnvDeviceHero() {
+  return (
+    <div
+      className="dev-env-device-hero -mx-4 mb-6 flex justify-center py-4 sm:-mx-12 sm:py-6 lg:-mx-20 lg:py-8 group-[.toc-open]:lg:-mx-4"
+      role="img"
+      aria-label="Mac mini、鍵盤與外接螢幕的 3D 裝置展示"
+    >
+      <div className="dev-env-device-scene">
+        {/* Monitor */}
+        <div className="dev-env-monitor">
+          {/* Bezel */}
+          <div className="dev-env-bezel">
+            {/* Screen */}
+            <div className="dev-env-screen">
+              {/* macOS Desktop mockup */}
+              <div className="dev-env-desktop">
+                {/* macOS Menu bar - 半透明毛玻璃 */}
+                <div className="dev-env-menubar">
+                  <span className="dev-env-apple" aria-hidden>{'\uF8FF'}</span>
+                  <span className="dev-env-app-name">Terminal</span>
+                  <span className="dev-env-spacer" />
+                  <span className="dev-env-menubar-right">
+                    <span className="dev-env-menubar-icon" aria-hidden />
+                    <span className="dev-env-menubar-icon" aria-hidden />
+                    <span className="dev-env-menubar-icon" aria-hidden />
+                    <span className="dev-env-time">14:30</span>
+                  </span>
+                </div>
+                {/* Window - Terminal 顯示 Arch / Ubuntu / Tux 三個 Logo */}
+                <div className="dev-env-window">
+                  <div className="dev-env-window-titlebar">
+                    <span className="dev-env-traffic-light dev-env-traffic-red" aria-hidden />
+                    <span className="dev-env-traffic-light dev-env-traffic-yellow" aria-hidden />
+                    <span className="dev-env-traffic-light dev-env-traffic-green" aria-hidden />
+                  </div>
+                  <div className="dev-env-window-content">
+                    <div className="dev-env-terminal-prompt">
+                      <span className="dev-env-prompt">$</span> neofetch --ascii_distro arch,ubuntu,tux
+                    </div>
+                    <div className="dev-env-terminal-logos">
+                      <div className="dev-env-logo-svg" aria-label="Arch Linux logo">
+                        <SiArchlinux className="dev-env-svg-arch" size={36} />
+                      </div>
+                      <div className="dev-env-logo-svg" aria-label="Ubuntu logo">
+                        <SiUbuntu className="dev-env-svg-ubuntu" size={36} />
+                      </div>
+                      <div className="dev-env-logo-svg" aria-label="Tux Linux penguin logo">
+                        <SiLinux className="dev-env-svg-tux" size={36} />
+                      </div>
+                    </div>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+          {/* Monitor stand */}
+          <div className="dev-env-stand" />
+        </div>
+
+        {/* Desk surface - Mac mini 與鍵盤均勻放置 */}
+        <div className="dev-env-desk">
+          {/* 鍵盤 - Magic Keyboard 風格，鍵帽網格 */}
+          <div className="dev-env-keyboard">
+            <div className="dev-env-keyboard-body">
+              <div className="dev-env-keyboard-keys">
+                {[14, 14, 13, 12].map((keyCount, row) => (
+                  <div key={row} className="dev-env-keyboard-row">
+                    {Array.from({ length: keyCount }).map((_, col) => (
+                      <div key={col} className="dev-env-key" />
+                    ))}
+                  </div>
+                ))}
+                <div className="dev-env-keyboard-row dev-env-keyboard-row-space">
+                  <div className="dev-env-key dev-env-key-space" />
+                </div>
+              </div>
+            </div>
+          </div>
+          {/* Mac mini M4 2024 - 頂視，避免 3D 偽影 */}
+          <div className="dev-env-macmini">
+            <div className="dev-env-macmini-top">
+              <span className="dev-env-macmini-apple" aria-hidden>{'\uF8FF'}</span>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+}
--- a/components/hero-section.tsx
+++ b/components/hero-section.tsx
@@ -0,0 +1,117 @@
+'use client';
+
+import { useState, useEffect } from 'react';
+import { MatrixRain } from './matrix-rain';
+import { TerminalWindow } from './terminal-window';
+
+interface HeroSectionProps {
+  title: string;
+  tagline: string;
+}
+
+type Phase = 'matrix' | 'transition' | 'terminal';
+
+const MIN_MATRIX_DURATION = 1500;
+const MAX_MATRIX_DURATION = 6000;
+const TRANSITION_DURATION = 600;
+
+export function HeroSection({ title, tagline }: HeroSectionProps) {
+  const [phase, setPhase] = useState<Phase>('matrix');
+  const [matrixOpacity, setMatrixOpacity] = useState(1);
+  const [terminalOpacity, setTerminalOpacity] = useState(0);
+  const [reducedMotion, setReducedMotion] = useState(false);
+
+  useEffect(() => {
+    const mq = window.matchMedia('(prefers-reduced-motion: reduce)');
+    setReducedMotion(mq.matches);
+  }, []);
+
+  const handleMatrixComplete = () => {
+    setPhase('transition');
+    setMatrixOpacity(0);
+    setTerminalOpacity(1);
+  };
+
+  useEffect(() => {
+    if (phase !== 'matrix') return;
+
+    const startTime = Date.now();
+    let maxTimerId: ReturnType<typeof setTimeout>;
+    let minTimerId: ReturnType<typeof setTimeout>;
+
+    const scheduleTransition = () => {
+      const elapsed = Date.now() - startTime;
+      const remaining = Math.max(0, MIN_MATRIX_DURATION - elapsed);
+      if (remaining > 0) {
+        minTimerId = setTimeout(handleMatrixComplete, remaining);
+      } else {
+        handleMatrixComplete();
+      }
+    };
+
+    const onLoad = () => {
+      window.removeEventListener('load', onLoad);
+      clearTimeout(maxTimerId);
+      scheduleTransition();
+    };
+
+    if (document.readyState === 'complete') {
+      scheduleTransition();
+    } else {
+      window.addEventListener('load', onLoad);
+      maxTimerId = setTimeout(() => {
+        window.removeEventListener('load', onLoad);
+        handleMatrixComplete();
+      }, MAX_MATRIX_DURATION);
+    }
+
+    return () => {
+      window.removeEventListener('load', onLoad);
+      clearTimeout(maxTimerId);
+      clearTimeout(minTimerId);
+    };
+  }, [phase]);
+
+  useEffect(() => {
+    if (phase === 'transition') {
+      const id = setTimeout(() => setPhase('terminal'), TRANSITION_DURATION);
+      return () => clearTimeout(id);
+    }
+  }, [phase]);
+
+  // Skip Matrix entirely if user prefers reduced motion
+  useEffect(() => {
+    if (reducedMotion) {
+      setPhase('terminal');
+      setMatrixOpacity(0);
+      setTerminalOpacity(1);
+    }
+  }, [reducedMotion]);
+
+  return (
+    <div className="relative h-[360px] w-full overflow-hidden rounded-2xl sm:h-[400px] lg:h-[440px] xl:h-[480px]">
+      {/* Matrix rain - full area, fades out */}
+      {!reducedMotion && (
+        <div
+          className="absolute inset-0 transition-opacity duration-[600ms] ease-out"
+          style={{ opacity: matrixOpacity }}
+          aria-hidden="true"
+        >
+          <MatrixRain className="h-full w-full" />
+        </div>
+      )}
+
+      {/* Terminal - fades in over Matrix, responsive width */}
+      <div
+        className="relative z-10 mx-auto w-full max-w-2xl px-4 py-6 transition-opacity duration-[600ms] ease-out sm:max-w-3xl lg:max-w-4xl xl:max-w-5xl"
+        style={{ opacity: reducedMotion ? 1 : terminalOpacity }}
+      >
+        <TerminalWindow
+          title={title}
+          tagline={tagline}
+          reducedMotion={reducedMotion}
+        />
+      </div>
+    </div>
+  );
+}
--- a/components/homelab-device-hero.tsx
+++ b/components/homelab-device-hero.tsx
@@ -0,0 +1,78 @@
+'use client';
+
+import { SiTruenas, SiProxmox } from 'react-icons/si';
+import { FiServer } from 'react-icons/fi';
+
+/**
+ * HomeLab 設備展示：Proxmox VE + VyOS、Switch、NAS (TrueNAS)
+ * 使用純 CSS 藝術，取代 HomeLab 頁的 feature_image
+ */
+export function HomeLabDeviceHero() {
+  return (
+    <div
+      className="homelab-device-hero -mx-4 mb-6 flex justify-center py-4 sm:-mx-12 sm:py-6 lg:-mx-20 lg:py-8 group-[.toc-open]:lg:-mx-4"
+      role="img"
+      aria-label="HomeLab 設備：Proxmox VE、VyOS、交換器、NAS (TrueNAS)"
+    >
+      <div className="homelab-device-scene w-full max-w-full">
+        <div className="homelab-rack">
+          {/* Proxmox VE + VyOS Host */}
+          <div className="homelab-router">
+            <div className="homelab-router-body">
+              <div className="homelab-router-leds">
+                <span className="homelab-led homelab-led-power" aria-hidden />
+                <span className="homelab-led homelab-led-wan" aria-hidden />
+                <span className="homelab-led homelab-led-lan" aria-hidden />
+              </div>
+              <div className="homelab-router-logos">
+                <SiProxmox className="homelab-proxmox-logo homelab-logo-svg" aria-label="Proxmox VE" />
+                <FiServer className="homelab-router-icon homelab-logo-svg" aria-label="VyOS Router" />
+              </div>
+            </div>
+          </div>
+
+          {/* 網路線 - 連接 Proxmox 與 Switch */}
+          <div className="homelab-cable" aria-hidden>
+            <span className="homelab-cable-line" />
+          </div>
+
+          {/* Switch */}
+          <div className="homelab-switch">
+            <div className="homelab-switch-body">
+              <div className="homelab-switch-ports">
+                {[1, 2].map((row) => (
+                  <div key={row} className="homelab-port-row">
+                    {Array.from({ length: 8 }).map((_, i) => (
+                      <div key={i} className="homelab-port">
+                        <span className="homelab-port-led homelab-port-led-active" aria-hidden />
+                      </div>
+                    ))}
+                  </div>
+                ))}
+              </div>
+            </div>
+          </div>
+
+          {/* 網路線 - 連接 Switch 與 NAS */}
+          <div className="homelab-cable" aria-hidden>
+            <span className="homelab-cable-line" />
+          </div>
+
+          {/* NAS - TrueNAS */}
+          <div className="homelab-nas">
+            <div className="homelab-nas-body">
+              <div className="homelab-nas-drives">
+                {[1, 2, 3, 4].map((i) => (
+                  <div key={i} className="homelab-drive-slot" aria-hidden />
+                ))}
+              </div>
+              <div className="homelab-nas-logo" aria-label="TrueNAS logo">
+                <SiTruenas className="homelab-truenas-logo" size={28} />
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+}
--- a/components/layout-shell.tsx
+++ b/components/layout-shell.tsx
@@ -9,10 +9,15 @@ const BackToTop = dynamic(() => import('./back-to-top').then(mod => ({ default:
  ssr: false,
 });

-export function LayoutShell({ children }: { children: React.ReactNode }) {
+interface LayoutShellProps {
+  children: React.ReactNode;
+  recentPosts?: { title: string; url: string }[];
+}
+
+export function LayoutShell({ children, recentPosts = [] }: LayoutShellProps) {
  return (
    <div className="flex min-h-screen flex-col">
-      <SiteHeader />
+      <SiteHeader recentPosts={recentPosts} />
      <main className="flex-1 container mx-auto px-4 py-6">
        {children}
      </main>
--- a/components/mastodon-feed.tsx
+++ b/components/mastodon-feed.tsx
@@ -83,10 +83,19 @@ export function MastodonFeed() {
      {loading ? (
        <div className="space-y-3">
          {[...Array(3)].map((_, i) => (
-            <div key={i} className="animate-pulse">
-              <div className="h-3 w-3/4 rounded bg-slate-200 dark:bg-slate-800"></div>
-              <div className="mt-2 h-3 w-full rounded bg-slate-200 dark:bg-slate-800"></div>
-              <div className="mt-2 h-2 w-1/3 rounded bg-slate-200 dark:bg-slate-800"></div>
+            <div key={i}>
+              <div
+                className="mastodon-skeleton-shimmer h-3 w-3/4 rounded"
+                style={{ animationDelay: `${i * 120}ms` }}
+              />
+              <div
+                className="mastodon-skeleton-shimmer mt-2 h-3 w-full rounded"
+                style={{ animationDelay: `${i * 120}ms` }}
+              />
+              <div
+                className="mastodon-skeleton-shimmer mt-2 h-2 w-1/3 rounded"
+                style={{ animationDelay: `${i * 120}ms` }}
+              />
            </div>
          ))}
        </div>
@@ -125,10 +134,83 @@ export function MastodonFeed() {
                    {truncated}
                  </p>

-                  {/* Media indicator */}
+                  {/* Media attachments - render images/videos from remote URLs */}
                  {hasMedia && (
-                    <div className="type-small text-slate-400 dark:text-slate-500">
-                      📎 包含 {displayStatus.media_attachments.length} 個媒體
+                    <div
+                      className={`mt-1.5 grid gap-1 ${
+                        displayStatus.media_attachments.length === 1
+                          ? 'grid-cols-1'
+                          : 'grid-cols-2'
+                      }`}
+                    >
+                      {displayStatus.media_attachments.map((att) => {
+                        const src = att.preview_url ?? att.url;
+                        if (!src) return null;
+
+                        if (att.type === 'image') {
+                          return (
+                            <img
+                              key={att.id}
+                              src={src}
+                              alt={att.description ?? ''}
+                              loading="lazy"
+                              className="aspect-video w-full rounded-md object-cover"
+                            />
+                          );
+                        }
+                        if (att.type === 'gifv' && att.url) {
+                          return (
+                            <div
+                              key={att.id}
+                              className="overflow-hidden rounded-md"
+                              onClick={(e) => e.stopPropagation()}
+                            >
+                              <video
+                                src={att.url}
+                                poster={att.preview_url ?? undefined}
+                                autoPlay
+                                loop
+                                muted
+                                playsInline
+                                className="aspect-video w-full object-cover"
+                              />
+                            </div>
+                          );
+                        }
+                        if (att.type === 'video' && att.url) {
+                          return (
+                            <div
+                              key={att.id}
+                              className="overflow-hidden rounded-md"
+                              onClick={(e) => e.stopPropagation()}
+                            >
+                              <video
+                                src={att.url}
+                                poster={att.preview_url ?? undefined}
+                                controls
+                                playsInline
+                                className="aspect-video w-full object-cover"
+                              />
+                            </div>
+                          );
+                        }
+                        if (att.type === 'audio' && att.preview_url) {
+                          return (
+                            <div
+                              key={att.id}
+                              className="flex aspect-video w-full items-center justify-center rounded-md bg-slate-200 dark:bg-slate-700"
+                            >
+                              <img
+                                src={att.preview_url}
+                                alt={att.description ?? '音訊'}
+                                loading="lazy"
+                                className="h-full w-full object-cover opacity-80"
+                              />
+                            </div>
+                          );
+                        }
+                        return null;
+                      })}
                    </div>
                  )}

--- a/components/matrix-rain.tsx
+++ b/components/matrix-rain.tsx
@@ -0,0 +1,124 @@
+'use client';
+
+import { useEffect, useRef } from 'react';
+
+// Matrix-style characters: katakana, numbers, Latin
+const CHARS = 'ｱｲｳｴｵｶｷｸｹｺｻｼｽｾｿﾀﾁﾂﾃﾄﾅﾆﾇﾈﾉﾊﾋﾌﾍﾎﾏﾐﾑﾒﾓﾔﾕﾖﾗﾘﾙﾚﾛﾜﾝ0123456789ABCDEFGHIJKLMNOPQRSTUVWXYZ';
+
+interface MatrixRainProps {
+  /** Opacity 0-1 for fade out control */
+  opacity?: number;
+  className?: string;
+}
+
+interface Drop {
+  x: number;
+  y: number;
+  speed: number;
+  chars: string[];
+  charIndex: number;
+}
+
+export function MatrixRain({
+  opacity = 1,
+  className = '',
+}: MatrixRainProps) {
+  const canvasRef = useRef<HTMLCanvasElement>(null);
+
+  useEffect(() => {
+    const canvas = canvasRef.current;
+    if (!canvas) return;
+
+    const ctx = canvas.getContext('2d');
+    if (!ctx) return;
+
+    const resize = () => {
+      const dpr = Math.min(window.devicePixelRatio ?? 1, 2);
+      const rect = canvas.getBoundingClientRect();
+      canvas.width = rect.width * dpr;
+      canvas.height = rect.height * dpr;
+      ctx.scale(dpr, dpr);
+      canvas.style.width = `${rect.width}px`;
+      canvas.style.height = `${rect.height}px`;
+    };
+
+    resize();
+    window.addEventListener('resize', resize);
+
+    const fontSize = 14;
+    const columns = Math.floor(canvas.getBoundingClientRect().width / fontSize);
+    const drops: Drop[] = Array.from({ length: columns }, (_, i) => ({
+      x: i * fontSize,
+      y: Math.random() * -100,
+      speed: 0.15 + Math.random() * 0.4,
+      chars: Array.from({ length: 20 }, () =>
+        CHARS[Math.floor(Math.random() * CHARS.length)]
+      ),
+      charIndex: Math.floor(Math.random() * 20),
+    }));
+
+    let animationId: number;
+    let lastTime: number | null = null;
+
+    const draw = (timestamp: number) => {
+      const rect = canvas.getBoundingClientRect();
+      const delta =
+        lastTime !== null ? (timestamp - lastTime) / 1000 : 1 / 60;
+      lastTime = timestamp;
+
+      ctx.fillStyle = 'rgba(15, 23, 42, 0.05)';
+      ctx.fillRect(0, 0, rect.width, rect.height);
+
+      ctx.font = `${fontSize}px "JetBrains Mono", "SF Mono", "Fira Code", monospace`;
+
+      drops.forEach((drop) => {
+        // Bright green for leading char
+        ctx.fillStyle = 'rgba(34, 197, 94, 1)';
+        ctx.fillText(drop.chars[drop.charIndex], drop.x, drop.y);
+
+        // Dimmer trailing chars
+        for (let i = 1; i < 8; i++) {
+          const idx = (drop.charIndex - i + 20) % 20;
+          const alpha = 1 - i * 0.12;
+          ctx.fillStyle = `rgba(34, 197, 94, ${alpha * 0.4})`;
+          ctx.fillText(
+            drop.chars[idx],
+            drop.x,
+            drop.y - i * fontSize
+          );
+        }
+
+        // Frame-rate independent: scale by delta, 60fps as baseline
+        drop.y += drop.speed * fontSize * delta * 60;
+        if (drop.y > rect.height + 100) {
+          drop.y = -50;
+          drop.charIndex = (drop.charIndex + 1) % 20;
+        } else {
+          drop.charIndex = (drop.charIndex + 1) % 20;
+        }
+      });
+
+      animationId = requestAnimationFrame(draw);
+    };
+
+    animationId = requestAnimationFrame(draw);
+
+    return () => {
+      cancelAnimationFrame(animationId);
+      window.removeEventListener('resize', resize);
+    };
+  }, []);
+
+  return (
+    <canvas
+      ref={canvasRef}
+      className={className}
+      style={{
+        opacity,
+        transition: 'opacity 0.6s ease-out',
+        background: 'rgb(15, 23, 42)',
+      }}
+      aria-hidden="true"
+    />
+  );
+}
--- a/components/nav-menu.tsx
+++ b/components/nav-menu.tsx
@@ -19,7 +19,7 @@ import {
  FiChevronDown,
  FiChevronRight
 } from 'react-icons/fi';
-import Link from 'next/link';
+import { Link } from 'next-view-transitions';
 import { usePathname } from 'next/navigation';

 export type IconKey =
@@ -131,8 +131,8 @@ export function NavMenu({ items }: NavMenuProps) {
        className="motion-link inline-flex items-center gap-2 rounded-xl px-3 py-2 text-sm text-slate-600 hover:bg-slate-100 hover:text-accent focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-accent/40 dark:text-slate-200 dark:hover:bg-slate-800"
        onClick={close}
      >
-        <Icon className="h-4 w-4 text-slate-400" />
-        <span>{item.label}</span>
+        <Icon className="h-4 w-4 shrink-0 text-slate-400" />
+        <span className="whitespace-nowrap">{item.label}</span>
      </Link>
    ) : null;
  };
@@ -150,8 +150,8 @@ export function NavMenu({ items }: NavMenuProps) {
            className="flex w-full items-center justify-between rounded-xl px-4 py-3 text-base font-medium text-slate-700 transition-colors active:bg-slate-100 dark:text-slate-200 dark:active:bg-slate-800"
          >
            <div className="flex items-center gap-3">
-              <Icon className="h-5 w-5 text-slate-400" />
-              <span>{item.label}</span>
+              <Icon className="h-5 w-5 shrink-0 text-slate-400" />
+              <span className="whitespace-nowrap">{item.label}</span>
            </div>
            <FiChevronRight
              className={`h-5 w-5 text-slate-400 transition-transform duration-200 ${isExpanded ? 'rotate-90' : ''}`}
@@ -178,8 +178,8 @@ export function NavMenu({ items }: NavMenuProps) {
        className="flex w-full items-center gap-3 rounded-xl px-4 py-3 text-base font-medium text-slate-700 transition-colors active:bg-slate-100 dark:text-slate-200 dark:active:bg-slate-800"
        onClick={close}
      >
-        <Icon className="h-5 w-5 text-slate-400" />
-        <span>{item.label}</span>
+        <Icon className="h-5 w-5 shrink-0 text-slate-400" />
+        <span className="whitespace-nowrap">{item.label}</span>
      </Link>
    ) : null;
  };
@@ -261,13 +261,13 @@ export function NavMenu({ items }: NavMenuProps) {
              >
                <button
                  type="button"
-                  className="motion-link type-nav inline-flex items-center gap-1.5 rounded-full px-3 py-1 text-slate-600 hover:text-accent focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-accent/40 dark:text-slate-200"
+                  className="motion-link type-nav inline-flex shrink-0 items-center gap-1.5 rounded-full px-3 py-1 text-slate-600 hover:text-accent focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-accent/40 dark:text-slate-200"
                  aria-haspopup="menu"
                  aria-expanded={isOpen}
                >
-                  <Icon className="h-3.5 w-3.5 text-slate-400 transition group-hover:text-accent" />
-                  <span>{item.label}</span>
-                  <FiChevronDown className="h-3 w-3 text-slate-400 transition group-hover:text-accent" />
+                  <Icon className="h-3.5 w-3.5 shrink-0 text-slate-400 transition group-hover:text-accent" />
+                  <span className="whitespace-nowrap">{item.label}</span>
+                  <FiChevronDown className="h-3 w-3 shrink-0 text-slate-400 transition group-hover:text-accent" />
                </button>

                <div
@@ -290,11 +290,11 @@ export function NavMenu({ items }: NavMenuProps) {
            <Link
              key={item.key}
              href={item.href}
-              className="motion-link type-nav group relative inline-flex items-center gap-1.5 rounded-full px-3 py-1 text-slate-600 hover:text-accent focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-accent/40 dark:text-slate-200"
+              className="motion-link type-nav group relative inline-flex shrink-0 items-center gap-1.5 rounded-full px-3 py-1 text-slate-600 hover:text-accent focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-accent/40 dark:text-slate-200"
              onClick={close}
            >
-              <Icon className="h-3.5 w-3.5 text-slate-400 transition group-hover:text-accent" />
-              <span>{item.label}</span>
+              <Icon className="h-3.5 w-3.5 shrink-0 text-slate-400 transition group-hover:text-accent" />
+              <span className="whitespace-nowrap">{item.label}</span>
              <span className="absolute inset-x-3 -bottom-0.5 h-px origin-left scale-x-0 bg-accent transition duration-180 ease-snappy group-hover:scale-x-100" aria-hidden="true" />
            </Link>
          ) : null;
--- a/components/post-card.tsx
+++ b/components/post-card.tsx
@@ -1,4 +1,4 @@
-import Link from 'next/link';
+import { Link } from 'next-view-transitions';
 import Image from 'next/image';
 import type { Post } from 'contentlayer2/generated';
 import { siteConfig } from '@/lib/config';
--- a/components/post-layout.tsx
+++ b/components/post-layout.tsx
@@ -4,19 +4,14 @@ import { useState, useEffect } from 'react';
 import { createPortal } from 'react-dom';
 import { FiList, FiX } from 'react-icons/fi';
 import dynamic from 'next/dynamic';
-import { clsx, type ClassValue } from 'clsx';
-import { twMerge } from 'tailwind-merge';
+import { cn } from '@/lib/utils';

 // Lazy load PostToc since it's not critical for initial render
 const PostToc = dynamic(() => import('./post-toc').then(mod => ({ default: mod.PostToc })), {
  ssr: false,
 });

-function cn(...inputs: ClassValue[]) {
-    return twMerge(clsx(inputs));
-}
-
-export function PostLayout({ children, hasToc = true, contentKey }: { children: React.ReactNode; hasToc?: boolean; contentKey?: string }) {
+export function PostLayout({ children, hasToc = true, contentKey, wide }: { children: React.ReactNode; hasToc?: boolean; contentKey?: string; wide?: boolean }) {
    const [isTocOpen, setIsTocOpen] = useState(false); // Default closed on mobile
    const [isDesktopTocOpen, setIsDesktopTocOpen] = useState(hasToc); // Separate state for desktop
    const [mounted, setMounted] = useState(false);
@@ -121,7 +116,7 @@ export function PostLayout({ children, hasToc = true, contentKey }: { children:
            )}>
                {/* Main Content Area */}
                <div className="min-w-0">
-                    <div className={cn("mx-auto transition-all duration-500 ease-snappy", isDesktopTocOpen && hasToc ? "max-w-3xl" : "max-w-4xl")}>
+                    <div className={cn("mx-auto transition-all duration-500 ease-snappy", isDesktopTocOpen && hasToc ? "max-w-3xl" : wide ? "max-w-5xl" : "max-w-4xl")}>
                        {children}
                    </div>
                </div>
--- a/components/post-list-item.tsx
+++ b/components/post-list-item.tsx
@@ -1,4 +1,4 @@
-import Link from 'next/link';
+import { Link } from 'next-view-transitions';
 import Image from 'next/image';
 import { Post } from 'contentlayer2/generated';
 import { siteConfig } from '@/lib/config';
--- a/components/post-list-with-controls.tsx
+++ b/components/post-list-with-controls.tsx
@@ -113,10 +113,10 @@ export function PostListWithControls({ posts, pageSize }: Props) {
            <input
              id="post-search"
              type="search"
-              placeholder="標題、標籤、摘要關鍵字"
+              placeholder="搜尋文章…"
              value={searchTerm}
              onChange={(event) => setSearchTerm(event.target.value)}
-              className="w-full rounded-full border border-slate-200 bg-white py-1.5 pl-9 pr-3 text-sm text-slate-700 shadow-sm transition duration-180 ease-snappy focus:border-blue-500 focus:outline-none focus:ring-2 focus:ring-blue-200 dark:border-slate-700 dark:bg-slate-900 dark:text-slate-100 dark:focus:ring-blue-500"
+              className="w-full rounded-full border border-slate-200 bg-white py-1.5 pl-9 pr-3 text-sm text-slate-700 shadow-sm transition duration-180 ease-snappy focus:border-accent focus:outline-none focus:ring-2 focus:ring-accent/20 dark:border-slate-700 dark:bg-slate-900 dark:text-slate-100 dark:focus:border-accent dark:focus:ring-accent/30"
            />
          </div>
        </div>
--- a/components/post-storyline-nav.tsx
+++ b/components/post-storyline-nav.tsx
@@ -1,4 +1,4 @@
-import Link from 'next/link';
+import { Link } from 'next-view-transitions';
 import { Post } from 'contentlayer2/generated';
 import { FiArrowLeft, FiArrowRight } from 'react-icons/fi';

--- a/components/reading-progress.tsx
+++ b/components/reading-progress.tsx
@@ -3,16 +3,34 @@
 import { useEffect, useState } from 'react';
 import { createPortal } from 'react-dom';

+function supportsScrollDrivenAnimations(): boolean {
+  if (typeof CSS === 'undefined') return false;
+  return CSS.supports?.('animation-timeline', 'scroll()') ?? false;
+}
+
 export function ReadingProgress() {
  const [mounted, setMounted] = useState(false);
  const [progress, setProgress] = useState(0);
+  const [useScrollDriven, setUseScrollDriven] = useState(false);

  useEffect(() => {
    setMounted(true);
+    const updateMode = () => {
+      const prefersReducedMotion = window.matchMedia(
+        '(prefers-reduced-motion: reduce)'
+      ).matches;
+      setUseScrollDriven(
+        supportsScrollDrivenAnimations() && !prefersReducedMotion
+      );
+    };
+    updateMode();
+    const mq = window.matchMedia('(prefers-reduced-motion: reduce)');
+    mq.addEventListener('change', updateMode);
+    return () => mq.removeEventListener('change', updateMode);
  }, []);

  useEffect(() => {
-    if (!mounted) return;
+    if (!mounted || useScrollDriven) return;

    const handleScroll = () => {
      const { scrollTop, scrollHeight, clientHeight } = document.documentElement;
@@ -28,21 +46,38 @@ export function ReadingProgress() {
    handleScroll();
    window.addEventListener('scroll', handleScroll, { passive: true });
    return () => window.removeEventListener('scroll', handleScroll);
-  }, [mounted]);
-
+  }, [mounted, useScrollDriven]);

  if (!mounted) return null;

  return createPortal(
    <div className="pointer-events-none fixed inset-x-0 top-0 z-[1200] h-1.5 bg-transparent">
      <div className="relative h-1.5 w-full overflow-visible">
-        <div
-          className="absolute inset-y-0 left-0 w-full origin-left rounded-full bg-gradient-to-r from-[rgba(124,58,237,0.9)] via-[rgba(167,139,250,0.9)] to-[rgba(14,165,233,0.8)] shadow-[0_0_12px_rgba(124,58,237,0.5)] transition-[transform,opacity] duration-300 ease-out"
-          style={{ transform: `scaleX(${progress / 100})`, opacity: progress > 0 ? 1 : 0 }}
-        >
-          <span className="absolute -right-2 top-1/2 h-3 w-3 -translate-y-1/2 rounded-full bg-white/80 blur-[1px] dark:bg-slate-900/80" aria-hidden="true" />
-        </div>
-        <span className="absolute inset-x-0 top-2 h-px bg-gradient-to-r from-transparent via-blue-200/40 to-transparent blur-sm dark:via-blue-900/30" aria-hidden="true" />
+        {useScrollDriven ? (
+          <div className="reading-progress-bar-scroll-driven absolute inset-y-0 left-0 w-full origin-left rounded-full bg-gradient-to-r from-[rgba(124,58,237,0.9)] via-[rgba(167,139,250,0.9)] to-[rgba(14,165,233,0.8)] shadow-[0_0_12px_rgba(124,58,237,0.5)]">
+            <span
+              className="absolute -right-2 top-1/2 h-3 w-3 -translate-y-1/2 rounded-full bg-white/80 blur-[1px] dark:bg-slate-900/80"
+              aria-hidden="true"
+            />
+          </div>
+        ) : (
+          <div
+            className="absolute inset-y-0 left-0 w-full origin-left rounded-full bg-gradient-to-r from-[rgba(124,58,237,0.9)] via-[rgba(167,139,250,0.9)] to-[rgba(14,165,233,0.8)] shadow-[0_0_12px_rgba(124,58,237,0.5)] transition-[transform,opacity] duration-300 ease-out"
+            style={{
+              transform: `scaleX(${progress / 100})`,
+              opacity: progress > 0 ? 1 : 0
+            }}
+          >
+            <span
+              className="absolute -right-2 top-1/2 h-3 w-3 -translate-y-1/2 rounded-full bg-white/80 blur-[1px] dark:bg-slate-900/80"
+              aria-hidden="true"
+            />
+          </div>
+        )}
+        <span
+          className="absolute inset-x-0 top-2 h-px bg-gradient-to-r from-transparent via-blue-200/40 to-transparent blur-sm dark:via-blue-900/30"
+          aria-hidden="true"
+        />
      </div>
    </div>,
    document.body
--- a/components/repo-card.tsx
+++ b/components/repo-card.tsx
@@ -0,0 +1,64 @@
+import { Link } from 'next-view-transitions';
+import { FiExternalLink } from 'react-icons/fi';
+import type { RepoSummary } from '@/lib/github';
+import { getLanguageColor } from '@/lib/github-lang-colors';
+
+interface RepoCardProps {
+  repo: RepoSummary;
+  animationDelay?: number;
+}
+
+export function RepoCard({ repo, animationDelay = 0 }: RepoCardProps) {
+  const langColor = getLanguageColor(repo.language);
+
+  return (
+    <li
+      className={`motion-card group relative flex h-full flex-col rounded-2xl border border-white/40 bg-white/60 p-5 shadow-lg backdrop-blur-md transition-all hover:scale-[1.01] hover:shadow-xl dark:border-white/10 dark:bg-slate-900/60 ${animationDelay > 0 ? 'repo-card-enter' : ''}`}
+      style={
+        animationDelay > 0 ? { animationDelay: `${animationDelay}ms` } : undefined
+      }
+    >
+      <div className="pointer-events-none absolute inset-x-0 top-0 h-0.5 origin-left scale-x-0 bg-gradient-to-r from-blue-500 via-sky-400 to-indigo-500 opacity-80 transition-transform duration-300 ease-out group-hover:scale-x-100 dark:from-blue-400 dark:via-sky-300 dark:to-indigo-400" />
+      <div className="flex items-start justify-between gap-2">
+        <Link
+          href={repo.htmlUrl}
+          prefetch={false}
+          target="_blank"
+          rel="noreferrer"
+          className="type-base inline-flex items-center gap-2 font-semibold text-slate-900 transition-colors hover:text-accent dark:text-slate-50 dark:hover:text-accent"
+        >
+          {repo.name}
+          <FiExternalLink className="h-3.5 w-3.5 opacity-0 transition-opacity group-hover:opacity-100" />
+        </Link>
+        {repo.stargazersCount > 0 && (
+          <span className="inline-flex shrink-0 items-center gap-1 rounded-lg bg-amber-50 px-2 py-0.5 text-xs font-medium text-amber-700 dark:bg-amber-900/40 dark:text-amber-300">
+            ★ {repo.stargazersCount}
+          </span>
+        )}
+      </div>
+
+      {repo.description && (
+        <p className="mt-2 flex-1 line-clamp-2 text-sm text-slate-600 group-hover:text-slate-800 dark:text-slate-300 dark:group-hover:text-slate-100">
+          {repo.description}
+        </p>
+      )}
+
+      <div className="mt-3 flex items-center justify-between gap-2 text-xs text-slate-500 dark:text-slate-400">
+        <span className="inline-flex items-center gap-1.5">
+          <span
+            className="h-2 w-2 shrink-0 rounded-full"
+            style={{ backgroundColor: langColor }}
+            aria-hidden
+          />
+          {repo.language ?? '其他'}
+        </span>
+        <span suppressHydrationWarning>
+          更新於{' '}
+          {repo.updatedAt
+            ? new Date(repo.updatedAt).toLocaleDateString('zh-TW')
+            : '未知'}
+        </span>
+      </div>
+    </li>
+  );
+}
--- a/components/right-sidebar.tsx
+++ b/components/right-sidebar.tsx
@@ -1,6 +1,6 @@
 'use client';

-import Link from 'next/link';
+import { Link } from 'next-view-transitions';
 import Image from 'next/image';
 import { useEffect, useRef, useState } from 'react';
 import { FaGithub, FaMastodon, FaLinkedin } from 'react-icons/fa';
@@ -15,12 +15,16 @@ const MastodonFeed = dynamic(() => import('./mastodon-feed').then(mod => ({ defa
  ssr: false,
 });

-export function RightSidebar() {
-  const [shouldLoadFeed, setShouldLoadFeed] = useState(false);
+/** Shared sidebar content for desktop aside and mobile drawer */
+export function RightSidebarContent({ forceLoadFeed = false }: { forceLoadFeed?: boolean }) {
+  const [shouldLoadFeed, setShouldLoadFeed] = useState(forceLoadFeed);
  const feedRef = useRef<HTMLDivElement>(null);

  useEffect(() => {
-    // Use Intersection Observer to lazy load MastodonFeed when sidebar is visible
+    if (forceLoadFeed) {
+      setShouldLoadFeed(true);
+      return;
+    }
    if (!feedRef.current) return;

    const observer = new IntersectionObserver(
@@ -30,13 +34,12 @@ export function RightSidebar() {
          observer.disconnect();
        }
      },
-      { rootMargin: '100px' } // Start loading 100px before it's visible
+      { rootMargin: '100px' }
    );

    observer.observe(feedRef.current);
-
    return () => observer.disconnect();
-  }, []);
+  }, [forceLoadFeed]);

  const tags = getAllTagsWithCount().slice(0, 5);

@@ -68,9 +71,8 @@ export function RightSidebar() {
  ].filter(Boolean) as { key: string; href: string; icon: any; label: string }[];

  return (
-    <aside className="hidden lg:block">
-      <div className="sticky top-20 flex flex-col gap-4">
-        <section className="motion-card group relative overflow-hidden rounded-xl border bg-white px-4 py-4 shadow-sm hover:bg-slate-50 dark:border-slate-800 dark:bg-slate-900 dark:text-slate-100 dark:hover:bg-slate-800/80">
+    <div className="flex flex-col gap-4">
+      <section className="motion-card group relative overflow-hidden rounded-xl border bg-white px-4 py-4 shadow-sm hover:bg-slate-50 dark:border-slate-800 dark:bg-slate-900 dark:text-slate-100 dark:hover:bg-slate-800/80">
          <div className="pointer-events-none absolute -left-10 -top-10 h-24 w-24 rounded-full bg-sky-300/35 blur-3xl mix-blend-soft-light motion-safe:animate-float-soft dark:bg-sky-500/25" />
          <div className="pointer-events-none absolute -bottom-12 right-[-2.5rem] h-28 w-28 rounded-full bg-indigo-300/30 blur-3xl mix-blend-soft-light motion-safe:animate-float-soft dark:bg-indigo-500/20" />

@@ -163,6 +165,15 @@ export function RightSidebar() {
            </div>
          </section>
        )}
+    </div>
+  );
+}
+
+export function RightSidebar() {
+  return (
+    <aside className="hidden lg:block">
+      <div className="sticky top-20">
+        <RightSidebarContent />
      </div>
    </aside>
  );
--- a/components/search-modal.tsx
+++ b/components/search-modal.tsx
@@ -1,78 +1,69 @@
 'use client';

-import { useEffect, useRef, useState } from 'react';
-import { createPortal } from 'react-dom';
-import { FiSearch, FiX } from 'react-icons/fi';
+import { useCallback, useEffect, useRef, useState } from 'react';
+import { useRouter } from 'next/navigation';
+import { Command } from 'cmdk';
+import {
+  FiSearch,
+  FiHome,
+  FiFileText,
+  FiTag,
+  FiBook
+} from 'react-icons/fi';
+import { cn } from '@/lib/utils';
+
+interface PagefindResult {
+  url: string;
+  meta: { title?: string };
+  excerpt?: string;
+}
+
+interface QuickAction {
+  id: string;
+  title: string;
+  url: string;
+  icon: React.ReactNode;
+}

 interface SearchModalProps {
  isOpen: boolean;
  onClose: () => void;
+  recentPosts?: { title: string; url: string }[];
 }

-export function SearchModal({ isOpen, onClose }: SearchModalProps) {
-  const [isLoaded, setIsLoaded] = useState(false);
-  const searchContainerRef = useRef<HTMLDivElement>(null);
-  const pagefindUIRef = useRef<any>(null);
+export function SearchModal({
+  isOpen,
+  onClose,
+  recentPosts = []
+}: SearchModalProps) {
+  const router = useRouter();
+  const [search, setSearch] = useState('');
+  const [results, setResults] = useState<PagefindResult[]>([]);
+  const [loading, setLoading] = useState(false);
+  const [pagefindReady, setPagefindReady] = useState(false);
+  const pagefindRef = useRef<{
+    init: () => void;
+    options: (opts: { bundlePath: string }) => Promise<void>;
+    preload: (query: string) => void;
+    debouncedSearch: (
+      query: string,
+      opts: object,
+      debounceMs: number
+    ) => Promise<{ results: { data: () => Promise<PagefindResult> }[] } | null>;
+  } | null>(null);

+  // Initialize Pagefind when modal opens
  useEffect(() => {
    if (!isOpen) return;

-    let link: HTMLLinkElement | null = null;
-    let script: HTMLScriptElement | null = null;
-
-    // Load Pagefind UI dynamically when modal opens
    const loadPagefind = async () => {
-      if (pagefindUIRef.current) {
-        // Already loaded
-        return;
-      }
-
      try {
-        // Load Pagefind UI CSS
-        link = document.createElement('link');
-        link.rel = 'stylesheet';
-        link.href = '/_pagefind/pagefind-ui.css';
-        document.head.appendChild(link);
-
-        // Load Pagefind UI JS
-        script = document.createElement('script');
-        script.src = '/_pagefind/pagefind-ui.js';
-        script.onload = () => {
-          if (searchContainerRef.current && (window as any).PagefindUI) {
-            pagefindUIRef.current = new (window as any).PagefindUI({
-              element: searchContainerRef.current,
-              bundlePath: '/_pagefind/',
-              showSubResults: true,
-              showImages: false,
-              excerptLength: 15,
-              resetStyles: false,
-              autofocus: true,
-              translations: {
-                placeholder: '搜尋文章...',
-                clear_search: '清除',
-                load_more: '載入更多結果',
-                search_label: '搜尋此網站',
-                filters_label: '篩選',
-                zero_results: '找不到 [SEARCH_TERM] 的結果',
-                many_results: '找到 [COUNT] 個 [SEARCH_TERM] 的結果',
-                one_result: '找到 [COUNT] 個 [SEARCH_TERM] 的結果',
-                alt_search: '找不到 [SEARCH_TERM] 的結果。改為顯示 [DIFFERENT_TERM] 的結果',
-                search_suggestion: '找不到 [SEARCH_TERM] 的結果。請嘗試以下搜尋：',
-                searching: '搜尋中...'
-              }
-            });
-            setIsLoaded(true);
-
-            // Auto-focus the search input after a short delay
-            setTimeout(() => {
-              const input = searchContainerRef.current?.querySelector('input[type="search"]') as HTMLInputElement;
-              if (input) {
-                input.focus();
-              }
-            }, 100);
-          }
-        };
-        document.head.appendChild(script);
+        const pagefindUrl = `${window.location.origin}/_pagefind/pagefind.js`;
+        const pagefind = await import(/* webpackIgnore: true */ pagefindUrl);
+        await pagefind.options({ bundlePath: '/_pagefind/' });
+        pagefind.init();
+        pagefindRef.current = pagefind;
+        setPagefindReady(true);
      } catch (error) {
        console.error('Failed to load Pagefind:', error);
      }
@@ -80,102 +71,179 @@ export function SearchModal({ isOpen, onClose }: SearchModalProps) {

    loadPagefind();

-    // Cleanup function to prevent duplicate initializations
    return () => {
-      if (link && link.parentNode) {
-        link.parentNode.removeChild(link);
-      }
-      if (script && script.parentNode) {
-        script.parentNode.removeChild(script);
-      }
-      if (pagefindUIRef.current && pagefindUIRef.current.destroy) {
-        pagefindUIRef.current.destroy();
-        pagefindUIRef.current = null;
-      }
+      pagefindRef.current = null;
+      setPagefindReady(false);
+      setSearch('');
+      setResults([]);
    };
  }, [isOpen]);

+  // Debounced search when user types
  useEffect(() => {
-    const handleEscape = (e: KeyboardEvent) => {
-      if (e.key === 'Escape' && isOpen) {
-        onClose();
-      }
-    };
-
-    document.addEventListener('keydown', handleEscape);
-    return () => document.removeEventListener('keydown', handleEscape);
-  }, [isOpen, onClose]);
-
-  useEffect(() => {
-    // Prevent body scroll when modal is open
-    if (isOpen) {
-      document.body.style.overflow = 'hidden';
-    } else {
-      document.body.style.overflow = '';
+    const query = search.trim();
+    if (!query || !pagefindRef.current) {
+      setResults([]);
+      setLoading(false);
+      return;
    }
-    return () => {
-      document.body.style.overflow = '';
-    };
-  }, [isOpen]);

-  if (!isOpen) return null;
+    setLoading(true);
+    pagefindRef.current.preload(query);

-  // Use portal to render modal at document body level to avoid z-index stacking context issues
-  if (typeof window === 'undefined') return null;
+    const timer = setTimeout(async () => {
+      const pagefind = pagefindRef.current;
+      if (!pagefind) return;

-  return createPortal(
-    <div
-      className="fixed inset-0 z-[9999] flex items-start justify-center bg-black/50 backdrop-blur-sm pt-20 px-4"
-      onClick={onClose}
+      const searchResult = await pagefind.debouncedSearch(query, {}, 300);
+      if (searchResult === null) return; // Superseded by newer search
+
+      const dataPromises = searchResult.results.slice(0, 10).map((r) => r.data());
+      const items = await Promise.all(dataPromises);
+      setResults(items);
+      setLoading(false);
+    }, 300);
+
+    return () => clearTimeout(timer);
+  }, [search, pagefindReady]);
+
+  const handleSelect = useCallback(
+    (url: string) => {
+      onClose();
+      router.push(url);
+    },
+    [onClose, router]
+  );
+
+  const navActions: QuickAction[] = [
+    { id: 'home', title: '首頁', url: '/', icon: <FiHome className="size-4" /> },
+    {
+      id: 'blog',
+      title: '部落格',
+      url: '/blog',
+      icon: <FiFileText className="size-4" />
+    },
+    {
+      id: 'tags',
+      title: '標籤',
+      url: '/tags',
+      icon: <FiTag className="size-4" />
+    }
+  ];
+
+  const recentPostActions: QuickAction[] = recentPosts.map((p) => ({
+    id: `post-${p.url}`,
+    title: p.title,
+    url: p.url,
+    icon: <FiBook className="size-4" />
+  }));
+
+  return (
+    <Command.Dialog
+      open={isOpen}
+      onOpenChange={(open) => !open && onClose()}
+      label="全站搜尋"
+      shouldFilter={false}
+      className="fixed left-1/2 top-[20%] z-[9999] w-full max-w-2xl -translate-x-1/2 rounded-2xl border border-white/40 bg-white/95 shadow-2xl backdrop-blur-md dark:border-white/10 dark:bg-slate-900/95"
    >
-      <div
-        className="w-full max-w-3xl rounded-2xl border border-white/40 bg-white/95 shadow-2xl backdrop-blur-md dark:border-white/10 dark:bg-slate-900/95"
-        onClick={(e) => e.stopPropagation()}
-      >
-        {/* Header */}
-        <div className="flex items-center justify-between border-b border-slate-200 px-6 py-4 dark:border-slate-700">
-          <div className="flex items-center gap-2 text-slate-600 dark:text-slate-300">
-            <FiSearch className="h-5 w-5" />
-            <span className="text-sm font-medium">全站搜尋</span>
-          </div>
-          <button
-            onClick={onClose}
-            className="inline-flex h-8 w-8 items-center justify-center rounded-full text-slate-500 transition hover:bg-slate-100 hover:text-slate-700 dark:text-slate-400 dark:hover:bg-slate-800 dark:hover:text-slate-200"
-            aria-label="關閉搜尋"
-          >
-            <FiX className="h-5 w-5" />
-          </button>
-        </div>
-
-        {/* Search Container */}
-        <div className="max-h-[60vh] overflow-y-auto p-6">
-          <div
-            ref={searchContainerRef}
-            className="pagefind-search"
-            data-pagefind-ui
-          />
-          {!isLoaded && (
-            <div className="flex items-center justify-center py-12">
-              <div className="text-center">
-                <div className="inline-block h-8 w-8 animate-spin rounded-full border-4 border-solid border-blue-500 border-r-transparent"></div>
-                <p className="mt-4 text-sm text-slate-500 dark:text-slate-400">
-                  載入搜尋引擎...
-                </p>
-              </div>
-            </div>
-          )}
-        </div>
-
-        {/* Footer */}
-        <div className="border-t border-slate-200 px-6 py-3 text-xs text-slate-500 dark:border-slate-700 dark:text-slate-400">
-          <div className="flex items-center justify-between">
-            <span>按 ESC 關閉</span>
-            <span className="text-right">支援中英文全文搜尋</span>
-          </div>
-        </div>
+      <div className="flex items-center border-b border-slate-200 px-4 dark:border-slate-700">
+        <FiSearch className="size-5 shrink-0 text-slate-400" />
+        <Command.Input
+          value={search}
+          onValueChange={setSearch}
+          placeholder="搜尋文章或快速導航…"
+          className="flex h-14 w-full bg-transparent px-3 text-base text-slate-900 placeholder:text-slate-400 focus:outline-none dark:text-slate-100 dark:placeholder:text-slate-500"
+        />
      </div>
-    </div>,
-    document.body
+
+      <Command.List className="max-h-[min(60vh,400px)] overflow-y-auto p-2">
+        {loading && (
+          <Command.Loading className="flex items-center justify-center py-8 text-sm text-slate-500 dark:text-slate-400">
+            搜尋中…
+          </Command.Loading>
+        )}
+
+        {!loading && !search.trim() && (
+          <>
+            <Command.Group heading="導航" className="[&_[cmdk-group-heading]]:px-2 [&_[cmdk-group-heading]]:py-1.5 [&_[cmdk-group-heading]]:text-xs [&_[cmdk-group-heading]]:font-medium [&_[cmdk-group-heading]]:text-slate-500 [&_[cmdk-group-heading]]:dark:text-slate-400">
+              {navActions.map((action) => (
+                <Command.Item
+                  key={action.id}
+                  value={`${action.title} ${action.url}`}
+                  onSelect={() => handleSelect(action.url)}
+                  className={cn(
+                    'flex cursor-pointer items-center gap-3 rounded-lg px-3 py-2.5 text-sm text-slate-700 outline-none transition-colors',
+                    'data-[selected=true]:bg-slate-100 data-[selected=true]:text-slate-900',
+                    'dark:text-slate-300 dark:data-[selected=true]:bg-slate-800 dark:data-[selected=true]:text-slate-100'
+                  )}
+                >
+                  <span className="flex size-8 shrink-0 items-center justify-center rounded-md bg-slate-100 text-slate-600 dark:bg-slate-800 dark:text-slate-400">
+                    {action.icon}
+                  </span>
+                  <span className="truncate">{action.title}</span>
+                </Command.Item>
+              ))}
+            </Command.Group>
+            {recentPostActions.length > 0 && (
+              <Command.Group heading="最近文章" className="[&_[cmdk-group-heading]]:px-2 [&_[cmdk-group-heading]]:py-1.5 [&_[cmdk-group-heading]]:text-xs [&_[cmdk-group-heading]]:font-medium [&_[cmdk-group-heading]]:text-slate-500 [&_[cmdk-group-heading]]:dark:text-slate-400">
+                {recentPostActions.map((action) => (
+                  <Command.Item
+                    key={action.id}
+                    value={`${action.title} ${action.url}`}
+                    onSelect={() => handleSelect(action.url)}
+                    className={cn(
+                      'flex cursor-pointer items-center gap-3 rounded-lg px-3 py-2.5 text-sm text-slate-700 outline-none transition-colors',
+                      'data-[selected=true]:bg-slate-100 data-[selected=true]:text-slate-900',
+                      'dark:text-slate-300 dark:data-[selected=true]:bg-slate-800 dark:data-[selected=true]:text-slate-100'
+                    )}
+                  >
+                    <span className="flex size-8 shrink-0 items-center justify-center rounded-md bg-slate-100 text-slate-600 dark:bg-slate-800 dark:text-slate-400">
+                      {action.icon}
+                    </span>
+                    <span className="truncate">{action.title}</span>
+                  </Command.Item>
+                ))}
+              </Command.Group>
+            )}
+          </>
+        )}
+
+        {!loading && search.trim() && results.length > 0 && (
+          <Command.Group heading="搜尋結果" className="[&_[cmdk-group-heading]]:px-2 [&_[cmdk-group-heading]]:py-1.5 [&_[cmdk-group-heading]]:text-xs [&_[cmdk-group-heading]]:font-medium [&_[cmdk-group-heading]]:text-slate-500 [&_[cmdk-group-heading]]:dark:text-slate-400">
+            {results.map((result, i) => (
+              <Command.Item
+                key={`${result.url}-${i}`}
+                value={`${result.meta?.title ?? ''} ${result.url}`}
+                onSelect={() => handleSelect(result.url)}
+                className={cn(
+                  'flex cursor-pointer flex-col gap-0.5 rounded-lg px-3 py-2.5 outline-none transition-colors',
+                  'data-[selected=true]:bg-slate-100 dark:data-[selected=true]:bg-slate-800'
+                )}
+              >
+                <span className="truncate text-sm font-medium text-slate-900 dark:text-slate-100">
+                  {result.meta?.title ?? result.url}
+                </span>
+                {result.excerpt && (
+                  <span
+                    className="line-clamp-2 text-xs text-slate-500 dark:text-slate-400 [&_mark]:bg-yellow-200 [&_mark]:font-semibold [&_mark]:text-slate-900 dark:[&_mark]:bg-yellow-600 dark:[&_mark]:text-slate-100"
+                    dangerouslySetInnerHTML={{ __html: result.excerpt }}
+                  />
+                )}
+              </Command.Item>
+            ))}
+          </Command.Group>
+        )}
+
+        <Command.Empty className="py-8 text-center text-sm text-slate-500 dark:text-slate-400">
+          找不到結果
+        </Command.Empty>
+      </Command.List>
+
+      <div className="border-t border-slate-200 px-4 py-2 text-xs text-slate-500 dark:border-slate-700 dark:text-slate-400">
+        <span>ESC 關閉</span>
+        <span className="ml-4">⌘K 開啟</span>
+      </div>
+    </Command.Dialog>
  );
 }

@@ -195,11 +263,11 @@ export function SearchButton({ onClick }: { onClick: () => void }) {
  return (
    <button
      onClick={onClick}
-      className="motion-link inline-flex h-9 items-center gap-2 rounded-full bg-slate-100 px-3 py-1.5 text-sm text-slate-600 transition hover:bg-slate-200 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-accent/40 dark:bg-slate-800 dark:text-slate-300 dark:hover:bg-slate-700"
+      className="motion-link inline-flex h-9 shrink-0 items-center gap-2 rounded-full bg-slate-100 px-3 py-1.5 text-sm text-slate-600 transition hover:bg-slate-200 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-accent/40 dark:bg-slate-800 dark:text-slate-300 dark:hover:bg-slate-700"
      aria-label="搜尋 (Cmd+K)"
    >
-      <FiSearch className="h-3.5 w-3.5" />
-      <span className="hidden sm:inline">搜尋</span>
+      <FiSearch className="h-3.5 w-3.5 shrink-0" />
+      <span className="hidden shrink-0 whitespace-nowrap sm:inline">搜尋</span>
      <kbd className="hidden rounded bg-white px-1.5 py-0.5 text-xs font-semibold text-slate-500 shadow-sm dark:bg-slate-900 dark:text-slate-400 sm:inline-block">
        ⌘K
      </kbd>
--- a/components/sidebar-layout.tsx
+++ b/components/sidebar-layout.tsx
@@ -1,17 +1,100 @@
 'use client';

+import { useState, useEffect } from 'react';
+import { createPortal } from 'react-dom';
 import dynamic from 'next/dynamic';
+import { FiLayout, FiX } from 'react-icons/fi';
+import { clsx } from 'clsx';

 // Lazy load RightSidebar since it's only visible on lg+ screens
 const RightSidebar = dynamic(() => import('./right-sidebar').then(mod => ({ default: mod.RightSidebar })), {
  ssr: false,
 });

+const RightSidebarContent = dynamic(() => import('./right-sidebar').then(mod => ({ default: mod.RightSidebarContent })), {
+  ssr: false,
+});
+
 export function SidebarLayout({ children }: { children: React.ReactNode }) {
-    return (
-        <div className="grid gap-8 lg:grid-cols-[minmax(0,3fr)_minmax(0,1.4fr)]">
-            <div>{children}</div>
-            <RightSidebar />
+  const [mobileSidebarOpen, setMobileSidebarOpen] = useState(false);
+  const [mounted, setMounted] = useState(false);
+
+  useEffect(() => setMounted(true), []);
+
+  useEffect(() => {
+    if (mobileSidebarOpen) {
+      document.body.style.overflow = 'hidden';
+    } else {
+      document.body.style.overflow = '';
+    }
+    return () => { document.body.style.overflow = ''; };
+  }, [mobileSidebarOpen]);
+
+  const mobileDrawer = mounted && createPortal(
+    <>
+      {/* Backdrop */}
+      <div
+        className={clsx(
+          'fixed inset-0 z-[1100] bg-black/40 backdrop-blur-sm transition-opacity duration-300 lg:hidden',
+          mobileSidebarOpen ? 'opacity-100' : 'opacity-0 pointer-events-none'
+        )}
+        onClick={() => setMobileSidebarOpen(false)}
+        aria-hidden="true"
+      />
+
+      {/* Slide-over panel from right */}
+      <div
+        className={clsx(
+          'fixed top-0 right-0 bottom-0 z-[1110] w-full max-w-sm flex flex-col rounded-l-2xl border-l border-white/20 bg-white/95 shadow-2xl backdrop-blur-xl transition-transform duration-300 ease-snappy dark:border-white/10 dark:bg-slate-900/95 lg:hidden',
+          mobileSidebarOpen ? 'translate-x-0' : 'translate-x-full'
+        )}
+      >
+        <div className="flex items-center justify-between border-b border-slate-200/50 px-6 py-4 dark:border-slate-700/50">
+          <div className="flex items-center gap-2 font-semibold text-slate-900 dark:text-slate-100">
+            <FiLayout className="h-5 w-5 text-slate-500" />
+            <span>側邊欄</span>
+          </div>
+          <button
+            type="button"
+            onClick={() => setMobileSidebarOpen(false)}
+            className="rounded-full p-1 text-slate-500 hover:bg-slate-100 dark:hover:bg-slate-800"
+            aria-label="關閉側邊欄"
+          >
+            <FiX className="h-5 w-5" />
+          </button>
        </div>
-    );
+
+        <div className="flex-1 overflow-y-auto px-6 py-6">
+          <RightSidebarContent forceLoadFeed={mobileSidebarOpen} />
+        </div>
+      </div>
+    </>,
+    document.body
+  );
+
+  const mobileFab = mounted && (
+    <button
+      type="button"
+      onClick={() => setMobileSidebarOpen(true)}
+      className={clsx(
+        'fixed bottom-6 left-6 z-40 flex h-11 w-11 items-center justify-center rounded-full border border-slate-200 bg-white/90 text-slate-600 shadow-md backdrop-blur-sm transition hover:bg-slate-50 dark:border-slate-700 dark:bg-slate-900/90 dark:text-slate-300 dark:hover:bg-slate-800 lg:hidden',
+        mobileSidebarOpen ? 'opacity-0 pointer-events-none' : 'opacity-100'
+      )}
+      aria-label="開啟側邊欄"
+    >
+      <FiLayout className="h-5 w-5" />
+    </button>
+  );
+
+  return (
+    <>
+      <div className="grid gap-8 lg:grid-cols-[minmax(0,3fr)_minmax(0,1.4fr)]">
+        <div>{children}</div>
+        <RightSidebar />
+      </div>
+
+      {mobileDrawer}
+      {mobileFab}
+    </>
+  );
 }
--- a/components/site-header.tsx
+++ b/components/site-header.tsx
@@ -1,6 +1,6 @@
 'use client';

-import Link from 'next/link';
+import { Link } from 'next-view-transitions';
 import { useState } from 'react';
 import dynamic from 'next/dynamic';
 import { ThemeToggle } from './theme-toggle';
@@ -15,7 +15,11 @@ const SearchModal = dynamic(
  { ssr: false }
 );

-export function SiteHeader() {
+interface SiteHeaderProps {
+  recentPosts?: { title: string; url: string }[];
+}
+
+export function SiteHeader({ recentPosts = [] }: SiteHeaderProps) {
  const [isSearchOpen, setIsSearchOpen] = useState(false);
  const pages = allPages
    .slice()
@@ -23,21 +27,26 @@ export function SiteHeader() {

  const findPage = (title: string) => pages.find((page) => page.title === title);

-  const aboutChildren = [
-    { title: '關於作者', label: '作者' },
-    { title: '關於本站', label: '本站' }
-  ]
-    .map(({ title, label }) => {
-      const page = findPage(title);
-      if (!page) return null;
-      return {
-        key: page._id,
-        href: page.url,
-        label,
-        iconKey: getIconForPage(page.title, page.slug)
-      } satisfies NavLinkItem;
-    })
-    .filter(Boolean) as NavLinkItem[];
+  const aboutChildren: NavLinkItem[] = [
+    ...(
+      [
+        { title: '關於作者', label: '作者' },
+        { title: '關於本站', label: '本站' }
+      ]
+        .map(({ title, label }) => {
+          const page = findPage(title);
+          if (!page) return null;
+          return {
+            key: page._id,
+            href: page.url,
+            label,
+            iconKey: getIconForPage(page.title, page.slug)
+          } satisfies NavLinkItem;
+        })
+        .filter(Boolean) as NavLinkItem[]
+    ),
+    { key: 'projects', href: '/projects', label: '作品', iconKey: 'pen' }
+  ];

  const deviceChildren = [
    { title: '開發工作環境', label: '開發環境' },
@@ -57,7 +66,6 @@ export function SiteHeader() {

  const navItems: NavLinkItem[] = [
    { key: 'home', href: '/', label: '首頁', iconKey: 'home' },
-    { key: 'projects', href: '/projects', label: '作品', iconKey: 'pen' },
    {
      key: 'about',
      href: aboutChildren[0]?.href,
@@ -80,7 +88,7 @@ export function SiteHeader() {
        <Link
          href="/"
          prefetch={true}
-          className="motion-link group relative type-title text-slate-900 hover:text-accent focus-visible:outline-none focus-visible:text-accent dark:text-slate-100"
+          className="motion-link group relative type-title whitespace-nowrap text-slate-900 hover:text-accent focus-visible:outline-none focus-visible:text-accent dark:text-slate-100"
        >
          <span className="absolute -bottom-0.5 left-0 h-[2px] w-0 bg-accent transition-all duration-180 ease-snappy group-hover:w-full" aria-hidden="true" />
          {siteConfig.title}
@@ -93,6 +101,7 @@ export function SiteHeader() {
        <SearchModal
          isOpen={isSearchOpen}
          onClose={() => setIsSearchOpen(false)}
+          recentPosts={recentPosts}
        />
      </div>
    </header>
--- a/components/terminal-window.tsx
+++ b/components/terminal-window.tsx
@@ -0,0 +1,225 @@
+'use client';
+
+import { useState, useEffect, useCallback } from 'react';
+
+// 眼睛 (霍德爾之目) - 雙鷹勾眼
+const ASCII_ART = [
+  '      /\\     /\\',
+  '     /  \\   /  \\',
+  '    |  > | |  > |',
+  '     \\  /   \\  /',
+  '      \\/     \\/',
+];
+
+interface TerminalWindowProps {
+  title: string;
+  tagline: string;
+  /** Skip typing animation, show all at once */
+  reducedMotion?: boolean;
+  className?: string;
+}
+
+type Phase =
+  | 'prompt'
+  | 'typing-line1'
+  | 'typing-line2'
+  | 'prompt2'
+  | 'typing-ascii'
+  | 'done';
+
+export function TerminalWindow({
+  title,
+  tagline,
+  reducedMotion = false,
+  className = '',
+}: TerminalWindowProps) {
+  const [phase, setPhase] = useState<Phase>('prompt');
+  const [displayedPrompt, setDisplayedPrompt] = useState('');
+  const [displayedLine1, setDisplayedLine1] = useState('');
+  const [displayedLine2, setDisplayedLine2] = useState('');
+  const [displayedPrompt2, setDisplayedPrompt2] = useState('');
+  const [displayedAscii, setDisplayedAscii] = useState<string[]>([]);
+  const [showCursor, setShowCursor] = useState(true);
+
+  const prompt = 'cat ~/welcome.txt';
+  const prompt2 = 'fastfetch';
+  const line1 = `${title}`;
+  const line2 = tagline;
+
+  const charDelay = reducedMotion ? 0 : 50;
+  const lineDelay = reducedMotion ? 0 : 400;
+  const asciiLineDelay = reducedMotion ? 0 : 80;
+
+  const typeString = useCallback(
+    (
+      str: string,
+      setter: (s: string) => void,
+      onComplete?: () => void
+    ) => {
+      if (reducedMotion) {
+        setter(str);
+        onComplete?.();
+        return;
+      }
+      let i = 0;
+      const id = setInterval(() => {
+        if (i <= str.length) {
+          setter(str.slice(0, i));
+          i++;
+        } else {
+          clearInterval(id);
+          onComplete?.();
+        }
+      }, charDelay);
+      return () => clearInterval(id);
+    },
+    [charDelay, reducedMotion]
+  );
+
+  useEffect(() => {
+    if (phase === 'prompt') {
+      const cleanup = typeString(prompt, setDisplayedPrompt, () => {
+        setTimeout(() => setPhase('typing-line1'), lineDelay);
+      });
+      return cleanup;
+    }
+  }, [phase, prompt, typeString, lineDelay]);
+
+  useEffect(() => {
+    if (phase === 'typing-line1') {
+      const cleanup = typeString(line1, setDisplayedLine1, () => {
+        setTimeout(() => setPhase('typing-line2'), lineDelay);
+      });
+      return cleanup;
+    }
+  }, [phase, line1, typeString, lineDelay]);
+
+  useEffect(() => {
+    if (phase === 'typing-line2') {
+      const cleanup = typeString(line2, setDisplayedLine2, () => {
+        setTimeout(() => setPhase('prompt2'), lineDelay);
+      });
+      return cleanup;
+    }
+  }, [phase, line2, typeString, lineDelay]);
+
+  useEffect(() => {
+    if (phase === 'prompt2') {
+      setDisplayedPrompt2('');
+      const cleanup = typeString(prompt2, setDisplayedPrompt2, () => {
+        setTimeout(() => setPhase('typing-ascii'), lineDelay);
+      });
+      return cleanup;
+    }
+  }, [phase, prompt2, typeString, lineDelay]);
+
+  useEffect(() => {
+    if (phase === 'typing-ascii') {
+      if (reducedMotion) {
+        setDisplayedAscii(ASCII_ART);
+        setTimeout(() => setPhase('done'), lineDelay);
+        return;
+      }
+      let lineIndex = 0;
+      const id = setInterval(() => {
+        if (lineIndex < ASCII_ART.length) {
+          setDisplayedAscii((prev) => [...prev, ASCII_ART[lineIndex]]);
+          lineIndex++;
+        } else {
+          clearInterval(id);
+          setTimeout(() => setPhase('done'), lineDelay);
+        }
+      }, asciiLineDelay);
+      return () => clearInterval(id);
+    }
+  }, [phase, asciiLineDelay, lineDelay, reducedMotion]);
+
+  // Blinking cursor
+  useEffect(() => {
+    if (!reducedMotion && phase !== 'done') {
+      const id = setInterval(() => setShowCursor((c) => !c), 530);
+      return () => clearInterval(id);
+    }
+    setShowCursor(true);
+  }, [phase, reducedMotion]);
+
+  return (
+    <div
+      className={`overflow-hidden rounded-xl border border-slate-300 bg-slate-100 shadow-xl dark:border-slate-700/50 dark:bg-slate-900 ${className}`}
+      role="img"
+      aria-label={`終端機：${title} - ${tagline}`}
+    >
+      {/* macOS-style title bar */}
+      <div className="flex items-center gap-2 border-b border-slate-200 px-4 py-2.5 dark:border-slate-700/50 sm:px-5 sm:py-3 lg:px-6 lg:py-3.5">
+        <div className="flex gap-1.5 sm:gap-2">
+          <span className="h-3 w-3 rounded-full bg-red-500/90 sm:h-3.5 sm:w-3.5 lg:h-4 lg:w-4" />
+          <span className="h-3 w-3 rounded-full bg-amber-500/90 sm:h-3.5 sm:w-3.5 lg:h-4 lg:w-4" />
+          <span className="h-3 w-3 rounded-full bg-emerald-500/90 sm:h-3.5 sm:w-3.5 lg:h-4 lg:w-4" />
+        </div>
+        <span className="ml-4 font-mono text-xs text-slate-500 sm:text-sm dark:text-slate-400 lg:text-base">
+          gbanyan@blog — zsh
+        </span>
+      </div>
+
+      {/* Terminal content */}
+      <div className="px-4 py-4 font-mono text-sm sm:px-5 sm:py-5 sm:text-base lg:px-6 lg:py-6 lg:text-lg">
+        <div className="text-slate-600 dark:text-slate-300">
+          <span className="text-emerald-600 dark:text-emerald-400">~</span>
+          <span className="text-slate-500"> $ </span>
+          <span>{displayedPrompt}</span>
+          {phase === 'prompt' && showCursor && (
+            <span className="ml-0.5 inline-block h-4 w-0.5 animate-pulse bg-emerald-600 dark:bg-emerald-400" />
+          )}
+        </div>
+
+        {displayedLine1 && (
+          <div className="mt-2 text-slate-900 dark:text-slate-100">
+            {displayedLine1}
+            {phase === 'typing-line1' && showCursor && (
+              <span className="ml-0.5 inline-block h-4 w-0.5 animate-pulse bg-emerald-600 dark:bg-emerald-400" />
+            )}
+          </div>
+        )}
+
+        {displayedLine2 && (
+          <div className="mt-1 text-slate-600 dark:text-slate-300">
+            {displayedLine2}
+            {phase === 'typing-line2' && showCursor && (
+              <span className="ml-0.5 inline-block h-4 w-0.5 animate-pulse bg-emerald-600 dark:bg-emerald-400" />
+            )}
+          </div>
+        )}
+
+        {(phase === 'prompt2' || phase === 'typing-ascii' || displayedPrompt2 || displayedAscii.length > 0) && (
+          <div className="mt-2 text-slate-600 dark:text-slate-300">
+            <span className="text-emerald-600 dark:text-emerald-400">~</span>
+            <span className="text-slate-500"> $ </span>
+            <span>{displayedPrompt2}</span>
+            {phase === 'prompt2' && showCursor && (
+              <span className="ml-0.5 inline-block h-4 w-0.5 animate-pulse bg-emerald-600 dark:bg-emerald-400" />
+            )}
+          </div>
+        )}
+
+        {displayedAscii.length > 0 && (
+          <div className="mt-2 whitespace-pre text-emerald-600/90 dark:text-emerald-400/90">
+            {displayedAscii.map((line, i) => (
+              <div key={i}>{line}</div>
+            ))}
+            {phase === 'typing-ascii' && showCursor && (
+              <span className="inline-block h-4 w-0.5 animate-pulse bg-emerald-600 dark:bg-emerald-400" />
+            )}
+          </div>
+        )}
+
+        {phase === 'done' && (
+          <div className="mt-2 text-slate-600 dark:text-slate-300">
+            <span className="text-emerald-600 dark:text-emerald-400">~</span>
+            <span className="text-slate-500"> $ </span>
+            <span className="inline-block h-4 w-4 animate-pulse border-l-2 border-emerald-600 dark:border-emerald-400" />
+          </div>
+        )}
+      </div>
+    </div>
+  );
+}
--- a/contentlayer.config.ts
+++ b/contentlayer.config.ts
@@ -103,7 +103,7 @@ export default makeSource({
      [rehypeAutolinkHeadings, { behavior: 'wrap' }],
      /**
       * Rewrite markdown image src from relative "../assets/..." to
-       * absolute "/assets/..." so they are served from Next.js public/.
+       * absolute "/assets/..." and add lazy loading for cross-browser performance.
       */
      () => (tree: any) => {
        visit(tree, 'element', (node: any) => {
@@ -118,6 +118,9 @@ export default makeSource({
            } else if (src.startsWith('assets/')) {
              node.properties.src = '/' + src.replace(/^\/?/, '');
            }
+            // Lazy load images for better LCP and bandwidth (Chrome, Firefox, Safari, Edge)
+            node.properties.loading = 'lazy';
+            node.properties.decoding = 'async';
          }
        });
      }
--- a/lib/github-lang-colors.ts
+++ b/lib/github-lang-colors.ts
@@ -0,0 +1,43 @@
+/**
+ * GitHub-style language colors for repo cards.
+ * Fallback: #94a3b8 (slate-400) for unknown languages.
+ */
+const LANG_COLORS: Record<string, string> = {
+  TypeScript: '#3178c6',
+  JavaScript: '#f1e05a',
+  Python: '#3572A5',
+  Rust: '#dea584',
+  Go: '#00ADD8',
+  Ruby: '#701516',
+  PHP: '#4F5D95',
+  Java: '#b07219',
+  Kotlin: '#A97BFF',
+  Swift: '#F05138',
+  C: '#555555',
+  'C++': '#f34b7d',
+  'C#': '#239120',
+  Shell: '#89e051',
+  HTML: '#e34c26',
+  CSS: '#563d7c',
+  Vue: '#41b883',
+  Svelte: '#ff3e00',
+  Dart: '#00B4AB',
+  Scala: '#c22d40',
+  Elixir: '#6e4a7e',
+  Lua: '#000080',
+  R: '#198CE7',
+  Markdown: '#083fa1',
+  YAML: '#cb171e',
+  JSON: '#292929',
+};
+
+const FALLBACK_COLOR = '#94a3b8';
+
+/**
+ * Returns the GitHub-style hex color for a programming language.
+ * Unknown languages use a neutral slate fallback.
+ */
+export function getLanguageColor(lang: string | null): string {
+  if (!lang || !lang.trim()) return FALLBACK_COLOR;
+  return LANG_COLORS[lang] ?? FALLBACK_COLOR;
+}
--- a/lib/github.ts
+++ b/lib/github.ts
@@ -27,8 +27,8 @@ function getGithubHeaders() {

 /**
 * Fetch all public repositories for the configured GitHub user.
- * Returns an empty array on error instead of throwing, so the UI
- * can render a graceful fallback.
+ * Excludes forked repositories. Returns an empty array on error instead of
+ * throwing, so the UI can render a graceful fallback.
 */
 export async function fetchPublicRepos(usernameOverride?: string): Promise<RepoSummary[]> {
  const username = usernameOverride || process.env.GITHUB_USERNAME;
@@ -56,16 +56,18 @@ export async function fetchPublicRepos(usernameOverride?: string): Promise<RepoS

    const data = (await res.json()) as any[];

-    return data.map((repo) => ({
-      id: repo.id,
-      name: repo.name,
-      fullName: repo.full_name,
-      htmlUrl: repo.html_url,
-      description: repo.description,
-      language: repo.language,
-      stargazersCount: repo.stargazers_count,
-      updatedAt: repo.updated_at,
-    }));
+    return data
+      .filter((repo) => !repo.fork)
+      .map((repo) => ({
+        id: repo.id,
+        name: repo.name,
+        fullName: repo.full_name,
+        htmlUrl: repo.html_url,
+        description: repo.description,
+        language: repo.language,
+        stargazersCount: repo.stargazers_count,
+        updatedAt: repo.updated_at,
+      }));
  } catch (error) {
    console.error('Error while fetching GitHub repositories:', error);
    return [];
--- a/lib/mastodon.ts
+++ b/lib/mastodon.ts
@@ -14,9 +14,12 @@ export interface MastodonStatus {
    avatar: string;
  };
  media_attachments: Array<{
-    type: string;
-    url: string;
-    preview_url: string;
+    id: string;
+    type: 'image' | 'video' | 'gifv' | 'audio' | 'unknown';
+    url: string | null;
+    preview_url: string | null;
+    description: string | null;
+    blurhash?: string | null;
  }>;
 }

--- a/lib/utils.ts
+++ b/lib/utils.ts
@@ -0,0 +1,6 @@
+import { clsx, type ClassValue } from 'clsx';
+import { twMerge } from 'tailwind-merge';
+
+export function cn(...inputs: ClassValue[]) {
+  return twMerge(clsx(inputs));
+}
--- a/package-lock.json
+++ b/package-lock.json
@@ -10,14 +10,18 @@
      "license": "ISC",
      "dependencies": {
        "@emotion/is-prop-valid": "^1.4.0",
+        "@radix-ui/react-dialog": "^1.1.15",
        "@vercel/og": "^0.8.5",
        "clsx": "^2.1.1",
+        "cmdk": "^1.1.1",
        "contentlayer2": "^0.5.8",
        "gray-matter": "^4.0.3",
        "markdown-wasm": "^1.2.0",
        "next": "^16.0.7",
        "next-contentlayer2": "^0.5.8",
        "next-themes": "^0.4.6",
+        "next-view-transitions": "^0.3.5",
+        "nextjs-toploader": "^3.9.17",
        "react": "^19.2.1",
        "react-dom": "^19.2.1",
        "react-icons": "^5.5.0",
@@ -2850,6 +2854,337 @@
      "integrity": "sha512-Vvn3zZrhQZkkBE8LSuW3em98c0FwgO4nxzv6OdSxPKJIEKY2bGbHn+mhGIPerzI4twdxaP8/0+06HBpwf345Lw==",
      "license": "BSD-3-Clause"
    },
+    "node_modules/@radix-ui/primitive": {
+      "version": "1.1.3",
+      "resolved": "https://registry.npmjs.org/@radix-ui/primitive/-/primitive-1.1.3.tgz",
+      "integrity": "sha512-JTF99U/6XIjCBo0wqkU5sK10glYe27MRRsfwoiq5zzOEZLHU3A3KCMa5X/azekYRCJ0HlwI0crAXS/5dEHTzDg==",
+      "license": "MIT"
+    },
+    "node_modules/@radix-ui/react-compose-refs": {
+      "version": "1.1.2",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-compose-refs/-/react-compose-refs-1.1.2.tgz",
+      "integrity": "sha512-z4eqJvfiNnFMHIIvXP3CY57y2WJs5g2v3X0zm9mEJkrkNv4rDxu+sg9Jh8EkXyeqBkB7SOcboo9dMVqhyrACIg==",
+      "license": "MIT",
+      "peerDependencies": {
+        "@types/react": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-context": {
+      "version": "1.1.2",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-context/-/react-context-1.1.2.tgz",
+      "integrity": "sha512-jCi/QKUM2r1Ju5a3J64TH2A5SpKAgh0LpknyqdQ4m6DCV0xJ2HG1xARRwNGPQfi1SLdLWZ1OJz6F4OMBBNiGJA==",
+      "license": "MIT",
+      "peerDependencies": {
+        "@types/react": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-dialog": {
+      "version": "1.1.15",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-dialog/-/react-dialog-1.1.15.tgz",
+      "integrity": "sha512-TCglVRtzlffRNxRMEyR36DGBLJpeusFcgMVD9PZEzAKnUs1lKCgX5u9BmC2Yg+LL9MgZDugFFs1Vl+Jp4t/PGw==",
+      "license": "MIT",
+      "dependencies": {
+        "@radix-ui/primitive": "1.1.3",
+        "@radix-ui/react-compose-refs": "1.1.2",
+        "@radix-ui/react-context": "1.1.2",
+        "@radix-ui/react-dismissable-layer": "1.1.11",
+        "@radix-ui/react-focus-guards": "1.1.3",
+        "@radix-ui/react-focus-scope": "1.1.7",
+        "@radix-ui/react-id": "1.1.1",
+        "@radix-ui/react-portal": "1.1.9",
+        "@radix-ui/react-presence": "1.1.5",
+        "@radix-ui/react-primitive": "2.1.3",
+        "@radix-ui/react-slot": "1.2.3",
+        "@radix-ui/react-use-controllable-state": "1.2.2",
+        "aria-hidden": "^1.2.4",
+        "react-remove-scroll": "^2.6.3"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "@types/react-dom": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc",
+        "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        },
+        "@types/react-dom": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-dismissable-layer": {
+      "version": "1.1.11",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-dismissable-layer/-/react-dismissable-layer-1.1.11.tgz",
+      "integrity": "sha512-Nqcp+t5cTB8BinFkZgXiMJniQH0PsUt2k51FUhbdfeKvc4ACcG2uQniY/8+h1Yv6Kza4Q7lD7PQV0z0oicE0Mg==",
+      "license": "MIT",
+      "dependencies": {
+        "@radix-ui/primitive": "1.1.3",
+        "@radix-ui/react-compose-refs": "1.1.2",
+        "@radix-ui/react-primitive": "2.1.3",
+        "@radix-ui/react-use-callback-ref": "1.1.1",
+        "@radix-ui/react-use-escape-keydown": "1.1.1"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "@types/react-dom": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc",
+        "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        },
+        "@types/react-dom": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-focus-guards": {
+      "version": "1.1.3",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-focus-guards/-/react-focus-guards-1.1.3.tgz",
+      "integrity": "sha512-0rFg/Rj2Q62NCm62jZw0QX7a3sz6QCQU0LpZdNrJX8byRGaGVTqbrW9jAoIAHyMQqsNpeZ81YgSizOt5WXq0Pw==",
+      "license": "MIT",
+      "peerDependencies": {
+        "@types/react": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-focus-scope": {
+      "version": "1.1.7",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-focus-scope/-/react-focus-scope-1.1.7.tgz",
+      "integrity": "sha512-t2ODlkXBQyn7jkl6TNaw/MtVEVvIGelJDCG41Okq/KwUsJBwQ4XVZsHAVUkK4mBv3ewiAS3PGuUWuY2BoK4ZUw==",
+      "license": "MIT",
+      "dependencies": {
+        "@radix-ui/react-compose-refs": "1.1.2",
+        "@radix-ui/react-primitive": "2.1.3",
+        "@radix-ui/react-use-callback-ref": "1.1.1"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "@types/react-dom": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc",
+        "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        },
+        "@types/react-dom": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-id": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-id/-/react-id-1.1.1.tgz",
+      "integrity": "sha512-kGkGegYIdQsOb4XjsfM97rXsiHaBwco+hFI66oO4s9LU+PLAC5oJ7khdOVFxkhsmlbpUqDAvXw11CluXP+jkHg==",
+      "license": "MIT",
+      "dependencies": {
+        "@radix-ui/react-use-layout-effect": "1.1.1"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-portal": {
+      "version": "1.1.9",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-portal/-/react-portal-1.1.9.tgz",
+      "integrity": "sha512-bpIxvq03if6UNwXZ+HTK71JLh4APvnXntDc6XOX8UVq4XQOVl7lwok0AvIl+b8zgCw3fSaVTZMpAPPagXbKmHQ==",
+      "license": "MIT",
+      "dependencies": {
+        "@radix-ui/react-primitive": "2.1.3",
+        "@radix-ui/react-use-layout-effect": "1.1.1"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "@types/react-dom": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc",
+        "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        },
+        "@types/react-dom": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-presence": {
+      "version": "1.1.5",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-presence/-/react-presence-1.1.5.tgz",
+      "integrity": "sha512-/jfEwNDdQVBCNvjkGit4h6pMOzq8bHkopq458dPt2lMjx+eBQUohZNG9A7DtO/O5ukSbxuaNGXMjHicgwy6rQQ==",
+      "license": "MIT",
+      "dependencies": {
+        "@radix-ui/react-compose-refs": "1.1.2",
+        "@radix-ui/react-use-layout-effect": "1.1.1"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "@types/react-dom": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc",
+        "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        },
+        "@types/react-dom": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-primitive": {
+      "version": "2.1.3",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-primitive/-/react-primitive-2.1.3.tgz",
+      "integrity": "sha512-m9gTwRkhy2lvCPe6QJp4d3G1TYEUHn/FzJUtq9MjH46an1wJU+GdoGC5VLof8RX8Ft/DlpshApkhswDLZzHIcQ==",
+      "license": "MIT",
+      "dependencies": {
+        "@radix-ui/react-slot": "1.2.3"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "@types/react-dom": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc",
+        "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        },
+        "@types/react-dom": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-slot": {
+      "version": "1.2.3",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-slot/-/react-slot-1.2.3.tgz",
+      "integrity": "sha512-aeNmHnBxbi2St0au6VBVC7JXFlhLlOnvIIlePNniyUNAClzmtAUEY8/pBiK3iHjufOlwA+c20/8jngo7xcrg8A==",
+      "license": "MIT",
+      "dependencies": {
+        "@radix-ui/react-compose-refs": "1.1.2"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-use-callback-ref": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-use-callback-ref/-/react-use-callback-ref-1.1.1.tgz",
+      "integrity": "sha512-FkBMwD+qbGQeMu1cOHnuGB6x4yzPjho8ap5WtbEJ26umhgqVXbhekKUQO+hZEL1vU92a3wHwdp0HAcqAUF5iDg==",
+      "license": "MIT",
+      "peerDependencies": {
+        "@types/react": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-use-controllable-state": {
+      "version": "1.2.2",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-use-controllable-state/-/react-use-controllable-state-1.2.2.tgz",
+      "integrity": "sha512-BjasUjixPFdS+NKkypcyyN5Pmg83Olst0+c6vGov0diwTEo6mgdqVR6hxcEgFuh4QrAs7Rc+9KuGJ9TVCj0Zzg==",
+      "license": "MIT",
+      "dependencies": {
+        "@radix-ui/react-use-effect-event": "0.0.2",
+        "@radix-ui/react-use-layout-effect": "1.1.1"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-use-effect-event": {
+      "version": "0.0.2",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-use-effect-event/-/react-use-effect-event-0.0.2.tgz",
+      "integrity": "sha512-Qp8WbZOBe+blgpuUT+lw2xheLP8q0oatc9UpmiemEICxGvFLYmHm9QowVZGHtJlGbS6A6yJ3iViad/2cVjnOiA==",
+      "license": "MIT",
+      "dependencies": {
+        "@radix-ui/react-use-layout-effect": "1.1.1"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-use-escape-keydown": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-use-escape-keydown/-/react-use-escape-keydown-1.1.1.tgz",
+      "integrity": "sha512-Il0+boE7w/XebUHyBjroE+DbByORGR9KKmITzbR7MyQ4akpORYP/ZmbhAr0DG7RmmBqoOnZdy2QlvajJ2QA59g==",
+      "license": "MIT",
+      "dependencies": {
+        "@radix-ui/react-use-callback-ref": "1.1.1"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-use-layout-effect": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-use-layout-effect/-/react-use-layout-effect-1.1.1.tgz",
+      "integrity": "sha512-RbJRS4UWQFkzHTTwVymMTUv8EqYhOp8dOOviLj2ugtTiXRaRQS7GLGxZTLL1jWhMeoSCf5zmcZkqTl9IiYfXcQ==",
+      "license": "MIT",
+      "peerDependencies": {
+        "@types/react": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
    "node_modules/@resvg/resvg-wasm": {
      "version": "2.4.0",
      "resolved": "https://registry.npmjs.org/@resvg/resvg-wasm/-/resvg-wasm-2.4.0.tgz",
@@ -3334,7 +3669,7 @@
      "version": "19.2.13",
      "resolved": "https://registry.npmjs.org/@types/react/-/react-19.2.13.tgz",
      "integrity": "sha512-KkiJeU6VbYbUOp5ITMIc7kBfqlYkKA5KhEHVrGMmUUMt7NeaZg65ojdPk+FtNrBAOXNVM5QM72jnADjM+XVRAQ==",
-      "dev": true,
+      "devOptional": true,
      "license": "MIT",
      "dependencies": {
        "csstype": "^3.2.2"
@@ -3344,7 +3679,7 @@
      "version": "19.2.3",
      "resolved": "https://registry.npmjs.org/@types/react-dom/-/react-dom-19.2.3.tgz",
      "integrity": "sha512-jp2L/eY6fn+KgVVQAOqYItbF0VY/YApe5Mz2F0aykSO8gx31bYCZyvSeYxCHKvzHG5eZjc+zyaS5BrBWya2+kQ==",
-      "dev": true,
+      "devOptional": true,
      "license": "MIT",
      "peerDependencies": {
        "@types/react": "^19.2.0"
@@ -3988,6 +4323,18 @@
      "dev": true,
      "license": "Python-2.0"
    },
+    "node_modules/aria-hidden": {
+      "version": "1.2.6",
+      "resolved": "https://registry.npmjs.org/aria-hidden/-/aria-hidden-1.2.6.tgz",
+      "integrity": "sha512-ik3ZgC9dY/lYVVM++OISsaYDeg1tb0VtP5uL3ouh1koGOaUMDPpbFIei4JkFimWUFPn90sbMNMXQAIVOlnYKJA==",
+      "license": "MIT",
+      "dependencies": {
+        "tslib": "^2.0.0"
+      },
+      "engines": {
+        "node": ">=10"
+      }
+    },
    "node_modules/aria-query": {
      "version": "5.3.2",
      "resolved": "https://registry.npmjs.org/aria-query/-/aria-query-5.3.2.tgz",
@@ -4583,6 +4930,22 @@
        "node": ">=6"
      }
    },
+    "node_modules/cmdk": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/cmdk/-/cmdk-1.1.1.tgz",
+      "integrity": "sha512-Vsv7kFaXm+ptHDMZ7izaRsP70GgrW9NBNGswt9OZaVBLlE0SNpDq8eu/VGXyF9r7M0azK3Wy7OlYXsuyYLFzHg==",
+      "license": "MIT",
+      "dependencies": {
+        "@radix-ui/react-compose-refs": "^1.1.1",
+        "@radix-ui/react-dialog": "^1.1.6",
+        "@radix-ui/react-id": "^1.1.0",
+        "@radix-ui/react-primitive": "^2.0.2"
+      },
+      "peerDependencies": {
+        "react": "^18 || ^19 || ^19.0.0-rc",
+        "react-dom": "^18 || ^19 || ^19.0.0-rc"
+      }
+    },
    "node_modules/collapse-white-space": {
      "version": "2.1.0",
      "resolved": "https://registry.npmjs.org/collapse-white-space/-/collapse-white-space-2.1.0.tgz",
@@ -4774,7 +5137,7 @@
      "version": "3.2.3",
      "resolved": "https://registry.npmjs.org/csstype/-/csstype-3.2.3.tgz",
      "integrity": "sha512-z1HGKcYy2xA8AGQfwrn0PAy+PB7X/GSj3UVJW9qKyn43xWa+gl5nXmU4qqLMRzWVLFC8KusUX8T/0kCiOYpAIQ==",
-      "dev": true,
+      "devOptional": true,
      "license": "MIT"
    },
    "node_modules/damerau-levenshtein": {
@@ -4930,6 +5293,12 @@
        "node": ">=8"
      }
    },
+    "node_modules/detect-node-es": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/detect-node-es/-/detect-node-es-1.1.0.tgz",
+      "integrity": "sha512-ypdmJU/TbBby2Dxibuv7ZLW3Bs1QEmM7nHjEANfohJLvE0XVujisn1qPJcZxg+qDucsr+bP6fLD1rPS3AhJ7EQ==",
+      "license": "MIT"
+    },
    "node_modules/devlop": {
      "version": "1.1.0",
      "resolved": "https://registry.npmjs.org/devlop/-/devlop-1.1.0.tgz",
@@ -6148,6 +6517,15 @@
        "url": "https://github.com/sponsors/ljharb"
      }
    },
+    "node_modules/get-nonce": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/get-nonce/-/get-nonce-1.0.1.tgz",
+      "integrity": "sha512-FJhYRoDaiatfEkUK8HKlicmu/3SGFD51q3itKDGoSTysQJBnfOcxU5GxnhE1E6soB76MbT0MBtnKJuXyAx+96Q==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=6"
+      }
+    },
    "node_modules/get-proto": {
      "version": "1.0.1",
      "resolved": "https://registry.npmjs.org/get-proto/-/get-proto-1.0.1.tgz",
@@ -7265,7 +7643,6 @@
      "version": "4.0.0",
      "resolved": "https://registry.npmjs.org/js-tokens/-/js-tokens-4.0.0.tgz",
      "integrity": "sha512-RdJUflcE3cUzKiMqQgsCu06FPu9UdIJO0beYbPhHN4k6apgJtifcoCtT9bcxOpYBtpD2kCM6Sbzg4CausW/PKQ==",
-      "dev": true,
      "license": "MIT"
    },
    "node_modules/js-yaml": {
@@ -7723,7 +8100,6 @@
      "version": "1.4.0",
      "resolved": "https://registry.npmjs.org/loose-envify/-/loose-envify-1.4.0.tgz",
      "integrity": "sha512-lyuxPGr/Wfhrlem2CL/UcnUc1zcqKAImBDzukY7Y5F/yQiNdko6+fRLevlw1HgMySw7f611UIY408EtxRSoK3Q==",
-      "dev": true,
      "license": "MIT",
      "dependencies": {
        "js-tokens": "^3.0.0 || ^4.0.0"
@@ -9125,6 +9501,17 @@
        "react-dom": "^16.8 || ^17 || ^18 || ^19 || ^19.0.0-rc"
      }
    },
+    "node_modules/next-view-transitions": {
+      "version": "0.3.5",
+      "resolved": "https://registry.npmjs.org/next-view-transitions/-/next-view-transitions-0.3.5.tgz",
+      "integrity": "sha512-yP8OPNydLmKpmE94hLurLGEzPsUy1uyl9iSv8oxaC2JwhSXTD86SVwk1NMMQT7Ado4kMENDJ7fNBIXHy3GU/Lg==",
+      "license": "MIT",
+      "peerDependencies": {
+        "next": ">=14.0.0",
+        "react": ">=18.2.0 || ^19.0.0",
+        "react-dom": ">=18.2.0 || ^19.0.0"
+      }
+    },
    "node_modules/next/node_modules/postcss": {
      "version": "8.4.31",
      "resolved": "https://registry.npmjs.org/postcss/-/postcss-8.4.31.tgz",
@@ -9153,6 +9540,24 @@
        "node": "^10 || ^12 || >=14"
      }
    },
+    "node_modules/nextjs-toploader": {
+      "version": "3.9.17",
+      "resolved": "https://registry.npmjs.org/nextjs-toploader/-/nextjs-toploader-3.9.17.tgz",
+      "integrity": "sha512-9OF0KSSLtoSAuNg2LZ3aTl4hR9mBDj5L9s9DZiFCbMlXehyICGjkIz5dVGzuATU2bheJZoBdFgq9w07AKSuQQw==",
+      "license": "MIT",
+      "dependencies": {
+        "nprogress": "^0.2.0",
+        "prop-types": "^15.8.1"
+      },
+      "funding": {
+        "url": "https://buymeacoffee.com/thesgj"
+      },
+      "peerDependencies": {
+        "next": ">= 6.0.0",
+        "react": ">= 16.0.0",
+        "react-dom": ">= 16.0.0"
+      }
+    },
    "node_modules/no-case": {
      "version": "3.0.4",
      "resolved": "https://registry.npmjs.org/no-case/-/no-case-3.0.4.tgz",
@@ -9179,11 +9584,16 @@
        "node": ">=0.10.0"
      }
    },
+    "node_modules/nprogress": {
+      "version": "0.2.0",
+      "resolved": "https://registry.npmjs.org/nprogress/-/nprogress-0.2.0.tgz",
+      "integrity": "sha512-I19aIingLgR1fmhftnbWWO3dXc0hSxqHQHQb3H8m+K3TnEn/iSeTZZOyvKXWqQESMwuUVnatlCnZdLBZZt2VSA==",
+      "license": "MIT"
+    },
    "node_modules/object-assign": {
      "version": "4.1.1",
      "resolved": "https://registry.npmjs.org/object-assign/-/object-assign-4.1.1.tgz",
      "integrity": "sha512-rJgTQnkUnH1sFw8yT6VSU3zD3sWmu6sZhIseY8VX+GRu3P6F7Fu+JNDoXfklElbLJSnc3FUQHVe4cU5hj+BcUg==",
-      "dev": true,
      "license": "MIT",
      "engines": {
        "node": ">=0.10.0"
@@ -9613,7 +10023,6 @@
      "version": "15.8.1",
      "resolved": "https://registry.npmjs.org/prop-types/-/prop-types-15.8.1.tgz",
      "integrity": "sha512-oj87CgZICdulUohogVAR7AjlC0327U4el4L6eAvOqCeudMDVU0NThNaV+b9Df4dXgSP1gXMTnPdhfe/2qDH5cg==",
-      "dev": true,
      "license": "MIT",
      "dependencies": {
        "loose-envify": "^1.4.0",
@@ -9719,9 +10128,77 @@
      "version": "16.13.1",
      "resolved": "https://registry.npmjs.org/react-is/-/react-is-16.13.1.tgz",
      "integrity": "sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ==",
-      "dev": true,
      "license": "MIT"
    },
+    "node_modules/react-remove-scroll": {
+      "version": "2.7.2",
+      "resolved": "https://registry.npmjs.org/react-remove-scroll/-/react-remove-scroll-2.7.2.tgz",
+      "integrity": "sha512-Iqb9NjCCTt6Hf+vOdNIZGdTiH1QSqr27H/Ek9sv/a97gfueI/5h1s3yRi1nngzMUaOOToin5dI1dXKdXiF+u0Q==",
+      "license": "MIT",
+      "dependencies": {
+        "react-remove-scroll-bar": "^2.3.7",
+        "react-style-singleton": "^2.2.3",
+        "tslib": "^2.1.0",
+        "use-callback-ref": "^1.3.3",
+        "use-sidecar": "^1.1.3"
+      },
+      "engines": {
+        "node": ">=10"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "react": "^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/react-remove-scroll-bar": {
+      "version": "2.3.8",
+      "resolved": "https://registry.npmjs.org/react-remove-scroll-bar/-/react-remove-scroll-bar-2.3.8.tgz",
+      "integrity": "sha512-9r+yi9+mgU33AKcj6IbT9oRCO78WriSj6t/cF8DWBZJ9aOGPOTEDvdUDz1FwKim7QXWwmHqtdHnRJfhAxEG46Q==",
+      "license": "MIT",
+      "dependencies": {
+        "react-style-singleton": "^2.2.2",
+        "tslib": "^2.0.0"
+      },
+      "engines": {
+        "node": ">=10"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "react": "^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/react-style-singleton": {
+      "version": "2.2.3",
+      "resolved": "https://registry.npmjs.org/react-style-singleton/-/react-style-singleton-2.2.3.tgz",
+      "integrity": "sha512-b6jSvxvVnyptAiLjbkWLE/lOnR4lfTtDAl+eUC7RZy+QQWc6wRzIV2CE6xBuMmDxc2qIihtDCZD5NPOFl7fRBQ==",
+      "license": "MIT",
+      "dependencies": {
+        "get-nonce": "^1.0.0",
+        "tslib": "^2.0.0"
+      },
+      "engines": {
+        "node": ">=10"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "react": "^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
    "node_modules/readdirp": {
      "version": "3.6.0",
      "resolved": "https://registry.npmjs.org/readdirp/-/readdirp-3.6.0.tgz",
@@ -11437,6 +11914,49 @@
        "punycode": "^2.1.0"
      }
    },
+    "node_modules/use-callback-ref": {
+      "version": "1.3.3",
+      "resolved": "https://registry.npmjs.org/use-callback-ref/-/use-callback-ref-1.3.3.tgz",
+      "integrity": "sha512-jQL3lRnocaFtu3V00JToYz/4QkNWswxijDaCVNZRiRTO3HQDLsdu1ZtmIUvV4yPp+rvWm5j0y0TG/S61cuijTg==",
+      "license": "MIT",
+      "dependencies": {
+        "tslib": "^2.0.0"
+      },
+      "engines": {
+        "node": ">=10"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "react": "^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/use-sidecar": {
+      "version": "1.1.3",
+      "resolved": "https://registry.npmjs.org/use-sidecar/-/use-sidecar-1.1.3.tgz",
+      "integrity": "sha512-Fedw0aZvkhynoPYlA5WXrMCAMm+nSWdZt6lzJQ7Ok8S6Q+VsHmHpRWndVRJ8Be0ZbkfPc5LRYH+5XrzXcEeLRQ==",
+      "license": "MIT",
+      "dependencies": {
+        "detect-node-es": "^1.1.0",
+        "tslib": "^2.0.0"
+      },
+      "engines": {
+        "node": ">=10"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "react": "^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
    "node_modules/util-deprecate": {
      "version": "1.0.2",
      "resolved": "https://registry.npmjs.org/util-deprecate/-/util-deprecate-1.0.2.tgz",
--- a/package.json
+++ b/package.json
@@ -15,16 +15,21 @@
  "author": "",
  "license": "ISC",
  "type": "module",
+  "browserslist": ["chrome 111", "edge 111", "firefox 111", "safari 16.4"],
  "dependencies": {
    "@emotion/is-prop-valid": "^1.4.0",
+    "@radix-ui/react-dialog": "^1.1.15",
    "@vercel/og": "^0.8.5",
    "clsx": "^2.1.1",
+    "cmdk": "^1.1.1",
    "contentlayer2": "^0.5.8",
    "gray-matter": "^4.0.3",
    "markdown-wasm": "^1.2.0",
    "next": "^16.0.7",
    "next-contentlayer2": "^0.5.8",
    "next-themes": "^0.4.6",
+    "next-view-transitions": "^0.3.5",
+    "nextjs-toploader": "^3.9.17",
    "react": "^19.2.1",
    "react-dom": "^19.2.1",
    "react-icons": "^5.5.0",
--- a/styles/globals.css
+++ b/styles/globals.css
Author	SHA1	Message	Date
gbanyan	bdd42b9d26	feat: display Mastodon post media inline (images, video, gif) Co-authored-by: Cursor <cursoragent@cursor.com>	2026-02-14 09:57:00 +08:00
gbanyan	f7f2451357	feat: HomeLab CSS art hero with Proxmox, Switch, NAS - Add homelab-device-hero component (Proxmox VE + Router icon, Switch, TrueNAS) - Dashed lines for network connections between devices - Custom not-found page (replace Next.js 404) - Homelab page uses CSS hero instead of feature image Co-authored-by: Cursor <cursoragent@cursor.com>	2026-02-14 09:38:56 +08:00
gbanyan	8d08383391	style: reduce empty space on dev-env page - Tighter vertical spacing (space-y-4, smaller header margins) - Larger device mockup at all breakpoints (up to 700px monitor) - Wider content area (max-w-5xl) for dev-env page - Less padding in device hero section Co-authored-by: Cursor <cursoragent@cursor.com>	2026-02-14 08:39:15 +08:00
gbanyan	1077c76366	style: responsive design for dev-env device hero on large screens - Scale monitor, desk, keyboard, Mac mini proportionally at 1024/1280/1536px - Increase terminal window, logos, and font sizes on larger viewports - Scale bezel, stand, screen inset for consistent proportions Co-authored-by: Cursor <cursoragent@cursor.com>	2026-02-14 08:19:39 +08:00
gbanyan	a09b7505be	feat: dev-env page - Mac mini + 螢幕 mockup with Arch/Ubuntu/Linux SVG logos - Add DevEnvDeviceHero component with 3D device mockup - Terminal window displays Arch, Ubuntu, Tux logos (react-icons Simple Icons) - 4:3 screen ratio, taller display for full logo visibility - Remove dock for cleaner layout Co-authored-by: Cursor <cursoragent@cursor.com>	2026-02-14 00:43:16 +08:00
gbanyan	240d44842a	chore: add browser optimizations - Add browserslist (Chrome 111+, Edge 111+, Firefox 111+, Safari 16.4+) - Add loading=lazy and decoding=async to markdown images for better LCP Co-authored-by: Cursor <cursoragent@cursor.com>	2026-02-14 00:09:59 +08:00
gbanyan	d5ea352775	perf: frame-rate independent animation + Scroll-Driven progress bar - MatrixRain: add delta time for consistent speed across 60/120/144Hz displays - ReadingProgress: use Scroll-Driven Animations API with JS fallback - Fallback to scroll events for unsupported browsers (Firefox) and prefers-reduced-motion Co-authored-by: Cursor <cursoragent@cursor.com>	2026-02-14 00:02:35 +08:00
gbanyan	f185048abc	feat: improve Mastodon feed loading animation with shimmer and stagger - Replace animate-pulse with shimmer wave effect - Add staggered animation-delay for cascade feel - Light/dark mode gradients with Mastodon purple accent - Respect prefers-reduced-motion for accessibility Co-authored-by: Cursor <cursoragent@cursor.com>	2026-02-13 23:56:16 +08:00
gbanyan	8170fa0aa5	style: terminal adapts to light/dark mode - Light: slate-100 bg, slate-300 border, emerald-600 accent - Dark: slate-900 bg, slate-700 border, emerald-400 accent Co-authored-by: Cursor <cursoragent@cursor.com>	2026-02-13 23:48:28 +08:00
gbanyan	fe28262ef4	feat: launcher-style search UI (Raycast/Spotlight) - Replace Pagefind UI with cmdk + Pagefind low-level API - Quick actions when empty: nav (home, blog, tags) + recent posts - Debounced full-text search with keyboard navigation - Pass recent posts from layout to SearchModal - Extract cn utility to lib/utils.ts - Remove Pagefind UI styles, add Radix overlay styling - Align blog search bar styling with launcher Co-authored-by: Cursor <cursoragent@cursor.com>	2026-02-13 23:41:10 +08:00
gbanyan	7d85446ac5	feat: add page transition animations and loading indicators - Add nextjs-toploader for instant top progress bar on navigation - Add next-view-transitions for View Transitions API page transitions - Enhance template.tsx page enter animation (0.45s, scale effect) - Replace next/link with next-view-transitions Link for smooth transitions - Add prefers-reduced-motion support for accessibility Co-authored-by: Cursor <cursoragent@cursor.com>	2026-02-13 23:07:51 +08:00
gbanyan	a4e88fa506	style: make terminal hero responsive on wider screens - Hero: responsive max-width (2xl→3xl→4xl→5xl) and min-height - Terminal: responsive font size (sm→base→lg), padding, title bar Co-authored-by: Cursor <cursoragent@cursor.com>	2026-02-13 22:54:42 +08:00
gbanyan	62d5973e1f	fix: move sidebar FAB to bottom-left to avoid overlap with back-to-top Co-authored-by: Cursor <cursoragent@cursor.com>	2026-02-13 22:47:18 +08:00
gbanyan	42a1d3cbbe	feat: add Matrix rain + terminal hero with typing effect - Matrix rain animation on homepage load (duration tied to page load) - Sequential transition to terminal window with typing effect - cat welcome.txt → title & tagline - fastfetch → dual eagle-eye ASCII art (霍德爾之目) - prefers-reduced-motion support - SEO: sr-only h1 for accessibility Co-authored-by: Cursor <cursoragent@cursor.com>	2026-02-13 22:44:24 +08:00
gbanyan	d27cc01c87	feat: add mobile sidebar access via FAB and slide-over drawer - Extract RightSidebarContent for reuse in desktop and mobile - Add floating action button (FAB) on narrow screens to open sidebar - Slide-over drawer from right with author card, Mastodon feed, tags - Lazy load Mastodon feed when drawer opens (forceLoadFeed prop) Co-authored-by: Cursor <cursoragent@cursor.com>	2026-02-13 22:03:13 +08:00
gbanyan	8a4ecf9634	Add repo card component and GitHub language colors for projects page Co-authored-by: Cursor <cursoragent@cursor.com>	2026-02-13 21:45:45 +08:00