chore: 初始化项目仓库

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

pages/about.vue

@@ -0,0 +1,98 @@
+<script setup lang="ts">
+import { Icon } from '@iconify/vue'
+import { siteConfig } from '~/config/site'
+
+useSeoMeta({
+  title: `关于 - ${siteConfig.siteName}`,
+  description: `关于 ${siteConfig.siteName} 的介绍`,
+})
+</script>
+
+<template>
+  <div class="container mx-auto max-w-3xl px-4 py-12">
+
+    <div class="mb-12 text-center anim-fade-in-up">
+      <h1 class="mb-4 text-4xl font-bold">关于</h1>
+      <p class="text-lg text-muted-foreground">关于这个站点和我</p>
+    </div>
+
+    <!-- 站点介绍 -->
+    <div class="mb-8 anim-fade-in-up anim-delay-1">
+      <div class="rounded-xl border p-6" style="border-color: var(--color-border); background-color: var(--color-bg-card);">
+        <h2 class="mb-4 text-xl font-semibold">关于本站</h2>
+        <div class="prose">
+          <p>欢迎来到 <strong>{{ siteConfig.siteName }}</strong>！这是一个专注于技术分享与实践的个人博客。</p>
+          <p>在这里，我会记录一些技术学习笔记、踩坑经验和项目实践，希望能帮到同样在学习路上的你。</p>
+          <p>本站基于 <a href="https://nuxt.com" target="_blank" rel="noopener noreferrer">Nuxt 3</a> 构建，使用 <a href="https://tailwindcss.com" target="_blank" rel="noopener noreferrer">Tailwind CSS</a> 作为样式方案，UI 参考了 <a href="https://2x.nz" target="_blank" rel="noopener noreferrer">二叉树树</a> 的设计，感谢大佬的开源精神！</p>
+        </div>
+      </div>
+    </div>
+
+    <!-- 技术栈 -->
+    <div class="mb-8 anim-fade-in-up anim-delay-2">
+      <div class="rounded-xl border p-6" style="border-color: var(--color-border); background-color: var(--color-bg-card);">
+        <h2 class="mb-4 text-xl font-semibold">技术栈</h2>
+        <div class="grid grid-cols-2 md:grid-cols-3 gap-3">
+          <div v-for="tech in [
+            { name: 'Nuxt 3', icon: 'simple-icons:nuxtdotjs', color: '#00DC82' },
+            { name: 'Vue 3', icon: 'simple-icons:vuedotjs', color: '#4FC08D' },
+            { name: 'TypeScript', icon: 'simple-icons:typescript', color: '#3178C6' },
+            { name: 'Tailwind CSS', icon: 'simple-icons:tailwindcss', color: '#06B6D4' },
+            { name: 'Nuxt Content', icon: 'mdi:file-document-outline', color: '#00DC82' },
+            { name: 'Giscus', icon: 'simple-icons:github', color: '#333' },
+            { name: 'Golang', icon: 'simple-icons:go', color: '#00ADD8' },
+            { name: 'Erlang', icon: 'simple-icons:erlang', color: '#A90533' },
+          ]" :key="tech.name"
+            class="flex items-center gap-2 rounded-lg p-3 transition-colors"
+            style="background: var(--color-bg-hover);"
+          >
+            <img
+              :src="`https://api.iconify.design/${tech.icon}.svg?color=${encodeURIComponent(tech.color)}`"
+              :alt="tech.name"
+              class="w-5 h-5"
+            />
+            <span class="text-sm font-medium">{{ tech.name }}</span>
+          </div>
+        </div>
+      </div>
+    </div>
+
+    <!-- 联系方式 -->
+    <div class="mb-8 anim-fade-in-up anim-delay-3">
+      <div class="rounded-xl border p-6" style="border-color: var(--color-border); background-color: var(--color-bg-card);">
+        <h2 class="mb-4 text-xl font-semibold">联系我</h2>
+        <p class="mb-4 text-sm text-muted-foreground">如果你有任何问题或建议，欢迎通过以下方式联系我：</p>
+        <div class="flex flex-wrap gap-3">
+          <a
+            v-for="link in siteConfig.socialLinks"
+            :key="link.name"
+            :href="link.url"
+            target="_blank"
+            rel="noopener noreferrer"
+            class="btn-pill"
+          >
+            <img
+              :src="`https://api.iconify.design/${link.icon}.svg?color=${encodeURIComponent(link.color || 'currentColor')}`"
+              :alt="link.name"
+              class="w-5 h-5"
+            />
+            <span>{{ link.name }}</span>
+          </a>
+        </div>
+      </div>
+    </div>
+
+    <!-- 免责声明 -->
+    <div class="anim-fade-in-up anim-delay-4">
+      <div class="rounded-xl border p-6" style="border-color: var(--color-border); background-color: var(--color-bg-card);">
+        <h2 class="mb-4 text-xl font-semibold">免责声明</h2>
+        <div class="prose">
+          <p>本站所有文章仅代表个人观点，与任何组织或公司无关。</p>
+          <p>本站部分内容来源于网络，如有侵权请联系删除。</p>
+          <p>本站提供的资源仅供参考学习，请于下载后 24 小时内删除。</p>
+        </div>
+      </div>
+    </div>
+
+  </div>
+</template>