网站构建日志

首页设计定版

2026年6月1日,早上下了会雨,多云,但是太阳很晒

“摄影集”版块:3D 视差与空间重构
  1. 交互:实现了高级的 3D 物理遮挡效果。文字被包裹在底层原图(hero-bg.jpg)与顶层透明前景(hero-mountain-front.png)之间,配合悬停放大产生错位视差。
  2. 响应式:解决了竖屏“画幅陷阱”。使用 min-h-[350px] object-cover 锁定移动端物理高度,并分离了多端 Y 轴坐标(手机端文案上移至负空间 top-[8%],PC 端保留物理遮挡 top-[16%])。
全局按钮:DOM 解耦与 Gooey 流体动效
  1. 架构:彻底解决了 CSS 悬浮动画与 JS Magnetic(磁性吸附)的控制权冲突。实施了**“三层 DOM 解耦”**(外层负责 Y 轴抬升、中层负责磁性吸附、内层负责视觉阴影),消除了底部的“幽灵阴影”色块残留。
  2. 动效:在 Hero 与 Projects 版块引入了 SVG 驱动的 Gooey(水滴拉丝融合)滤镜。
  3. 视觉克制:为了配合 Gooey 滤镜的光学计算边缘,全站按钮舍弃了 Liquid Glass(毛玻璃),统一降维到极其干净的纯色实心深色(bg-zinc-800)。
Hero 版块:核心 CTA(转化点)提权
  1. 视觉工程:打破了按钮组的视觉平均主义。将“工作履历”按钮设定为 Primary CTA,通过高反差极昼配色(bg-white text-zinc-950)、常驻白光阴影及字重加粗,强行锁定用户视觉焦点。
  2. 防御性设计:手机端(flex-col)增加了 gap-6 的垂直防粘连间距,防止 Gooey 滤镜在竖屏下意外触发融合。