Ashik - 个人作品集 HTML 模板 preview 1

Ashik - 个人作品集 HTML 模板

bookmark

Ashik 是一款面向个人展示的 HTML 作品集模板，包含首页、关于、服务、作品集、博客、联系等完整页面，支持亮色/暗色主题切换，适合自由职业者或创意从业者快速搭建个人官网。

HTML

项目简介

Ashik 是一款面向个人展示的 HTML 作品集模板，包含首页、关于、服务、作品集、博客、联系等完整页面，支持亮色/暗色主题切换，适合自由职业者或创意从业者快速搭建个人官网。

技术栈

  • HTML5 + Bootstrap 5
  • SCSS（源码）
  • Vanilla JavaScript / jQuery
  • GSAP（动画与滚动效果）
  • Font Awesome + 自定义图标字体
  • Google Fonts（Spline Sans、Poppins）

项目结构

text
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

常见问题