炫酷!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

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

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

最后

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

四棱子

相关推荐
拓端研究室24 分钟前
视频讲解:门槛效应模型Threshold Effect分析数字金融指数与消费结构数据
前端·算法
工一木子1 小时前
URL时间戳参数深度解析:缓存破坏与前端优化的前世今生
前端·缓存
半点寒12W3 小时前
微信小程序实现路由拦截的方法
前端
某公司摸鱼前端4 小时前
uniapp socket 封装 (可拿去直接用)
前端·javascript·websocket·uni-app
要加油哦~4 小时前
vue | 插件 | 移动文件的插件 —— move-file-cli 插件 的安装与使用
前端·javascript·vue.js
小林学习编程4 小时前
Springboot + vue + uni-app小程序web端全套家具商场
前端·vue.js·spring boot
柳鲲鹏4 小时前
WINDOWS最快布署WEB服务器:apache2
服务器·前端·windows
weixin-a153003083165 小时前
【playwright篇】教程(十七)[html元素知识]
java·前端·html
ai小鬼头5 小时前
AIStarter最新版怎么卸载AI项目?一键删除操作指南(附路径设置技巧)
前端·后端·github
一只叫煤球的猫6 小时前
普通程序员,从开发到管理岗,为什么我越升职越痛苦?
前端·后端·全栈