Skip to content

Navigation Menu

Sign in
Sign up

Repository files navigation

Cover

Regulus

An Astro portfolio template for designer, filmmaker, or any type of creator.

License

Star on GitHub Astro React Tailwind CSS shadcnui

Layout 1
Preview 1
Layout 2 Layout 3
Preview 2 Preview 3

Tech Stack

Astro v5 React 19 Tailwind CSS shadcn/ui MDX Vidstack TypeScript Bun

English | 正體中文

English

✨ Features

  • Tailored for Creatives – Specifically designed for designers and creative professionals to showcase their work.
  • Seamless Experience & Peak Performance – Effortless to use and lightning-fast to deploy, powered by the cutting-edge performance of Astro and Bun.
  • Fully Customizable Themes – Built with shadcn/ui and Tailwind CSS, offering deep customization and a variety of beautiful built-in themes.
  • Versatile Layout Options – Switch between three distinct layouts anytime to find the perfect fit for your style.
  • SEO Optimized – High visibility guaranteed with automated Open Graph tags generated for every project page.
  • MDX-Powered Content – Build your portfolio as easily as writing a blog post using the flexibility of MDX.

📹 Example Instances

Bax Portfolio

🚀 Quick Start

Prerequisites

  • Bun (recommended) or Node.js 18+

Installation

# Clone the repository
git clone https://github.com/Batkixni/astro-regulus.git
cd astro-bxwork
# Install dependencies
bun install
# Start development server
bun run dev

The site will be available at http://localhost:4321

Build for Production

# Create optimized production build
bun run build
# Preview production build
bun run preview

⚙️ Configuration

Switching Layouts

Edit src/pages/index.astro and change the CURRENT_LAYOUT constant:

// Line 12 in index.astro
const CURRENT_LAYOUT: number = 1; // Change to 1-3

Profile Information

Update your profile details in src/pages/index.astro:

const PROFILE = {
 name: "Your Name",
 role: "Your Role / Company",
 email: "your@email.com",
 bio: "Your bio description",
 avatar: "/header.jpg",
 links: {
 twitter: "https://x.com/yourhandle",
 email: "mailto:your@email.com",
 },
};

Adding Projects

Create a new .mdx file in src/content/work/:

---
title: "Project Title"
client: "Client Name"
role: ["Motion Designer", "Editor"]
date: 2026年01月15日
genre: "Motion"
thumbnail: "/path/to/thumbnail.jpg"
videoUrl: "https://example.com/video.mpd" # Optional: .mpd/.m3u8, YouTube URL, or omit
description: "Project description"
credits: # Optional
 - name: "John Doe"
 role: "Director"
---
## Project Details
Your project content here. You can use custom components:
<YouTube url="https://youtube.com/watch?v=..." />
<Grid cols={2}>
 <Video src="/video1.mp4" />
 <Video src="/video2.mp4" />
</Grid>
<Grid variant="bento">
 <img src="/picture1.jpg" alt="Vertical" />
 <img src="/picture2.jpg" alt="Horizontal 1" />
 <img src="/picture3.jpg" alt="Horizontal 2" />
</Grid>

Video Utils

To embed Youtube video, you can use the following syntax in your .mdx file.

<YouTube url="https://youtube.com/watch?v=..." />

Else, if you want to embed other videos outside from Youtube, use:

<Video src="/video-example.mp4" />

Grid Utils

To create grid in pages, you can use the following syntax in your .mdx file.

Auto grid

<Grid cols={2}>
 <Video src="/video1.mp4" />
 <Video src="/video2.mp4" />
</Grid>

In this case, means you will have a 2 collum data in 1 row. Following this logic, for more examples:

<Grid cols={3}>
 <Video src="/video1.mp4" />
 <Video src="/video2.mp4" />
 <Video src="/video3.mp4" />
 <Video src="/video4.mp4" />
 <Video src="/video5.mp4" />
 <Video src="/video6.mp4" />
</Grid>

This means you will generate a 2 row data with 3 collum inside.

Bento grid

<Grid variant="bento">
 <img src="/picture1.jpg"/>
 <img src="/picture2.jpg"/>
 <img src="/picture3.jpg">
</Grid>

This will create a responsive bento grid for these 3 pictures, the picture will automaticlly fit into the grid. Bento Grid

🎨 Customization

Theme Colors

Edit tailwind.config.mjs to customize the color scheme:

theme: {
 extend: {
 colors: {
 primary: "hsl(var(--primary))",
 // ... customize other colors
 }
 }
}

🎯 Content Schema

Projects are validated with the following Zod schema:

{
 title: string,
 client: string,
 role: string[],
 date: Date,
 genre: string (default: "Motion"),
 thumbnail: string,
 videoUrl?: string, // Optional
 description: string,
 credits?: Array<{
 name: string,
 role: string
 }>
}

🌐 Deployment

This project can be deployed to any static hosting platform:

Vercel

vercel deploy

Netlify

netlify deploy --prod

Cloudflare Pages

bun run build
# Upload dist/ folder

📄 License

This project is licensed under the GPL-3.0 License - see the LICENSE file for details.

Warning

The license dose not include example or placeholder pictures contain in this template, all rights to these photos are reserved by Bax.

Chinese

✨ 功能特色

  • 為創作者量身打造 – 專為設計師與創意工作者設計,用於展示個人作品。
  • 順暢體驗與極致效能 – 使用上毫不費力、部署速度飛快,由 Astro 與 Bun 提供前沿效能。
  • 完整主題客製化 – 基於 shadcn/ui 與 Tailwind CSS 打造,提供深度客製能力與多款精美內建主題。
  • 多樣化版面配置 – 可隨時在三種不同版型之間切換,找到最符合你風格的呈現方式。
  • SEO 最佳化 – 每個專案頁面都會自動產生 Open Graph 標籤,確保高度曝光。
  • MDX 驅動內容 – 像寫部落格一樣輕鬆建立作品集,享受 MDX 帶來的高度彈性。

📹 範例網站

Bax Portfolio

🚀 快速開始

需求環境

  • Bun(推薦)或 Node.js 18+

安裝

# 複製專案
git clone https://github.com/Batkixni/astro-regulus.git
cd astro-bxwork
# 安裝相依套件
bun install
# 啟動開發伺服器
bun run dev

網站將會在 http://localhost:4321 提供服務

建置正式版本

# 建立最佳化的正式環境版本
bun run build
# 預覽正式版本
bun run preview

⚙️ 設定

切換版型配置

編輯 src/pages/index.astro,修改 CURRENT_LAYOUT 常數:

// index.astro 第 12 行
const CURRENT_LAYOUT: number = 1; // 可設為 1-3

個人資料設定

在 src/pages/index.astro 更新你的個人資訊:

const PROFILE = {
 name: "Your Name",
 role: "Your Role / Company",
 email: "your@email.com",
 bio: "Your bio description",
 avatar: "/header.jpg",
 links: {
 twitter: "https://x.com/yourhandle",
 email: "mailto:your@email.com",
 },
};

新增專案

在 src/content/work/ 建立新的 .mdx 檔案:

---
title: "Project Title"
client: "Client Name"
role: ["Motion Designer", "Editor"]
date: 2026年01月15日
genre: "Motion"
thumbnail: "/path/to/thumbnail.jpg"
videoUrl: "https://example.com/video.mpd" # 選填:.mpd/.m3u8、YouTube 連結,或省略
description: "Project description"
credits: # 選填
 - name: "John Doe"
 role: "Director"
---
## 專案說明
你的專案內容寫在這裡,你可以使用自訂元件:
<YouTube url="https://youtube.com/watch?v=..." />
<Grid cols={2}>
 <Video src="/video1.mp4" />
 <Video src="/video2.mp4" />
</Grid>
<Grid variant="bento">
 <img src="/picture1.jpg" alt="Vertical" />
 <img src="/picture2.jpg" alt="Horizontal 1" />
 <img src="/picture3.jpg" alt="Horizontal 2" />
</Grid>

影片工具

若要嵌入 YouTube 影片,可在 .mdx 檔案中使用以下語法:

<YouTube url="https://youtube.com/watch?v=..." />

若要嵌入非 YouTube 的影片,請使用:

<Video src="/video-example.mp4" />

Grid 工具

你可以在頁面中建立 Grid 排版,使用以下語法。

自動 Grid

<Grid cols={2}>
 <Video src="/video1.mp4" />
 <Video src="/video2.mp4" />
</Grid>

上述範例代表一列中有 2 個欄位。依此類推,例如:

<Grid cols={3}>
 <Video src="/video1.mp4" />
 <Video src="/video2.mp4" />
 <Video src="/video3.mp4" />
 <Video src="/video4.mp4" />
 <Video src="/video5.mp4" />
 <Video src="/video6.mp4" />
</Grid>

這代表會產生 2 列,每列 3 個欄位的版面。

Bento Grid

<Grid variant="bento">
 <img src="/picture1.jpg"/>
 <img src="/picture2.jpg"/>
 <img src="/picture3.jpg">
</Grid>

這會建立一個響應式的 Bento Grid,圖片會自動適配版面配置。 Bento Grid

🎨 客製化

主題顏色

編輯 tailwind.config.mjs 來自訂配色:

theme: {
 extend: {
 colors: {
 primary: "hsl(var(--primary))",
 // ... 其他顏色設定
 }
 }
}

🎯 內容結構 Schema

專案內容會依照以下 Zod Schema 驗證:

{
 title: string,
 client: string,
 role: string[],
 date: Date,
 genre: string (預設值: "Motion"),
 thumbnail: string,
 videoUrl?: string, // 選填
 description: string,
 credits?: Array<{
 name: string,
 role: string
 }>
}

🌐 部署

此專案可部署至任何靜態網站平台:

Vercel

vercel deploy

Netlify

netlify deploy --prod

Cloudflare Pages

bun run build
# 上傳 dist/ 資料夾

📄 授權條款

本專案採用 GPL-3.0 授權,詳情請參閱 LICENSE 檔案。

Warning

此專案版權許可並不包含此模板含有的占位符或範例圖片,那些圖片的版權唯一持有者為Bax。

Built with ❤️ by Bax

About

📹 Aesthetic portfolio template for designer and filmmaker. Built in Bun with Astro, Tailwind, shadcn/ui.

Topics

Resources

Stars

2 stars

Watchers

1 watching

Forks

Releases

Packages

Contributors

Languages

AltStyle によって変換されたページ (->オリジナル) /