Ashik - 个人作品集 HTML 模板

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