From 98d9535e61a5a00f91970ea82c586060bf197f16 Mon Sep 17 00:00:00 2001
From: zguiyang <zhaoguiyang18@outlook.com>
Date: Fri, 13 Mar 2026 15:37:35 +0800
Subject: [PATCH] refactor(layout): unify inner-page typography rhythm with
 container-based widths

---
 src/components/ui/Container.astro |  2 +-
 src/layouts/AboutLayout.astro     |  6 +++---
 src/layouts/BlogPostLayout.astro  |  6 +++---
 src/pages/blog/index.astro        |  4 ++--
 src/pages/hire.astro              | 16 ++++++++--------
 src/pages/now.astro               | 12 ++++++------
 src/pages/projects.astro          |  4 ++--
 src/pages/zh/blog/index.astro     |  4 ++--
 src/pages/zh/hire.astro           | 16 ++++++++--------
 src/pages/zh/now.astro            | 12 ++++++------
 src/pages/zh/projects.astro       |  4 ++--
 src/styles/global.css             |  8 ++++++++
 12 files changed, 51 insertions(+), 43 deletions(-)

diff --git a/src/components/ui/Container.astro b/src/components/ui/Container.astro
index 6e83c6b..c17a73c 100644
--- a/src/components/ui/Container.astro
+++ b/src/components/ui/Container.astro
@@ -6,6 +6,6 @@ interface Props {
 const { className = "" } = Astro.props;
 ---
 
-<div class={`container mx-auto px-4 sm:px-6 lg:px-8 max-w-6xl ${className}`.trim()}>
+<div class={`container mx-auto px-4 sm:px-6 lg:px-8 ${className}`.trim()}>
   <slot />
 </div>
diff --git a/src/layouts/AboutLayout.astro b/src/layouts/AboutLayout.astro
index c1c71ab..e82dd94 100644
--- a/src/layouts/AboutLayout.astro
+++ b/src/layouts/AboutLayout.astro
@@ -31,7 +31,7 @@ const lang = Astro.currentLocale as Lang || defaultLang;
   <!-- Main content with proper spacing for fixed header -->
   <div class="pt-16 sm:pt-20">
     <Container className="py-8 md:py-12">
-      <div class="max-w-7xl mx-auto">
+      <div class="w-full">
         <div class="grid grid-cols-1 xl:grid-cols-4 gap-6 lg:gap-8">
           <!-- Main Content -->
           <main class="xl:col-span-3 order-2 xl:order-1">
@@ -42,14 +42,14 @@ const lang = Astro.currentLocale as Lang || defaultLang;
               </h1>
               
               {description && (
-                <p class="text-lg sm:text-xl text-muted-foreground mb-8 leading-relaxed max-w-4xl">
+                <p class="text-lg sm:text-xl text-muted-foreground mb-8 leading-relaxed page-content-main">
                   📝 {description}
                 </p>
               )}
             </header>
             
             <!-- About page content with typography styles -->
-            <article class="prose prose-lg dark:prose-invert max-w-none prose-headings:scroll-mt-24 prose-headings:font-bold prose-headings:tracking-tight prose-h1:text-2xl sm:prose-h1:text-3xl prose-h2:text-xl sm:prose-h2:text-2xl prose-h3:text-lg sm:prose-h3:text-xl prose-h4:text-base sm:prose-h4:text-lg prose-p:text-base sm:prose-p:text-lg prose-p:leading-relaxed prose-p:mb-6 prose-a:text-primary prose-a:no-underline hover:prose-a:underline prose-strong:text-foreground prose-code:text-sm prose-code:px-2 prose-code:py-1 prose-code:rounded prose-pre:bg-muted prose-pre:border prose-pre:text-sm prose-blockquote:border-l-primary prose-blockquote:bg-muted/30 prose-blockquote:text-base prose-li:text-base sm:prose-li:text-lg prose-li:leading-relaxed">
+            <article class="prose prose-lg dark:prose-invert prose-headings:scroll-mt-24 prose-headings:font-bold prose-headings:tracking-tight prose-h1:text-2xl sm:prose-h1:text-3xl prose-h2:text-xl sm:prose-h2:text-2xl prose-h3:text-lg sm:prose-h3:text-xl prose-h4:text-base sm:prose-h4:text-lg prose-p:text-base sm:prose-p:text-lg prose-p:leading-relaxed prose-p:mb-6 prose-a:text-primary prose-a:no-underline hover:prose-a:underline prose-strong:text-foreground prose-code:text-sm prose-code:px-2 prose-code:py-1 prose-code:rounded prose-pre:bg-muted prose-pre:border prose-pre:text-sm prose-blockquote:border-l-primary prose-blockquote:bg-muted/30 prose-blockquote:text-base prose-li:text-base sm:prose-li:text-lg prose-li:leading-relaxed">
               <slot />
             </article>
           </main>
diff --git a/src/layouts/BlogPostLayout.astro b/src/layouts/BlogPostLayout.astro
index a61db57..e650444 100644
--- a/src/layouts/BlogPostLayout.astro
+++ b/src/layouts/BlogPostLayout.astro
@@ -48,7 +48,7 @@ const finalReadingTime = readTime ? parseInt(readTime.replace(/\D/g, '')) : unde
   <!-- Main content with proper spacing for fixed header -->
   <div class="pt-16 sm:pt-20">
     <Container className="py-6 sm:py-8">
-      <div class="max-w-7xl mx-auto">
+      <div class="w-full">
         <div class="grid grid-cols-1 xl:grid-cols-4 gap-6 lg:gap-8">
           <!-- Main Content -->
           <main class="xl:col-span-3 order-2 xl:order-1">
@@ -88,14 +88,14 @@ const finalReadingTime = readTime ? parseInt(readTime.replace(/\D/g, '')) : unde
               </h1>
               
               {description && (
-                <p class="text-lg sm:text-xl text-muted-foreground mb-8 leading-relaxed max-w-4xl">
+                <p class="text-lg sm:text-xl text-muted-foreground mb-8 leading-relaxed page-content-main">
                   {description}
                 </p>
               )}
             </header>
             
             <!-- Blog post content with typography styles -->
-            <article class="prose prose-lg dark:prose-invert max-w-none prose-headings:scroll-mt-24 prose-headings:font-bold prose-headings:tracking-tight prose-h1:text-2xl sm:prose-h1:text-3xl prose-h2:text-xl sm:prose-h2:text-2xl prose-h3:text-lg sm:prose-h3:text-xl prose-h4:text-base sm:prose-h4:text-lg prose-p:text-base sm:prose-p:text-lg prose-p:leading-relaxed prose-p:mb-6 prose-a:text-primary prose-a:no-underline hover:prose-a:underline prose-strong:text-foreground prose-code:text-sm prose-code:px-2 prose-code:py-1 prose-code:rounded prose-pre:bg-muted prose-pre:border prose-pre:text-sm prose-blockquote:border-l-primary prose-blockquote:bg-muted/30 prose-blockquote:text-base prose-li:text-base sm:prose-li:text-lg prose-li:leading-relaxed
+            <article class="prose prose-lg dark:prose-invert prose-headings:scroll-mt-24 prose-headings:font-bold prose-headings:tracking-tight prose-h1:text-2xl sm:prose-h1:text-3xl prose-h2:text-xl sm:prose-h2:text-2xl prose-h3:text-lg sm:prose-h3:text-xl prose-h4:text-base sm:prose-h4:text-lg prose-p:text-base sm:prose-p:text-lg prose-p:leading-relaxed prose-p:mb-6 prose-a:text-primary prose-a:no-underline hover:prose-a:underline prose-strong:text-foreground prose-code:text-sm prose-code:px-2 prose-code:py-1 prose-code:rounded prose-pre:bg-muted prose-pre:border prose-pre:text-sm prose-blockquote:border-l-primary prose-blockquote:bg-muted/30 prose-blockquote:text-base prose-li:text-base sm:prose-li:text-lg prose-li:leading-relaxed
             prose-code:before:content-none prose-code:after:content-none">
               <slot />
             </article>
diff --git a/src/pages/blog/index.astro b/src/pages/blog/index.astro
index 9baa66e..988d308 100644
--- a/src/pages/blog/index.astro
+++ b/src/pages/blog/index.astro
@@ -51,7 +51,7 @@ const sortedBlogPosts = sortPostsByDate(blogPosts);
         <h1 class="text-5xl md:text-6xl font-bold bg-gradient-to-r from-foreground via-primary to-primary dark:from-foreground dark:via-blue-200 dark:to-orange-300 bg-clip-text text-transparent mb-6">
           <span class="text-primary">Blog</span>
         </h1>
-        <p class="text-xl text-muted-foreground max-w-3xl mx-auto">
+        <p class="text-xl text-muted-foreground page-content-main">
           Thoughts on AI products, full-stack development, and building in public. Exploring the intersection of technology and product building.
         </p>
       </div>
@@ -74,7 +74,7 @@ const sortedBlogPosts = sortPostsByDate(blogPosts);
           <BlogList posts={sortedBlogPosts} lang="en" />
         </div>
       </div>
-    </div>
+    </Container>
   </main>
 </BlogLayout>
 
diff --git a/src/pages/hire.astro b/src/pages/hire.astro
index 4b3cd0f..8dca36e 100644
--- a/src/pages/hire.astro
+++ b/src/pages/hire.astro
@@ -27,7 +27,7 @@ const pageTitle = lang === 'zh' ? '合作' : 'Hire Me';
           <h1 class="page-title-gradient text-5xl md:text-6xl font-bold mb-6">
             {lang === 'zh' ? '合作' : 'Hire Me'}
           </h1>
-          <p class="text-lg text-muted-foreground max-w-2xl mx-auto">
+          <p class="text-lg text-muted-foreground page-content-narrow">
             {lang === 'zh'
               ? '构建优秀产品，从找到合适的技术合伙人开始'
               : 'Building great products starts with finding the right technical partner'}
@@ -39,7 +39,7 @@ const pageTitle = lang === 'zh' ? '合作' : 'Hire Me';
     <!-- Who I Work With -->
     <section class="py-16 relative">
       <Container>
-        <div class="max-w-4xl mx-auto">
+        <div class="page-content-main">
           <div class="flex items-center gap-4 mb-8">
             <div class="w-12 h-12 bg-primary/20 rounded-xl flex items-center justify-center">
               <span class="text-2xl">👥</span>
@@ -101,7 +101,7 @@ const pageTitle = lang === 'zh' ? '合作' : 'Hire Me';
     <!-- What I Build -->
     <section class="py-16 relative page-section-soft">
       <Container>
-        <div class="max-w-4xl mx-auto">
+        <div class="page-content-main">
           <div class="flex items-center gap-4 mb-8">
             <div class="w-12 h-12 bg-blue-500/20 rounded-xl flex items-center justify-center">
               <span class="text-2xl">🛠️</span>
@@ -167,7 +167,7 @@ const pageTitle = lang === 'zh' ? '合作' : 'Hire Me';
     <!-- Engagement Models -->
     <section class="py-16 relative">
       <Container>
-        <div class="max-w-4xl mx-auto">
+        <div class="page-content-main">
           <div class="flex items-center gap-4 mb-8">
             <div class="w-12 h-12 bg-green-500/20 rounded-xl flex items-center justify-center">
               <span class="text-2xl">📋</span>
@@ -227,7 +227,7 @@ const pageTitle = lang === 'zh' ? '合作' : 'Hire Me';
     <!-- Delivery Style -->
     <section class="py-16 relative page-section-soft">
       <Container>
-        <div class="max-w-4xl mx-auto">
+        <div class="page-content-main">
           <div class="flex items-center gap-4 mb-8">
             <div class="w-12 h-12 bg-yellow-500/20 rounded-xl flex items-center justify-center">
               <span class="text-2xl">🎯</span>
@@ -300,7 +300,7 @@ const pageTitle = lang === 'zh' ? '合作' : 'Hire Me';
     <!-- Availability -->
     <section class="py-16 relative">
       <Container>
-        <div class="max-w-4xl mx-auto">
+        <div class="page-content-main">
           <div class="flex items-center gap-4 mb-8">
             <div class="w-12 h-12 bg-red-500/20 rounded-xl flex items-center justify-center">
               <span class="text-2xl">📅</span>
@@ -341,11 +341,11 @@ const pageTitle = lang === 'zh' ? '合作' : 'Hire Me';
     <!-- Contact CTA -->
     <section class="py-16 relative page-section-soft">
       <Container>
-        <div class="max-w-4xl mx-auto text-center">
+        <div class="page-content-main text-center">
           <h2 class="text-3xl font-bold mb-6">
             {lang === 'zh' ? '准备好一起构建了吗？' : 'Ready to build together?'}
           </h2>
-          <p class="text-lg text-muted-foreground mb-8 max-w-xl mx-auto">
+          <p class="text-lg text-muted-foreground mb-8 page-content-narrow">
             {lang === 'zh'
               ? '告诉我你的项目想法，让我们看看能否合作。'
               : "Tell me about your project idea and let's see if we can work together."}
diff --git a/src/pages/now.astro b/src/pages/now.astro
index eb3e352..9ef1d35 100644
--- a/src/pages/now.astro
+++ b/src/pages/now.astro
@@ -27,7 +27,7 @@ const pageTitle = lang === 'zh' ? '现在' : 'Now';
           <h1 class="page-title-gradient text-5xl md:text-6xl font-bold mb-6">
             {lang === 'zh' ? '现在' : 'Now'}
           </h1>
-          <p class="text-lg text-muted-foreground max-w-2xl mx-auto">
+          <p class="text-lg text-muted-foreground page-content-narrow">
             {lang === 'zh'
               ? '持续更新我的现状、正在构建的内容以及合作机会'
               : 'Continuously updating my current status, what I am building, and collaboration opportunities'}
@@ -39,7 +39,7 @@ const pageTitle = lang === 'zh' ? '现在' : 'Now';
     <!-- Building Section -->
     <section class="py-16 relative">
       <Container>
-        <div class="max-w-4xl mx-auto">
+        <div class="page-content-main">
           <div class="flex items-center gap-4 mb-8">
             <div class="w-12 h-12 bg-primary/20 rounded-xl flex items-center justify-center">
               <span class="text-2xl">🔨</span>
@@ -76,7 +76,7 @@ const pageTitle = lang === 'zh' ? '现在' : 'Now';
     <!-- Exploring Section -->
     <section class="py-16 relative page-section-soft">
       <Container>
-        <div class="max-w-4xl mx-auto">
+        <div class="page-content-main">
           <div class="flex items-center gap-4 mb-8">
             <div class="w-12 h-12 bg-blue-500/20 rounded-xl flex items-center justify-center">
               <span class="text-2xl">🔭</span>
@@ -116,7 +116,7 @@ const pageTitle = lang === 'zh' ? '现在' : 'Now';
     <!-- Shipping Section -->
     <section class="py-16 relative">
       <Container>
-        <div class="max-w-4xl mx-auto">
+        <div class="page-content-main">
           <div class="flex items-center gap-4 mb-8">
             <div class="w-12 h-12 bg-green-500/20 rounded-xl flex items-center justify-center">
               <span class="text-2xl">🚀</span>
@@ -150,7 +150,7 @@ const pageTitle = lang === 'zh' ? '现在' : 'Now';
     <!-- Open to Collaborate Section -->
     <section class="py-16 relative bg-gradient-to-br from-blue-900/10 to-blue-900/10 dark:from-blue-900/20 dark:to-blue-900/20">
       <Container>
-        <div class="max-w-4xl mx-auto text-center">
+        <div class="page-content-main text-center">
           <div class="flex items-center justify-center gap-4 mb-8">
             <div class="w-12 h-12 bg-yellow-500/20 rounded-xl flex items-center justify-center">
               <span class="text-2xl">🤝</span>
@@ -190,7 +190,7 @@ const pageTitle = lang === 'zh' ? '现在' : 'Now';
     <!-- Last Updated -->
     <section class="py-12">
       <Container>
-        <div class="max-w-4xl mx-auto text-center">
+        <div class="page-content-main text-center">
           <p class="text-sm text-muted-foreground">
             {lang === 'zh' ? '最后更新：' : 'Last updated: '}
             <span class="font-medium">2025年3月</span>
diff --git a/src/pages/projects.astro b/src/pages/projects.astro
index 43663b1..6d4fb9a 100644
--- a/src/pages/projects.astro
+++ b/src/pages/projects.astro
@@ -44,7 +44,7 @@ const statusClassMap = {
           <h1 class="page-title-gradient text-5xl md:text-6xl font-bold mb-6">
             {t('projects.title')}
           </h1>
-          <p class="text-lg text-muted-foreground max-w-3xl mx-auto mb-12 leading-relaxed">
+          <p class="text-lg text-muted-foreground page-content-main mb-12 leading-relaxed">
             {t('projects.slogan')} {t('projects.description')}
           </p>
         </div>
@@ -53,7 +53,7 @@ const statusClassMap = {
 
     <section class="relative z-10 pb-20" data-projects-root>
       <Container>
-        <div class="max-w-5xl mx-auto">
+        <div class="page-content-main">
           <div class="page-surface flex flex-wrap gap-2 mb-8 p-1 rounded-xl">
             {filterOptions.map((option, index) => (
               <button
diff --git a/src/pages/zh/blog/index.astro b/src/pages/zh/blog/index.astro
index e4120a9..84df063 100644
--- a/src/pages/zh/blog/index.astro
+++ b/src/pages/zh/blog/index.astro
@@ -63,7 +63,7 @@ const tags = extractTags(allPostsArray);
         <h1 class="text-5xl md:text-6xl font-bold bg-gradient-to-r from-foreground via-primary to-primary dark:from-foreground dark:via-blue-200 dark:to-orange-300 bg-clip-text text-transparent mb-6">
           <span class="text-primary">博客</span>
         </h1>
-        <p class="text-xl text-muted-foreground max-w-3xl mx-auto">
+        <p class="text-xl text-muted-foreground page-content-main">
           关于 AI 产品、全栈开发和公开构建的思考。探索技术与产品构建的交汇点。
         </p>
       </div>
@@ -87,7 +87,7 @@ const tags = extractTags(allPostsArray);
           <BlogList posts={sortedBlogPosts} lang="zh" />
         </div>
       </div>
-    </div>
+    </Container>
   </main>
 </BlogLayout>
 
diff --git a/src/pages/zh/hire.astro b/src/pages/zh/hire.astro
index 1866e8e..278f457 100644
--- a/src/pages/zh/hire.astro
+++ b/src/pages/zh/hire.astro
@@ -27,7 +27,7 @@ const pageTitle = lang === 'zh' ? '合作' : 'Hire Me';
           <h1 class="page-title-gradient text-5xl md:text-6xl font-bold mb-6">
             合作
           </h1>
-          <p class="text-lg text-muted-foreground max-w-2xl mx-auto">
+          <p class="text-lg text-muted-foreground page-content-narrow">
             构建优秀产品，从找到合适的技术合伙人开始
           </p>
         </div>
@@ -37,7 +37,7 @@ const pageTitle = lang === 'zh' ? '合作' : 'Hire Me';
     <!-- Who I Work With -->
     <section class="py-16 relative">
       <Container>
-        <div class="max-w-4xl mx-auto">
+        <div class="page-content-main">
           <div class="flex items-center gap-4 mb-8">
             <div class="w-12 h-12 bg-primary/20 rounded-xl flex items-center justify-center">
               <span class="text-2xl">👥</span>
@@ -91,7 +91,7 @@ const pageTitle = lang === 'zh' ? '合作' : 'Hire Me';
     <!-- What I Build -->
     <section class="py-16 relative page-section-soft">
       <Container>
-        <div class="max-w-4xl mx-auto">
+        <div class="page-content-main">
           <div class="flex items-center gap-4 mb-8">
             <div class="w-12 h-12 bg-blue-500/20 rounded-xl flex items-center justify-center">
               <span class="text-2xl">🛠️</span>
@@ -151,7 +151,7 @@ const pageTitle = lang === 'zh' ? '合作' : 'Hire Me';
     <!-- Engagement Models -->
     <section class="py-16 relative">
       <Container>
-        <div class="max-w-4xl mx-auto">
+        <div class="page-content-main">
           <div class="flex items-center gap-4 mb-8">
             <div class="w-12 h-12 bg-green-500/20 rounded-xl flex items-center justify-center">
               <span class="text-2xl">📋</span>
@@ -205,7 +205,7 @@ const pageTitle = lang === 'zh' ? '合作' : 'Hire Me';
     <!-- Delivery Style -->
     <section class="py-16 relative page-section-soft">
       <Container>
-        <div class="max-w-4xl mx-auto">
+        <div class="page-content-main">
           <div class="flex items-center gap-4 mb-8">
             <div class="w-12 h-12 bg-yellow-500/20 rounded-xl flex items-center justify-center">
               <span class="text-2xl">🎯</span>
@@ -262,7 +262,7 @@ const pageTitle = lang === 'zh' ? '合作' : 'Hire Me';
     <!-- Availability -->
     <section class="py-16 relative">
       <Container>
-        <div class="max-w-4xl mx-auto">
+        <div class="page-content-main">
           <div class="flex items-center gap-4 mb-8">
             <div class="w-12 h-12 bg-red-500/20 rounded-xl flex items-center justify-center">
               <span class="text-2xl">📅</span>
@@ -301,11 +301,11 @@ const pageTitle = lang === 'zh' ? '合作' : 'Hire Me';
     <!-- Contact CTA -->
     <section class="py-16 relative page-section-soft">
       <Container>
-        <div class="max-w-4xl mx-auto text-center">
+        <div class="page-content-main text-center">
           <h2 class="text-3xl font-bold mb-6">
             准备好一起构建了吗？
           </h2>
-          <p class="text-lg text-muted-foreground mb-8 max-w-xl mx-auto">
+          <p class="text-lg text-muted-foreground mb-8 page-content-narrow">
             告诉我你的项目想法，让我们看看能否合作。
           </p>
           <div class="flex flex-col sm:flex-row gap-4 justify-center">
diff --git a/src/pages/zh/now.astro b/src/pages/zh/now.astro
index 2ab363a..aa474d7 100644
--- a/src/pages/zh/now.astro
+++ b/src/pages/zh/now.astro
@@ -27,7 +27,7 @@ const pageTitle = lang === 'zh' ? '现在' : 'Now';
           <h1 class="page-title-gradient text-5xl md:text-6xl font-bold mb-6">
             现在
           </h1>
-          <p class="text-lg text-muted-foreground max-w-2xl mx-auto">
+          <p class="text-lg text-muted-foreground page-content-narrow">
             持续更新我的现状、正在构建的内容以及合作机会
           </p>
         </div>
@@ -37,7 +37,7 @@ const pageTitle = lang === 'zh' ? '现在' : 'Now';
     <!-- Building Section -->
     <section class="py-16 relative">
       <Container>
-        <div class="max-w-4xl mx-auto">
+        <div class="page-content-main">
           <div class="flex items-center gap-4 mb-8">
             <div class="w-12 h-12 bg-primary/20 rounded-xl flex items-center justify-center">
               <span class="text-2xl">🔨</span>
@@ -72,7 +72,7 @@ const pageTitle = lang === 'zh' ? '现在' : 'Now';
     <!-- Exploring Section -->
     <section class="py-16 relative page-section-soft">
       <Container>
-        <div class="max-w-4xl mx-auto">
+        <div class="page-content-main">
           <div class="flex items-center gap-4 mb-8">
             <div class="w-12 h-12 bg-blue-500/20 rounded-xl flex items-center justify-center">
               <span class="text-2xl">🔭</span>
@@ -108,7 +108,7 @@ const pageTitle = lang === 'zh' ? '现在' : 'Now';
     <!-- Shipping Section -->
     <section class="py-16 relative">
       <Container>
-        <div class="max-w-4xl mx-auto">
+        <div class="page-content-main">
           <div class="flex items-center gap-4 mb-8">
             <div class="w-12 h-12 bg-green-500/20 rounded-xl flex items-center justify-center">
               <span class="text-2xl">🚀</span>
@@ -140,7 +140,7 @@ const pageTitle = lang === 'zh' ? '现在' : 'Now';
     <!-- Open to Collaborate Section -->
     <section class="py-16 relative bg-gradient-to-br from-blue-900/10 to-blue-900/10 dark:from-blue-900/20 dark:to-blue-900/20">
       <Container>
-        <div class="max-w-4xl mx-auto text-center">
+        <div class="page-content-main text-center">
           <div class="flex items-center justify-center gap-4 mb-8">
             <div class="w-12 h-12 bg-yellow-500/20 rounded-xl flex items-center justify-center">
               <span class="text-2xl">🤝</span>
@@ -178,7 +178,7 @@ const pageTitle = lang === 'zh' ? '现在' : 'Now';
     <!-- Last Updated -->
     <section class="py-12">
       <Container>
-        <div class="max-w-4xl mx-auto text-center">
+        <div class="page-content-main text-center">
           <p class="text-sm text-muted-foreground">
             最后更新：
             <span class="font-medium">2025年3月</span>
diff --git a/src/pages/zh/projects.astro b/src/pages/zh/projects.astro
index 43663b1..6d4fb9a 100644
--- a/src/pages/zh/projects.astro
+++ b/src/pages/zh/projects.astro
@@ -44,7 +44,7 @@ const statusClassMap = {
           <h1 class="page-title-gradient text-5xl md:text-6xl font-bold mb-6">
             {t('projects.title')}
           </h1>
-          <p class="text-lg text-muted-foreground max-w-3xl mx-auto mb-12 leading-relaxed">
+          <p class="text-lg text-muted-foreground page-content-main mb-12 leading-relaxed">
             {t('projects.slogan')} {t('projects.description')}
           </p>
         </div>
@@ -53,7 +53,7 @@ const statusClassMap = {
 
     <section class="relative z-10 pb-20" data-projects-root>
       <Container>
-        <div class="max-w-5xl mx-auto">
+        <div class="page-content-main">
           <div class="page-surface flex flex-wrap gap-2 mb-8 p-1 rounded-xl">
             {filterOptions.map((option, index) => (
               <button
diff --git a/src/styles/global.css b/src/styles/global.css
index dfd552f..6a7b75b 100644
--- a/src/styles/global.css
+++ b/src/styles/global.css
@@ -237,6 +237,14 @@
     background: var(--ui-section-soft-bg);
   }
 
+  .page-content-main {
+    @apply w-full lg:w-10/12 lg:mx-auto;
+  }
+
+  .page-content-narrow {
+    @apply w-full lg:w-8/12 lg:mx-auto;
+  }
+
   .animate-fade-in {
     animation: fadeIn 0.6s ease-out forwards;
   }