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

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

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

最后

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

四棱子

相关推荐
不知名raver(学python版)7 分钟前
npm ERR! code ELIFECYCLE npm ERR! errno 1 npm ERR!
前端·npm·node.js
醉方休17 分钟前
React中使用DDD(领域驱动设计)
前端·react.js·前端框架
excel23 分钟前
📖 小说网站的预导航实战:link 预加载 + fetch + 前进后退全支持
前端
学习3人组26 分钟前
React 样式隔离核心方法和最佳实践
前端·react.js·前端框架
love530love31 分钟前
【保姆级教程】阿里 Wan2.1-T2V-14B 模型本地部署全流程:从环境配置到视频生成(附避坑指南)
人工智能·windows·python·开源·大模型·github·音视频
世伟爱吗喽32 分钟前
threejs入门学习日记
前端·javascript·three.js
朝阳5811 小时前
用 Rust + Actix-Web 打造“Hello, WebSocket!”——从握手到回声,只需 50 行代码
前端·websocket·rust
F2E_Zhangmo1 小时前
基于cornerstone3D的dicom影像浏览器 第五章 在Displayer四个角落显示信息
开发语言·前端·javascript
slim~1 小时前
javaweb基础第一天总结(HTML-CSS)
前端·css·html
一支鱼1 小时前
leetcode常用解题方案总结
前端·算法·leetcode