项目简介link

lieon 是一款深色主题的个人作品集 HTML 模板，适合设计师、摄影师、全栈开发者等展示个人简历、作品集和服务能力。内置 10 个完整页面，涵盖首页、关于、博客、作品集、服务详情等模块，支持 GSAP 滚动动画和鼠标跟随效果。

技术栈link

• Bootstrap 5（布局与响应式网格）
• jQuery（交互逻辑与 DOM 操作）
• GSAP + ScrollTrigger（高级滚动动画）
• Font Awesome 6 + Icomoon（图标）
• Sora（Google Fonts 主字体）

项目结构link

lieon/
  index.html              # 首页入口
  about.html              # 关于页面
  blog.html               # 博客列表
  blog-details.html       # 博客详情
  contact.html            # 联系页面
  portfolio.html         # 作品集
  portfolio-details.html  # 作品详情
  portfolio-slider.html   # 轮播作品集
  service.html            # 服务页面
  service-details.html    # 服务详情
  css/
    main.css              # 主样式文件
    lib/
      bootstrap.min.css
      magnific-popup.css
      swiper-bundle.min.css
    fonts/
      font-awesome.css
      lieon-icon.css
  js/
    main.js                # 所有交互逻辑（GSAP动画、灯箱、计数器等）
  image/                   # 页面图片与资源
  fonts/                  # 字体文件（.ttf/.woff2）

核心文件说明link

• lieon/index.html — 模板主入口，承载所有模块
• lieon/js/main.js — 动画、导航、灯箱、无限滚动等核心交互
• lieon/css/main.css — 完整样式表（包含 SCSS 编译结果）
• lieon/css/lib/bootstrap.min.css — Bootstrap 基础样式与网格系统
• lieon/css/lib/swiper-bundle.min.css — 轮播图样式
• documentation/ — 官方提供的模板文档目录

快速开始link

纯静态项目，无需安装依赖。直接双击 lieon/index.html 或使用任意本地服务器（如 VS Code Live Server 插件）打开即可预览全部页面。

使用建议link

模板内容已包含示例占位数据，修改 index.html 及各页面 HTML 中的文字和图片路径即可快速上线。如需自定义样式，推荐修改 main.css 而非 SCSS 源文件，动画效果集中在 main.js 的 lieon 对象中，可按需注释或调整。