redesign home page

Author: CatCodeMe

public/bookshelf.json

@@ -1 +1,13 @@
-[{}]
+[
+  {
+    "title": "潜规则",
+    "type": "book",
+    "status": "reading",
+    "description": "中国历史中的真实游戏。作者吴思通过历史案例，揭示了中国社会运行中的潜规则，探讨了正式制度背后的非正式规则。",
+    "tags": ["历史", "社会学", "中国历史", "政治", "文化", "社会规则", "制度分析"],
+    "identifier": "9787506331744",
+    "rating": 4.5,
+    "progress": 10,
+    "sourceUrl": "https://book.douban.com/subject/1025723/"
+  }
+]

public/clouds/hero-home.riv

@@ -11,12 +11,69 @@ import { Spoiler, Timeline } from 'astro-pure/user'
 import Substats from '@/components/about/Substats.astro'
 import { ToolTag } from '@/components/tools/Tool.astro'
 import ToolSection from '@/components/tools/ToolSection.astro'
+import { Icon } from '@/custom/components/user'
+import { Icon as AstroIcon } from 'astro-icon/components'
 
 ## About Me
 
 *   Communist / Developer / Learner / Cat owner
 *   改造自己,进而改造世界🚩 <Spoiler>革命无罪，造反有理！</Spoiler>
 
+## Skills
+
+<div class="mb-6">
+  <div class="flex items-center gap-2 mb-4">
+    <Icon name="code" class="size-5 text-primary" />
+    <h3 class="text-lg font-semibold">Languages</h3>
+  </div>
+  <div class="flex flex-wrap gap-2">
+    <div class="flex items-center gap-1.5 px-3 py-1.5 rounded-lg border bg-muted/50 hover:bg-muted hover:border-primary/50 transition-all">
+      <AstroIcon name="devicon:java" class="size-4" />
+      <span class="text-sm">Java</span>
+    </div>
+    <div class="flex items-center gap-1.5 px-3 py-1.5 rounded-lg border bg-muted/50 hover:bg-muted hover:border-primary/50 transition-all">
+      <AstroIcon name="devicon:zig" class="size-4" />
+      <span class="text-sm">Zig</span>
+    </div>
+    <div class="flex items-center gap-1.5 px-3 py-1.5 rounded-lg border bg-muted/50 hover:bg-muted hover:border-primary/50 transition-all">
+      <AstroIcon name="devicon:python" class="size-4" />
+      <span class="text-sm">Python</span>
+    </div>
+    <div class="flex items-center gap-1.5 px-3 py-1.5 rounded-lg border bg-muted/50 hover:bg-muted hover:border-primary/50 transition-all">
+      <AstroIcon name="devicon:bash" class="size-4" />
+      <span class="text-sm">Shell</span>
+    </div>
+  </div>
+</div>
+
+<div class="mb-6">
+  <div class="flex items-center gap-2 mb-4">
+    <Icon name="code" class="size-5 text-primary" />
+    <h3 class="text-lg font-semibold">Backend</h3>
+  </div>
+  <div class="flex flex-wrap gap-2">
+    <div class="flex items-center gap-1.5 px-3 py-1.5 rounded-lg border bg-muted/50 hover:bg-muted hover:border-primary/50 transition-all">
+      <AstroIcon name="devicon:spring" class="size-4" />
+      <span class="text-sm">Spring</span>
+    </div>
+    <div class="flex items-center gap-1.5 px-3 py-1.5 rounded-lg border bg-muted/50 hover:bg-muted hover:border-primary/50 transition-all">
+      <AstroIcon name="devicon:redis" class="size-4" />
+      <span class="text-sm">Redis</span>
+    </div>
+    <div class="flex items-center gap-1.5 px-3 py-1.5 rounded-lg border bg-muted/50 hover:bg-muted hover:border-primary/50 transition-all">
+      <AstroIcon name="devicon:clickhouse" class="size-4" />
+      <span class="text-sm">ClickHouse</span>
+    </div>
+    <div class="flex items-center gap-1.5 px-3 py-1.5 rounded-lg border bg-muted/50 hover:bg-muted hover:border-primary/50 transition-all">
+      <AstroIcon name="devicon:mysql" class="size-4" />
+      <span class="text-sm">Mysql</span>
+    </div>
+    <div class="flex items-center gap-1.5 px-3 py-1.5 rounded-lg border bg-muted/50 hover:bg-muted hover:border-primary/50 transition-all">
+      <AstroIcon name="devicon:apachespark" class="size-4" />
+      <span class="text-sm">Apache Spark</span>
+    </div>
+  </div>
+</div>
 
 ## Tools