React Personal Card

一个优雅、现代化的个人名片 React 组件，适用于展示个人简介、技术栈和社交链接。

✨ 特性

• 🎨 现代化 UI 设计，支持深色/浅色主题
• 📱 完全响应式，适配各种屏幕尺寸
• ⚡ 流畅的动画和交互动效
• 🎯 高度可定制化，丰富的配置选项
• 🔧 TypeScript 支持
• 📦 零依赖，轻量级

📦 安装

# 使用 npm
npm install react-personal-card

# 使用 yarn
yarn add react-personal-card

# 使用 pnpm
pnpm add react-personal-card

🚀 快速开始

import React from 'react';
import PersonalCard from 'react-personal-card';
import 'react-personal-card/dist/style.css'; // 引入样式

function App() {
  const socialLinks = [
    { name: 'GitHub', url: 'https://github.com/yourname', icon: '🐱' },
    { name: '掘金', url: 'https://juejin.cn/user/yourid', icon: '💎' },
    { name: '博客', url: 'https://yourblog.com', icon: '📝' },
    { name: '邮箱', url: 'mailto:[email protected]', icon: '📧' }
  ];

  const skills = ['React', 'Vue', 'Node.js', 'TypeScript', 'CSS3', 'Docker'];

  return (
    <PersonalCard
      name="张三"
      title="全栈工程师"
      bio="5年前端开发经验，专注于 React 和 Node.js 技术栈，热爱技术分享和开源贡献"
      avatar="/path/to/avatar.jpg"
      socialLinks={socialLinks}
      skills={skills}
      theme="light"
      onContact={() => alert('欢迎联系我！')}
    />
  );
}

export default App;

⚙️ API 文档

Props

| 属性 | 类型 | 默认值 | 描述 | |------|------|--------|------| | name | string | "开发者" | 姓名 | | title | string | "前端工程师" | 职位/头衔 | | avatar | string | "" | 头像图片 URL | | bio | string | "热爱编程，喜欢创造" | 个人简介 | | socialLinks | SocialLink[] | [] | 社交链接数组 | | skills | string[] | [] | 技能标签数组 | | theme | "light" \| "dark" | "light" | 主题模式 | | onContact | () => void | undefined | 联系按钮点击回调 | | className | string | "" | 自定义 CSS 类名 |

SocialLink 类型

interface SocialLink {
  name: string;      // 平台名称
  url: string;       // 链接地址
  icon?: string;     // 图标（emoji 或文本）
}

🎨 主题定制

深色主题

<PersonalCard
  name="李四"
  title="全栈开发者"
  theme="dark"
  // ... 其他 props
/>

自定义样式

/* 在你的 CSS 文件中 */
.custom-card {
  /* 覆盖默认样式 */
  --primary-color: #ff6b6b;
  --background-gradient: linear-gradient(135deg, #ff6b6b 0%, #feca57 100%);
}

.custom-card .personal-card__contact-btn {
  background: var(--primary-color);
}

<PersonalCard
  className="custom-card"
  // ... 其他 props
/>

🌟 示例

基础用法

<PersonalCard
  name="王五"
  title="React 开发者"
  bio="专注于 React 生态，热爱开源项目"
/>

完整配置

<PersonalCard
  name="赵六"
  title="技术专家"
  avatar="https://example.com/avatar.jpg"
  bio="8年全栈开发经验，主导多个大型项目架构设计"
  socialLinks={[
    { name: 'GitHub', url: 'https://github.com', icon: '⚡' },
    { name: 'LinkedIn', url: 'https://linkedin.com', icon: '💼' },
    { name: 'Twitter', url: 'https://twitter.com', icon: '🐦' }
  ]}
  skills={['React', 'Vue', 'Node.js', 'TypeScript', 'GraphQL', 'AWS']}
  onContact={() => window.open('mailto:[email protected]')}
/>

🔧 开发

本地开发

# 克隆仓库
git clone https://github.com/yourusername/react-personal-card.git

# 安装依赖
npm install

# 启动开发服务器
npm run dev

# 构建组件
npm run build

# 运行测试
npm test

项目结构

react-personal-card/
├── src/
│   ├── components/
│   │   └── PersonalCard/
│   │       ├── index.jsx
│   │       └── PersonalCard.scss
│   ├── index.js
│   └── types.ts
├── dist/
├── package.json
└── README.md

🤝 贡献

欢迎提交 Issue 和 Pull Request！

1. Fork 本仓库
2. 创建特性分支 (git checkout -b feature/AmazingFeature)
3. 提交更改 (git commit -m 'Add some AmazingFeature')
4. 推送到分支 (git push origin feature/AmazingFeature)
5. 开启 Pull Request

📄 许可证

本项目基于 MIT 许可证开源 - 查看 LICENSE 文件了解详情。

👥 作者

你的名字

• GitHub: @yourusername
• 邮箱: [email protected]

🙏 致谢

感谢所有为这个项目做出贡献的开发者！

📞 联系方式

如果你有任何问题或建议，请通过以下方式联系我：

• 提交 GitHub Issue
• 发送邮件至: [email protected]

⭐ 支持

如果这个项目对你有帮助，请给它一个 ⭐️！

享受编码！ 🚀