Skip to content

zhashenghai/zhashenghai.github.io

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

5 Commits
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

查胜海 - 个人网站

🎯 求职工具 | Soft Structuralism 清亮风格 | 高端设计 | GitHub Pages 托管

设计特色 (redesign-existing-projects 优化)

视觉风格

  • Soft Structuralism — 白色/银灰色背景,清亮透气
  • Plus Jakarta Sans — 高端 Grotesk 字体
  • 噪点纹理 — 微妙的 film-grain 叠加层,增加质感
  • 柔和阴影 — 大量留白,浮层卡片设计

交互体验

  • 全屏滚动 — scroll-snap 整屏切换,滚轮/触控板驱动
  • 入场动画 — 元素 fade-up + blur 解除,cubic-bezier 弹簧物理
  • 进度指示 — 右侧圆点导航,点击可跳转
  • 键盘支持 — ↑↓ / PageUp/PageDown 切换 section
  • 数字滚动 — 统计数据数字动画

设计规范

  • Double-Bezel 卡片架构(外层壳 + 内层核)
  • Button-in-Button 按钮系统
  • 100px 圆角胶囊元素
  • 响应式布局(PC + 移动端)

无障碍优化 (WCAG)

  • Focus ring 可见轮廓
  • Skip-to-content 跳转链接
  • 语义化 HTML 标签
  • aria-label 标签

SEO 优化

  • meta description 描述
  • Open Graph 社交分享标签
  • Favicon 网站图标

视觉增强

  • tabular-nums 数字等宽显示
  • 更强的卡片 hover 阴影效果
  • Hero 装饰元素动态浮动动画

技术栈

  • HTML5
  • CSS3 (CSS Variables, Grid, Flexbox, scroll-snap)
  • 原生 JavaScript (IntersectionObserver)
  • Google Fonts (Plus Jakarta Sans + Noto Sans SC)

预览方式

  1. 直接打开:双击 index.html 文件
  2. 本地服务器:运行 python -m http.server 8000 后访问 http://localhost:8000

操作说明

  • 🖱️ 滚轮/触控板 — 整屏滚动切换
  • ⌨️ ↑↓ 键盘 — 上下切换 section
  • 🔘 右侧圆点 — 点击跳转到对应 section
  • 📱 移动端 — 触摸滑动,菜单自适应

文件结构

personal-web/
├── index.html      # 主页面
├── css/style.css   # 样式(清亮高端风格)
├── js/main.js      # 交互逻辑
└── README.md       # 说明文档

Designed with ❤️ using high-end-visual-design skill

About

1111

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

 
 
 

Contributors