单页多区块架构
About、Projects、Photography、Postcards、Contact 五个区块通过粘性导航平滑定位，每个区块有独立的视觉节奏。
这就是你正在浏览的个人网站——从零搭建、持续迭代。它承载了我的项目经历、简历入口、摄影作品和联系方式，同时也是一块用来练习信息架构、响应式布局和 CSS 设计系统的画布。站点采用单页滚动结构配合粘性导航，用 CSS 自定义属性驱动深色/浅色主题切换，并在 scroll-snap 吸附、卡片 hover 动效和 contact 面板交互上做了细节打磨。
CSS 设计系统
用 CSS 自定义属性集中管理颜色、字体和间距 token，通过 body.theme-dim 一行 class 切换实现全局深色/浅色主题。
响应式布局
CSS Grid 列数切换 + clamp() 字号缩放 + 媒体查询断点覆盖，一套 HTML 适配 560px 手机到 1440px 桌面。
交互细节
scroll-snap 整屏吸附、卡片 hover 展开描述、contact 面板悬停变色、主题偏好 localStorage 持久化。
2026
HTML
CSS
Responsive UI
CSS Custom Properties
Scroll Snap
Dark Mode
Grid Layout
Sticky Nav
Site Structure
一个页面承载五个内容维度
站点首页不拆多个 HTML 文件，而是通过 section 锚点将五块内容组织在同一页面内。顶部粘性导航始终可见，scroll-snap 让每次滑动刚好停在一个完整区块上，浏览节奏更像翻阅一本作品集。
About
Hero + 个人介绍 + PDF 简历入口
Projects
项目卡片横向滚动 + 点击进入详情页
Photography
摄影作品横滑展示
Postcards
仿明信片留言区 + 发送入口
Contact
动态交互卡片：Email、GitHub、PDF Resume
Hero / About
第一屏：身份、标签与个人空间
Hero 区域用大号标题点明身份，蓝色、绿色、紫色三枚倾斜 sticker 分别标记 code、IoT 和 AI 三个方向。右侧附有一段关于"个人数字空间"的英文介绍，搭配 PDF 简历下载入口，让访客在第一屏就能快速理解这个网站的定位。
- 66px 大标题 + 旋转 sticker 标签，形成视觉记忆点。
- 右下方个人介绍区域用等宽字体排版，区隔于正文。
- "PDF Resume" 链接用下划线样式呼应等宽字体系统。
Key Sections
三种内容类型，三种排版策略
站点没有使用统一的卡片模板，而是根据每个区块的内容特征定制了不同的排版方式：项目区用彩色横向宽卡、摄影区用全幅图片横滑、联系区用动态变色面板——让浏览者在滚动时不断遇到新的视觉节奏。
Projects
彩色卡片横滑
每张卡片有独立底色和 SVG 图标，hover 时标题下方展开项目描述，点击进入对应的详情页。
Photography
全幅图片展示
摄影作品以大幅图片承载、横向滚动浏览，图片撑满卡片高度，文字干扰降到最低。
Contact
动态交互卡片
鼠标悬停在 Email、GitHub 或 Resume 行上时，整张 contact 卡片切换背景色和图标，给出即时反馈。
Responsive Design
一套布局适配手机到桌面
从 560px 以下的小屏手机到 1120px 以上的宽屏，站点通过 CSS Grid 列数切换、clamp() 字号缩放和媒体查询断点覆盖三种策略配合。窄屏下多列网格自动折叠为单列，导航栏简化为纯药丸按钮。
- 窄屏（< 560px）：单列布局、导航简化、卡片全宽、scroll-snap 关闭。
- 中屏（560–900px）：两列网格、间距缩减、logo 和社交图标隐藏。
- 宽屏（> 900px）：完整多列布局、全部元素可见、完整导航。
What I Practiced
这个网站的搭建是一次完整的前端工程练习
从最初只有 Hero 和 Projects 两个区块的简单页面，到如今五个区块 + 独立详情页 + 明信片表单 + 主题切换的完整站点，每次迭代都在打磨不同的前端能力。
信息架构
将个人作品、经历和联系方式拆分为独立区块，规划导航路径和浏览节奏。
CSS 架构
用自定义属性管理设计 token，通过命名空间组织不同页面和组件的样式规则。
响应式设计
Grid + clamp() + 媒体查询让同一套 HTML 在手机和桌面都保持良好的可读性。
细节打磨
scroll-snap 吸附、hover 过渡动画、主题切换持久化、contact 面板动态交互。