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/skills.tsx

@@ -0,0 +1,119 @@
+"use client"
+
+import { SectionWrapper } from "@/components/section-wrapper"
+import { IconCloud } from "@/components/ui/icon-cloud"
+
+const skills = [
+  "Go",
+  "Python",
+  "TypeScript",
+  "C#",
+  "JavaScript",
+  "Swift",
+  "Shell",
+  "Django",
+  "React",
+  "Docker",
+  "Traefik",
+  "MT5",
+  "OpenAI",
+  "TG Bot",
+  "MySQL",
+  "Git",
+  "CI/CD",
+  "DevOps",
+  "ERP",
+  "量化",
+]
+
+// 为每个技能生成 SVG 文本元素
+function SkillIcon({ text }: { text: string }) {
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      width="40"
+      height="40"
+      viewBox="0 0 40 40"
+    >
+      <circle cx="20" cy="20" r="18" fill="currentColor" opacity="0.1" />
+      <text
+        x="20"
+        y="24"
+        textAnchor="middle"
+        fontSize="8"
+        fill="currentColor"
+        fontWeight="500"
+      >
+        {text.slice(0, 5)}
+      </text>
+    </svg>
+  )
+}
+
+export function Skills() {
+  const iconElements = skills.map((skill, i) => <SkillIcon key={i} text={skill} />)
+
+  return (
+    <SectionWrapper id="skills" className="py-24">
+      <div className="mx-auto max-w-5xl px-6">
+        <h2 className="mb-12 text-center text-3xl font-bold tracking-tight sm:text-4xl">
+          技能与技术
+        </h2>
+
+        <div className="flex flex-col items-center gap-8 lg:flex-row lg:justify-center lg:gap-16">
+          {/* 3D 图标云 */}
+          <div className="relative flex items-center justify-center">
+            <IconCloud icons={iconElements} />
+          </div>
+
+          {/* 技能分类 */}
+          <div className="space-y-6">
+            <div>
+              <h3 className="mb-2 font-semibold">编程语言</h3>
+              <div className="flex flex-wrap gap-2">
+                {["Go", "Python", "TypeScript", "C#", "JavaScript", "Swift"].map(
+                  (s) => (
+                    <span
+                      key={s}
+                      className="rounded-full border border-border px-3 py-1 text-xs text-muted-foreground"
+                    >
+                      {s}
+                    </span>
+                  )
+                )}
+              </div>
+            </div>
+            <div>
+              <h3 className="mb-2 font-semibold">框架与服务</h3>
+              <div className="flex flex-wrap gap-2">
+                {["Django", "React", "MT5", "OpenAI API", "TG Bot"].map(
+                  (s) => (
+                    <span
+                      key={s}
+                      className="rounded-full border border-border px-3 py-1 text-xs text-muted-foreground"
+                    >
+                      {s}
+                    </span>
+                  )
+                )}
+              </div>
+            </div>
+            <div>
+              <h3 className="mb-2 font-semibold">运维与工具</h3>
+              <div className="flex flex-wrap gap-2">
+                {["Docker", "Traefik", "MySQL", "CI/CD", "DevOps"].map((s) => (
+                  <span
+                    key={s}
+                    className="rounded-full border border-border px-3 py-1 text-xs text-muted-foreground"
+                  >
+                    {s}
+                  </span>
+                ))}
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </SectionWrapper>
+  )
+}