feat: 新增我的项目模块

assets/data.ts

@@ -7,10 +7,10 @@ export const links = [
     name: "关于我",
     hash: "#about",
   },
-  // {
-  //   name: "我的项目",
-  //   hash: "#projects",
-  // },
+  {
+    name: "我的项目",
+    hash: "#projects",
+  },
   {
     name: "我的技能",
     hash: "#skills",
@@ -31,47 +31,36 @@ Vue3、Vite 和 Nuxt.js 等技术，对 JavaScript, TypeScript 和 HTML/CSS
 🛠️。如果不在电脑前，我喜欢做饭、看电影
 🍳🎥💪，规律的睡眠和饮食是我精力充沛的秘诀 🌟。`;
 
-// export type ProjectTags = typeof projectsData[number]["tags"];
-
-// export const projectsData = [
-//     {
-//         title: "Typing Speed",
-//         title_zh: '打字测验⌨️',
-//         description:
-//             "A comprehensive typing speed test application that tracks your overall typing performance. It provides detailed statistics, including total words typed, errors made, and accuracy rate, allowing users to monitor their progress and improve their typing efficiency.",
-//         desc_zh: "一个打字速度测试应用。敲击即开始打字，计时结束后将显示总敲击单词数、正确率、错误率等。该应用UI简洁现代，支持Dark Mode切换。",
-//         tags: ["React", "TypeScript", "Tailwind", 'Framer Motion'],
-//         imageUrl: typingSpeedImage,
-//         projectUrl: 'https://github.com/Codefreyy/typing-speed-game',
-//         demoUrl: 'https://joy-typing-speed-game.vercel.app/',
-//         detailRoute: '/projects/typing-speed',
-//     },
-//     {
-//         title: "Game Hub",
-//         title_zh: '游戏枢纽站🎮',
-//         description: "A responsive game grid application that offers search and filter functionality, and features infinite scrolling using React Query. It also includes robust form validation with Zod and efficient state management with Zustand.",
-//         desc_zh: "响应式游戏网格，支持搜索和过滤，使用react query实现无限滚动，使用Zod进行表单验证，Zustand进行状态管理。",
-//         tags: ["React", "TypeScript", "Zod", "React Query", "Chakra UI"],
-//         imageUrl: gameHubImage,
-//         projectUrl: 'https://github.com/Codefreyy/New-Game-hub',
-//         demoUrl: 'https://new-game-hub.vercel.app/',
-//         detailRoute: '/projects/typing-speed'
-
-//     },
-//     {
-//         title: "2048 Game",
-//         title_zh: "2048",
-//         description:
-//             "Cloned the classic 2048 game using object-oriented programming and vanilla JavaScript.",
-//         desc_zh: "使用面向对象编程思维和原生JavaScript实现了经典的2048游戏。",
-//         tags: ["JavaScript", "HTML", "CSS3"],
-//         imageUrl: rubicGameImage,
-//         projectUrl: 'https://github.com/Codefreyy/VanillaJS-Game-2048',
-//         demoUrl: 'https://vanilla-js-game-2048.vercel.app/',
-//         detailRoute: '/projects/typing-speed'
-
-//     },
-// ]
+export const projectsData = [
+  {
+    title: "Anki 记忆卡",
+    description:
+      "通过记忆算法和个性化复习系统，可以根据每个人对不同知识点的难易程度，难的知识点多学习，简单的知识点少学习。",
+    tags: ["Vue 3", "TypeScript", "Tailwind CSS", "Naive UI", "Pinia"],
+    imageUrl: "/anki.png",
+    projectUrl: "",
+    demoUrl: "",
+    detailRoute: "",
+  },
+  {
+    title: "后台管理系统",
+    description: "一个后台管理系统。该应用UI简洁现代，支持Dark Mode切换。",
+    tags: ["Vue 3", "TypeScript", "Tailwind CSS", "Element Plus", "Pinia"],
+    imageUrl: "/admin.jpeg",
+    projectUrl: "",
+    demoUrl: "",
+    detailRoute: "",
+  },
+  {
+    title: "下厨房",
+    description: "使用Vue和Native Js实现了下厨房APP。",
+    tags: ["Vue 2", "JavaScript", "HTML", "SASS"],
+    imageUrl: "/xiachufang.jpg",
+    projectUrl: "https://github.com/Haoyue-zhi/Xiachufang",
+    demoUrl: "",
+    detailRoute: "",
+  },
+];
 
 export const skillsData = [
   "HTML",

components/app/project.vue

@@ -1,11 +1,21 @@
 <script setup lang="ts">
-const useActiveSection = useState("activeSection");
+import { projectsData } from "~/assets/data";
+
 const projectsRef = ref();
 useSectionInView(projectsRef, "我的项目");
 </script>
 
 <template>
-  <div ref="projectsRef" class="scroll-mt-28 mb-28" id="projects">
+  <div
+    ref="projectsRef"
+    class="scroll-mt-28 mb-28"
+    id="projects"
+  >
     <h2 class="text-3xl font-medium capitalize mb-8 text-center">我的项目</h2>
+    <AppProjectItem
+      v-for="(project, index) in projectsData"
+      :key="index"
+      :project="project"
+    />
   </div>
 </template>

components/app/projectItem.vue

@@ -0,0 +1,96 @@
+<script setup lang="ts">
+interface Project {
+  title: string;
+  description: string;
+  tags: string[];
+  imageUrl: string;
+  projectUrl: string;
+  demoUrl: string;
+  detailRoute: string;
+}
+const props = defineProps<{
+  project: Project;
+}>();
+
+const { title, description, tags, imageUrl, projectUrl, demoUrl, detailRoute } =
+  props.project;
+</script>
+
+<template>
+  <div
+    class="group mb-3 sm:mb-8 last:mb-0"
+    data-aos="new-animation"
+    data-aos-mirror="true"
+  >
+    <section
+      class="bg-gray-100 max-w-[45rem] border border-black/5 rounded-lg overflow-hidden sm:pr-8 relative sm:h-[28rem] transition sm:group-even:pl-8 dark:text-white dark:bg-white/10"
+    >
+      <div
+        class="group pt-4 pb-7 px-5 sm:pl-10 sm:pr-2 sm:pt-10 sm:max-w-[50%] flex flex-col items-start gap-3 h-full sm:group-even:ml-[18rem]"
+      >
+        <div class="flex flex-col gap-3 items-start">
+          <h3
+            class="text-2xl font-semibold group-hover:text-pink dark:group-hover:text-yellow hover:underline"
+          >
+            {{ title }}
+          </h3>
+
+          <div class="flex gap-3 text-sm text-gray-500 dark:text-gray-300">
+            <NuxtLink
+              v-if="projectUrl"
+              :to="projectUrl"
+              target="_blank"
+              class="w-full flex items-center gap-1 hover:underline underline-offset-2"
+            >
+              <span class="break-keep">Code</span>
+
+              <Icon name="mdi:github-box" size="17" />
+            </NuxtLink>
+            <NuxtLink
+              v-if="demoUrl"
+              :to="demoUrl"
+              target="_blank"
+              class="w-full flex items-center gap-1 hover:underline underline-offset-2"
+            >
+              <span class="break-keep min-w-[4.5rem]">Live demo</span>
+              <Icon name="mdi:launch" size="17" />
+            </NuxtLink>
+          </div>
+        </div>
+
+        <p class="mt-2 leading-relaxed text-gray-700 dark:text-white/70">
+          {{ description }}
+        </p>
+        <ul class="flex flex-wrap mt-auto gap-2">
+          <li
+            v-for="(tag, index) in tags"
+            class="bg-black/[0.7] px-3 py-1 text-[0.7rem] uppercase tracking-wider text-white rounded-full dark:text-white/70"
+            :key="index"
+          >
+            {{ tag }}
+          </li>
+        </ul>
+      </div>
+
+      <NuxtImg
+        :src="imageUrl"
+        alt="Project I worked on"
+        quality="95"
+        class="absolute hidden sm:block top-8 -right-40 w-[28.25rem] rounded-t-lg shadow-2xl transition group-hover:scale-[1.04] group-hover:-translate-x-3 group-hover:translate-y-3 group-hover:-rotate-2 group-even:group-hover:translate-x-3 group-even:group-hover:translate-y-3 group-even:group-hover:rotate-2 group-even:right-[initial] group-even:-left-40"
+      />
+    </section>
+  </div>
+</template>
+
+<style>
+[data-aos="new-animation"] {
+  scale: 0.8;
+  opacity: 0.6;
+  transition-property: transform, scale, opacity;
+
+  &.aos-animate {
+    scale: 1;
+    opacity: 1;
+  }
+}
+</style>

pages/index.vue

@@ -1,9 +1,9 @@
 <template>
-  <main class="flex flex-col items-center px-4 overflow-x-hidden">
+  <main class="flex flex-col items-center px-4">
     <AppIntro />
     <AppSectionDivider />
     <AppAbout />
-    <!-- <AppProject /> -->
+    <AppProject />
     <AppSkills />
     <AppExperience />
   </main>