
Ashik - 个人作品集 HTML 模板
category作品集
# 项目简介
Ashik 是一款面向个人展示的 HTML 作品集模板,包含首页、关于、服务、作品集、博客、联系等完整页面,支持亮色/暗色主题切换,适合自由职业者或创意从业者快速搭建个人官网。
## 技术栈
- HTML5 + Bootstrap 5
- SCSS(源码)
- Vanilla JavaScript / jQuery
- GSAP(动画与滚动效果)
- Font Awesome + 自定义图标字体
- Google Fonts(Spline Sans、Poppins)
## 项目结构
```
ashikhtml-10/package/ashik/
├── index.html # 首页
├── index-dark.html # 首页暗色版
├── index-2.html # 首页变体 2
├── index-2-dark.html # 首页变体 2 暗色版
├── blog.html # 博客列表页
├── blog-details.html # 博客详情页
├── contact.html # 联系页
├── css/main.css # 编译后样式
├── fonts/ # 图标字体文件
├── img/ # 图片资源
├── js/main.js # 核心交互逻辑
└── scss/ # SCSS 源码(_about.scss 等)
```
## 核心文件说明
- `js/main.js` — 封装了平滑滚动、粘性导航、移动端菜单、计数器、GSAP 动画、灯箱弹窗等交互
- `css/main.css` — 合并编译后的全量样式
- `scss/_about.scss` — SCSS 源码模块之一,可按需修改变量后重新编译
- `index.html` — 入口页面,包含导航、Banner、About、Services、Projects 等完整版块结构
- `fonts/` — ashik-icon 自定义图标和 Font Awesome 字体文件
- `img/` — 预置的占位图片和背景装饰图
## 快速开始
1. 直接在浏览器中打开 `package/ashik/index.html`
2. 如需本地服务器运行,推荐使用 VS Code Live Server 插件或 `npx serve`
3. 如修改 SCSS,需安装依赖后运行 `npm run scss` 或对应构建脚本
## 使用建议
- 暗色主题通过 `index-dark.html` / `index-2-dark.html` 使用,无需额外配置
- 模板依赖 Google Fonts 在线加载,部署时确保网络畅通或替换为本地字体
help_outline
常见问题
评论0
发布时间Jan 20, 2026
技术栈
HTML