feat(about): update about page

content/pages/about/SocialCards.vue

@@ -0,0 +1,66 @@
+<script setup lang="ts">
+interface SocialCardProp {
+  icon: string
+  title: string
+  href: string
+  color: string
+  textColor: string
+}
+
+const cards: SocialCardProp[] = [
+  {
+    color: '#181717',
+    icon: 'si:github',
+    title: 'GitHub',
+    href: 'https://github.com/bsdayo',
+    textColor: 'white'
+  },
+  {
+    color: '#000000',
+    icon: 'si:wakatime',
+    title: 'WakaTime',
+    href: 'https://wakatime.com/@bsdayo',
+    textColor: 'white'
+  },
+  {
+    color: '#000000',
+    icon: 'si:steam',
+    title: 'Steam',
+    href: 'https://steamcommunity.com/id/bsdayo',
+    textColor: 'white'
+  },
+  {
+    color: '#00a1d6',
+    icon: 'si:bilibili',
+    title: '哔哩哔哩',
+    href: 'https://space.bilibili.com/33268404',
+    textColor: 'white'
+  },
+  {
+    color: '#13af64',
+    icon: 'si:android',
+    title: '酷安',
+    href: 'https://www.coolapk.com/u/2352972',
+    textColor: 'white'
+  },
+]
+</script>
+
+<template>
+  <v-container class="pa-0">
+    <v-row>
+      <v-col cols="6" md="4" lg="3" v-for="card in cards" :key="card.title">
+        <v-card class="social-card text-center"
+                :class="`text-${card.textColor}`"
+                :href="card.href" target="_blank" :color="card.color">
+          <v-icon class="mt-4" :icon="card.icon" size="40"/>
+          <v-card-title>{{ card.title }}</v-card-title>
+        </v-card>
+      </v-col>
+    </v-row>
+  </v-container>
+</template>
+
+<style scoped lang="scss">
+
+</style>

content/pages/about/index.md

@@ -3,24 +3,60 @@ title: 关于
 comment: true
 ---
 
-## Ciallo～(∠・ω< )⌒☆
+## 关于自己
 
-- ~~苦逼高三生~~ 毕业了！
-- 经常（天天）熬夜
-- 又菜又爱玩的音游fw
-- ~~lolicon~~
+> ~~苦逼高三生~~ 毕业了！
+
+**开发方面**
+- 自学过 Python、JS/TS、Node 等技术栈，现在稳定在 .NET/C#，且短时间内不打算更换
+- 热衷于“折腾”，兴致来了会沉迷在钻研的过程，即便结果在事后看来/他人眼里并没有什么意义
+- 喜欢研究程序设计、代码美学（例如设计模式等），但算法方面基本一窍不通
+- 总想写项目，但是经常想不到什么可写的
+- 喜欢以各种设计模式重构已有项目
+- 对开源事业抱有感恩和热情，但并不迷信
+- 相比硬件开发还是更喜欢软件
+- 比较喜欢追最新的东西，或者版本
+- 对“创造”类技能（例如开发、建模、编曲）的学习热情比较大，但对“理论”类（例如算法、图形学）热情一般
+
+**娱乐方面**
+- 目前主要活跃于 PC 端
+- 有点电子 ED，玩一些游戏容易三分钟热度
+- 游戏消费基本都在买游戏上，很少氪金
+- FPS 爱好者，但是手残
+- 命运 2 萌新玩家，目前打算玩下去
+- 喜欢 MMORPG 或者带一些 MMO 属性的游戏，只是实际玩过的确实不太多
+- 自动化类游戏爱好者，但中间隔太久没玩了，需要一个契机让我重新捡起来（
+- Minecraft 断断续续玩，一般和朋友一起
+- 音游人，但是大部分已经退坑或半退坑，有时间和机会会去机厅出勤
+- 会打一点雀，但不多
+- 舟游半退坑玩家
+
+**其他方面**
+- 术术/车万人，但不是骨灰级（让我答一个很偏的问题估计也答不上来
+- 数码爱好者，但是数码设备不多（没钱
+- 比较喜欢听歌，术曲居多，其次是日语歌，其他基本不怎么听
+- 对平面设计比较感兴趣，自己做过一些但总是不尽人意
+- 想学日语，但是一直没正式开始
+- 不善言辞，很多心里话表达不出来，经常为此很苦恼
+- 不是也讨厌现充，但是和朋友能一起玩的很开心。面对不得已的交际正在学习给自己打气
+- 面对生活并不认真，甚至很随意
+- 正在努力纠正作息时间
+- 非常讨厌看短视频开外放的人
 
 ## 关于博客
 
-第四版 Blog 终于还是来了...
+经历过 v1 的 Hexo、v2 用 Vue 从头写、v3 的 Hugo，博客 v4 终于还是来了...
 
-这一次是基于 [VitePress](https://vitepress.dev/) 的纯前端 SSG 博客，自己用 Vuetify 搭了一个 Material Design
-风格的界面，目前感觉是挺满意的。
+这一次是基于 [VitePress](https://vitepress.dev/) 的纯前端 SSG 博客，虽然和 v2 一样还是基于 Vue，但是底层（例如 Markdown
+处理、脚手架等等等等）就完全不用自己写了。自己用 Vuetify 组件库搭了一个 Material Design
+风格的界面，目前还是挺满意的。
 
-VitePress 的好处还是很多的，比如直接在 Markdown 中使用 Vue 组件库：
+VitePress 好用的功能还是挺多的，比如直接在 Markdown 中使用 Vue 组件库（例如 Vuetify）：
 
 <v-btn class="my-2">这是一个 v-btn 组件</v-btn>
 
+<v-slider class="mt-2" label="这是一个 v-slider 组件" />
+
 <v-card class="my-2">
   <v-card-title>这是一个 v-card 组件</v-card-title>
   <v-card-actions>
@@ -31,10 +67,27 @@ VitePress 的好处还是很多的，比如直接在 Markdown 中使用 Vue 组
 
 和一些内置的 [Markdown 扩展](https://vitepress.dev/guide/markdown)（这里我自己加了样式）：
 
-::: tip 一些自定义的文本块
+::: tip 这是一个自定义的文本块
 ♪sakana——\\(＞○＜\\)♪ &emsp; `:fish:` → :fish: Emoji 支持
 :::
 
-最后还是希望自己能坚持写下去（跑
+整个博客，包括文章、界面主题都[开源在了 GitHub 上](https://github.com/bsdayo/bsblog)
+
+## 其他平台
+
+你还可以在这些地方找到我~
+
+<!--suppress HtmlUnknownTag -->
+<SocialCards />
+
+<script setup>
+import SocialCards from './SocialCards.vue'
+</script>
+
+## 碎碎念
+
+折腾这么多年，博客写写停停，时间都花在折腾博客框架本身去了...自己写博客的初衷又是什么呢？
+
+这一次还是希望自己能坚持写下去x
 
-底下的评论区就当个留言板叭
+底下的评论区就当个留言板罢