diff --git a/YaeBlog.Core/Models/AboutInfo.cs b/YaeBlog.Core/Models/AboutInfo.cs
new file mode 100644
index 0000000..32ff959
--- /dev/null
+++ b/YaeBlog.Core/Models/AboutInfo.cs
@@ -0,0 +1,10 @@
+namespace YaeBlog.Core.Models;
+
+public class AboutInfo
+{
+ public required string Introduction { get; set; }
+
+ public required string Description { get; set; }
+
+ public required string AvatarImage { get; set; }
+}
diff --git a/YaeBlog.Core/Models/BlogOptions.cs b/YaeBlog.Core/Models/BlogOptions.cs
index 19724c6..7fa918c 100644
--- a/YaeBlog.Core/Models/BlogOptions.cs
+++ b/YaeBlog.Core/Models/BlogOptions.cs
@@ -38,4 +38,6 @@ public class BlogOptions
/// 博客底部是否显示ICP备案信息
///
public string? RegisterInformation { get; set; }
+
+ public required AboutInfo About { get; set; }
}
diff --git a/YaeBlog.Theme.FluentUI/App.razor b/YaeBlog.Theme.FluentUI/App.razor
index 23e8177..70c5702 100644
--- a/YaeBlog.Theme.FluentUI/App.razor
+++ b/YaeBlog.Theme.FluentUI/App.razor
@@ -11,6 +11,7 @@
+
diff --git a/YaeBlog.Theme.FluentUI/Pages/About.razor b/YaeBlog.Theme.FluentUI/Pages/About.razor
new file mode 100644
index 0000000..c99fc80
--- /dev/null
+++ b/YaeBlog.Theme.FluentUI/Pages/About.razor
@@ -0,0 +1,42 @@
+@page "/about"
+@using YaeBlog.Core.Models
+
+@inject BlogOptions BlogOptionsInstance
+
+
+ 关于 - @(BlogOptionsInstance.Author)
+
+
+
+
+
+
+
+
+
+
+
+ @(BlogOptionsInstance.Author)
+
+
+
+ @(BlogOptionsInstance.About.Introduction)
+
+
+
+
+
+ @(BlogOptionsInstance.About.Description)
+
+
+
+
+
+
+
+
+@code {
+
+}
diff --git a/YaeBlog.Theme.FluentUI/Pages/About.razor.css b/YaeBlog.Theme.FluentUI/Pages/About.razor.css
new file mode 100644
index 0000000..3690170
--- /dev/null
+++ b/YaeBlog.Theme.FluentUI/Pages/About.razor.css
@@ -0,0 +1,45 @@
+.about-background {
+ position: relative;
+ height: 100%;
+ overflow: hidden;
+ background-repeat: no-repeat;
+ background-size: cover;
+}
+
+.about-content {
+ top: 33%;
+ position: absolute;
+ width: 80%;
+ margin: 0 10%;
+}
+
+.about-avatar {
+ position: relative;
+ width: 10rem;
+ height: 10rem;
+ z-index: 3;
+}
+
+.about-avatar-img {
+ width: 100%;
+ height: 100%;
+ border-radius: 50%;
+ background-color: transparent;
+ object-fit: cover;
+ box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16),
+ 0 2px 10px 0 rgba(0, 0, 0, 0.12);
+}
+
+.about-avatar-img:hover {
+ animation: rotate-animation 1s ease-in-out;
+}
+
+@keyframes rotate-animation {
+ from {
+ transform: rotate(0deg);
+ }
+
+ to {
+ transform: rotate(360deg);
+ }
+}