Lieon - Personal Portfolio HTML Template

# 项目简介 lieon 是一款深色主题的个人作品集 HTML 模板，适合设计师、摄影师、全栈开发者等展示个人简历、作品集和服务能力。内置 10 个完整页面，涵盖首页、关于、博客、作品集、服务详情等模块，支持 GSAP 滚动动画和鼠标跟随效果。 ## 技术栈 - Bootstrap 5（布局与响应式网格） - jQuery（交互逻辑与 DOM 操作） - GSAP + ScrollTrigger（高级滚动动画） - Font Awesome 6 + Icomoon（图标） - Sora（Google Fonts 主字体） ## 项目结构 ``` 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） ``` ## 核心文件说明 - `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/` — 官方提供的模板文档目录 ## 快速开始 纯静态项目，无需安装依赖。直接双击 `lieon/index.html` 或使用任意本地服务器（如 VS Code Live Server 插件）打开即可预览全部页面。 ## 使用建议 模板内容已包含示例占位数据，修改 `index.html` 及各页面 HTML 中的文字和图片路径即可快速上线。如需自定义样式，推荐修改 `main.css` 而非 SCSS 源文件，动画效果集中在 `main.js` 的 `lieon` 对象中，可按需注释或调整。