SDCOM/Web/For_Me

Public

WeChat Login

Code Issues Pull requests Events Packages Insights

main

Branch

Tag

SDCOM

feat: 新增 FTP 同步功能到 CI 流程

a7a0e7a5

62 commits

.ide
images
.cnb.yml
.dockerignore
.gitignore
LICENSE
README.md
index.html
index_zh-cn.html
nn_ci_source.html
progress-styles.css
script.js
styles.css

个人介绍网站

这是一个简洁、现代的个人介绍网站模板，具有响应式设计和优雅的界面。

特点

响应式设计，适配各种设备（从手机到桌面）
简洁现代的界面设计
暗色主题，提供舒适的浏览体验
社交媒体链接展示
项目展示区域
技能展示区域
一言API集成，展示随机名言
打字机效果增强视觉体验

文件结构

.
├── index.html          # 主HTML文件
├── styles.css          # CSS样式表
├── script.js           # JavaScript交互脚本
├── images/             # 图片资源目录
│   ├── favicon.jpeg    # 网站图标
│   └── ...             # 其他图片资源
└── README.md           # 项目说明文档

如何使用

克隆或下载此仓库
编辑 index.html 文件，替换个人信息：
- 修改标题和名字
- 更新个人介绍和座右铭
- 更新社交媒体链接
- 添加你的项目
- 更新技能图标
替换 images/favicon.jpeg 为你自己的网站图标
根据需要自定义 styles.css 中的颜色和样式

自定义

修改颜色主题

在 styles.css 文件中，你可以修改 :root 部分的 CSS 变量来更改网站的颜色主题：

:root {
    --bg-color: #121212;          /* 背景颜色 */
    --text-color: #e0e0e0;        /* 文本颜色 */
    --accent-color: #7b50c7;      /* 强调色 */
    --card-bg: rgba(255, 255, 255, 0.1);        /* 卡片背景色 */
    --card-hover-bg: rgba(255, 255, 255, 0.15); /* 卡片悬停背景色 */
    /* 其他颜色变量 */
}

添加更多项目

在 index.html 文件中，你可以在 .project-grid 部分添加更多项目卡片：

<a href="https://cnb.cool/yourusername/yourproject" target="_blank" class="project-card">
    <div class="project-content">
        <div class="project-info">
            <div class="project-title">项目名称</div>
            <div class="project-description">
                项目描述内容
            </div>
        </div>
        <div class="project-icon">
            <i class="fas fa-icon-name"></i>
        </div>
    </div>
</a>

添加更多技能图标

在 index.html 文件中，你可以在 .skill-icons 部分添加更多技能图标。本模板使用 skillicons.hydun.com 服务来显示技能图标：

<a href="https://技能官网.com/" target="_blank" class="skill-icon" title="技能名称">
    <img src="//skillicons.hydun.com/icons?i=技能代码" alt="技能名称">
</a>

自定义一言API

默认情况下，网站使用 hitokoto.cn API 来获取随机名言。你可以在 script.js 文件中修改相关代码来使用其他API或自定义显示内容：

// 获取一言内容并显示
fetch('https://v1.hitokoto.cn/')
    .then(response => response.json())
    .then(data => {
        const hitokotoElement = document.getElementById('hitokoto');
        typeEffect(hitokotoElement, data.hitokoto);
    })
    .catch(error => {
        console.error('获取一言失败:', error);
        document.getElementById('hitokoto').textContent = '种一棵树最好的时间是十年前，其次是现在。';
    });

调整打字效果

你可以在 script.js 文件中修改 typeEffect 函数的参数来调整打字效果的速度：

// 为标题文字添加打字效果
const textElement = document.querySelector('.text-gradient');
const originalText = textElement.textContent;
textElement.textContent = '';

setTimeout(() => {
    typeEffect(textElement, originalText, 100); // 100是打字速度（毫秒）
}, 500);