🐲 Raon — Personal Website

This is my personal website, built with Astro v7, TypeScript, Tailwind CSS v4, and MDX. It serves as a portfolio and a blog where I share my thoughts on programming, technology, and other topics of interest.

✨ Key Features

• 🌲 Custom Island Design System: Nature-inspired with minimalism, and modern interface aesthetics
• 🌐 Multilingual (i18n): Native bilingual support for Vietnamese (vi, default) and English (en).
• 🌙 Dual-Theme Support: Light, Dark, and System Auto.
• ⚡ High Performance & SEO: Astro v7 static build, canonical URLs, Open Graph metadata, JSON-LD structured data, XML Sitemap, and RSS feeds.
• 📝 Type-Safe Content: Markdown & MDX blog posts powered by Astro Content Collections.

🛠️ Tech Stack

• Framework: Astro v7
• Language: TypeScript
• Styling: Tailwind CSS v4
• Icons: Lucide Icons
• Content: MDX & Markdown with custom Remark/Rehype plugins
• Package Manager: Bun
• Deployment: Cloudflare Workers / Pages

📂 Project Structure

├── content/              # Blog posts and content assets
├── plugins/              # Custom remark & rehype plugins
├── public/               # Static assets & favicons
├── src/
│   ├── assets/           # Source media & static images
│   ├── components/       # UI components (page, home, posts, projects, about)
│   ├── content/          # Content collection configurations
│   ├── i18n/             # Dictionaries and translation helpers
│   ├── layouts/          # Base HTML layout (Base.astro)
│   ├── pages/            # Astro route pages
│   ├── scripts/          # Client-side scripts (theme loader, etc.)
│   ├── styles/           # Theme tokens and global CSS (global.css)
│   ├── consts.ts         # Site constants, profile info, and navigation
│   └── content.config.ts # Content collection schema definitions
├── AGENTS.md             # Developer & AI Agent guidance
├── DESIGN.md             # Design system specifications & theme tokens
├── astro.config.ts       # Astro configuration
├── package.json          # Dependencies and scripts
└── wrangler.jsonc        # Cloudflare deployment config

🚀 Getting Started

Prerequisites

• Bun (v1.0+)
• Node.js (>= 22.12.0)

Installation & Development

1. Clone the repository:

   git clone https://github.com/tozydev/raon.git
   cd raon

2. Install dependencies:

   bun install

3. Start local dev server:

   bun run dev

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

Available Commands

Command	Action
bun run dev	Starts local development server at http://localhost:4321
bun run build	Runs Astro check (typecheck) and builds production bundle to ./dist/
bun run preview	Previews the production build locally
bun run fmt	Formats codebase using Prettier
bun run fmt:check	Validates code formatting with Prettier without writing

📚 Documentation & References

• DESIGN.md: Detailed documentation of theme color tokens, typography system, component tokens, and layout guidelines.
• AGENTS.md: Developer & AI Agent conventions, architecture guidance, and repository rules.

📄 License

This repository is licensed under two licenses:

• The source code is licensed under the Apache License 2.0. See the LICENSE file for details.
• The blog content is licensed under the Creative Commons Attribution Share Alike 4.0 International License. See the content/LICENSE file for details.

🎁 Acknowledgements

I would like to thank the following: projects, libraries, tools, and resources that made this project possible:

• Astro – For powering the static site generation.
• Tailwind CSS – For the utility-first CSS framework styling this site.
• Lucide – For the icon used in this site.
• MDX – For the MDX support.
• Cloudflare Workers – For hosting the static site.
• Quicksand, BeVietnamePro, and JetBrains Mono – For the fonts used on the site.

And all the libraries and tools that made this project possible!