炫酷！18.5kb实现流体动画，这个开源项目让个人主页瞬间高大上！

分享一个现代优雅的个人主页项目，具有流体动画背景、响应式设计和流畅的页面过渡效果，让我们可以轻松搭建出炫酷的个人主页。

官方文档：Homepage

效果图

是不是很酷炫，打开的一瞬间，让人眼前一亮。下面我们就来看一下是怎么搭建的。

安装

bash 复制代码

# 克隆项目
git clone https://github.com/SimonAKing/HomePage.git
cd HomePage

# 安装依赖
npm install

# 启动项目
npm run dev

项目结构

先来看一下项目结构，一共分为两大类：

intro 首屏，就是刚打开后显示的页面
main 副屏，下拉显示的页面

相应的配置也是根据此标准来组织的。

基本配置

直接修改配置文件 config.json 就好，配置也不多，其中的每一个键名，都是其字面意思，见名知意。例如：

json 复制代码

{
  "head": {
    "title": "SimonAKing",
    "description": "Category:Personal Blog",
    "favicon": "favicon.ico"
  }
}

这就是配置页面 head 信息，就是这里：

高级配置

主屏的背景效果如需关闭，可以设置 intro.background: false。

配置中默认开启了 supportAuthor 选项，即支持作者。

开启支持作者时：

会在首页右上角显示项目作者的 github 链接
控制台会打印作者的站点信息

如需关闭，可以设置 intro.supportAuthor: false。

项目部署

这里我直接部署到Github Pages了，非常方便，在项目根目录下创建如下的目录和文件，static.yml 内容在后面。

bash 复制代码

.github/
└── workflows/
    └── static.yml

static.yml 复制代码

# Simple workflow for deploying static content to GitHub Pages
name: Deploy static content to Pages

on:
  # Runs on pushes targeting the default branch
  push:
    branches: ["main"]

  # Allows you to run this workflow manually from the Actions tab
  workflow_dispatch:

# Sets permissions of the GITHUB_TOKEN to allow deployment to GitHub Pages
permissions:
  contents: read
  pages: write
  id-token: write

# Allow only one concurrent deployment, skipping runs queued between the run in-progress and latest queued.
# However, do NOT cancel in-progress runs as we want to allow these production deployments to complete.
concurrency:
  group: "pages"
  cancel-in-progress: false

jobs:
  # Single deploy job since we're just deploying
  deploy:
    environment:
      name: github-pages
      url: ${{ steps.deployment.outputs.page_url }}
    runs-on: ubuntu-latest
    steps:
      - name: Checkout
        uses: actions/checkout@v4
      - name: Setup Pages
        uses: actions/configure-pages@v5
      - name: Upload artifact
        uses: actions/upload-pages-artifact@v3
        with:
          # Upload entire repository
          path: 'dist'
      - name: Deploy to GitHub Pages
        id: deployment
        uses: actions/deploy-pages@v4

有了这个工作流配置文件，就能自动部署喽~

稍等一会后，可以在这里查看访问地址：

最后

最后放一下我自己搭建的个人主页吧。

四棱子