为什么做这个项目#

用了很多框架之后，想回归最原始的方式——纯 HTML + CSS + JavaScript，不借助任何框架，看看能做到什么程度。

目标很简单：

• 一个能展示技能和项目的作品集网站
• 全部代码写在一个 index.html 里
• 部署到 GitHub Pages，推代码就上线

技术选型#

没有构建工具，没有打包流程，浏览器直接打开 index.html 就能跑。

设计系统#

整个网站用 CSS 变量统一管理：

1
:root {
2
  --bg: #f6f4f0;
3
  --accent: #4a7c59;
4
  --text-primary: #1a1a17;
5
  --text-body: #4a4a45;
6
  --radius: 14px;
7
}

改一个变量值，全局跟着变。配色走的是偏暖的米白底 + 森林绿点缀，视觉上比较舒服。

设计灵感#

整体设计借鉴了 MiMo Code——导航栏的下划线 hover 动效，以及 Hero 区的墨迹擦除背景效果，都从那里获得启发。在此基础上做了自己的调整，比如配色换成米白 + 森林绿，字体换成 Instrument Serif + DM Sans 的组合。

核心特性#

1
const observer = new IntersectionObserver((entries) => {
2
  entries.forEach(entry => {
3
    if (entry.isIntersecting) {
4
      entry.target.classList.add('visible');
5
    }
6
  });
7
}, { threshold: 0.1 });

项目结构#

1
Mou-Two/
2
├── index.html          # 主页面（~800 行，CSS+JS 全内联）
3
├── assets/
4
│   ├── 背景.png        # Hero 区背景图
5
│   ├── 头像.jpg        # 导航栏头像
6
│   ├── 赞助.jpg        # 赞赏二维码
7
│   └── screenshot.png  # README 效果图
8
├── robots.txt
9
├── sitemap.xml
10
└── README.md

部署#

GitHub Pages 自动部署，推送到 main 分支就生效：

1
git add .
2
git commit -m "feat: 更新内容"
3
git push origin main

访问地址：www.mouy.site

写在最后#

单文件架构在小项目里其实挺好用的。代码全在一个文件里，改起来很快，也不用操心模块拆分的问题。当然，超过 1000 行之后就开始不舒服了——这个项目的 index.html 大概 800 行，刚好在舒适区边界。

如果想看源码或者提建议，欢迎来 GitHub：Mou-1205/Mou-Two