个人主页模板

一个现代化的个人主页模板，具有黑客风格主题切换功能和交互式终端。完美展示个人信息、项目和社交媒体链接。

✨ 特点

• 🎨 现代简约的设计风格
• 🌓 支持浅色/黑客主题切换
• 💾 主题选择自动保存
• 🖥️ 交互式终端系统
• 📱 完全响应式设计
• ⚡ 流畅的动画效果
• 🔧 简单的配置文件
• 🔗 社交媒体链接展示
• 📂 项目展示区域
• 📝 可自定义的"关于我"内容

🚀 主要功能

双主题模式

• 浅色主题：简约现代的设计风格
• 黑客主题：
  • 终端风格界面
  • 矩阵背景效果
  • 文字扰乱动画
  • 点击音效
  • 代码统计显示
  • 交互式命令行终端

交互式终端系统

• 完整的命令行界面
• 支持的命令：
  • help - 显示帮助信息
  • clear - 清屏
  • ls - 列出目录内容
  • cd - 切换目录
  • pwd - 显示当前目录
  • cat - 查看文件内容
  • whoami - 显示当前用户
  • date - 显示当前日期和时间
  • echo - 输出文本
  • uname - 显示系统信息
  • tree - 显示目录结构
• 命令历史记录（使用上下箭头键浏览）
• 文件系统导航
• 彩色输出支持
• 自定义欢迎信息
• 可滚动的输出区域

个性化内容

• 自定义头像和个人信息
• 技能展示列表
• 项目作品展示
• 社交媒体链接
• 统计数据展示

🛠️ 如何使用

1. 下载或克隆此仓库
2. 修改 js/config.js 文件自定义您的信息：
   • 基本信息（姓名、简介、头像）
   • "关于我"内容
   • 社交媒体链接
   • 项目展示
   • 统计数据
   • 终端文件系统内容
3. 替换 images/avatar.jpg 为您的头像
4. 添加项目预览图到 images 文件夹

⚙️ 配置说明

基本信息配置

basicInfo: {
    name: "你的名字",
    bio: "你的简介",
    avatar: "images/avatar.jpg",
    footerText: "© 2025 你的名字"
}

关于我配置

about: {
    content: `
        <p>你的个人介绍</p>
        <ul>
            <li>技能1</li>
            <li>技能2</li>
        </ul>
    `
}

社交链接配置

socialLinks: [
    {
        name: "GitHub",
        url: "你的GitHub链接",
        icon: "fab fa-github"
    }
]

项目展示配置

projects: [
    {
        title: "项目名称",
        description: "项目描述",
        image: "项目预览图",
        url: "项目链接"
    }
]

终端文件系统配置

fileSystem: {
    '~': {
        type: 'directory',
        content: {
            'projects': {
                type: 'directory',
                content: {
                    'hack.sh': { type: 'file', content: '你的脚本内容' }
                }
            }
        }
    }
}

🎯 技术栈

• HTML5
• CSS3 (CSS变量实现主题切换)
• 原生JavaScript
• Font Awesome 图标
• Google Fonts

📱 响应式设计

• 完美适配各种设备尺寸
• 移动端优化布局
• 自适应网格系统
• 流畅的过渡动画

🌟 Hacker Mode特性

• 交互式命令行终端
• 终端风格界面
• 打字机效果
• 文字扰乱动画
• 点击音效
• 代码统计显示
• 矩阵背景效果
• 命令历史记录
• 文件系统浏览

💻 终端使用说明

1. 切换到Hacker Mode后，终端会自动显示
2. 输入 help 查看所有可用命令
3. 使用上下箭头键浏览命令历史
4. 使用 cd 和 ls 浏览文件系统
5. 使用 cat 查看文件内容
6. 使用 tree 查看目录结构
7. 点击终端区域自动聚焦到输入框

📄 许可证

MIT 许可证 - 欢迎自由使用和修改！