Skip to content

CONTENT_GUIDE.md

Latest commit

 

History

History
121 lines (91 loc) · 3.23 KB

CONTENT_GUIDE.md

File metadata and controls

121 lines (91 loc) · 3.23 KB

Vimalinx Portfolio - 内容维护指南

你的个人展示页采用了配置驱动的设计。这意味着 99% 的内容修改（文字、图片、链接、新项目）都只需要修改一个文件：

📂 src/config.ts

1. 基础信息修改 (名字、简介)

在 src/config.ts 中找到 profile 部分：

export const config = {
  profile: {
    name: "七叶怀瑾", // 中文名
    englishName: "Vimalinx", // 英文名
    title: {
      zh: "全栈开发者 & 创意构建者", // [中文] 头衔
      en: "Full Stack Developer & Creator" // [英文] 头衔
    },
    bio: {
      zh: "...", // [中文] 个人简介
      en: "..."  // [英文] 个人简介
    },
    // ...
  },
  // ...
};

2. 添加/修改项目 (Projects)

这是最核心的部分。在 projects 数组中，每个对象代表一个项目。

如何添加新项目？

只需在 projects 数组中复制一份现有的格式，并填入新内容：

// 1. 在文件顶部引入一个图标 (可选)
import { Gift, Database, Zap } from 'lucide-react'; 

// 2. 在 projects 数组中添加：
{
  id: 'new-project', // 唯一ID
  title: "我的新项目",
  description: {
    zh: "这是中文介绍...",
    en: "This is English description..."
  },
  url: "https://example.com", // 项目链接
  tags: ["React", "AI", "Design"], // 标签
  icon: Zap, // 使用上面引入的图标
  
  // 选项 A: 使用图片 (推荐 1920x1080)
  // 将图片放入 public/ 文件夹，例如 public/demo.jpg
  image: "/demo.jpg", 
  
  // 选项 B: 使用 CSS 渐变 (如果没有图)
  // image: "linear-gradient(135deg, #1a1a2e 0%, #16213e 100%)",
  
  status: "Live", // 状态: Live / Concept / Beta
},

注意事项：

  • 图片: 把图片文件（.jpg, .png）直接放在项目的 public/ 文件夹下。引用时以 / 开头（例如 /my-image.jpg）。
  • 图标: 可以在 Lucide Icons 网站找喜欢的图标名字，然后在文件顶部 import { 名字 } from 'lucide-react' 引入。

3. 修改社交链接 (Socials)

在 socials 数组中管理。

添加二维码 (如微信/小红书)

  1. 把二维码图片放入 public/ 文件夹（例如 public/qr-new.jpg）。
  2. 配置如下：
{
  id: 'wechat',
  name: { zh: '微信', en: 'WeChat' },
  icon: Smartphone, // 图标
  type: 'qrcode',   // 类型设为 'qrcode'
  qrCode: '/qr-new.jpg', // 这里填文件名
  color: 'hover:text-green-500', // 鼠标悬停颜色 (Tailwind class)
},

添加普通链接 (如 Twitter/Bilibili)

{
  id: 'twitter',
  name: { zh: '推特', en: 'Twitter' },
  icon: Twitter, 
  type: 'link',     // 类型设为 'link'
  url: 'https://twitter.com/xxx',
  color: 'hover:text-blue-400',
},

4. 常用命令

打开终端（Terminal）执行：

  • 启动预览: npm run dev (修改后无需重启，浏览器会自动刷新)
  • 打包发布: npm run build (生成最终文件到 dist 目录)

5. 高级定制 (可选)

如果你想修改颜色主题或动画参数：

  • 颜色: 修改 tailwind.config.js。
  • 动画: 组件动画主要在 src/components/*.tsx 中使用 framer-motion 定义。