Skip to content

Commit 02d630d

Browse files
acapzedacapzed
committed
feat: 프로필 영상 랜덤 표시 및 문서 정리
1 parent f11dea8 commit 02d630d

8 files changed

Lines changed: 247 additions & 98 deletions

File tree

‎FUWARI.md‎

Lines changed: 99 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,99 @@
1+
# 🍥Fuwari
2+
![Node.js >= 20](https://img.shields.io/badge/node.js-%3E%3D20-brightgreen)
3+
![pnpm >= 9](https://img.shields.io/badge/pnpm-%3E%3D9-blue)
4+
[![DeepWiki](https://img.shields.io/badge/DeepWiki-saicaca%2Ffuwari-blue.svg?logo=data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACwAAAAyCAYAAAAnWDnqAAAAAXNSR0IArs4c6QAAA05JREFUaEPtmUtyEzEQhtWTQyQLHNak2AB7ZnyXZMEjXMGeK/AIi+QuHrMnbChYY7MIh8g01fJoopFb0uhhEqqcbWTp06/uv1saEDv4O3n3dV60RfP947Mm9/SQc0ICFQgzfc4CYZoTPAswgSJCCUJUnAAoRHOAUOcATwbmVLWdGoH//PB8mnKqScAhsD0kYP3j/Yt5LPQe2KvcXmGvRHcDnpxfL2zOYJ1mFwrryWTz0advv1Ut4CJgf5uhDuDj5eUcAUoahrdY/56ebRWeraTjMt/00Sh3UDtjgHtQNHwcRGOC98BJEAEymycmYcWwOprTgcB6VZ5JK5TAJ+fXGLBm3FDAmn6oPPjR4rKCAoJCal2eAiQp2x0vxTPB3ALO2CRkwmDy5WohzBDwSEFKRwPbknEggCPB/imwrycgxX2NzoMCHhPkDwqYMr9tRcP5qNrMZHkVnOjRMWwLCcr8ohBVb1OMjxLwGCvjTikrsBOiA6fNyCrm8V1rP93iVPpwaE+gO0SsWmPiXB+jikdf6SizrT5qKasx5j8ABbHpFTx+vFXp9EnYQmLx02h1QTTrl6eDqxLnGjporxl3NL3agEvXdT0WmEost648sQOYAeJS9Q7bfUVoMGnjo4AZdUMQku50McDcMWcBPvr0SzbTAFDfvJqwLzgxwATnCgnp4wDl6Aa+Ax283gghmj+vj7feE2KBBRMW3FzOpLOADl0Isb5587h/U4gGvkt5v60Z1VLG8BhYjbzRwyQZemwAd6cCR5/XFWLYZRIMpX39AR0tjaGGiGzLVyhse5C9RKC6ai42ppWPKiBagOvaYk8lO7DajerabOZP46Lby5wKjw1HCRx7p9sVMOWGzb/vA1hwiWc6jm3MvQDTogQkiqIhJV0nBQBTU+3okKCFDy9WwferkHjtxib7t3xIUQtHxnIwtx4mpg26/HfwVNVDb4oI9RHmx5WGelRVlrtiw43zboCLaxv46AZeB3IlTkwouebTr1y2NjSpHz68WNFjHvupy3q8TFn3Hos2IAk4Ju5dCo8B3wP7VPr/FGaKiG+T+v+TQqIrOqMTL1VdWV1DdmcbO8KXBz6esmYWYKPwDL5b5FA1a0hwapHiom0r/cKaoqr+27/XcrS5UwSMbQAAAABJRU5ErkJggg==)](https://deepwiki.com/saicaca/fuwari)
5+
[![FOSSA Status](https://app.fossa.com/api/projects/git%2Bgithub.qkg1.top%2Fsaicaca%2Ffuwari.svg?type=shield&issueType=license)](https://app.fossa.com/projects/git%2Bgithub.qkg1.top%2Fsaicaca%2Ffuwari?ref=badge_shield&issueType=license)
6+
7+
A static blog template built with [Astro](https://astro.build).
8+
9+
[**🖥️ Live Demo (Vercel)**](https://fuwari.vercel.app)
10+
11+
![Preview Image](https://raw.githubusercontent.com/saicaca/resource/main/fuwari/home.png)
12+
13+
🌏 README in
14+
[**中文**](https://github.com/saicaca/fuwari/blob/main/docs/README.zh-CN.md) /
15+
[**日本語**](https://github.com/saicaca/fuwari/blob/main/docs/README.ja.md) /
16+
[**한국어**](https://github.com/saicaca/fuwari/blob/main/docs/README.ko.md) /
17+
[**Español**](https://github.com/saicaca/fuwari/blob/main/docs/README.es.md) /
18+
[**ไทย**](https://github.com/saicaca/fuwari/blob/main/docs/README.th.md) /
19+
[**Tiếng Việt**](https://github.com/saicaca/fuwari/blob/main/docs/README.vi.md) /
20+
[**Bahasa Indonesia**](https://github.com/saicaca/fuwari/blob/main/docs/README.id.md) (Provided by the community and may not always be up-to-date)
21+
22+
## ✨ Features
23+
24+
- [x] Built with [Astro](https://astro.build) and [Tailwind CSS](https://tailwindcss.com)
25+
- [x] Smooth animations and page transitions
26+
- [x] Light / dark mode
27+
- [x] Customizable theme colors & banner
28+
- [x] Responsive design
29+
- [x] Search functionality with [Pagefind](https://pagefind.app/)
30+
- [x] [Markdown extended features](https://github.com/saicaca/fuwari?tab=readme-ov-file#-markdown-extended-syntax)
31+
- [x] Table of contents
32+
- [x] RSS feed
33+
34+
## 🚀 Getting Started
35+
36+
1. Create your blog repository:
37+
- [Generate a new repository](https://github.com/saicaca/fuwari/generate) from this template or fork this repository.
38+
- Or run one of the following commands:
39+
```sh
40+
npm create fuwari@latest
41+
yarn create fuwari
42+
pnpm create fuwari@latest
43+
bun create fuwari@latest
44+
deno run -A npm:create-fuwari@latest
45+
```
46+
2. To edit your blog locally, clone your repository, run `pnpm install` to install dependencies.
47+
- Install [pnpm](https://pnpm.io) `npm install -g pnpm` if you haven't.
48+
3. Edit the config file `src/config.ts` to customize your blog.
49+
4. Run `pnpm new-post <filename>` to create a new post and edit it in `src/content/posts/`.
50+
5. Deploy your blog to Vercel, Netlify, GitHub Pages, etc. following [the guides](https://docs.astro.build/en/guides/deploy/). You need to edit the site configuration in `astro.config.mjs` before deployment.
51+
52+
## 📝 Frontmatter of Posts
53+
54+
```yaml
55+
---
56+
title: My First Blog Post
57+
published: 2023-09-09
58+
description: This is the first post of my new Astro blog.
59+
image: ./cover.jpg
60+
tags: [Foo, Bar]
61+
category: Front-end
62+
draft: false
63+
lang: jp # Set only if the post's language differs from the site's language in `config.ts`
64+
---
65+
```
66+
67+
## 🧩 Markdown Extended Syntax
68+
69+
In addition to Astro's default support for [GitHub Flavored Markdown](https://github.github.com/gfm/), several extra Markdown features are included:
70+
71+
- Admonitions ([Preview and Usage](https://fuwari.vercel.app/posts/markdown-extended/#admonitions))
72+
- GitHub repository cards ([Preview and Usage](https://fuwari.vercel.app/posts/markdown-extended/#github-repository-cards))
73+
- Enhanced code blocks with Expressive Code ([Preview](https://fuwari.vercel.app/posts/expressive-code/) / [Docs](https://expressive-code.com/))
74+
75+
## ⚡ Commands
76+
77+
All commands are run from the root of the project, from a terminal:
78+
79+
| Command | Action |
80+
|:---------------------------|:----------------------------------------------------|
81+
| `pnpm install` | Installs dependencies |
82+
| `pnpm dev` | Starts local dev server at `localhost:4321` |
83+
| `pnpm build` | Build your production site to `./dist/` |
84+
| `pnpm preview` | Preview your build locally, before deploying |
85+
| `pnpm check` | Run checks for errors in your code |
86+
| `pnpm format` | Format your code using Biome |
87+
| `pnpm new-post <filename>` | Create a new post |
88+
| `pnpm astro ...` | Run CLI commands like `astro add`, `astro check` |
89+
| `pnpm astro --help` | Get help using the Astro CLI |
90+
91+
## ✏️ Contributing
92+
93+
Check out the [Contributing Guide](https://github.com/saicaca/fuwari/blob/main/CONTRIBUTING.md) for details on how to contribute to this project.
94+
95+
## 📄 License
96+
97+
This project is licensed under the MIT License.
98+
99+
[![FOSSA Status](https://app.fossa.com/api/projects/git%2Bgithub.qkg1.top%2Fsaicaca%2Ffuwari.svg?type=large&issueType=license)](https://app.fossa.com/projects/git%2Bgithub.qkg1.top%2Fsaicaca%2Ffuwari?ref=badge_large&issueType=license)

‎README.md‎

Lines changed: 90 additions & 84 deletions
Original file line numberDiff line numberDiff line change
@@ -1,99 +1,105 @@
1-
# 🍥Fuwari
2-
![Node.js >= 20](https://img.shields.io/badge/node.js-%3E%3D20-brightgreen)
3-
![pnpm >= 9](https://img.shields.io/badge/pnpm-%3E%3D9-blue)
4-
[![DeepWiki](https://img.shields.io/badge/DeepWiki-saicaca%2Ffuwari-blue.svg?logo=data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACwAAAAyCAYAAAAnWDnqAAAAAXNSR0IArs4c6QAAA05JREFUaEPtmUtyEzEQhtWTQyQLHNak2AB7ZnyXZMEjXMGeK/AIi+QuHrMnbChYY7MIh8g01fJoopFb0uhhEqqcbWTp06/uv1saEDv4O3n3dV60RfP947Mm9/SQc0ICFQgzfc4CYZoTPAswgSJCCUJUnAAoRHOAUOcATwbmVLWdGoH//PB8mnKqScAhsD0kYP3j/Yt5LPQe2KvcXmGvRHcDnpxfL2zOYJ1mFwrryWTz0advv1Ut4CJgf5uhDuDj5eUcAUoahrdY/56ebRWeraTjMt/00Sh3UDtjgHtQNHwcRGOC98BJEAEymycmYcWwOprTgcB6VZ5JK5TAJ+fXGLBm3FDAmn6oPPjR4rKCAoJCal2eAiQp2x0vxTPB3ALO2CRkwmDy5WohzBDwSEFKRwPbknEggCPB/imwrycgxX2NzoMCHhPkDwqYMr9tRcP5qNrMZHkVnOjRMWwLCcr8ohBVb1OMjxLwGCvjTikrsBOiA6fNyCrm8V1rP93iVPpwaE+gO0SsWmPiXB+jikdf6SizrT5qKasx5j8ABbHpFTx+vFXp9EnYQmLx02h1QTTrl6eDqxLnGjporxl3NL3agEvXdT0WmEost648sQOYAeJS9Q7bfUVoMGnjo4AZdUMQku50McDcMWcBPvr0SzbTAFDfvJqwLzgxwATnCgnp4wDl6Aa+Ax283gghmj+vj7feE2KBBRMW3FzOpLOADl0Isb5587h/U4gGvkt5v60Z1VLG8BhYjbzRwyQZemwAd6cCR5/XFWLYZRIMpX39AR0tjaGGiGzLVyhse5C9RKC6ai42ppWPKiBagOvaYk8lO7DajerabOZP46Lby5wKjw1HCRx7p9sVMOWGzb/vA1hwiWc6jm3MvQDTogQkiqIhJV0nBQBTU+3okKCFDy9WwferkHjtxib7t3xIUQtHxnIwtx4mpg26/HfwVNVDb4oI9RHmx5WGelRVlrtiw43zboCLaxv46AZeB3IlTkwouebTr1y2NjSpHz68WNFjHvupy3q8TFn3Hos2IAk4Ju5dCo8B3wP7VPr/FGaKiG+T+v+TQqIrOqMTL1VdWV1DdmcbO8KXBz6esmYWYKPwDL5b5FA1a0hwapHiom0r/cKaoqr+27/XcrS5UwSMbQAAAABJRU5ErkJggg==)](https://deepwiki.com/saicaca/fuwari)
5-
[![FOSSA Status](https://app.fossa.com/api/projects/git%2Bgithub.qkg1.top%2Fsaicaca%2Ffuwari.svg?type=shield&issueType=license)](https://app.fossa.com/projects/git%2Bgithub.qkg1.top%2Fsaicaca%2Ffuwari?ref=badge_shield&issueType=license)
6-
7-
A static blog template built with [Astro](https://astro.build).
8-
9-
[**🖥️ Live Demo (Vercel)**](https://fuwari.vercel.app)
10-
11-
![Preview Image](https://raw.githubusercontent.com/saicaca/resource/main/fuwari/home.png)
12-
13-
🌏 README in
14-
[**中文**](https://github.com/saicaca/fuwari/blob/main/docs/README.zh-CN.md) /
15-
[**日本語**](https://github.com/saicaca/fuwari/blob/main/docs/README.ja.md) /
16-
[**한국어**](https://github.com/saicaca/fuwari/blob/main/docs/README.ko.md) /
17-
[**Español**](https://github.com/saicaca/fuwari/blob/main/docs/README.es.md) /
18-
[**ไทย**](https://github.com/saicaca/fuwari/blob/main/docs/README.th.md) /
19-
[**Tiếng Việt**](https://github.com/saicaca/fuwari/blob/main/docs/README.vi.md) /
20-
[**Bahasa Indonesia**](https://github.com/saicaca/fuwari/blob/main/docs/README.id.md) (Provided by the community and may not always be up-to-date)
21-
22-
## ✨ Features
23-
24-
- [x] Built with [Astro](https://astro.build) and [Tailwind CSS](https://tailwindcss.com)
25-
- [x] Smooth animations and page transitions
26-
- [x] Light / dark mode
27-
- [x] Customizable theme colors & banner
28-
- [x] Responsive design
29-
- [x] Search functionality with [Pagefind](https://pagefind.app/)
30-
- [x] [Markdown extended features](https://github.com/saicaca/fuwari?tab=readme-ov-file#-markdown-extended-syntax)
31-
- [x] Table of contents
32-
- [x] RSS feed
33-
34-
## 🚀 Getting Started
35-
36-
1. Create your blog repository:
37-
- [Generate a new repository](https://github.com/saicaca/fuwari/generate) from this template or fork this repository.
38-
- Or run one of the following commands:
39-
```sh
40-
npm create fuwari@latest
41-
yarn create fuwari
42-
pnpm create fuwari@latest
43-
bun create fuwari@latest
44-
deno run -A npm:create-fuwari@latest
45-
```
46-
2. To edit your blog locally, clone your repository, run `pnpm install` to install dependencies.
47-
- Install [pnpm](https://pnpm.io) `npm install -g pnpm` if you haven't.
48-
3. Edit the config file `src/config.ts` to customize your blog.
49-
4. Run `pnpm new-post <filename>` to create a new post and edit it in `src/content/posts/`.
50-
5. Deploy your blog to Vercel, Netlify, GitHub Pages, etc. following [the guides](https://docs.astro.build/en/guides/deploy/). You need to edit the site configuration in `astro.config.mjs` before deployment.
51-
52-
## 📝 Frontmatter of Posts
1+
# acapz.dev
2+
3+
`acapz.dev`는 [Astro](https://astro.build) 기반 정적 블로그입니다. [Fuwari](https://github.com/saicaca/fuwari) 테마를 바탕으로 개인 블로그 용도에 맞게 커스터마이즈했습니다.
4+
5+
개발 기록, 프로젝트 회고, 에세이, 나중에 다시 읽고 싶은 글을 남기기 위한 저장소입니다.
6+
7+
## 기술 스택
8+
9+
- [Astro](https://astro.build)
10+
- [Svelte](https://svelte.dev)
11+
- [Tailwind CSS](https://tailwindcss.com)
12+
- [Pagefind](https://pagefind.app)
13+
- [Biome](https://biomejs.dev)
14+
- [pnpm](https://pnpm.io)
15+
16+
## 요구 사항
17+
18+
- Node.js 20 이상
19+
- pnpm 9 이상
20+
21+
이 저장소는 `preinstall` 스크립트로 pnpm 사용을 강제합니다.
22+
23+
## 로컬 실행
24+
25+
```sh
26+
pnpm install
27+
pnpm dev
28+
```
29+
30+
기본 개발 서버 주소는 `http://localhost:4321`입니다.
31+
32+
## 글 작성
33+
34+
새 글은 다음 명령어로 생성합니다.
35+
36+
```sh
37+
pnpm new-post <filename>
38+
```
39+
40+
글 파일은 `src/content/posts/` 아래에 생성됩니다. 기본 frontmatter 형식은 다음과 같습니다.
5341

5442
```yaml
5543
---
56-
title: My First Blog Post
57-
published: 2023-09-09
58-
description: This is the first post of my new Astro blog.
59-
image: ./cover.jpg
60-
tags: [Foo, Bar]
61-
category: Front-end
44+
title: My Post
45+
published: 2026-07-06
46+
description: Short description
47+
image: ''
48+
tags: [Essay]
49+
category: Essay
6250
draft: false
63-
lang: jp # Set only if the post's language differs from the site's language in `config.ts`
51+
lang: ''
6452
---
6553
```
6654

67-
## 🧩 Markdown Extended Syntax
68-
69-
In addition to Astro's default support for [GitHub Flavored Markdown](https://github.github.com/gfm/), several extra Markdown features are included:
70-
71-
- Admonitions ([Preview and Usage](https://fuwari.vercel.app/posts/markdown-extended/#admonitions))
72-
- GitHub repository cards ([Preview and Usage](https://fuwari.vercel.app/posts/markdown-extended/#github-repository-cards))
73-
- Enhanced code blocks with Expressive Code ([Preview](https://fuwari.vercel.app/posts/expressive-code/) / [Docs](https://expressive-code.com/))
55+
공개하지 않을 글은 `draft: true`로 설정합니다.
56+
57+
## 명령어
58+
59+
| 명령어 | 설명 |
60+
|:--|:--|
61+
| `pnpm dev` | 로컬 개발 서버를 실행합니다 |
62+
| `pnpm build` | 프로덕션 사이트와 Pagefind 검색 인덱스를 빌드합니다 |
63+
| `pnpm preview` | 프로덕션 빌드를 로컬에서 미리 봅니다 |
64+
| `pnpm check` | Astro 검사를 실행합니다 |
65+
| `pnpm type-check` | TypeScript 타입 검사를 실행합니다 |
66+
| `pnpm format` | Biome으로 `src`를 포맷합니다 |
67+
| `pnpm lint` | Biome 검사를 실행하고 `src`에 수정 가능한 변경을 적용합니다 |
68+
| `pnpm new-post <filename>` | 새 글 파일을 생성합니다 |
69+
70+
## 프로젝트 구조
71+
72+
```text
73+
src/
74+
components/ UI 컴포넌트
75+
content/
76+
posts/ 블로그 글
77+
spec/ 정적 콘텐츠 페이지
78+
i18n/ 다국어 문구
79+
layouts/ 페이지 레이아웃
80+
pages/ Astro 라우트
81+
styles/ 전역 스타일
82+
config.ts 사이트, 프로필, 내비게이션, 라이선스 설정
83+
public/ 정적 공개 파일
84+
scripts/ 유틸리티 스크립트
85+
```
7486

75-
## ⚡ Commands
87+
## 배포
7688

77-
All commands are run from the root of the project, from a terminal:
89+
사이트 주소는 `astro.config.mjs`에 다음과 같이 설정되어 있습니다.
7890

79-
| Command | Action |
80-
|:---------------------------|:----------------------------------------------------|
81-
| `pnpm install` | Installs dependencies |
82-
| `pnpm dev` | Starts local dev server at `localhost:4321` |
83-
| `pnpm build` | Build your production site to `./dist/` |
84-
| `pnpm preview` | Preview your build locally, before deploying |
85-
| `pnpm check` | Run checks for errors in your code |
86-
| `pnpm format` | Format your code using Biome |
87-
| `pnpm new-post <filename>` | Create a new post |
88-
| `pnpm astro ...` | Run CLI commands like `astro add`, `astro check` |
89-
| `pnpm astro --help` | Get help using the Astro CLI |
91+
```js
92+
site: "https://acapz.dev/"
93+
```
9094

91-
## ✏️ Contributing
95+
프로덕션 빌드는 다음 명령어로 생성합니다.
9296

93-
Check out the [Contributing Guide](https://github.com/saicaca/fuwari/blob/main/CONTRIBUTING.md) for details on how to contribute to this project.
97+
```sh
98+
pnpm build
99+
```
94100

95-
## 📄 License
101+
빌드 결과물은 `dist/`에 생성됩니다.
96102

97-
This project is licensed under the MIT License.
103+
## 라이선스
98104

99-
[![FOSSA Status](https://app.fossa.com/api/projects/git%2Bgithub.qkg1.top%2Fsaicaca%2Ffuwari.svg?type=large&issueType=license)](https://app.fossa.com/projects/git%2Bgithub.qkg1.top%2Fsaicaca%2Ffuwari?ref=badge_large&issueType=license)
105+
소스 코드는 upstream Fuwari와 동일하게 MIT 라이선스를 따릅니다. 블로그 글과 작성 콘텐츠는 사이트 설정상 [CC BY-NC-SA 4.0](https://creativecommons.org/licenses/by-nc-sa/4.0/)을 사용합니다.

‎src/assets/images/norma-1.mp4‎

1.3 MB
Binary file not shown.

‎src/assets/images/norma-2.mp4‎

612 KB
Binary file not shown.

‎src/components/misc/ImageWrapper.astro‎

Lines changed: 6 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -29,9 +29,12 @@ const isPublic = src.startsWith("/");
2929
// biome-ignore lint/suspicious/noImplicitAnyLet: <check later>
3030
let img;
3131
if (isLocal) {
32-
const files = import.meta.glob<ImageMetadata>("../../**", {
33-
import: "default",
34-
});
32+
const files = import.meta.glob<ImageMetadata>(
33+
"../../**/*.{png,jpg,jpeg,gif,webp,avif,svg}",
34+
{
35+
import: "default",
36+
},
37+
);
3538
let normalizedPath = path
3639
.normalize(path.join("../../", basePath, src))
3740
.replace(/\\/g, "/");

‎src/components/widget/Profile.astro‎

Lines changed: 47 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,39 @@
11
---
22
import { Icon } from "astro-icon/components";
3-
import avatarVideo from "../../assets/images/silverwolf-avatar.mp4";
3+
import normaAvatar1 from "../../assets/images/norma-1.mp4";
4+
import normaAvatar2 from "../../assets/images/norma-2.mp4";
45
import { profileConfig } from "../../config";
56
import { url } from "../../utils/url-utils";
67
import ImageWrapper from "../misc/ImageWrapper.astro";
78
89
const config = profileConfig;
10+
const avatars = [config.avatar || ""].flat().filter(Boolean);
11+
const avatar = avatars[0] || "";
12+
const isVideoAvatar =
13+
avatars.length > 0 && avatars.every((item) => /\.(mp4|webm|ogg)([?#].*)?$/i.test(item));
14+
15+
const localVideoAssets = new Map([
16+
["assets/images/norma-1.mp4", normaAvatar1],
17+
["assets/images/norma-2.mp4", normaAvatar2],
18+
]);
19+
const avatarVideoSrcList = [];
20+
for (const item of avatars) {
21+
if (!isVideoAvatar) {
22+
break;
23+
}
24+
25+
const isLocalAvatar = !item.startsWith("/") && !item.startsWith("http://") && !item.startsWith("https://") && !item.startsWith("data:");
26+
let src = item;
27+
if (isLocalAvatar) {
28+
const asset = localVideoAssets.get(item);
29+
if (!asset) {
30+
console.error(`\n[ERROR] Video file not found: src/${item}`);
31+
continue;
32+
}
33+
src = asset;
34+
}
35+
avatarVideoSrcList.push(src.startsWith("/") ? url(src) : src);
36+
}
937
---
1038
<div class="card-base p-3">
1139
<a aria-label="Go to About Page" href={url('/about/')}
@@ -17,14 +45,16 @@ const config = profileConfig;
1745
class="transition opacity-0 scale-90 group-hover:scale-100 group-hover:opacity-100 text-white text-5xl">
1846
</Icon>
1947
</div>
20-
<video
21-
src={avatarVideo}
22-
autoplay
23-
loop
24-
muted
25-
playsinline
26-
class="mx-auto lg:w-full h-full lg:mt-0 object-cover aspect-square"
27-
></video>
48+
{isVideoAvatar && <video
49+
src={avatarVideoSrcList[0]}
50+
data-avatar-videos={JSON.stringify(avatarVideoSrcList)}
51+
autoplay
52+
loop
53+
muted
54+
playsinline
55+
class="mx-auto lg:w-full h-full lg:mt-0 object-cover aspect-square"
56+
></video>}
57+
{!isVideoAvatar && <ImageWrapper src={avatar} class="mx-auto lg:w-full h-full lg:mt-0 object-cover aspect-square" alt={config.name}/>}
2858
</a>
2959
<div class="px-2">
3060
<div class="font-bold text-xl text-center mb-1 dark:text-neutral-50 transition">{config.name}</div>
@@ -45,3 +75,11 @@ const config = profileConfig;
4575
</div>
4676
</div>
4777

78+
<script>
79+
for (const video of document.querySelectorAll<HTMLVideoElement>("video[data-avatar-videos]")) {
80+
const sources = JSON.parse(video.dataset.avatarVideos || "[]") as string[];
81+
if (sources.length > 1) {
82+
video.src = sources[Math.floor(Math.random() * sources.length)];
83+
}
84+
}
85+
</script>

‎src/config.ts‎

Lines changed: 4 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -53,7 +53,10 @@ export const navBarConfig: NavBarConfig = {
5353
};
5454

5555
export const profileConfig: ProfileConfig = {
56-
avatar: "assets/images/demo-avatar.png", // Relative to the /src directory. Relative to the /public directory if it starts with '/'
56+
avatar: [
57+
"assets/images/norma-1.mp4",
58+
"assets/images/norma-2.mp4",
59+
], // Relative to the /src directory. Relative to the /public directory if it starts with '/'
5760
name: "Minjea Kim | 김민재",
5861
bio: "Make something fun.",
5962
links: [

0 commit comments

Comments
 (0)