Spaces:

zhouxiaoxi
/

static-space

Running

App Files Files Community

zhouwei commited on Jul 11, 2025

Commit

edda47e

1 Parent(s): 68bbe34

first change

Browse files

Files changed (7) hide show

env.d.ts +6 -0
package-lock.json +0 -0
src/App.vue +87 -56
src/assets/main.css +4 -4
src/components/HelloWorld.vue +320 -19
src/views/AboutView.vue +183 -8
src/views/HomeView.vue +753 -3

env.d.ts CHANGED Viewed

	@@ -1 +1,7 @@
1	/// <reference types="vite/client" />

 /// <reference types="vite/client" />
+declare module '*.vue' {
+  import type { DefineComponent } from 'vue'
+  const component: DefineComponent<Record<string, unknown>, Record<string, unknown>, unknown>
+  export default component
+}

package-lock.json ADDED Viewed

The diff for this file is too large to render. See raw diff

src/App.vue CHANGED Viewed

@@ -1,85 +1,116 @@
 <script setup lang="ts">
 import { RouterLink, RouterView } from 'vue-router'
-import HelloWorld from './components/HelloWorld.vue'
 </script>
 <template>
-  <header>
-    <img alt="Vue logo" class="logo" src="@/assets/logo.svg" width="125" height="125" />
-    <div class="wrapper">
-      <HelloWorld msg="You did it!" />
-      <nav>
-        <RouterLink to="/">Home</RouterLink>
-        <RouterLink to="/about">About</RouterLink>
-      </nav>
-    </div>
-  </header>
-  <RouterView />
 </template>
-<style scoped>
-header {
-  line-height: 1.5;
-  max-height: 100vh;
 }
-.logo {
-  display: block;
-  margin: 0 auto 2rem;
 }
-nav {
-  width: 100%;
-  font-size: 12px;
-  text-align: center;
-  margin-top: 2rem;
 }
-nav a.router-link-exact-active {
-  color: var(--color-text);
 }
-nav a.router-link-exact-active:hover {
-  background-color: transparent;
 }
-nav a {
-  display: inline-block;
-  padding: 0 1rem;
-  border-left: 1px solid var(--color-border);
 }
-nav a:first-of-type {
-  border: 0;
 }
-@media (min-width: 1024px) {
-  header {
-    display: flex;
-    place-items: center;
-    padding-right: calc(var(--section-gap) / 2);
-  }
-  .logo {
-    margin: 0 2rem 0 0;
   }
-  header .wrapper {
-    display: flex;
-    place-items: flex-start;
-    flex-wrap: wrap;
   }
-  nav {
-    text-align: left;
-    margin-left: -1rem;
-    font-size: 1rem;
-    padding: 1rem 0;
-    margin-top: 1rem;
-  }
 }
 </style>

 <script setup lang="ts">
 import { RouterLink, RouterView } from 'vue-router'
 </script>
 <template>
+  <div id="app">
+    <!-- 导航栏 -->
+    <nav class="floating-nav">
+      <RouterLink to="/" class="nav-item">首页</RouterLink>
+      <RouterLink to="/about" class="nav-item">关于</RouterLink>
+    </nav>
+    <!-- 路由视图 -->
+    <RouterView />
+  </div>
 </template>
+<style>
+* {
+  margin: 0;
+  padding: 0;
+  box-sizing: border-box;
 }
+body {
+  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;
+  line-height: 1.6;
+  color: #333;
+  overflow-x: hidden;
 }
+#app {
+  position: relative;
+  min-height: 100vh;
 }
+.floating-nav {
+  position: fixed;
+  top: 30px;
+  right: 30px;
+  z-index: 1000;
+  display: flex;
+  gap: 1rem;
+  background: rgba(255, 255, 255, 0.1);
+  backdrop-filter: blur(10px);
+  padding: 0.8rem 1.5rem;
+  border-radius: 50px;
+  border: 1px solid rgba(255, 255, 255, 0.2);
+  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
 }
+.nav-item {
+  color: white;
+  text-decoration: none;
+  font-weight: 500;
+  font-size: 0.9rem;
+  padding: 0.5rem 1rem;
+  border-radius: 25px;
+  transition: all 0.3s ease;
+  position: relative;
+  overflow: hidden;
 }
+.nav-item:hover {
+  background: rgba(255, 255, 255, 0.2);
+  transform: translateY(-2px);
 }
+.nav-item.router-link-exact-active {
+  background: rgba(255, 255, 255, 0.3);
+  color: white;
 }
+.nav-item.router-link-exact-active::before {
+  content: '';
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  background: linear-gradient(45deg, rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0.05));
+  z-index: -1;
+}
+@media (max-width: 768px) {
+  .floating-nav {
+    top: 20px;
+    right: 20px;
+    left: 20px;
+    justify-content: center;
   }
+  .nav-item {
+    font-size: 0.8rem;
+    padding: 0.4rem 0.8rem;
   }
+}
+/* 滚动条样式 */
+::-webkit-scrollbar {
+  width: 8px;
+}
+::-webkit-scrollbar-track {
+  background: rgba(255, 255, 255, 0.1);
+}
+::-webkit-scrollbar-thumb {
+  background: rgba(255, 255, 255, 0.3);
+  border-radius: 4px;
+}
+::-webkit-scrollbar-thumb:hover {
+  background: rgba(255, 255, 255, 0.5);
 }
 </style>

src/assets/main.css CHANGED Viewed

@@ -1,11 +1,11 @@
 @import './base.css';
-#app {
   max-width: 1280px;
   margin: 0 auto;
   padding: 2rem;
   font-weight: normal;
-}
 a,
 .green {
@@ -21,7 +21,7 @@ a,
   }
 }
-@media (min-width: 1024px) {
   body {
     display: flex;
     place-items: center;
@@ -32,4 +32,4 @@ a,
     grid-template-columns: 1fr 1fr;
     padding: 0 2rem;
   }
-}

 @import './base.css';
+/* #app {
   max-width: 1280px;
   margin: 0 auto;
   padding: 2rem;
   font-weight: normal;
+} */
 a,
 .green {
   }
 }
+/* @media (min-width: 1024px) {
   body {
     display: flex;
     place-items: center;
     grid-template-columns: 1fr 1fr;
     padding: 0 2rem;
   }
+} */

src/components/HelloWorld.vue CHANGED Viewed

@@ -1,41 +1,342 @@
 <script setup lang="ts">
 defineProps<{
   msg: string
 }>()
 </script>
 <template>
-  <div class="greetings">
-    <h1 class="green">{{ msg }}</h1>
-    <h3>
-      You’ve successfully created a project with
-      <a href="https://vite.dev/" target="_blank" rel="noopener">Vite</a> +
-      <a href="https://vuejs.org/" target="_blank" rel="noopener">Vue 3</a>. What's next?
-    </h3>
   </div>
 </template>
 <style scoped>
-h1 {
-  font-weight: 500;
-  font-size: 2.6rem;
   position: relative;
-  top: -10px;
 }
-h3 {
-  font-size: 1.2rem;
 }
-.greetings h1,
-.greetings h3 {
   text-align: center;
 }
-@media (min-width: 1024px) {
-  .greetings h1,
-  .greetings h3 {
-    text-align: left;
   }
 }
 </style>

 <script setup lang="ts">
+import { ref, onMounted } from 'vue'
 defineProps<{
   msg: string
 }>()
+const isVisible = ref(false)
+onMounted(() => {
+  setTimeout(() => {
+    isVisible.value = true
+  }, 100)
+})
 </script>
 <template>
+  <div class="hero-section">
+    <div class="background-animation">
+      <div class="floating-shapes">
+        <div class="shape shape-1"></div>
+        <div class="shape shape-2"></div>
+        <div class="shape shape-3"></div>
+        <div class="shape shape-4"></div>
+        <div class="shape shape-5"></div>
+      </div>
+    </div>
+    <div class="hero-content" :class="{ 'visible': isVisible }">
+      <div class="title-container">
+        <h1 class="main-title">{{ msg }}</h1>
+        <div class="title-underline"></div>
+      </div>
+      <div class="subtitle-container">
+        <p class="subtitle">全栈开发者 | 技术分享者 | 代码艺术家</p>
+      </div>
+      <div class="description">
+        <p>专注于前端开发、后端架构和技术创新</p>
+        <p>用代码创造美好，用技术改变世界</p>
+      </div>
+      <div class="tech-stack">
+        <div class="tech-item">Vue.js</div>
+        <div class="tech-item">React</div>
+        <div class="tech-item">Node.js</div>
+        <div class="tech-item">Python</div>
+        <div class="tech-item">TypeScript</div>
+      </div>
+      <div class="cta-buttons">
+        <button class="btn btn-primary">
+          <span>查看作品</span>
+          <div class="btn-glow"></div>
+        </button>
+        <button class="btn btn-secondary">
+          <span>联系我</span>
+        </button>
+      </div>
+    </div>
   </div>
 </template>
 <style scoped>
+.hero-section {
+  position: relative;
+  min-height: 100vh;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  overflow: hidden;
+  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+}
+.background-animation {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  z-index: 1;
+}
+.floating-shapes {
   position: relative;
+  width: 100%;
+  height: 100%;
+}
+.shape {
+  position: absolute;
+  background: rgba(255, 255, 255, 0.1);
+  border-radius: 50%;
+  animation: float 6s ease-in-out infinite;
+}
+.shape-1 {
+  width: 80px;
+  height: 80px;
+  top: 20%;
+  left: 10%;
+  animation-delay: 0s;
+}
+.shape-2 {
+  width: 60px;
+  height: 60px;
+  top: 60%;
+  right: 20%;
+  animation-delay: 1s;
+}
+.shape-3 {
+  width: 100px;
+  height: 100px;
+  bottom: 20%;
+  left: 20%;
+  animation-delay: 2s;
+}
+.shape-4 {
+  width: 40px;
+  height: 40px;
+  top: 30%;
+  right: 10%;
+  animation-delay: 3s;
+}
+.shape-5 {
+  width: 70px;
+  height: 70px;
+  bottom: 40%;
+  right: 30%;
+  animation-delay: 4s;
 }
+@keyframes float {
+  0%, 100% {
+    transform: translateY(0px) rotate(0deg);
+  }
+  50% {
+    transform: translateY(-20px) rotate(180deg);
+  }
 }
+.hero-content {
+  position: relative;
+  z-index: 2;
   text-align: center;
+  color: white;
+  max-width: 800px;
+  padding: 2rem;
+  opacity: 0;
+  transform: translateY(50px);
+  transition: all 1s ease-out;
+}
+.hero-content.visible {
+  opacity: 1;
+  transform: translateY(0);
+}
+.title-container {
+  margin-bottom: 2rem;
+}
+.main-title {
+  font-size: 4rem;
+  font-weight: 700;
+  margin: 0;
+  background: linear-gradient(45deg, #fff, #f0f0f0);
+  -webkit-background-clip: text;
+  -webkit-text-fill-color: transparent;
+  background-clip: text;
+  text-shadow: 0 0 30px rgba(255, 255, 255, 0.3);
+  animation: titleGlow 2s ease-in-out infinite alternate;
+}
+@keyframes titleGlow {
+  from {
+    text-shadow: 0 0 30px rgba(255, 255, 255, 0.3);
+  }
+  to {
+    text-shadow: 0 0 40px rgba(255, 255, 255, 0.5), 0 0 60px rgba(255, 255, 255, 0.2);
+  }
+}
+.title-underline {
+  width: 100px;
+  height: 3px;
+  background: linear-gradient(90deg, transparent, #fff, transparent);
+  margin: 1rem auto;
+  animation: underlineGlow 2s ease-in-out infinite;
+}
+@keyframes underlineGlow {
+  0%, 100% {
+    opacity: 0.7;
+    transform: scaleX(1);
+  }
+  50% {
+    opacity: 1;
+    transform: scaleX(1.2);
+  }
 }
+.subtitle-container {
+  margin-bottom: 2rem;
+}
+.subtitle {
+  font-size: 1.5rem;
+  font-weight: 300;
+  margin: 0;
+  opacity: 0.9;
+  letter-spacing: 2px;
+}
+.description {
+  margin-bottom: 3rem;
+  font-size: 1.1rem;
+  line-height: 1.6;
+  opacity: 0.8;
+}
+.description p {
+  margin: 0.5rem 0;
+}
+.tech-stack {
+  display: flex;
+  justify-content: center;
+  gap: 1rem;
+  margin-bottom: 3rem;
+  flex-wrap: wrap;
+}
+.tech-item {
+  background: rgba(255, 255, 255, 0.1);
+  backdrop-filter: blur(10px);
+  padding: 0.5rem 1rem;
+  border-radius: 25px;
+  font-size: 0.9rem;
+  border: 1px solid rgba(255, 255, 255, 0.2);
+  transition: all 0.3s ease;
+}
+.tech-item:hover {
+  background: rgba(255, 255, 255, 0.2);
+  transform: translateY(-2px);
+  box-shadow: 0 5px 15px rgba(255, 255, 255, 0.1);
+}
+.cta-buttons {
+  display: flex;
+  gap: 1rem;
+  justify-content: center;
+  flex-wrap: wrap;
+}
+.btn {
+  position: relative;
+  padding: 1rem 2rem;
+  border: none;
+  border-radius: 50px;
+  font-size: 1.1rem;
+  font-weight: 600;
+  cursor: pointer;
+  transition: all 0.3s ease;
+  overflow: hidden;
+}
+.btn span {
+  position: relative;
+  z-index: 1;
+}
+.btn-primary {
+  background: linear-gradient(45deg, #ff6b6b, #feca57);
+  color: white;
+}
+.btn-primary:hover {
+  transform: translateY(-3px);
+  box-shadow: 0 10px 25px rgba(255, 107, 107, 0.4);
+}
+.btn-glow {
+  position: absolute;
+  top: 0;
+  left: -100%;
+  width: 100%;
+  height: 100%;
+  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.3), transparent);
+  transition: left 0.5s;
+}
+.btn-primary:hover .btn-glow {
+  left: 100%;
+}
+.btn-secondary {
+  background: transparent;
+  color: white;
+  border: 2px solid rgba(255, 255, 255, 0.3);
+}
+.btn-secondary:hover {
+  background: rgba(255, 255, 255, 0.1);
+  transform: translateY(-3px);
+  box-shadow: 0 10px 25px rgba(255, 255, 255, 0.1);
+}
+@media (max-width: 768px) {
+  .main-title {
+    font-size: 2.5rem;
+  }
+  .subtitle {
+    font-size: 1.2rem;
+  }
+  .tech-stack {
+    gap: 0.5rem;
+  }
+  .tech-item {
+    font-size: 0.8rem;
+    padding: 0.4rem 0.8rem;
+  }
+  .cta-buttons {
+    flex-direction: column;
+    align-items: center;
+  }
+  .btn {
+    width: 200px;
   }
 }
 </style>

src/views/AboutView.vue CHANGED Viewed

@@ -1,15 +1,190 @@
 <template>
-  <div class="about">
-    <h1>This is an about page</h1>
   </div>
 </template>
-<style>
-@media (min-width: 1024px) {
-  .about {
-    min-height: 100vh;
-    display: flex;
-    align-items: center;
   }
 }
 </style>

 <template>
+  <div class="about-page">
+    <div class="about-container">
+      <div class="about-content">
+        <h1 class="about-title">关于程序员小溪</h1>
+        <div class="about-text">
+          <p>
+            我是一名充满热情的全栈开发者，专注于创建优雅、高效的数字解决方案。
+            通过不断学习和实践，我致力于将创新的想法转化为现实的产品。
+          </p>
+          <p>
+            技术是我的工具，创造是我的动力。我相信每一行代码都有其价值，
+            每一个项目都是一次新的探索和挑战。
+          </p>
+          <p>
+            如果你对我的工作感兴趣，或者有任何技术问题想要交流，
+            欢迎随时联系我。让我们一起用代码改变世界！
+          </p>
+        </div>
+        <div class="skills-section">
+          <h2>技能专长</h2>
+          <div class="skills-grid">
+            <div class="skill-category">
+              <h3>前端开发</h3>
+              <ul>
+                <li>Vue.js / React</li>
+                <li>TypeScript / JavaScript</li>
+                <li>HTML5 / CSS3</li>
+                <li>响应式设计</li>
+              </ul>
+            </div>
+            <div class="skill-category">
+              <h3>后端开发</h3>
+              <ul>
+                <li>Node.js / Python</li>
+                <li>数据库设计</li>
+                <li>API开发</li>
+                <li>云服务部署</li>
+              </ul>
+            </div>
+            <div class="skill-category">
+              <h3>开发工具</h3>
+              <ul>
+                <li>Git / GitHub</li>
+                <li>Docker</li>
+                <li>VS Code</li>
+                <li>Linux系统</li>
+              </ul>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
   </div>
 </template>
+<style scoped>
+.about-page {
+  min-height: 100vh;
+  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+  padding: 2rem 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+.about-container {
+  max-width: 1000px;
+  width: 100%;
+  margin: 0 auto;
+  padding: 0 2rem;
+}
+.about-content {
+  background: rgba(255, 255, 255, 0.1);
+  backdrop-filter: blur(10px);
+  border-radius: 20px;
+  padding: 3rem;
+  border: 1px solid rgba(255, 255, 255, 0.2);
+  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
+  color: white;
+}
+.about-title {
+  font-size: 3rem;
+  font-weight: 700;
+  text-align: center;
+  margin-bottom: 2rem;
+  background: linear-gradient(45deg, #fff, #f0f0f0);
+  -webkit-background-clip: text;
+  -webkit-text-fill-color: transparent;
+  background-clip: text;
+  text-shadow: 0 0 30px rgba(255, 255, 255, 0.3);
+}
+.about-text {
+  font-size: 1.2rem;
+  line-height: 1.8;
+  margin-bottom: 3rem;
+  opacity: 0.9;
+}
+.about-text p {
+  margin-bottom: 1.5rem;
+}
+.skills-section {
+  margin-top: 3rem;
+}
+.skills-section h2 {
+  font-size: 2rem;
+  font-weight: 600;
+  text-align: center;
+  margin-bottom: 2rem;
+  color: white;
+}
+.skills-grid {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
+  gap: 2rem;
+}
+.skill-category {
+  background: rgba(255, 255, 255, 0.05);
+  padding: 2rem;
+  border-radius: 15px;
+  border: 1px solid rgba(255, 255, 255, 0.1);
+  transition: all 0.3s ease;
+}
+.skill-category:hover {
+  background: rgba(255, 255, 255, 0.1);
+  transform: translateY(-5px);
+  box-shadow: 0 10px 25px rgba(255, 255, 255, 0.1);
+}
+.skill-category h3 {
+  font-size: 1.5rem;
+  font-weight: 600;
+  margin-bottom: 1rem;
+  color: #feca57;
+}
+.skill-category ul {
+  list-style: none;
+  padding: 0;
+}
+.skill-category li {
+  padding: 0.5rem 0;
+  font-size: 1.1rem;
+  opacity: 0.9;
+  position: relative;
+  padding-left: 1.5rem;
+}
+.skill-category li::before {
+  content: '▶';
+  position: absolute;
+  left: 0;
+  color: #feca57;
+  font-size: 0.8rem;
+}
+@media (max-width: 768px) {
+  .about-content {
+    padding: 2rem;
+  }
+  .about-title {
+    font-size: 2rem;
+  }
+  .about-text {
+    font-size: 1.1rem;
+  }
+  .skills-grid {
+    grid-template-columns: 1fr;
+    gap: 1rem;
+  }
+  .skill-category {
+    padding: 1.5rem;
   }
 }
 </style>

src/views/HomeView.vue CHANGED Viewed

@@ -1,9 +1,759 @@
 <script setup lang="ts">
-import TheWelcome from '../components/TheWelcome.vue'
 </script>
 <template>
-  <main>
-    <TheWelcome />
   </main>
 </template>

 <script setup lang="ts">
+import { ref, onMounted } from 'vue'
+const isVisible = ref(false)
+const projects = ref([
+  {
+    id: 1,
+    title: '响应式Web应用',
+    description: '使用Vue 3和TypeScript构建的现代化Web应用，具有完整的前后端功能',
+    tech: ['Vue 3', 'TypeScript', 'Node.js'],
+    image: '🌐'
+  },
+  {
+    id: 2,
+    title: '移动端应用开发',
+    description: '跨平台移动应用解决方案，提供流畅的用户体验',
+    tech: ['React Native', 'Flutter', 'Swift'],
+    image: '📱'
+  },
+  {
+    id: 3,
+    title: '数据可视化平台',
+    description: '企业级数据分析和可视化平台，帮助企业做出数据驱动的决策',
+    tech: ['D3.js', 'Python', 'PostgreSQL'],
+    image: '📊'
+  }
+])
+const services = ref([
+  {
+    icon: '💻',
+    title: '前端开发',
+    description: '现代化的前端解决方案，响应式设计，优秀的用户体验'
+  },
+  {
+    icon: '⚙️',
+    title: '后端开发',
+    description: '可扩展的后端架构，API设计，数据库优化'
+  },
+  {
+    icon: '🚀',
+    title: '全栈开发',
+    description: '端到端的完整解决方案，从概念到部署的全流程开发'
+  },
+  {
+    icon: '🔧',
+    title: '技术咨询',
+    description: '技术架构咨询，代码审查，性能优化建议'
+  }
+])
+onMounted(() => {
+  setTimeout(() => {
+    isVisible.value = true
+  }, 100)
+})
 </script>
 <template>
+  <main class="home-page">
+    <!-- 程序员小溪介绍 Hero Section -->
+    <section class="intro-hero-section">
+      <div class="background-animation">
+        <div class="floating-shapes">
+          <div class="shape shape-1"></div>
+          <div class="shape shape-2"></div>
+          <div class="shape shape-3"></div>
+          <div class="shape shape-4"></div>
+          <div class="shape shape-5"></div>
+        </div>
+      </div>
+      <div class="intro-hero-content" :class="{ 'visible': isVisible }">
+        <div class="title-container">
+          <h1 class="main-title">程序员小溪</h1>
+          <div class="title-underline"></div>
+        </div>
+        <div class="subtitle-container">
+          <p class="subtitle">全栈开发者 | 技术分享者 | 代码艺术家</p>
+        </div>
+        <div class="description">
+          <p>专注于前端开发、后端架构和技术创新</p>
+          <p>用代码创造美好，用技术改变世界</p>
+        </div>
+        <div class="tech-stack">
+          <div class="tech-item">Vue.js</div>
+          <div class="tech-item">React</div>
+          <div class="tech-item">Node.js</div>
+          <div class="tech-item">Python</div>
+          <div class="tech-item">TypeScript</div>
+        </div>
+        <div class="cta-buttons">
+          <button class="btn btn-primary">
+            <span>查看作品</span>
+            <div class="btn-glow"></div>
+          </button>
+          <button class="btn btn-secondary">
+            <span>联系我</span>
+          </button>
+        </div>
+      </div>
+    </section>
+    <!-- 欢迎内容 Hero Section -->
+    <section class="hero-section">
+      <div class="hero-content" :class="{ 'visible': isVisible }">
+        <h1 class="hero-title">欢迎来到我的数字世界</h1>
+        <p class="hero-subtitle">在这里，创意与技术完美融合</p>
+        <div class="hero-stats">
+          <div class="stat-item">
+            <div class="stat-number">50+</div>
+            <div class="stat-label">项目经验</div>
+          </div>
+          <div class="stat-item">
+            <div class="stat-number">9年+</div>
+            <div class="stat-label">开发经验</div>
+          </div>
+          <div class="stat-item">
+            <div class="stat-number">100%</div>
+            <div class="stat-label">客户满意度</div>
+          </div>
+        </div>
+      </div>
+    </section>
+    <!-- Services Section -->
+    <section class="services-section">
+      <div class="container">
+        <h2 class="section-title">我的服务</h2>
+        <div class="services-grid">
+          <div
+            v-for="service in services"
+            :key="service.title"
+            class="service-card"
+          >
+            <div class="service-icon">{{ service.icon }}</div>
+            <h3 class="service-title">{{ service.title }}</h3>
+            <p class="service-description">{{ service.description }}</p>
+          </div>
+        </div>
+      </div>
+    </section>
+    <!-- Projects Section -->
+    <section class="projects-section">
+      <div class="container">
+        <h2 class="section-title">精选项目</h2>
+        <div class="projects-grid">
+          <div
+            v-for="project in projects"
+            :key="project.id"
+            class="project-card"
+          >
+            <div class="project-image">{{ project.image }}</div>
+            <div class="project-content">
+              <h3 class="project-title">{{ project.title }}</h3>
+              <p class="project-description">{{ project.description }}</p>
+              <div class="project-tech">
+                <span
+                  v-for="tech in project.tech"
+                  :key="tech"
+                  class="tech-tag"
+                >
+                  {{ tech }}
+                </span>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </section>
+    <!-- Contact Section -->
+    <section class="contact-section">
+      <div class="container">
+        <h2 class="section-title">让我们开始合作</h2>
+        <p class="contact-subtitle">有项目想法？让我们一起把它变成现实</p>
+        <div class="contact-buttons">
+          <button class="btn btn-primary">
+            <span>开始项目</span>
+          </button>
+          <button class="btn btn-secondary">
+            <span>查看简历</span>
+          </button>
+        </div>
+        <div class="contact-info">
+          <div class="contact-item">
+            <span class="contact-icon">📧</span>
+            <span>xiaoxidev@example.com</span>
+          </div>
+          <div class="contact-item">
+            <span class="contact-icon">💬</span>
+            <span>微信：xiaoxidev</span>
+          </div>
+          <div class="contact-item">
+            <span class="contact-icon">🐙</span>
+            <span>GitHub：@xiaoxidev</span>
+          </div>
+        </div>
+      </div>
+    </section>
   </main>
 </template>
+<style scoped>
+.home-page {
+  min-height: 100vh;
+  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+  color: white;
+}
+.container {
+  max-width: 1200px;
+  margin: 0 auto;
+  padding: 0 2rem;
+}
+/* 程序员小溪介绍 Hero Section */
+.intro-hero-section {
+  position: relative;
+  min-height: 100vh;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  overflow: hidden;
+  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+}
+.background-animation {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  z-index: 1;
+}
+.floating-shapes {
+  position: relative;
+  width: 100%;
+  height: 100%;
+}
+.shape {
+  position: absolute;
+  background: rgba(255, 255, 255, 0.1);
+  border-radius: 50%;
+  animation: float 6s ease-in-out infinite;
+}
+.shape-1 {
+  width: 80px;
+  height: 80px;
+  top: 20%;
+  left: 10%;
+  animation-delay: 0s;
+}
+.shape-2 {
+  width: 60px;
+  height: 60px;
+  top: 60%;
+  right: 20%;
+  animation-delay: 1s;
+}
+.shape-3 {
+  width: 100px;
+  height: 100px;
+  bottom: 20%;
+  left: 20%;
+  animation-delay: 2s;
+}
+.shape-4 {
+  width: 40px;
+  height: 40px;
+  top: 30%;
+  right: 10%;
+  animation-delay: 3s;
+}
+.shape-5 {
+  width: 70px;
+  height: 70px;
+  bottom: 40%;
+  right: 30%;
+  animation-delay: 4s;
+}
+@keyframes float {
+  0%, 100% {
+    transform: translateY(0px) rotate(0deg);
+  }
+  50% {
+    transform: translateY(-20px) rotate(180deg);
+  }
+}
+.intro-hero-content {
+  position: relative;
+  z-index: 2;
+  text-align: center;
+  color: white;
+  max-width: 800px;
+  padding: 2rem;
+  opacity: 0;
+  transform: translateY(50px);
+  transition: all 1s ease-out;
+}
+.intro-hero-content.visible {
+  opacity: 1;
+  transform: translateY(0);
+}
+.title-container {
+  margin-bottom: 2rem;
+}
+.main-title {
+  font-size: 4rem;
+  font-weight: 700;
+  margin: 0;
+  background: linear-gradient(45deg, #fff, #f0f0f0);
+  -webkit-background-clip: text;
+  -webkit-text-fill-color: transparent;
+  background-clip: text;
+  text-shadow: 0 0 30px rgba(255, 255, 255, 0.3);
+  animation: titleGlow 2s ease-in-out infinite alternate;
+}
+@keyframes titleGlow {
+  from {
+    text-shadow: 0 0 30px rgba(255, 255, 255, 0.3);
+  }
+  to {
+    text-shadow: 0 0 40px rgba(255, 255, 255, 0.5), 0 0 60px rgba(255, 255, 255, 0.2);
+  }
+}
+.title-underline {
+  width: 100px;
+  height: 3px;
+  background: linear-gradient(90deg, transparent, #fff, transparent);
+  margin: 1rem auto;
+  animation: underlineGlow 2s ease-in-out infinite;
+}
+@keyframes underlineGlow {
+  0%, 100% {
+    opacity: 0.7;
+    transform: scaleX(1);
+  }
+  50% {
+    opacity: 1;
+    transform: scaleX(1.2);
+  }
+}
+.subtitle-container {
+  margin-bottom: 2rem;
+}
+.subtitle {
+  font-size: 1.5rem;
+  font-weight: 300;
+  margin: 0;
+  opacity: 0.9;
+  letter-spacing: 2px;
+}
+.description {
+  margin-bottom: 3rem;
+  font-size: 1.1rem;
+  line-height: 1.6;
+  opacity: 0.8;
+}
+.description p {
+  margin: 0.5rem 0;
+}
+.tech-stack {
+  display: flex;
+  justify-content: center;
+  gap: 1rem;
+  margin-bottom: 3rem;
+  flex-wrap: wrap;
+}
+.tech-item {
+  background: rgba(255, 255, 255, 0.1);
+  backdrop-filter: blur(10px);
+  padding: 0.5rem 1rem;
+  border-radius: 25px;
+  font-size: 0.9rem;
+  border: 1px solid rgba(255, 255, 255, 0.2);
+  transition: all 0.3s ease;
+}
+.tech-item:hover {
+  background: rgba(255, 255, 255, 0.2);
+  transform: translateY(-2px);
+  box-shadow: 0 5px 15px rgba(255, 255, 255, 0.1);
+}
+.cta-buttons {
+  display: flex;
+  gap: 1rem;
+  justify-content: center;
+  flex-wrap: wrap;
+}
+.btn-glow {
+  position: absolute;
+  top: 0;
+  left: -100%;
+  width: 100%;
+  height: 100%;
+  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.3), transparent);
+  transition: left 0.5s;
+}
+.btn-primary:hover .btn-glow {
+  left: 100%;
+}
+/* Hero Section */
+.hero-section {
+  min-height: 100vh;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  text-align: center;
+  position: relative;
+  overflow: hidden;
+  background: rgba(255, 255, 255, 0.05);
+}
+.hero-content {
+  opacity: 0;
+  transform: translateY(50px);
+  transition: all 1s ease-out;
+  z-index: 2;
+}
+.hero-content.visible {
+  opacity: 1;
+  transform: translateY(0);
+}
+.hero-title {
+  font-size: 3.5rem;
+  font-weight: 700;
+  margin-bottom: 1rem;
+  background: linear-gradient(45deg, #fff, #f0f0f0);
+  -webkit-background-clip: text;
+  -webkit-text-fill-color: transparent;
+  background-clip: text;
+  text-shadow: 0 0 30px rgba(255, 255, 255, 0.3);
+}
+.hero-subtitle {
+  font-size: 1.5rem;
+  margin-bottom: 3rem;
+  opacity: 0.9;
+}
+.hero-stats {
+  display: flex;
+  justify-content: center;
+  gap: 3rem;
+  margin-top: 2rem;
+}
+.stat-item {
+  text-align: center;
+}
+.stat-number {
+  font-size: 2.5rem;
+  font-weight: 700;
+  color: #feca57;
+  margin-bottom: 0.5rem;
+}
+.stat-label {
+  font-size: 1rem;
+  opacity: 0.8;
+}
+/* Services Section */
+.services-section {
+  padding: 5rem 0;
+  background: rgba(255, 255, 255, 0.05);
+}
+.section-title {
+  font-size: 2.5rem;
+  font-weight: 700;
+  text-align: center;
+  margin-bottom: 3rem;
+  background: linear-gradient(45deg, #fff, #f0f0f0);
+  -webkit-background-clip: text;
+  -webkit-text-fill-color: transparent;
+  background-clip: text;
+}
+.services-grid {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
+  gap: 2rem;
+}
+.service-card {
+  background: rgba(255, 255, 255, 0.1);
+  backdrop-filter: blur(10px);
+  padding: 2rem;
+  border-radius: 20px;
+  border: 1px solid rgba(255, 255, 255, 0.2);
+  text-align: center;
+  transition: all 0.3s ease;
+}
+.service-card:hover {
+  transform: translateY(-10px);
+  background: rgba(255, 255, 255, 0.15);
+  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1);
+}
+.service-icon {
+  font-size: 3rem;
+  margin-bottom: 1rem;
+}
+.service-title {
+  font-size: 1.5rem;
+  font-weight: 600;
+  margin-bottom: 1rem;
+  color: #feca57;
+}
+.service-description {
+  opacity: 0.9;
+  line-height: 1.6;
+}
+/* Projects Section */
+.projects-section {
+  padding: 5rem 0;
+}
+.projects-grid {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
+  gap: 2rem;
+}
+.project-card {
+  background: rgba(255, 255, 255, 0.1);
+  backdrop-filter: blur(10px);
+  border-radius: 20px;
+  border: 1px solid rgba(255, 255, 255, 0.2);
+  overflow: hidden;
+  transition: all 0.3s ease;
+}
+.project-card:hover {
+  transform: translateY(-5px);
+  box-shadow: 0 15px 30px rgba(0, 0, 0, 0.1);
+}
+.project-image {
+  height: 200px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-size: 4rem;
+  background: linear-gradient(45deg, rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0.05));
+}
+.project-content {
+  padding: 2rem;
+}
+.project-title {
+  font-size: 1.5rem;
+  font-weight: 600;
+  margin-bottom: 1rem;
+  color: #feca57;
+}
+.project-description {
+  opacity: 0.9;
+  line-height: 1.6;
+  margin-bottom: 1.5rem;
+}
+.project-tech {
+  display: flex;
+  gap: 0.5rem;
+  flex-wrap: wrap;
+}
+.tech-tag {
+  background: rgba(255, 255, 255, 0.2);
+  padding: 0.3rem 0.8rem;
+  border-radius: 15px;
+  font-size: 0.8rem;
+  border: 1px solid rgba(255, 255, 255, 0.3);
+}
+/* Contact Section */
+.contact-section {
+  padding: 5rem 0;
+  background: rgba(255, 255, 255, 0.05);
+  text-align: center;
+}
+.contact-subtitle {
+  font-size: 1.2rem;
+  opacity: 0.9;
+  margin-bottom: 2rem;
+}
+.contact-buttons {
+  display: flex;
+  gap: 1rem;
+  justify-content: center;
+  margin-bottom: 3rem;
+  flex-wrap: wrap;
+}
+.btn {
+  padding: 1rem 2rem;
+  border: none;
+  border-radius: 50px;
+  font-size: 1.1rem;
+  font-weight: 600;
+  cursor: pointer;
+  transition: all 0.3s ease;
+  position: relative;
+  overflow: hidden;
+}
+.btn span {
+  position: relative;
+  z-index: 1;
+}
+.btn-primary {
+  background: linear-gradient(45deg, #ff6b6b, #feca57);
+  color: white;
+}
+.btn-primary:hover {
+  transform: translateY(-3px);
+  box-shadow: 0 10px 25px rgba(255, 107, 107, 0.4);
+}
+.btn-secondary {
+  background: transparent;
+  color: white;
+  border: 2px solid rgba(255, 255, 255, 0.3);
+}
+.btn-secondary:hover {
+  background: rgba(255, 255, 255, 0.1);
+  transform: translateY(-3px);
+}
+.contact-info {
+  display: flex;
+  justify-content: center;
+  gap: 2rem;
+  flex-wrap: wrap;
+}
+.contact-item {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+  background: rgba(255, 255, 255, 0.1);
+  padding: 1rem 1.5rem;
+  border-radius: 25px;
+  border: 1px solid rgba(255, 255, 255, 0.2);
+  transition: all 0.3s ease;
+}
+.contact-item:hover {
+  background: rgba(255, 255, 255, 0.15);
+  transform: translateY(-2px);
+}
+.contact-icon {
+  font-size: 1.2rem;
+}
+/* Responsive Design */
+@media (max-width: 768px) {
+  .main-title {
+    font-size: 2.5rem;
+  }
+  .subtitle {
+    font-size: 1.2rem;
+  }
+  .tech-stack {
+    gap: 0.5rem;
+  }
+  .tech-item {
+    font-size: 0.8rem;
+    padding: 0.4rem 0.8rem;
+  }
+  .hero-title {
+    font-size: 2.5rem;
+  }
+  .hero-subtitle {
+    font-size: 1.2rem;
+  }
+  .hero-stats {
+    flex-direction: column;
+    gap: 1rem;
+  }
+  .section-title {
+    font-size: 2rem;
+  }
+  .services-grid,
+  .projects-grid {
+    grid-template-columns: 1fr;
+  }
+  .contact-buttons {
+    flex-direction: column;
+    align-items: center;
+  }
+  .btn {
+    width: 200px;
+  }
+  .contact-info {
+    flex-direction: column;
+    align-items: center;
+  }
+}
+</style>