feat: setup frontend project with bun and dynamic data fetching

- Create new frontend project directory with Next.js 15 + React 19
- Migrate from pnpm to bun for faster package management
- Add TanStack Query + Axios for dynamic data fetching
- Create comprehensive Makefile with development commands
- Setup API layer with query hooks and error handling
- Configure environment variables and bun settings
- Add TypeScript type checking and project documentation
- Update CLAUDE.md with bun-specific development workflow

frontend/components/navigation.tsx

@@ -0,0 +1,83 @@
+"use client"
+
+import { useState } from "react"
+import { Menu, X, Camera } from "lucide-react"
+import { Button } from "@/components/ui/button"
+
+interface NavigationProps {
+  activeTab: string
+  onTabChange: (tab: string) => void
+}
+
+export function Navigation({ activeTab, onTabChange }: NavigationProps) {
+  const [isMenuOpen, setIsMenuOpen] = useState(false)
+
+  const navItems = [
+    { id: "gallery", name: "作品集", href: "#gallery" },
+    { id: "timeline", name: "时间线", href: "#timeline" },
+    { id: "about", name: "关于我", href: "#about" },
+    { id: "contact", name: "联系", href: "#contact" },
+  ]
+
+  const handleTabClick = (item: any) => {
+    // Handle all tabs, not just gallery and timeline
+    onTabChange(item.id)
+    setIsMenuOpen(false)
+  }
+
+  return (
+    <nav className="sticky top-0 z-50 bg-white/95 backdrop-blur-sm border-b border-gray-100">
+      <div className="container mx-auto px-4">
+        <div className="flex items-center justify-between h-16">
+          {/* Logo */}
+          <div className="flex items-center space-x-2">
+            <Camera className="h-8 w-8 text-gray-900" />
+            <span className="text-xl font-light text-gray-900">PhotoStudio</span>
+          </div>
+
+          {/* Desktop Navigation */}
+          <div className="hidden md:flex items-center space-x-8">
+            {navItems.map((item) => (
+              <button
+                key={item.name}
+                onClick={() => handleTabClick(item)}
+                className={`text-gray-700 hover:text-gray-900 transition-colors duration-200 font-light relative pb-1 ${
+                  activeTab === item.id ? "text-gray-900" : ""
+                }`}
+              >
+                {item.name}
+                {activeTab === item.id && (
+                  <div className="absolute bottom-0 left-0 right-0 h-0.5 bg-gray-900 rounded-full" />
+                )}
+              </button>
+            ))}
+          </div>
+
+          {/* Mobile Menu Button */}
+          <Button variant="ghost" size="sm" className="md:hidden" onClick={() => setIsMenuOpen(!isMenuOpen)}>
+            {isMenuOpen ? <X className="h-6 w-6" /> : <Menu className="h-6 w-6" />}
+          </Button>
+        </div>
+
+        {/* Mobile Navigation */}
+        {isMenuOpen && (
+          <div className="md:hidden py-4 border-t border-gray-100">
+            <div className="flex flex-col space-y-4">
+              {navItems.map((item) => (
+                <button
+                  key={item.name}
+                  onClick={() => handleTabClick(item)}
+                  className={`text-left text-gray-700 hover:text-gray-900 transition-colors duration-200 font-light ${
+                    activeTab === item.id ? "text-gray-900 font-medium" : ""
+                  }`}
+                >
+                  {item.name}
+                </button>
+              ))}
+            </div>
+          </div>
+        )}
+      </div>
+    </nav>
+  )
+}