From d7b419f401632a4e8f3a9fdcc453e66e5653e2d1 Mon Sep 17 00:00:00 2001
From: RhenCloud <i@rhen.cloud>
Date: Sun, 7 Dec 2025 00:02:25 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20=E6=B7=BB=E5=8A=A0=E4=B8=AA=E4=BA=BA?=
 =?UTF-8?q?=E4=BF=A1=E6=81=AF=E5=B1=95=E7=A4=BA=E5=8A=9F=E8=83=BD=EF=BC=8C?=
 =?UTF-8?q?=E6=9B=B4=E6=96=B0=E9=85=8D=E7=BD=AE=E6=96=87=E4=BB=B6=E4=BB=A5?=
 =?UTF-8?q?=E6=94=AF=E6=8C=81=E5=B9=B4=E9=BE=84=E3=80=81=E6=80=A7=E5=88=AB?=
 =?UTF-8?q?=E3=80=81=E4=BB=A3=E8=AF=8D=E5=92=8C=E5=9C=B0=E5=8C=BA?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 LICENSE                         | 21 ++++++++
 README.md                       |  6 +--
 src/components/AboutSection.vue | 95 ++++++++++++++++++++++++++++++++-
 src/config/siteConfig.ts        |  8 +++
 src/views/Home.vue              |  2 +-
 5 files changed, 126 insertions(+), 6 deletions(-)
 create mode 100644 LICENSE

diff --git a/LICENSE b/LICENSE
new file mode 100644
index 0000000..21f1438
--- /dev/null
+++ b/LICENSE
@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2025 Rhen Cloud
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.
diff --git a/README.md b/README.md
index 3b31524..b3d1e14 100644
--- a/README.md
+++ b/README.md
@@ -1,6 +1,6 @@
 # Cloud Home
 
-一个基于 Vue 的个人主页模板，内置友链申请、项目展示、友链随机展示、自定义配置，支持 Vercel 部署与邮件通知。
+一个基于 Vue 的个人主页模板，内置友链申请、网站展示、项目展示、友链随机展示、自定义配置，支持 Vercel 部署与邮件通知。
 
 ## 特性
 
@@ -145,9 +145,7 @@ pnpm build
 ## 部署到 Vercel
 
 1. 导入仓库到 Vercel。
-2. 设置上文的 SMTP 环境变量。
-3. 保持 `vercel.json` 中 `distDir: "dist"`。
-4. 部署后，静态文件从 `dist/` 提供，API 走 `/api/send-mail`。
+2. 设置上文的环境变量。
 
 ## API
 
diff --git a/src/components/AboutSection.vue b/src/components/AboutSection.vue
index 79d6c39..fc69095 100644
--- a/src/components/AboutSection.vue
+++ b/src/components/AboutSection.vue
@@ -2,6 +2,41 @@
     <section class="card panel">
         <h2>个人简介</h2>
         <p class="muted">关于我 · About Me</p>
+
+        <div class="about-grid info-grid">
+            <article v-if="age" class="about-card info-card">
+                <div class="about-head">
+                    <span class="icon">🎂</span>
+                    <h3>年龄</h3>
+                </div>
+                <p class="muted">{{ age }} 岁</p>
+            </article>
+
+            <article v-if="profile?.gender" class="about-card info-card">
+                <div class="about-head">
+                    <span class="icon">⚧️</span>
+                    <h3>性别</h3>
+                </div>
+                <p class="muted">{{ profile.gender }}</p>
+            </article>
+
+            <article v-if="profile?.pronouns" class="about-card info-card">
+                <div class="about-head">
+                    <span class="icon">🗣️</span>
+                    <h3>代词</h3>
+                </div>
+                <p class="muted">{{ profile.pronouns }}</p>
+            </article>
+
+            <article v-if="profile?.location" class="about-card info-card">
+                <div class="about-head">
+                    <span class="icon">📍</span>
+                    <h3>地区</h3>
+                </div>
+                <p class="muted">{{ profile.location }}</p>
+            </article>
+        </div>
+
         <div class="about-grid">
             <article v-for="item in items" :key="item.title" class="about-card">
                 <div class="about-head">
@@ -15,7 +50,24 @@
 </template>
 
 <script setup>
-defineProps({ items: Array });
+import { computed } from "vue";
+
+const props = defineProps({
+    items: Array,
+    profile: Object,
+});
+
+const age = computed(() => {
+    if (!props.profile?.birthday) return null;
+    const birthDate = new Date(props.profile.birthday);
+    const today = new Date();
+    let age = today.getFullYear() - birthDate.getFullYear();
+    const m = today.getMonth() - birthDate.getMonth();
+    if (m < 0 || (m === 0 && today.getDate() < birthDate.getDate())) {
+        age--;
+    }
+    return age;
+});
 </script>
 
 <style scoped>
@@ -36,10 +88,23 @@ h2 {
     grid-template-columns: repeat(2, minmax(240px, 1fr));
     gap: 14px;
 }
+.info-grid {
+    display: flex;
+    flex-wrap: wrap;
+    justify-content: center;
+    gap: 14px;
+}
+.about-grid + .about-grid {
+    margin-top: 10px;
+}
 @media (max-width: 720px) {
     .about-grid {
         grid-template-columns: 1fr;
     }
+    .info-grid {
+        display: flex;
+        gap: 10px;
+    }
 }
 .about-card {
     background: linear-gradient(135deg, rgba(255, 255, 255, 0.05), rgba(255, 255, 255, 0.02));
@@ -49,6 +114,34 @@ h2 {
     box-shadow: 0 10px 30px rgba(0, 0, 0, 0.18);
     transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
 }
+.info-card {
+    flex: 1 1 140px;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    gap: 8px;
+    padding: 10px 14px;
+}
+.info-card .about-head {
+    margin-bottom: 0;
+}
+.info-card .about-head h3 {
+    font-size: 15px;
+    color: rgba(255, 255, 255, 0.9);
+    font-weight: 600;
+    margin: 0;
+}
+.info-card .icon {
+    font-size: 18px;
+}
+.info-card .muted {
+    margin: 0;
+    text-align: right;
+    white-space: nowrap;
+    font-weight: 500;
+    color: rgba(255, 255, 255, 0.6);
+    font-size: 13px;
+}
 .about-card:hover {
     transform: translateY(-2px);
     border-color: rgba(124, 193, 255, 0.4);
diff --git a/src/config/siteConfig.ts b/src/config/siteConfig.ts
index b75a145..cc6d1be 100644
--- a/src/config/siteConfig.ts
+++ b/src/config/siteConfig.ts
@@ -4,6 +4,10 @@ interface SiteConfig {
         title: string;
         avatar: string;
         bio: string;
+        birthday?: string;
+        gender?: string;
+        pronouns?: string;
+        location?: string;
     };
     socialLinks: Array<{
         name: string;
@@ -56,6 +60,10 @@ const siteConfig: SiteConfig = {
         title: "I'm RhenCloud.",
         avatar: "avatar.webp", // public/avatar.webp
         bio: "趁世界还未重启之前 约一次爱恋",
+        birthday: "2010-03-28",
+        // gender: "女",
+        pronouns: "她",
+        location: "中国 · 天津",
     },
 
     socialLinks: [
diff --git a/src/views/Home.vue b/src/views/Home.vue
index ce69ab9..420b1e4 100644
--- a/src/views/Home.vue
+++ b/src/views/Home.vue
@@ -2,7 +2,7 @@
     <main class="page">
         <HeroSection :profile="profile" />
         <SocialLinks :links="socialLinks" />
-        <AboutSection :items="about" />
+        <AboutSection :items="about" :profile="profile" />
     </main>
 </template>