feat: build resume website with MagicUI components

- 6 sections: Hero, About, Experience, Skills, Projects, Contact
- MagicUI: Globe, Particles, Meteors, AnimatedList, IconCloud, BentoGrid
- Dark mode support, scroll-triggered animations
- Static export ready for deployment

components/sections/about.tsx

@@ -0,0 +1,92 @@
+"use client"
+
+import {
+  CodeIcon,
+  CpuIcon,
+  TerminalIcon,
+  GlobeIcon,
+  DatabaseIcon,
+  LayerIcon,
+} from "@hugeicons/core-free-icons"
+import { HugeiconsIcon } from "@hugeicons/react"
+
+import { OrbitingCircles } from "@/components/ui/orbiting-circles"
+import { SectionWrapper } from "@/components/section-wrapper"
+
+const techIcons = [
+  { icon: <HugeiconsIcon icon={CodeIcon} className="size-6" />, label: "Go" },
+  { icon: <HugeiconsIcon icon={TerminalIcon} className="size-6" />, label: "Python" },
+  { icon: <HugeiconsIcon icon={DatabaseIcon} className="size-6" />, label: "TypeScript" },
+  { icon: <HugeiconsIcon icon={CpuIcon} className="size-6" />, label: "C#" },
+  { icon: <HugeiconsIcon icon={LayerIcon} className="size-6" />, label: "React" },
+  { icon: <HugeiconsIcon icon={GlobeIcon} className="size-6" />, label: "Django" },
+]
+
+export function About() {
+  return (
+    <SectionWrapper id="about" className="py-24">
+      <div className="mx-auto max-w-5xl px-6">
+        <div className="grid gap-12 lg:grid-cols-2 lg:items-center">
+          {/* 简介文字 */}
+          <div>
+            <h2 className="mb-4 text-3xl font-bold tracking-tight sm:text-4xl">
+              关于我
+            </h2>
+            <div className="space-y-3 text-muted-foreground">
+              <p className="text-base">
+                AI 驱动的全栈工程师，擅长把 AI、自动化和业务系统做成可落地、可衡量的产品。
+              </p>
+              <p className="text-sm">
+                从 Go / Python / C# 后端、React 前端到 Docker / Linux 部署都能直接落地，覆盖全链路开发。
+              </p>
+              <p className="text-sm">
+                正在寻找能把 AI 深度接入真实业务、以结果衡量价值的团队。
+              </p>
+            </div>
+          </div>
+
+          {/* 环绕动画 */}
+          <div className="relative flex items-center justify-center">
+            <div className="relative flex size-80 items-center justify-center">
+              {/* 中心文字 */}
+              <div className="z-10 text-center">
+                <div className="text-4xl font-bold">6+</div>
+                <div className="text-sm text-muted-foreground">
+                  年经验
+                </div>
+              </div>
+
+              <OrbitingCircles radius={110} duration={25} iconSize={40}>
+                {techIcons.slice(0, 3).map((tech, i) => (
+                  <div
+                    key={i}
+                    className="flex size-10 items-center justify-center rounded-full border border-border bg-background p-2"
+                    title={tech.label}
+                  >
+                    {tech.icon}
+                  </div>
+                ))}
+              </OrbitingCircles>
+              <OrbitingCircles
+                radius={160}
+                duration={35}
+                reverse
+                iconSize={40}
+              >
+                {techIcons.slice(3).map((tech, i) => (
+                  <div
+                    key={i}
+                    className="flex size-10 items-center justify-center rounded-full border border-border bg-background p-2"
+                    title={tech.label}
+                  >
+                    {tech.icon}
+                  </div>
+                ))}
+              </OrbitingCircles>
+            </div>
+          </div>
+        </div>
+      </div>
+    </SectionWrapper>
+  )
+}