项目全面解析

项目介绍

cropflre.github.io 是一个完全从零构建的开发者个人博客，采用纯 HTML/CSS/JavaScript 实现，无任何框架依赖。设计灵感来源于终端界面与现代 GitHub 的暗色美学——"用写代码的态度写博客"。

💡 设计哲学：以终端的沉浸感为基底，融合现代 UI 的流畅与精致。每一个像素都服务于阅读体验。

项目的核心目标：

零依赖 — 不依赖 React、Vue 或任何框架，纯原生实现
极致性能 — 首屏加载 < 100ms（本地），无打包过程
可定制 — CSS Custom Properties 驱动主题系统
可访问性 — 语义化 HTML，ARIA 标签，键盘导航友好

cropflre.github.io — Live Preview

↗ 访问 cropflre.github.io 查看在线效果

核心功能展示

🌗

暗色/亮色双主题

一键切换，偏好自动保存至 localStorage

✨

卡片聚光效果

鼠标跟踪高光，radial-gradient 动态渲染

⌨️

终端打字机

Hero 区域循环打字动画，增强品牌辨识度

📋

一键复制代码

代码块右上角 Copy 按钮，Clipboard API 实现

📱

全端响应式

从移动端到超宽屏，完美自适应布局

🎯

滚动渐入动画

IntersectionObserver 驱动的视口触发动效

代码亮点解析

🎨 CSS Custom Properties 主题系统

整套设计系统基于 CSS 变量构建，实现主题切换只需修改根选择器的变量值，无需重写任何组件样式：

            
            style.css — 主题变量

/* 暗色主题（默认） */
:root {
  --bg: #0d1117;
  --fg: #e6edf3;
  --accent: #7ee787;  /* terminal green */
}

/* 亮色主题 — 只需覆盖变量 */
[data-theme="light"] {
  --bg: #fbfcfd;
  --fg: #1f2328;
  --accent: #1a7f37;
}

✨ 卡片聚光效果（Spotlight）

利用 CSS radial-gradient + JS mousemove 实时设置自定义属性，实现跟随鼠标的光照效果：

            
            main.js — 卡片聚光

// 卡片鼠标跟踪高光
document.querySelectorAll(".card").forEach(card => {
  card.addEventListener("mousemove", (e) => {
    const r = card.getBoundingClientRect();
    card.style.setProperty("--x", `${e.clientX - r.left}px`);
    card.style.setProperty("--y", `${e.clientY - r.top}px`);
  });
});

🎬 IntersectionObserver 滚动动画

无需任何第三方动画库，通过原生 IntersectionObserver API 实现元素进入视口时的优雅渐入：

            
            main.js — 滚动渐入

const io = new IntersectionObserver((entries) => {
  entries.forEach(e => {
    if (e.isIntersecting) {
      e.target.classList.add("in");
      io.unobserve(e.target);
    }
  });
}, { rootMargin: "0px 0px -10% 0px", threshold: 0.05 });

document.querySelectorAll(".reveal").forEach(el => io.observe(el));

⌨️ 打字机效果

纯 JS 递归实现的打字机效果，支持多文本循环和自然的删除/输入节奏：

            
            HTML — 声明式配置

<!-- 只需在 HTML 中声明文本数组 -->
<span
  data-typewriter
  data-words='["写干净的代码", "探索有趣的技术", "打造好用的工具"]'
></span>

使用指南

📦 快速开始

只需 3 步即可部署你自己的版本：

            
            Terminal

# 1. Fork 或克隆仓库
$ git clone https://github.com/cropflre/cropflre.github.io.git
$ cd cropflre.github.io

# 2. 本地预览（使用任意静态服务器）
$ npx serve .
# 或: python -m http.server 3000

# 3. 推送到 GitHub，自动部署到 username.github.io
$ git push origin master

🛠 自定义配置

            
            项目结构

cropflre.github.io/
├── index.html          # 首页
├── posts/
│   └── welcome.html    # 文章页面
├── assets/
│   ├── css/
│   │   └── style.css   # 设计系统（修改变量即可换肤）
│   └── js/
│       └── main.js     # 交互逻辑
├── 404.html            # 终端风 404 页面
├── .nojekyll           # 绕过 Jekyll 处理
└── README.md

🎨 主题定制

修改 style.css 顶部的 CSS 变量即可快速换肤：

--accent — 主强调色（默认终端绿）
--accent-2 — 链接色（默认蓝）
--bg — 主背景色
--font-mono — 等宽字体系列
--radius — 全局圆角大小

📝 新增文章

在 posts/ 目录下新建 HTML 文件
复制 welcome.html 作为模板
修改 <article> 内容区域
在 index.html 的文章列表中添加链接

🔗 在线演示： https://cropflre.github.io
📂 源码仓库： github.com/cropflre/cropflre.github.io

技术栈总结

📄

HTML5

语义化标签 · ARIA

🎨

CSS3

Custom Props · Grid · Backdrop Filter

⚡

Vanilla JS

零依赖 · ES6+ · Observer API

🚀

GitHub Pages

自动部署 · 全球 CDN