✨ Account about page

DysonNetwork.Pass/Account/AccountCurrentController.cs

@@ -82,7 +82,7 @@ public class AccountCurrentController(
         [MaxLength(4096)] public string? Bio { get; set; }
         public Shared.Models.UsernameColor? UsernameColor { get; set; }
         public Instant? Birthday { get; set; }
-        public List<ProfileLink>? Links { get; set; }
+        public List<SnProfileLink>? Links { get; set; }
 
         [MaxLength(32)] public string? PictureId { get; set; }
         [MaxLength(32)] public string? BackgroundId { get; set; }

DysonNetwork.Pass/Account/AccountServiceGrpc.cs

@@ -24,15 +24,16 @@ public class AccountServiceGrpc(
     public override async Task<Shared.Proto.Account> GetAccount(GetAccountRequest request, ServerCallContext context)
     {
         if (!Guid.TryParse(request.Id, out var accountId))
-            throw new RpcException(new Grpc.Core.Status(StatusCode.InvalidArgument, "Invalid account ID format"));
+            throw new RpcException(new Status(StatusCode.InvalidArgument, "Invalid account ID format"));
 
         var account = await _db.Accounts
             .AsNoTracking()
             .Include(a => a.Profile)
+            .Include(a => a.Contacts.Where(c => c.IsPublic))
             .FirstOrDefaultAsync(a => a.Id == accountId);
 
         if (account == null)
-            throw new RpcException(new Grpc.Core.Status(StatusCode.NotFound, $"Account {request.Id} not found"));
+            throw new RpcException(new Status(StatusCode.NotFound, $"Account {request.Id} not found"));
 
         var perk = await subscriptions.GetPerkSubscriptionAsync(account.Id);
         account.PerkSubscription = perk?.ToReference();

DysonNetwork.Pass/Migrations/20251003061315_AddSubscriptionGift.Designer.cs

@@ -445,7 +445,7 @@ namespace DysonNetwork.Pass.Migrations
                         .HasColumnType("timestamp with time zone")
                         .HasColumnName("last_seen_at");
 
-                    b.Property<List<ProfileLink>>("Links")
+                    b.Property<List<SnProfileLink>>("Links")
                         .HasColumnType("jsonb")
                         .HasColumnName("links");
 

DysonNetwork.Pass/Migrations/20251003123103_RefactorSubscriptionRelation.Designer.cs

@@ -445,7 +445,7 @@ namespace DysonNetwork.Pass.Migrations
                         .HasColumnType("timestamp with time zone")
                         .HasColumnName("last_seen_at");
 
-                    b.Property<List<ProfileLink>>("Links")
+                    b.Property<List<SnProfileLink>>("Links")
                         .HasColumnType("jsonb")
                         .HasColumnName("links");
 

DysonNetwork.Pass/Migrations/20251003152102_AddWalletFund.Designer.cs

@@ -445,7 +445,7 @@ namespace DysonNetwork.Pass.Migrations
                         .HasColumnType("timestamp with time zone")
                         .HasColumnName("last_seen_at");
 
-                    b.Property<List<ProfileLink>>("Links")
+                    b.Property<List<SnProfileLink>>("Links")
                         .HasColumnType("jsonb")
                         .HasColumnName("links");
 

DysonNetwork.Pass/Migrations/20251008050851_AddUsernameColor.Designer.cs

@@ -445,7 +445,7 @@ namespace DysonNetwork.Pass.Migrations
                         .HasColumnType("timestamp with time zone")
                         .HasColumnName("last_seen_at");
 
-                    b.Property<List<ProfileLink>>("Links")
+                    b.Property<List<SnProfileLink>>("Links")
                         .HasColumnType("jsonb")
                         .HasColumnName("links");
 

DysonNetwork.Pass/Migrations/20251021153439_AddRealmFromSphere.Designer.cs

@@ -445,7 +445,7 @@ namespace DysonNetwork.Pass.Migrations
                         .HasColumnType("timestamp with time zone")
                         .HasColumnName("last_seen_at");
 
-                    b.Property<List<ProfileLink>>("Links")
+                    b.Property<List<SnProfileLink>>("Links")
                         .HasColumnType("jsonb")
                         .HasColumnName("links");
 

DysonNetwork.Pass/Migrations/20251022164134_RemoveChatRoom.Designer.cs

@@ -445,7 +445,7 @@ namespace DysonNetwork.Pass.Migrations
                         .HasColumnType("timestamp with time zone")
                         .HasColumnName("last_seen_at");
 
-                    b.Property<List<ProfileLink>>("Links")
+                    b.Property<List<SnProfileLink>>("Links")
                         .HasColumnType("jsonb")
                         .HasColumnName("links");
 

DysonNetwork.Pass/Migrations/20251023173204_AddLotteries.Designer.cs

@@ -445,7 +445,7 @@ namespace DysonNetwork.Pass.Migrations
                         .HasColumnType("timestamp with time zone")
                         .HasColumnName("last_seen_at");
 
-                    b.Property<List<ProfileLink>>("Links")
+                    b.Property<List<SnProfileLink>>("Links")
                         .HasColumnType("jsonb")
                         .HasColumnName("links");
 

DysonNetwork.Pass/Migrations/20251024154539_AddDetailLotteriesStatus.Designer.cs

@@ -445,7 +445,7 @@ namespace DysonNetwork.Pass.Migrations
                         .HasColumnType("timestamp with time zone")
                         .HasColumnName("last_seen_at");
 
-                    b.Property<List<ProfileLink>>("Links")
+                    b.Property<List<SnProfileLink>>("Links")
                         .HasColumnType("jsonb")
                         .HasColumnName("links");
 

DysonNetwork.Pass/Migrations/20251101092348_AddPresenceActivity.Designer.cs

@@ -445,7 +445,7 @@ namespace DysonNetwork.Pass.Migrations
                         .HasColumnType("timestamp with time zone")
                         .HasColumnName("last_seen_at");
 
-                    b.Property<List<ProfileLink>>("Links")
+                    b.Property<List<SnProfileLink>>("Links")
                         .HasColumnType("jsonb")
                         .HasColumnName("links");
 

DysonNetwork.Pass/Migrations/20251101142549_EnrichPresenceActivity.Designer.cs

@@ -445,7 +445,7 @@ namespace DysonNetwork.Pass.Migrations
                         .HasColumnType("timestamp with time zone")
                         .HasColumnName("last_seen_at");
 
-                    b.Property<List<ProfileLink>>("Links")
+                    b.Property<List<SnProfileLink>>("Links")
                         .HasColumnType("jsonb")
                         .HasColumnName("links");
 

DysonNetwork.Pass/Migrations/20251101175500_AddSocialCreditRecordStatus.Designer.cs

@@ -445,7 +445,7 @@ namespace DysonNetwork.Pass.Migrations
                         .HasColumnType("timestamp with time zone")
                         .HasColumnName("last_seen_at");
 
-                    b.Property<List<ProfileLink>>("Links")
+                    b.Property<List<SnProfileLink>>("Links")
                         .HasColumnType("jsonb")
                         .HasColumnName("links");
 

DysonNetwork.Pass/Migrations/20251116153151_OpenableFunds.Designer.cs

@@ -445,7 +445,7 @@ namespace DysonNetwork.Pass.Migrations
                         .HasColumnType("timestamp with time zone")
                         .HasColumnName("last_seen_at");
 
-                    b.Property<List<ProfileLink>>("Links")
+                    b.Property<List<SnProfileLink>>("Links")
                         .HasColumnType("jsonb")
                         .HasColumnName("links");
 

DysonNetwork.Pass/Migrations/20251116163407_OpenFundsTotalSplits.Designer.cs

@@ -445,7 +445,7 @@ namespace DysonNetwork.Pass.Migrations
                         .HasColumnType("timestamp with time zone")
                         .HasColumnName("last_seen_at");
 
-                    b.Property<List<ProfileLink>>("Links")
+                    b.Property<List<SnProfileLink>>("Links")
                         .HasColumnType("jsonb")
                         .HasColumnName("links");
 

DysonNetwork.Pass/Migrations/AppDatabaseModelSnapshot.cs

@@ -442,7 +442,7 @@ namespace DysonNetwork.Pass.Migrations
                         .HasColumnType("timestamp with time zone")
                         .HasColumnName("last_seen_at");
 
-                    b.Property<List<ProfileLink>>("Links")
+                    b.Property<List<SnProfileLink>>("Links")
                         .HasColumnType("jsonb")
                         .HasColumnName("links");
 

DysonNetwork.Shared/Models/Account.cs

@@ -121,22 +121,23 @@ public abstract class Leveling
     {
         if (xp < 0) return 0;
 
-        int level = 0;
+        var level = 0;
         while (level < MaxLevel && TotalExpForLevel(level + 1) <= xp)
         {
             level++;
         }
+
         return level;
     }
 
     // Progress to next level (0.0 ~ 1.0)
     public static double GetProgressToNextLevel(int xp)
     {
-        int currentLevel = GetLevelFromExp(xp);
+        var currentLevel = GetLevelFromExp(xp);
         if (currentLevel >= MaxLevel) return 1.0;
 
-        double prevTotal = TotalExpForLevel(currentLevel);
+        var prevTotal = TotalExpForLevel(currentLevel);
-        double nextTotal = TotalExpForLevel(currentLevel + 1);
+        var nextTotal = TotalExpForLevel(currentLevel + 1);
 
         return (xp - prevTotal) / (nextTotal - prevTotal);
     }
@@ -145,9 +146,9 @@ public abstract class Leveling
 public class UsernameColor
 {
     public string Type { get; set; } = "plain"; // "plain" | "gradient"
-    public string? Value { get; set; }          // e.g. "red" or "#ff6600"
+    public string? Value { get; set; } // e.g. "red" or "#ff6600"
-    public string? Direction { get; set; }      // e.g. "to right"
+    public string? Direction { get; set; } // e.g. "to right"
-    public List<string>? Colors { get; set; }   // e.g. ["#ff0000", "#00ff00"]
+    public List<string>? Colors { get; set; } // e.g. ["#ff0000", "#00ff00"]
 
     public Proto.UsernameColor ToProtoValue()
     {
@@ -161,6 +162,7 @@ public class UsernameColor
         {
             proto.Colors.AddRange(Colors);
         }
+
         return proto;
     }
 
@@ -187,7 +189,7 @@ public class SnAccountProfile : ModelBase, IIdentifiedResource
     [MaxLength(1024)] public string? Pronouns { get; set; }
     [MaxLength(1024)] public string? TimeZone { get; set; }
     [MaxLength(1024)] public string? Location { get; set; }
-    [Column(TypeName = "jsonb")] public List<ProfileLink>? Links { get; set; }
+    [Column(TypeName = "jsonb")] public List<SnProfileLink>? Links { get; set; }
     [Column(TypeName = "jsonb")] public UsernameColor? UsernameColor { get; set; }
     public Instant? Birthday { get; set; }
     public Instant? LastSeenAt { get; set; }
@@ -197,10 +199,8 @@ public class SnAccountProfile : ModelBase, IIdentifiedResource
 
     public int Experience { get; set; }
 
-    [NotMapped]
+    [NotMapped] public int Level => Leveling.GetLevelFromExp(Experience);
-    public int Level => Leveling.GetLevelFromExp(Experience);
+    [NotMapped] public double LevelingProgress => Leveling.GetProgressToNextLevel(Experience);
-    [NotMapped]
-    public double LevelingProgress => Leveling.GetProgressToNextLevel(Experience);
 
     public double SocialCredits { get; set; } = 100;
 
@@ -249,9 +249,13 @@ public class SnAccountProfile : ModelBase, IIdentifiedResource
             UpdatedAt = UpdatedAt.ToTimestamp()
         };
 
+        if (Links is not null)
+            proto.Links.AddRange(Links.Select(l => l.ToProtoValue()));
+
         return proto;
     }
 
+
     public static SnAccountProfile FromProtoValue(Proto.AccountProfile proto)
     {
         var profile = new SnAccountProfile
@@ -267,28 +271,54 @@ public class SnAccountProfile : ModelBase, IIdentifiedResource
             Location = proto.Location,
             Birthday = proto.Birthday?.ToInstant(),
             LastSeenAt = proto.LastSeenAt?.ToInstant(),
-            Verification = proto.Verification is null ? null : SnVerificationMark.FromProtoValue(proto.Verification),
+            Verification =
+                proto.Verification is null ? null : SnVerificationMark.FromProtoValue(proto.Verification),
             ActiveBadge = proto.ActiveBadge is null ? null : SnAccountBadgeRef.FromProtoValue(proto.ActiveBadge),
             Experience = proto.Experience,
             SocialCredits = proto.SocialCredits,
             Picture = proto.Picture is null ? null : SnCloudFileReferenceObject.FromProtoValue(proto.Picture),
-            Background = proto.Background is null ? null : SnCloudFileReferenceObject.FromProtoValue(proto.Background),
+            Background = proto.Background is null
+                ? null
+                : SnCloudFileReferenceObject.FromProtoValue(proto.Background),
             AccountId = Guid.Parse(proto.AccountId),
-            UsernameColor = proto.UsernameColor is not null ? UsernameColor.FromProtoValue(proto.UsernameColor) : null,
+            UsernameColor = proto.UsernameColor is not null
+                ? UsernameColor.FromProtoValue(proto.UsernameColor)
+                : null,
             CreatedAt = proto.CreatedAt.ToInstant(),
             UpdatedAt = proto.UpdatedAt.ToInstant()
         };
 
+        if (proto.Links.Count > 0)
+            profile.Links = proto.Links.Select(SnProfileLink.FromProtoValue).ToList();
+
         return profile;
     }
 
     public string ResourceIdentifier => $"account:profile:{Id}";
 }
 
-public class ProfileLink
+public class SnProfileLink
 {
     public string Name { get; set; } = string.Empty;
     public string Url { get; set; } = string.Empty;
+
+    public Proto.ProfileLink ToProtoValue()
+    {
+        return new Proto.ProfileLink
+        {
+            Name = Name,
+            Url = Url
+        };
+    }
+
+    public static SnProfileLink FromProtoValue(Proto.ProfileLink proto)
+    {
+        return new SnProfileLink
+        {
+            Name = proto.Name,
+            Url = proto.Url
+        };
+    }
 }
 
 public class SnAccountContact : ModelBase
@@ -361,7 +391,7 @@ public class SnAccountAuthFactor : ModelBase
 {
     public Guid Id { get; set; }
     public AccountAuthFactorType Type { get; set; }
-    [JsonIgnore][MaxLength(8196)] public string? Secret { get; set; }
+    [JsonIgnore] [MaxLength(8196)] public string? Secret { get; set; }
 
     [JsonIgnore]
     [Column(TypeName = "jsonb")]
@@ -398,11 +428,13 @@ public class SnAccountAuthFactor : ModelBase
                 return BCrypt.Net.BCrypt.Verify(password, Secret);
             case AccountAuthFactorType.TimedCode:
                 var otp = new Totp(Base32Encoding.ToBytes(Secret));
-                return otp.VerifyTotp(DateTime.UtcNow, password, out _, new VerificationWindow(previous: 5, future: 5));
+                return otp.VerifyTotp(DateTime.UtcNow, password, out _,
+                    new VerificationWindow(previous: 5, future: 5));
             case AccountAuthFactorType.EmailCode:
             case AccountAuthFactorType.InAppCode:
             default:
-                throw new InvalidOperationException("Unsupported verification type, use CheckDeliveredCode instead.");
+                throw new InvalidOperationException(
+                    "Unsupported verification type, use CheckDeliveredCode instead.");
         }
     }
 
@@ -430,10 +462,10 @@ public class SnAccountConnection : ModelBase
     [MaxLength(8192)] public string ProvidedIdentifier { get; set; } = null!;
     [Column(TypeName = "jsonb")] public Dictionary<string, object>? Meta { get; set; } = [];
 
-    [JsonIgnore][MaxLength(4096)] public string? AccessToken { get; set; }
+    [JsonIgnore] [MaxLength(4096)] public string? AccessToken { get; set; }
-    [JsonIgnore][MaxLength(4096)] public string? RefreshToken { get; set; }
+    [JsonIgnore] [MaxLength(4096)] public string? RefreshToken { get; set; }
     public Instant? LastUsedAt { get; set; }
 
     public Guid AccountId { get; set; }
     public SnAccount Account { get; set; } = null!;
-}
+}

DysonNetwork.Shared/Proto/account.proto

@@ -66,6 +66,11 @@ message UsernameColor {
     repeated string colors = 4;
 }
 
+message ProfileLink {
+    string name = 1;
+    string url = 2;
+}
+
 // Profile contains detailed information about a user
 message AccountProfile {
     string id = 1;
@@ -97,6 +102,7 @@ message AccountProfile {
     google.protobuf.Timestamp created_at = 22;
     google.protobuf.Timestamp updated_at = 23;
     optional UsernameColor username_color = 24;
+    repeated ProfileLink links = 25;
 }
 
 // AccountContact represents a contact method for an account

DysonNetwork.Zone/Caddyfile

@@ -3,3 +3,10 @@ http://localhost:3001 {
         header_up X-SiteName "ciallo"
     }
 }
+
+http://localhost:3002 {
+    reverse_proxy /drive/* localhost:5001
+    reverse_proxy localhost:8007 {
+        header_up X-SiteName "regular"
+    }
+}

DysonNetwork.Zone/DysonNetwork.Zone.csproj

@@ -12,6 +12,7 @@
     </ItemGroup>
     
     <ItemGroup>
+        <PackageReference Include="Markdig" Version="0.43.0" />
         <PackageReference Include="Microsoft.AspNetCore.OpenApi" Version="10.0.0" />
         <PackageReference Include="Microsoft.EntityFrameworkCore.Design" Version="9.0.11">
             <PrivateAssets>all</PrivateAssets>

DysonNetwork.Zone/Pages/About.cshtml

@@ -0,0 +1,243 @@
+@page
+@using NodaTime.Serialization.Protobuf
+@model AboutModel
+
+@{
+    Layout = "_LayoutContained";
+}
+
+@if (Model.UserAccount != null)
+{
+    @if (!string.IsNullOrEmpty(Model.UserBackgroundUrl))
+    {
+        <img src="@Model.UserBackgroundUrl" class="w-full max-h-48 object-cover mb-8" alt="Background Image"/>
+    }
+
+    <div class="container mx-auto px-8 pb-8">
+        <div class="flex items-center gap-6 mb-8">
+            @if (!string.IsNullOrEmpty(Model.UserPictureUrl))
+            {
+                <img src="@Model.UserPictureUrl" class="w-20 h-20 rounded-full object-cover" alt="Avatar"/>
+            }
+            else
+            {
+                <div class="w-20 h-20 rounded-full bg-gray-300 flex items-center justify-center">
+                    <span class="text-2xl">@(Model.UserAccount.Name != null ? Model.UserAccount.Name[0] : '?')</span>
+                </div>
+            }
+            <div>
+                <div class="text-2xl font-bold">
+                    @(Model.UserAccount.Nick ?? Model.UserAccount.Name)
+                </div>
+                <div class="text-body-2 text-base-content/60">@@@Model.UserAccount.Name</div>
+            </div>
+        </div>
+
+        <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
+            <div class="flex flex-col gap-4">
+                <div class="card bg-base-100 border">
+                    <div class="card-body">
+                        <h2 class="card-title"><span class="mdi mdi-home"></span> Info</h2>
+
+                        <div class="space-y-2">
+                            @if (!string.IsNullOrEmpty(Model.UserAccount.Profile?.TimeZone))
+                            {
+                                <div class="flex justify-between">
+                                    <span class="flex gap-2">
+                                        <span class="mdi mdi-map-clock"></span>
+                                        Time Zone
+                                    </span>
+                                    <span class="text-right">
+                                        @Model.GetCurrentTimeInTimeZone(Model.UserAccount.Profile.TimeZone)
+                                        <span class="text-base-content/50">·</span>
+                                        @Model.GetOffsetUtcString(Model.UserAccount.Profile.TimeZone)
+                                        <span class="text-base-content/50">·</span>
+                                        @Model.UserAccount.Profile.TimeZone
+                                    </span>
+                                </div>
+                            }
+                            @if (!string.IsNullOrEmpty(Model.UserAccount.Profile?.Location))
+                            {
+                                <div class="flex justify-between">
+                                    <span class="flex gap-2">
+                                        <span class="mdi mdi-map-marker"></span> Location
+                                    </span>
+                                    <span>@Model.UserAccount.Profile.Location</span>
+                                </div>
+                            }
+                            @if (!string.IsNullOrEmpty(Model.UserAccount.Profile?.FirstName) || !string.IsNullOrEmpty(Model.UserAccount.Profile?.LastName))
+                            {
+                                <div class="flex justify-between">
+                                    <span class="flex gap-2">
+                                        <span class="mdi mdi-card-bulleted-outline"></span> Name
+                                    </span>
+                                    <span>
+                                        @string.Join(" ", new[]
+                                        {
+                                            Model.UserAccount.Profile.FirstName,
+                                            Model.UserAccount.Profile.MiddleName,
+                                            Model.UserAccount.Profile.LastName
+                                        }.Where(s => !string.IsNullOrEmpty(s)))
+                                    </span>
+                                </div>
+                            }
+                            @if (!string.IsNullOrEmpty(Model.UserAccount.Profile?.Gender))
+                            {
+                                <div class="flex justify-between">
+                                    <span class="flex gap-2">
+                                        <span class="mdi mdi-human-non-binary"></span> Gender
+                                    </span>
+                                    <span>
+                                        @Model.UserAccount.Profile.Gender
+                                        @if (!string.IsNullOrEmpty(Model.UserAccount.Profile?.Pronouns))
+                                        {
+                                            <span class="text-base-content/50">·</span>
+                                            @Model.UserAccount.Profile.Pronouns
+                                        }
+                                    </span>
+                                </div>
+                            }
+                            <div class="flex justify-between">
+                                <span class="flex gap-2">
+                                    <span class="mdi mdi-history"></span> Joined at
+                                </span>
+                                <span>
+                                    @Model.UserAccount.CreatedAt?.ToDateTimeOffset().ToString("MMMM d, yyyy")
+                                </span>
+                            </div>
+                            @if (Model.UserAccount.Profile?.Birthday != null)
+                            {
+                                <div class="flex justify-between">
+                                    <span class="flex gap-2">
+                                        <span class="mdi mdi-cake-variant"></span> Birthday
+                                    </span>
+                                    <span>
+                                        @Model.CalculateAge(Model.UserAccount.Profile.Birthday.ToInstant()) yrs old
+                                        <span class="text-base-content/50">·</span>
+                                        @Model.UserAccount.Profile.Birthday?.ToDateTimeOffset().ToString("MMMM d")
+                                    </span>
+                                </div>
+                            }
+                        </div>
+                    </div>
+                </div>
+
+                @if (Model.UserAccount.PerkSubscription != null)
+                {
+                    <div class="card bg-base-100 border">
+                        <div class="card-body">
+                            <div class="flex justify-between items-center">
+                                <div class="flex flex-col">
+                                    <div class="text-xl font-bold">
+                                        @Model.GetPerkInfo(Model.UserAccount.PerkSubscription.Identifier).Name Tier
+                                    </div>
+                                    <div class="text-sm text-base-content/70">Stellar Program Member</div>
+                                </div>
+                                <div class="text-4xl"
+                                     style="color: @Model.GetPerkInfo(Model.UserAccount.PerkSubscription.Identifier).Color">
+                                    ★
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                }
+
+                <div class="card bg-base-100 border">
+                    <div class="card-body">
+                        <div class="flex justify-between mb-2">
+                            <div>Level @Model.UserAccount.Profile?.Level</div>
+                            <div>@Model.UserAccount.Profile?.Experience XP</div>
+                        </div>
+                        <progress class="progress progress-success"
+                                  value="@(Model.UserAccount.Profile?.LevelingProgress ?? 0)" max="1"></progress>
+                    </div>
+                </div>
+            </div>
+
+
+            @if (Model.UserAccount.Profile?.Links.Count > 0)
+            {
+                <div>
+                    <div class="card bg-base-100 border">
+                        <div class="card-body">
+                            <h2 class="card-title">
+                                <span class="mdi mdi-link-variant"></span> Links
+                            </h2>
+                            <ul class="list pt-2">
+                                @foreach (var link in Model.UserAccount.Profile.Links)
+                                {
+                                    <li class="list-row p-0">
+                                        <div class="list-col-grow">
+                                            <div>@(link.Name)</div>
+                                            <div class="text-xs font-semibold opacity-60">@(link.Url)</div>
+                                        </div>
+                                        <a class="btn btn-square btn-ghost" href="@link.Url" target="_blank">
+                                            <span class="mdi mdi-launch"></span>
+                                        </a>
+                                    </li>
+                                }
+                            </ul>
+                        </div>
+                    </div>
+                </div>
+            }
+            
+            @if (Model.UserAccount.Contacts.Count > 0)
+            {
+                <div>
+                    <div class="card bg-base-100 border">
+                        <div class="card-body">
+                            <h2 class="card-title">
+                                <span class="mdi mdi-link-variant"></span> Links
+                            </h2>
+                            <ul class="list pt-2">
+                                @foreach (var contact in Model.UserAccount.Contacts)
+                                {
+                                    <li class="list-row p-0" x-data="{ content: '@contact.Content' }">
+                                        <div class="list-col-grow">
+                                            <div>@(contact.Content)</div>
+                                            <div class="text-xs font-semibold opacity-60">@(contact.Type.ToString())</div>
+                                        </div>
+                                        <button class="btn btn-square btn-ghost" x-clipboard="content">
+                                            <span class="mdi mdi-content-copy"></span>
+                                        </button>
+                                    </li>
+                                }
+                            </ul>
+                        </div>
+                    </div>
+                </div>
+            }
+
+            <div>
+                @if (!string.IsNullOrEmpty(Model.HtmlBio))
+                {
+                    <div class="card bg-base-100 border">
+                        <div class="card-body">
+                            <h2 class="card-title">
+                                <span class="mdi mdi-information"></span> Bio
+                            </h2>
+                            <div class="prose prose-sm max-w-none">
+                                @Html.Raw(Model.HtmlBio)
+                            </div>
+                        </div>
+                    </div>
+                }
+            </div>
+        </div>
+    </div>
+}
+else
+{
+    <div class="hero min-h-[50vh]">
+        <div class="hero-content text-center">
+            <div>
+                <div class="text-6xl mb-4">
+                    <span class="mdi mdi-account"></span>
+                </div>
+                <h1 class="text-3xl font-bold">User not found</h1>
+                <p class="py-6">The user profile you're trying to access is not found.</p>
+            </div>
+        </div>
+    </div>
+}

DysonNetwork.Zone/Pages/About.cshtml.cs

@@ -0,0 +1,89 @@
+using DysonNetwork.Shared.Models;
+using DysonNetwork.Shared.Proto;
+using DysonNetwork.Shared.Registry;
+using DysonNetwork.Zone.Publication;
+using Markdig;
+using Microsoft.AspNetCore.Mvc.RazorPages;
+using NodaTime;
+
+
+namespace DysonNetwork.Zone.Pages;
+
+public class AboutModel(RemoteAccountService ras) : PageModel
+{
+    public SnPublicationSite? Site { get; set; }
+    public Account? UserAccount { get; set; }
+    public string? HtmlBio { get; set; }
+
+    public string? UserPictureUrl => UserAccount?.Profile?.Picture?.Id != null
+        ? $"/drive/files/{UserAccount.Profile.Picture.Id}"
+        : null;
+
+    public string? UserBackgroundUrl => UserAccount?.Profile?.Background?.Id != null
+        ? $"/drive/files/{UserAccount.Profile.Background.Id}?original=true"
+        : null;
+
+    public async Task OnGetAsync()
+    {
+        Site = HttpContext.Items[PublicationSiteMiddleware.SiteContextKey] as SnPublicationSite;
+        if (Site != null)
+        {
+            UserAccount = await ras.GetAccount(Site.AccountId);
+
+            if (UserAccount?.Profile?.Bio != null)
+            {
+                var pipeline = new MarkdownPipelineBuilder().Build();
+                HtmlBio = Markdown.ToHtml(UserAccount.Profile.Bio, pipeline);
+            }
+        }
+    }
+
+    public int CalculateAge(Instant birthday)
+    {
+        var birthDate = birthday.ToDateTimeOffset();
+        var today = DateTimeOffset.Now;
+        var age = today.Year - birthDate.Year;
+        if (birthDate > today.AddYears(-age)) age--;
+        return age;
+    }
+
+    public string GetOffsetUtcString(string targetTimeZone)
+    {
+        try
+        {
+            var tz = TimeZoneInfo.FindSystemTimeZoneById(targetTimeZone);
+            var offset = tz.GetUtcOffset(DateTimeOffset.Now);
+            var sign = offset >= TimeSpan.Zero ? "+" : "-";
+            return $"{sign}{Math.Abs(offset.Hours):D2}:{Math.Abs(offset.Minutes):D2}";
+        }
+        catch
+        {
+            return "+00:00";
+        }
+    }
+
+    public string GetCurrentTimeInTimeZone(string targetTimeZone)
+    {
+        try
+        {
+            var tz = TimeZoneInfo.FindSystemTimeZoneById(targetTimeZone);
+            var now = TimeZoneInfo.ConvertTime(DateTimeOffset.Now, tz);
+            return now.ToString("t", System.Globalization.CultureInfo.InvariantCulture);
+        }
+        catch
+        {
+            return DateTime.Now.ToString("t", System.Globalization.CultureInfo.InvariantCulture);
+        }
+    }
+
+    public (string Name, string Color) GetPerkInfo(string identifier)
+    {
+        return identifier switch
+        {
+            "solian.stellar.primary" => ("Stellar", "#2196f3"),
+            "solian.stellar.nova" => ("Nova", "#39c5bb"),
+            "solian.stellar.supernova" => ("Supernova", "#ffc109"),
+            _ => ("Unknown", "#2196f3")
+        };
+    }
+}

DysonNetwork.Zone/Pages/Index.cshtml

@@ -1,10 +1,12 @@
 @page
 @model IndexModel
+
 @{
+    Layout = "_LayoutContained";
     ViewData["Title"] = "Solar Network Pages";
 }
 
-<div class="h-screen flex justify-center items-center">
+<div class="h-full flex justify-center items-center">
     <div class="text-center max-w-96">
         <img src="~/favicon.png" width="80" height="80" alt="Logo" class="mb-1 mx-auto"/>
         <h1 class="text-2xl">Hello World 👋</h1>

DysonNetwork.Zone/Pages/Shared/_Layout.cshtml

@@ -6,6 +6,8 @@
     <title>@ViewData["Title"]</title>
     <script type="importmap"></script>
     <script defer src="https://cdn.jsdelivr.net/npm/alpinejs@3.x.x/dist/cdn.min.js"></script>
+    <script src="https://cdn.jsdelivr.net/npm/@@ryangjchandler/alpine-clipboard@2.x.x/dist/alpine-clipboard.js" defer></script>
+    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@@mdi/font@7.4.47/css/materialdesignicons.min.css" />
     <link rel="stylesheet" href="~/css/site.dist.css" asp-append-version="true"/>
     <link rel="stylesheet" href="~/DysonNetwork.Zone.styles.css" asp-append-version="true"/>
     <link rel="icon" type="image/png" href="~/favicon.png" />

DysonNetwork.Zone/Pages/Shared/_LayoutContained.cshtml

@@ -0,0 +1,37 @@
+@using DysonNetwork.Zone.Publication
+@using DysonNetwork.Shared.Models
+@{
+    Layout = "_Layout";
+    var site = Context.Items[PublicationSiteMiddleware.SiteContextKey] as SnPublicationSite;
+    var siteDisplayName = site?.Name ?? "Solar Network";
+}
+
+<div class="navbar backdrop-blur-md bg-white/1 shadow-xl px-5">
+  <div class="flex-1">
+    <a class="btn btn-ghost text-xl" asp-page="/Index">@siteDisplayName</a>
+  </div>
+  <div class="flex-none">
+    <ul class="menu menu-horizontal px-1">
+      <li><a>Posts</a></li>
+      <li><a asp-page="/About">About</a></li>
+    </ul>
+  </div>
+</div>
+
+<main class="content-main">
+    @RenderBody()
+</main>
+
+<style>
+    .navbar {
+        height: 64px;
+        position: fixed;
+        top: 0;
+        left: 0;
+        right: 0;
+    }
+    .content-main {
+        height: calc(100vh - 64px);
+        margin-top: 64px;
+    }
+</style>

DysonNetwork.Zone/Program.cs

@@ -26,6 +26,8 @@ builder.Services.AddRingService();
 builder.Services.AddAccountService();
 builder.Services.AddSphereService();
 
+builder.Services.Configure<RouteOptions>(options => { options.LowercaseUrls = true; });
+
 builder.AddSwaggerManifest(
     "DysonNetwork.Zone",
     "The zone service in the Solar Network."