diff --git a/cspell.config.yaml b/cspell.config.yaml
index 47e3eae4d..1ee958b00 100644
--- a/cspell.config.yaml
+++ b/cspell.config.yaml
@@ -39,6 +39,7 @@ words:
   - deepseek
   - defu
   - demi
+  - devlogs
   - dotenvx
   - dtype
   - dtypes
diff --git a/docs/astro.config.ts b/docs/astro.config.ts
index 21adeb2a6..7840e4823 100644
--- a/docs/astro.config.ts
+++ b/docs/astro.config.ts
@@ -22,6 +22,10 @@ export default defineConfig({
           label: 'References',
           autogenerate: { directory: 'references' },
         },
+        {
+          label: 'Blog',
+          autogenerate: { directory: 'blog' },
+        },
       ],
       head: [
         { tag: 'link', attrs: { rel: 'icon', type: 'image/svg+xml', href: '/favicon.svg', sizes: 'any' } },
diff --git a/docs/src/assets/images/blog/DevLog-2025.03.05/airi-build-dark.png b/docs/src/assets/images/blog/DevLog-2025.03.05/airi-build-dark.png
new file mode 100644
index 000000000..8634c9a36
Binary files /dev/null and b/docs/src/assets/images/blog/DevLog-2025.03.05/airi-build-dark.png differ
diff --git a/docs/src/assets/images/blog/DevLog-2025.03.05/airi-build-light.png b/docs/src/assets/images/blog/DevLog-2025.03.05/airi-build-light.png
new file mode 100644
index 000000000..ca7526d8b
Binary files /dev/null and b/docs/src/assets/images/blog/DevLog-2025.03.05/airi-build-light.png differ
diff --git a/docs/src/assets/images/blog/DevLog-2025.03.05/airi-logo-v2-dark.png b/docs/src/assets/images/blog/DevLog-2025.03.05/airi-logo-v2-dark.png
new file mode 100644
index 000000000..22013a87e
Binary files /dev/null and b/docs/src/assets/images/blog/DevLog-2025.03.05/airi-logo-v2-dark.png differ
diff --git a/docs/src/assets/images/blog/DevLog-2025.03.05/airi-logo-v2.png b/docs/src/assets/images/blog/DevLog-2025.03.05/airi-logo-v2.png
new file mode 100644
index 000000000..45c639aca
Binary files /dev/null and b/docs/src/assets/images/blog/DevLog-2025.03.05/airi-logo-v2.png differ
diff --git a/docs/src/assets/images/blog/DevLog-2025.03.05/airi-logos-final.png b/docs/src/assets/images/blog/DevLog-2025.03.05/airi-logos-final.png
new file mode 100644
index 000000000..e35f02854
Binary files /dev/null and b/docs/src/assets/images/blog/DevLog-2025.03.05/airi-logos-final.png differ
diff --git a/docs/src/assets/images/blog/DevLog-2025.03.05/airi-logos-v1.png b/docs/src/assets/images/blog/DevLog-2025.03.05/airi-logos-v1.png
new file mode 100644
index 000000000..739736366
Binary files /dev/null and b/docs/src/assets/images/blog/DevLog-2025.03.05/airi-logos-v1.png differ
diff --git a/docs/src/assets/images/blog/DevLog-2025.03.05/airi-logos-v2.png b/docs/src/assets/images/blog/DevLog-2025.03.05/airi-logos-v2.png
new file mode 100644
index 000000000..86d6b6077
Binary files /dev/null and b/docs/src/assets/images/blog/DevLog-2025.03.05/airi-logos-v2.png differ
diff --git a/docs/src/assets/images/blog/DevLog-2025.03.05/airi-logos-v3.png b/docs/src/assets/images/blog/DevLog-2025.03.05/airi-logos-v3.png
new file mode 100644
index 000000000..838ef4f85
Binary files /dev/null and b/docs/src/assets/images/blog/DevLog-2025.03.05/airi-logos-v3.png differ
diff --git a/docs/src/assets/images/blog/DevLog-2025.03.05/airi-logos-v4.png b/docs/src/assets/images/blog/DevLog-2025.03.05/airi-logos-v4.png
new file mode 100644
index 000000000..1626383c4
Binary files /dev/null and b/docs/src/assets/images/blog/DevLog-2025.03.05/airi-logos-v4.png differ
diff --git a/docs/src/assets/images/blog/DevLog-2025.03.05/airi-logos-v5.png b/docs/src/assets/images/blog/DevLog-2025.03.05/airi-logos-v5.png
new file mode 100644
index 000000000..97e0cfb43
Binary files /dev/null and b/docs/src/assets/images/blog/DevLog-2025.03.05/airi-logos-v5.png differ
diff --git a/docs/src/assets/images/blog/DevLog-2025.03.05/animation-transitions.gif b/docs/src/assets/images/blog/DevLog-2025.03.05/animation-transitions.gif
new file mode 100644
index 000000000..ee2bf5fd3
Binary files /dev/null and b/docs/src/assets/images/blog/DevLog-2025.03.05/animation-transitions.gif differ
diff --git a/docs/src/assets/images/blog/DevLog-2025.03.06/live-stream-layout-update.jpeg b/docs/src/assets/images/blog/DevLog-2025.03.06/live-stream-layout-update.jpeg
new file mode 100644
index 000000000..4a7dfca9b
Binary files /dev/null and b/docs/src/assets/images/blog/DevLog-2025.03.06/live-stream-layout-update.jpeg differ
diff --git a/docs/src/content/docs/blog/DevLog-2025.03.05.md b/docs/src/content/docs/blog/DevLog-2025.03.05.md
new file mode 100644
index 000000000..2ebc699f6
--- /dev/null
+++ b/docs/src/content/docs/blog/DevLog-2025.03.05.md
@@ -0,0 +1,108 @@
+---
+title: DevLog @ 2025.03.05
+---
+
+## Dejavu
+
+Yesterday I added one extra package called
+[`gpuu` (GPU utilities)](https://github.com/moeru-ai/airi/tree/main/packages/gpuu)
+to help us work with WebGPU, and perhaps we can use it to interact with real
+GPU devices too. There is not that much capabilities it can do right now,
+we will add more capabilities for it in the future.
+
+It feels like this:
+
+```ts
+import { check } from '@proj-airi/gpuu/webgpu'
+import { onMounted } from 'vue'
+
+onMounted(() => {
+  const result = await check()
+  console.log(result)
+
+  // do something with the result
+})
+```
+
+Last week, our corporate designer/artist has submitted our commission for the
+basic/first version of Project Airi logo. The feeling of the logo looks like
+this:
+
+![](../../../assets/images/blog/DevLog-2025.03.05/airi-logos-v1.png)
+
+## Daytime
+
+From the perspective of designing, these were so complex and user unfriendly
+when scaled down to Home Screen app sizes. Therefore I added this version:
+
+![](../../../assets/images/blog/DevLog-2025.03.05/airi-logo-v2.png)
+
+And edited with other variants:
+
+![](../../../assets/images/blog/DevLog-2025.03.05/airi-logos-v2.png)
+
+All of those were only suitable for dark theme, "we need a dark theme version
+logo as well!" I thought, so I did this:
+
+![](../../../assets/images/blog/DevLog-2025.03.05/airi-logo-v2-dark.png)
+
+[@kwaa](https://github.com/kwaa) said that we can try to swap the color schemes
+for both themes:
+
+![](../../../assets/images/blog/DevLog-2025.03.05/airi-logos-v3.png)
+
+This indeed looks better.
+
+We updated the Typography too:
+
+![](../../../assets/images/blog/DevLog-2025.03.05/airi-logos-v4.png)
+
+And optimized the background colors:
+
+![](../../../assets/images/blog/DevLog-2025.03.05/airi-logos-v5.png)
+
+So this is what we get finally:
+
+![](../../../assets/images/blog/DevLog-2025.03.05/airi-logos-final.png)
+
+Later on today, I was working on publishing the
+[documentation site](https://airi.build) of Project Airi online, for me,
+and other developers, artists to use it as a reference and guidelines,
+
+I did it! And the newly designed logo has been put into the
+[documentation site](https://airi.build) along with the color palette:
+
+![](../../../assets/images/blog/DevLog-2025.03.05/airi-build-light.png)
+![](../../../assets/images/blog/DevLog-2025.03.05/airi-build-dark.png)
+
+[Basic guide](https://airi.build/guides/),
+[contribution guidelines](https://airi.build/references/contributing/guide/),
+and [designing guidelines](https://airi.build/references/design-guidelines/)
+were all included from this moment.
+
+I spent a whole noon to get a feel of the Text PV animations on YouTube,
+I really like them, I wish I can implement similar transitioning effect on
+browser too!
+
+https://www.youtube.com/watch?v=_AIgv0EsOE4
+
+Luckily, I do know a developer & artist that really good at this:
+[yui540](https://github.com/yui540) (you can check his/her personal website
+here: [yui540.com](https://yui540.com)), and he/she just posted a brand new
+repository for demonstrating the fantastic transition effects he/she used.
+
+I added the related resources and website links into the
+[https://airi.build](https://airi.build) site, you can check them out.
+
+## DevStream
+
+I ported many of the animation transitions from [yui540](https://github.com/yui540)'s
+[repository](https://github.com/yui540/css-animations) to
+[https://proj-airi-packages-ui-transitions.netlify.app/#/](https://proj-airi-packages-ui-transitions.netlify.app/#/).
+
+It worked really well:
+
+![](../../../assets/images/blog/DevLog-2025.03.05/animation-transitions.gif)
+
+That's all for today's DevLog, thank you to everyone that joined the DevStream
+and stayed with me until the end. I'll see you all tomorrow.
diff --git a/docs/src/content/docs/blog/DevLog-2025.03.06.md b/docs/src/content/docs/blog/DevLog-2025.03.06.md
new file mode 100644
index 000000000..42a0b49dc
--- /dev/null
+++ b/docs/src/content/docs/blog/DevLog-2025.03.06.md
@@ -0,0 +1,92 @@
+---
+title: DevLog @ 2025.03.06
+---
+
+## Dejavu
+
+Previous day, I was on DevStream to show the progress of making the
+fundamental animations and transitions for Airi.
+
+The goal is to port and adapt the amazing work done by [@yui540](https://yui540.com/)
+into a reusable Vue component for any of the Vue project to be able to use it.
+
+> Details of yui540 and referenced libraries and work already were included
+> at the newly deployed documentation site at
+> [https://airi.build/references/design-guidelines/resources/](https://airi.build/references/design-guidelines/resources/).
+
+The result is quite good, already deployed to
+[https://proj-airi-packages-ui-transitions.netlify.app/#/](https://proj-airi-packages-ui-transitions.netlify.app/#/).
+
+![](../../../assets/images/blog/DevLog-2025.03.05/animation-transitions.gif)
+
+> And also, from now on, all of the playgrounds of each packages will use
+> "proj-airi" + "${subDirectory}" + "$｛packageName}" pattern for the Netlify
+> deployment.
+
+While the goal of previous day was trying to split the implementation of
+CSS into Vue component, the actual part for reusable wasn't done yet,
+I'll still need to design a workflow and mechanism that extensible and
+flexible for other pages to use.
+
+## Day time
+
+I experimented with the definePage macro hook from unplugging-vue-router,
+found it quite worked well for my scenario and decided the path to follow
+on.
+
+And I ported 3 new animation transitions from
+[https://cowardly-witch.netlify.app/](https://cowardly-witch.netlify.app/),
+they were already available on
+[https://proj-airi-packages-ui-transitions.netlify.app/#/](https://proj-airi-packages-ui-transitions.netlify.app/#/) .
+
+I deployed the official documentation site onto https://airi.build yesterday,
+[@kwaa](https://github.com/kwaa) commented that he would suggest me try
+the `https://airi.more.ai/docs` approach instead, but I couldn't figure out
+a way to make a 200 redirect proxy for /docs.
+
+I experimented it a little with like ten commits fighting against CI/CD
+pipeline (yes fighting against again), but still not made it work.
+
+Later on this day, I researched some of the technologies and
+[open source repositories](https://github.com/deepseek-ai/open-infra-index)
+that DeepSeek team has released for a week ago, as well as the so called
+ByteDance released [LLM gateway AIBrix](https://github.com/vllm-project/aibrix).
+And was researching whether the newly released and announced Phi-4-mini was
+capable of porting for Airi to use, good news is,
+[Phi-4-mini](https://techcommunity.microsoft.com/blog/educatordeveloperblog/welcome-to-the-new-phi-4-models---microsoft-phi-4-mini--phi-4-multimodal/4386037)
+included the function calling abilities, that means we can finally build our
+agents with pre-trained support.
+
+## DevStream
+
+I contacted another artist afternoon, saying that I am willing to pay
+for a customized pixel art commission for me to use it as an avatar
+for my next coming update accounts.
+
+~~Yes I asked the artist to put some Easter eggs inside haha, good luck you folks finding it.~~
+
+The layout and setup of the live stream has been updated 😻 It was designed
+by myself almost a year ago, but it still looks great and feel calm when
+looking at it. Please leave comments in the chat for any suggestions, really
+appreciated.
+
+![](../../../assets/images/blog/DevLog-2025.03.06/live-stream-layout-update.png)
+
+During the DevStream of today, I was trying to integrate the stage transition
+animation component into Airi's website main stage, it wasn't that smooth,
+I found several bugs in my previous design for the animation component, good
+news is that I already fixed them, and the new animation transition is available
+already at our official deployment at [https://airi.moeru.ai](https://airi.moeru.ai).
+
+I finally made the decision that coming from some random thoughts about the module
+configuration UI and settings page. They were all implemented, and went on live,
+should provide a better feeling when tweaking the settings now, I hope you
+like it.
+
+After I get off the stream and finally get on hands playing the result on my
+phone, while it does work on desktop and tablet devices, I found that I
+accidentally break the animation on mobile devices, will get this fixed tomorrow
+daytime 😹.
+
+That's all for today's DevLog, thank you to everyone that joined the DevStream
+and stayed with me until the end. I'll see you all tomorrow.
diff --git a/docs/src/styles/custom.css b/docs/src/styles/custom.css
index 2dda3de03..71cab1ec6 100644
--- a/docs/src/styles/custom.css
+++ b/docs/src/styles/custom.css
@@ -27,3 +27,8 @@
   --sl-color-gray-7: #f7f6f6;
   --sl-color-black: #ffffff;
 }
+
+.sl-markdown-content img {
+  width: 100%;
+  height: auto;
+}