Academic Portfolio Website

一个现代化的英文学术网站，专为博士研究生设计，具有动态交互效果和响应式设计。

✨ 特性

🎨 现代化设计

• 响应式布局，支持所有设备
• 渐变色彩和阴影效果
• 现代化的卡片式设计
• 优雅的排版和间距

🌙 暗黑模式

• 自动检测系统主题设置
• 手动切换明暗主题
• 平滑的主题切换动画
• 键盘快捷键支持 (Ctrl/Cmd + J)

🚀 动态交互

• 滚动触发的动画效果
• 悬停动画和过渡效果
• 视差滚动效果
• 打字机效果
• 计数器动画
• 粒子效果

📱 响应式设计

• 移动端友好的导航
• 自适应网格布局
• 触摸友好的交互元素
• 优化的移动端体验

🏗️ 网站结构

主要板块

1. Hero Section - 欢迎页面，包含标题和行动按钮
2. About Me - 个人介绍和基本信息
3. News - 最新消息和动态（最多10条）
4. Education - 教育背景时间线
5. Publications - 论文发表信息，支持分类筛选
6. Projects - 研究项目展示
7. Work Experience - 工作经历（TA、RA、实习等）
8. Misc - 杂项信息（奖项、会员、语言、兴趣等）

技术架构

• HTML5 - 语义化标记
• CSS3 - 现代样式和动画
• JavaScript ES6+ - 交互功能和动画
• Font Awesome - 图标库
• Google Fonts - 字体支持

🚀 快速开始

1. 下载文件

将所有文件下载到你的项目目录中。

2. 自定义内容

编辑 index.html 文件，替换以下占位符：

个人信息

<!-- 替换这些占位符 -->
[Your Research Area] - 你的研究领域
[Your Field] - 你的专业领域
[Your University] - 你的大学
[Your Location] - 你的位置
[Your Advisor's Name] - 你的导师姓名
[Your GPA] - 你的GPA
[Your Major] - 你的专业
[Your Thesis Title] - 你的论文标题
[Your Name] - 你的姓名

联系信息

[[email protected]] - 你的邮箱
[Your University, City, Country] - 你的大学、城市、国家

社交媒体链接

<!-- 在footer部分更新这些链接 -->
<a href="你的GitHub链接" class="social-link">
<a href="你的LinkedIn链接" class="social-link">
<a href="你的Twitter链接" class="social-link">

3. 添加你的内容

添加新闻

<div class="news-item" data-aos="fade-up">
    <div class="news-date">Dec 2024</div>
    <h3 class="news-title">你的新闻标题</h3>
    <p class="news-excerpt">你的新闻摘要</p>
</div>

添加论文

<div class="publication-item journal" data-aos="fade-up">
    <div class="publication-type">Journal Paper</div>
    <h3 class="publication-title">你的论文标题</h3>
    <p class="publication-authors">作者姓名</p>
    <p class="publication-venue">期刊名称, 年份</p>
    <div class="publication-links">
        <a href="DOI链接" class="link-btn">DOI</a>
        <a href="PDF链接" class="link-btn">PDF</a>
        <a href="代码链接" class="link-btn">Code</a>
    </div>
</div>

添加项目

<div class="project-card" data-aos="fade-up">
    <div class="project-image">
        <i class="fas fa-project-diagram"></i>
    </div>
    <div class="project-content">
        <h3 class="project-title">项目名称</h3>
        <p class="project-description">项目描述</p>
        <div class="project-tags">
            <span class="tag">技术1</span>
            <span class="tag">技术2</span>
        </div>
        <div class="project-links">
            <a href="演示链接" class="project-link">Demo</a>
            <a href="代码链接" class="project-link">Code</a>
        </div>
    </div>
</div>

4. 部署到GitHub Pages

1. 创建一个新的GitHub仓库
2. 上传所有文件到仓库
3. 在仓库设置中启用GitHub Pages
4. 选择主分支作为源
5. 你的网站将在 https://你的用户名.github.io/仓库名 上线

🎨 自定义样式

修改颜色主题

编辑 css/style.css 文件中的CSS变量：

:root {
    --primary-color: #2563eb;      /* 主色调 */
    --primary-dark: #1d4ed8;       /* 深色主色调 */
    --secondary-color: #64748b;    /* 次要色调 */
    --accent-color: #f59e0b;       /* 强调色 */
    --text-primary: #1e293b;       /* 主要文字颜色 */
    --text-secondary: #64748b;     /* 次要文字颜色 */
    --bg-primary: #ffffff;         /* 主要背景色 */
    --bg-secondary: #f8fafc;       /* 次要背景色 */
}

修改动画效果

编辑 css/animations.css 文件来自定义动画：

/* 修改动画持续时间 */
[data-aos] {
    transition-duration: 1s; /* 改为你想要的持续时间 */
}

/* 修改动画延迟 */
[data-aos-delay="100"] {
    transition-delay: 0.1s; /* 改为你想要的延迟 */
}

修改字体

在 index.html 的head部分更改Google Fonts链接：

<link href="https://fonts.googleapis.com/css2?family=你的字体:wght@300;400;500;600;700&display=swap" rel="stylesheet">

然后在 css/style.css 中更新字体：

body {
    font-family: '你的字体', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}

🔧 高级功能

添加新的动画

在 js/animations.js 中添加新的动画方法：

// 添加新的动画类型
case 'your-animation':
    this.yourAnimation(element);
    break;

// 实现动画方法
yourAnimation(element) {
    element.style.opacity = '1';
    element.style.transform = 'your-transform';
}

添加新的主题

在 css/dark-mode.css 中添加新的主题：

[data-theme="your-theme"] {
    --primary-color: #your-color;
    --bg-primary: #your-bg-color;
    /* 其他颜色变量 */
}

添加新的交互功能

在 js/main.js 中添加新的功能：

function yourNewFunction() {
    // 你的新功能代码
}

// 在init函数中调用
initYourNewFunction();

📱 移动端优化

网站已经针对移动端进行了优化，包括：

• 响应式导航菜单
• 触摸友好的按钮和链接
• 优化的移动端布局
• 移动端特定的动画效果

🌐 浏览器兼容性

• Chrome 60+
• Firefox 55+
• Safari 12+
• Edge 79+

📝 更新日志

v1.0.0

• 初始版本发布
• 完整的学术网站功能
• 响应式设计
• 暗黑模式支持
• 丰富的动画效果

🤝 贡献

欢迎提交Issue和Pull Request来改进这个项目！

📄 许可证

MIT License - 详见LICENSE文件

📞 支持

如果你在使用过程中遇到问题，请：

1. 检查浏览器控制台是否有错误信息
2. 确认所有文件都已正确上传
3. 检查文件路径是否正确
4. 提交Issue描述你的问题

🔮 未来计划

• 添加博客功能
• 集成评论系统
• 添加搜索功能
• 支持多语言
• 添加分析统计
• 集成学术数据库API

---

享受你的新学术网站！ 🎓✨