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

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

官方文档:Homepage

在线预览

效果图

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

安装

bash 复制代码
# 克隆项目
git clone https://github.com/SimonAKing/HomePage.git
cd HomePage

# 安装依赖
npm install

# 启动项目
npm run dev

项目结构

先来看一下项目结构,一共分为两大类:

  1. intro 首屏,就是刚打开后显示的页面
  2. main 副屏,下拉显示的页面

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

基本配置

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

json 复制代码
{
  "head": {
    "title": "SimonAKing",
    "description": "Category:Personal Blog",
    "favicon": "favicon.ico"
  }
}

这就是配置页面 head 信息,就是这里:

高级配置

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

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

开启支持作者时:

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

如需关闭,可以设置 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

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

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

最后

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

四棱子

相关推荐
超级大只老咪几秒前
HTML学习路线
前端·学习·html
゜ eVer ㄨ2 分钟前
React学习第三天——生命周期
前端·学习·react.js
摆烂且佛系5 分钟前
CSS元素的总宽度计算规则
前端·css
对岸住着星星9 分钟前
vue3+ts实现拖拽缩放,全屏
前端·javascript
说私域10 分钟前
基于开源AI大模型AI智能名片S2B2C商城小程序的产地优势产品营销策略研究
人工智能·小程序·开源
aesthetician19 分钟前
@tanstack/react-query:React 服务器状态管理与数据同步解决方案
服务器·前端·react.js
Nan_Shu_6141 小时前
学习:uniapp全栈微信小程序vue3后台(28)
前端·学习·微信小程序·小程序·uni-app
珍宝商店1 小时前
原生 JavaScript 方法实战指南
开发语言·前端·javascript
蓝莓味的口香糖1 小时前
【企业微信】VUE项目在企微中自定义转发内容
前端·vue.js·企业微信
IT_陈寒1 小时前
告别低效!用这5个Python技巧让你的数据处理速度提升300% 🚀
前端·人工智能·后端