zgy/zhaoguiyang.site
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

refactor(layout): unify inner-page typography rhythm with container-based widths

Browse Source
This commit is contained in:
zguiyang
2026-03-13 15:37:35 +08:00
parent e2eb43e24c
commit 98d9535e61
12 changed files with 51 additions and 43 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
src/components/ui/Container.astro
View File

@@ -6,6 +6,6 @@ interface Props {
const { className = "" } = Astro.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 /> <slot />
</div> </div>

6
src/layouts/AboutLayout.astro
View File

@@ -31,7 +31,7 @@ const lang = Astro.currentLocale as Lang || defaultLang;
<!-- Main content with proper spacing for fixed header --> <!-- Main content with proper spacing for fixed header -->
<div class="pt-16 sm:pt-20"> <div class="pt-16 sm:pt-20">
<Container className="py-8 md:py-12"> <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"> <div class="grid grid-cols-1 xl:grid-cols-4 gap-6 lg:gap-8">
<!-- Main Content --> <!-- Main Content -->
<main class="xl:col-span-3 order-2 xl:order-1"> <main class="xl:col-span-3 order-2 xl:order-1">
@@ -42,14 +42,14 @@ const lang = Astro.currentLocale as Lang || defaultLang;
</h1> </h1>
{description && ( {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} 📝 {description}
</p> </p>
)} )}
</header> </header>
<!-- About page content with typography styles --> <!-- 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 /> <slot />
</article> </article>
</main> </main>

6
src/layouts/BlogPostLayout.astro
View File

@@ -48,7 +48,7 @@ const finalReadingTime = readTime ? parseInt(readTime.replace(/\D/g, '')) : unde
<!-- Main content with proper spacing for fixed header --> <!-- Main content with proper spacing for fixed header -->
<div class="pt-16 sm:pt-20"> <div class="pt-16 sm:pt-20">
<Container className="py-6 sm:py-8"> <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"> <div class="grid grid-cols-1 xl:grid-cols-4 gap-6 lg:gap-8">
<!-- Main Content --> <!-- Main Content -->
<main class="xl:col-span-3 order-2 xl:order-1"> <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> </h1>
{description && ( {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} {description}
</p> </p>
)} )}
</header> </header>
<!-- Blog post content with typography styles --> <!-- 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"> prose-code:before:content-none prose-code:after:content-none">
<slot /> <slot />
</article> </article>

4
src/pages/blog/index.astro
View File

@@ -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"> <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> <span class="text-primary">Blog</span>
</h1> </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. Thoughts on AI products, full-stack development, and building in public. Exploring the intersection of technology and product building.
</p> </p>
</div> </div>
@@ -74,7 +74,7 @@ const sortedBlogPosts = sortPostsByDate(blogPosts);
<BlogList posts={sortedBlogPosts} lang="en" /> <BlogList posts={sortedBlogPosts} lang="en" />
</div> </div>
</div> </div>
</div> </Container>
</main> </main>
</BlogLayout> </BlogLayout>

16
src/pages/hire.astro
View File

@@ -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 class="page-title-gradient text-5xl md:text-6xl font-bold mb-6">
{lang === 'zh' ? '合作' : 'Hire Me'} {lang === 'zh' ? '合作' : 'Hire Me'}
</h1> </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' {lang === 'zh'
? '构建优秀产品，从找到合适的技术合伙人开始' ? '构建优秀产品，从找到合适的技术合伙人开始'
: 'Building great products starts with finding the right technical partner'} : 'Building great products starts with finding the right technical partner'}
@@ -39,7 +39,7 @@ const pageTitle = lang === 'zh' ? '合作' : 'Hire Me';
<!-- Who I Work With --> <!-- Who I Work With -->
<section class="py-16 relative"> <section class="py-16 relative">
<Container> <Container>
<div class="max-w-4xl mx-auto"> <div class="page-content-main">
<div class="flex items-center gap-4 mb-8"> <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"> <div class="w-12 h-12 bg-primary/20 rounded-xl flex items-center justify-center">
<span class="text-2xl">👥</span> <span class="text-2xl">👥</span>
@@ -101,7 +101,7 @@ const pageTitle = lang === 'zh' ? '合作' : 'Hire Me';
<!-- What I Build --> <!-- What I Build -->
<section class="py-16 relative page-section-soft"> <section class="py-16 relative page-section-soft">
<Container> <Container>
<div class="max-w-4xl mx-auto"> <div class="page-content-main">
<div class="flex items-center gap-4 mb-8"> <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"> <div class="w-12 h-12 bg-blue-500/20 rounded-xl flex items-center justify-center">
<span class="text-2xl">🛠️</span> <span class="text-2xl">🛠️</span>
@@ -167,7 +167,7 @@ const pageTitle = lang === 'zh' ? '合作' : 'Hire Me';
<!-- Engagement Models --> <!-- Engagement Models -->
<section class="py-16 relative"> <section class="py-16 relative">
<Container> <Container>
<div class="max-w-4xl mx-auto"> <div class="page-content-main">
<div class="flex items-center gap-4 mb-8"> <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"> <div class="w-12 h-12 bg-green-500/20 rounded-xl flex items-center justify-center">
<span class="text-2xl">📋</span> <span class="text-2xl">📋</span>
@@ -227,7 +227,7 @@ const pageTitle = lang === 'zh' ? '合作' : 'Hire Me';
<!-- Delivery Style --> <!-- Delivery Style -->
<section class="py-16 relative page-section-soft"> <section class="py-16 relative page-section-soft">
<Container> <Container>
<div class="max-w-4xl mx-auto"> <div class="page-content-main">
<div class="flex items-center gap-4 mb-8"> <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"> <div class="w-12 h-12 bg-yellow-500/20 rounded-xl flex items-center justify-center">
<span class="text-2xl">🎯</span> <span class="text-2xl">🎯</span>
@@ -300,7 +300,7 @@ const pageTitle = lang === 'zh' ? '合作' : 'Hire Me';
<!-- Availability --> <!-- Availability -->
<section class="py-16 relative"> <section class="py-16 relative">
<Container> <Container>
<div class="max-w-4xl mx-auto"> <div class="page-content-main">
<div class="flex items-center gap-4 mb-8"> <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"> <div class="w-12 h-12 bg-red-500/20 rounded-xl flex items-center justify-center">
<span class="text-2xl">📅</span> <span class="text-2xl">📅</span>
@@ -341,11 +341,11 @@ const pageTitle = lang === 'zh' ? '合作' : 'Hire Me';
<!-- Contact CTA --> <!-- Contact CTA -->
<section class="py-16 relative page-section-soft"> <section class="py-16 relative page-section-soft">
<Container> <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 class="text-3xl font-bold mb-6">
{lang === 'zh' ? '准备好一起构建了吗？' : 'Ready to build together?'} {lang === 'zh' ? '准备好一起构建了吗？' : 'Ready to build together?'}
</h2> </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' {lang === 'zh'
? '告诉我你的项目想法，让我们看看能否合作。' ? '告诉我你的项目想法，让我们看看能否合作。'
: "Tell me about your project idea and let's see if we can work together."} : "Tell me about your project idea and let's see if we can work together."}

12
src/pages/now.astro
View File

@@ -27,7 +27,7 @@ const pageTitle = lang === 'zh' ? '现在' : 'Now';
<h1 class="page-title-gradient text-5xl md:text-6xl font-bold mb-6"> <h1 class="page-title-gradient text-5xl md:text-6xl font-bold mb-6">
{lang === 'zh' ? '现在' : 'Now'} {lang === 'zh' ? '现在' : 'Now'}
</h1> </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' {lang === 'zh'
? '持续更新我的现状、正在构建的内容以及合作机会' ? '持续更新我的现状、正在构建的内容以及合作机会'
: 'Continuously updating my current status, what I am building, and collaboration opportunities'} : 'Continuously updating my current status, what I am building, and collaboration opportunities'}
@@ -39,7 +39,7 @@ const pageTitle = lang === 'zh' ? '现在' : 'Now';
<!-- Building Section --> <!-- Building Section -->
<section class="py-16 relative"> <section class="py-16 relative">
<Container> <Container>
<div class="max-w-4xl mx-auto"> <div class="page-content-main">
<div class="flex items-center gap-4 mb-8"> <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"> <div class="w-12 h-12 bg-primary/20 rounded-xl flex items-center justify-center">
<span class="text-2xl">🔨</span> <span class="text-2xl">🔨</span>
@@ -76,7 +76,7 @@ const pageTitle = lang === 'zh' ? '现在' : 'Now';
<!-- Exploring Section --> <!-- Exploring Section -->
<section class="py-16 relative page-section-soft"> <section class="py-16 relative page-section-soft">
<Container> <Container>
<div class="max-w-4xl mx-auto"> <div class="page-content-main">
<div class="flex items-center gap-4 mb-8"> <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"> <div class="w-12 h-12 bg-blue-500/20 rounded-xl flex items-center justify-center">
<span class="text-2xl">🔭</span> <span class="text-2xl">🔭</span>
@@ -116,7 +116,7 @@ const pageTitle = lang === 'zh' ? '现在' : 'Now';
<!-- Shipping Section --> <!-- Shipping Section -->
<section class="py-16 relative"> <section class="py-16 relative">
<Container> <Container>
<div class="max-w-4xl mx-auto"> <div class="page-content-main">
<div class="flex items-center gap-4 mb-8"> <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"> <div class="w-12 h-12 bg-green-500/20 rounded-xl flex items-center justify-center">
<span class="text-2xl">🚀</span> <span class="text-2xl">🚀</span>
@@ -150,7 +150,7 @@ const pageTitle = lang === 'zh' ? '现在' : 'Now';
<!-- Open to Collaborate Section --> <!-- 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"> <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> <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="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"> <div class="w-12 h-12 bg-yellow-500/20 rounded-xl flex items-center justify-center">
<span class="text-2xl">🤝</span> <span class="text-2xl">🤝</span>
@@ -190,7 +190,7 @@ const pageTitle = lang === 'zh' ? '现在' : 'Now';
<!-- Last Updated --> <!-- Last Updated -->
<section class="py-12"> <section class="py-12">
<Container> <Container>
<div class="max-w-4xl mx-auto text-center"> <div class="page-content-main text-center">
<p class="text-sm text-muted-foreground"> <p class="text-sm text-muted-foreground">
{lang === 'zh' ? '最后更新：' : 'Last updated: '} {lang === 'zh' ? '最后更新：' : 'Last updated: '}
<span class="font-medium">2025年3月</span> <span class="font-medium">2025年3月</span>

4
src/pages/projects.astro
View File

@@ -44,7 +44,7 @@ const statusClassMap = {
<h1 class="page-title-gradient text-5xl md:text-6xl font-bold mb-6"> <h1 class="page-title-gradient text-5xl md:text-6xl font-bold mb-6">
{t('projects.title')} {t('projects.title')}
</h1> </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')} {t('projects.slogan')} {t('projects.description')}
</p> </p>
</div> </div>
@@ -53,7 +53,7 @@ const statusClassMap = {
<section class="relative z-10 pb-20" data-projects-root> <section class="relative z-10 pb-20" data-projects-root>
<Container> <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"> <div class="page-surface flex flex-wrap gap-2 mb-8 p-1 rounded-xl">
{filterOptions.map((option, index) => ( {filterOptions.map((option, index) => (
<button <button

4
src/pages/zh/blog/index.astro
View File

@@ -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"> <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> <span class="text-primary">博客</span>
</h1> </h1>
<p class="text-xl text-muted-foreground max-w-3xl mx-auto"> <p class="text-xl text-muted-foreground page-content-main">
关于 AI 产品、全栈开发和公开构建的思考。探索技术与产品构建的交汇点。 关于 AI 产品、全栈开发和公开构建的思考。探索技术与产品构建的交汇点。
</p> </p>
</div> </div>
@@ -87,7 +87,7 @@ const tags = extractTags(allPostsArray);
<BlogList posts={sortedBlogPosts} lang="zh" /> <BlogList posts={sortedBlogPosts} lang="zh" />
</div> </div>
</div> </div>
</div> </Container>
</main> </main>
</BlogLayout> </BlogLayout>

16
src/pages/zh/hire.astro
View File

@@ -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 class="page-title-gradient text-5xl md:text-6xl font-bold mb-6">
合作 合作
</h1> </h1>
<p class="text-lg text-muted-foreground max-w-2xl mx-auto"> <p class="text-lg text-muted-foreground page-content-narrow">
构建优秀产品，从找到合适的技术合伙人开始 构建优秀产品，从找到合适的技术合伙人开始
</p> </p>
</div> </div>
@@ -37,7 +37,7 @@ const pageTitle = lang === 'zh' ? '合作' : 'Hire Me';
<!-- Who I Work With --> <!-- Who I Work With -->
<section class="py-16 relative"> <section class="py-16 relative">
<Container> <Container>
<div class="max-w-4xl mx-auto"> <div class="page-content-main">
<div class="flex items-center gap-4 mb-8"> <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"> <div class="w-12 h-12 bg-primary/20 rounded-xl flex items-center justify-center">
<span class="text-2xl">👥</span> <span class="text-2xl">👥</span>
@@ -91,7 +91,7 @@ const pageTitle = lang === 'zh' ? '合作' : 'Hire Me';
<!-- What I Build --> <!-- What I Build -->
<section class="py-16 relative page-section-soft"> <section class="py-16 relative page-section-soft">
<Container> <Container>
<div class="max-w-4xl mx-auto"> <div class="page-content-main">
<div class="flex items-center gap-4 mb-8"> <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"> <div class="w-12 h-12 bg-blue-500/20 rounded-xl flex items-center justify-center">
<span class="text-2xl">🛠️</span> <span class="text-2xl">🛠️</span>
@@ -151,7 +151,7 @@ const pageTitle = lang === 'zh' ? '合作' : 'Hire Me';
<!-- Engagement Models --> <!-- Engagement Models -->
<section class="py-16 relative"> <section class="py-16 relative">
<Container> <Container>
<div class="max-w-4xl mx-auto"> <div class="page-content-main">
<div class="flex items-center gap-4 mb-8"> <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"> <div class="w-12 h-12 bg-green-500/20 rounded-xl flex items-center justify-center">
<span class="text-2xl">📋</span> <span class="text-2xl">📋</span>
@@ -205,7 +205,7 @@ const pageTitle = lang === 'zh' ? '合作' : 'Hire Me';
<!-- Delivery Style --> <!-- Delivery Style -->
<section class="py-16 relative page-section-soft"> <section class="py-16 relative page-section-soft">
<Container> <Container>
<div class="max-w-4xl mx-auto"> <div class="page-content-main">
<div class="flex items-center gap-4 mb-8"> <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"> <div class="w-12 h-12 bg-yellow-500/20 rounded-xl flex items-center justify-center">
<span class="text-2xl">🎯</span> <span class="text-2xl">🎯</span>
@@ -262,7 +262,7 @@ const pageTitle = lang === 'zh' ? '合作' : 'Hire Me';
<!-- Availability --> <!-- Availability -->
<section class="py-16 relative"> <section class="py-16 relative">
<Container> <Container>
<div class="max-w-4xl mx-auto"> <div class="page-content-main">
<div class="flex items-center gap-4 mb-8"> <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"> <div class="w-12 h-12 bg-red-500/20 rounded-xl flex items-center justify-center">
<span class="text-2xl">📅</span> <span class="text-2xl">📅</span>
@@ -301,11 +301,11 @@ const pageTitle = lang === 'zh' ? '合作' : 'Hire Me';
<!-- Contact CTA --> <!-- Contact CTA -->
<section class="py-16 relative page-section-soft"> <section class="py-16 relative page-section-soft">
<Container> <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 class="text-3xl font-bold mb-6">
准备好一起构建了吗？ 准备好一起构建了吗？
</h2> </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> </p>
<div class="flex flex-col sm:flex-row gap-4 justify-center"> <div class="flex flex-col sm:flex-row gap-4 justify-center">

12
src/pages/zh/now.astro
View File

@@ -27,7 +27,7 @@ const pageTitle = lang === 'zh' ? '现在' : 'Now';
<h1 class="page-title-gradient text-5xl md:text-6xl font-bold mb-6"> <h1 class="page-title-gradient text-5xl md:text-6xl font-bold mb-6">
现在 现在
</h1> </h1>
<p class="text-lg text-muted-foreground max-w-2xl mx-auto"> <p class="text-lg text-muted-foreground page-content-narrow">
持续更新我的现状、正在构建的内容以及合作机会 持续更新我的现状、正在构建的内容以及合作机会
</p> </p>
</div> </div>
@@ -37,7 +37,7 @@ const pageTitle = lang === 'zh' ? '现在' : 'Now';
<!-- Building Section --> <!-- Building Section -->
<section class="py-16 relative"> <section class="py-16 relative">
<Container> <Container>
<div class="max-w-4xl mx-auto"> <div class="page-content-main">
<div class="flex items-center gap-4 mb-8"> <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"> <div class="w-12 h-12 bg-primary/20 rounded-xl flex items-center justify-center">
<span class="text-2xl">🔨</span> <span class="text-2xl">🔨</span>
@@ -72,7 +72,7 @@ const pageTitle = lang === 'zh' ? '现在' : 'Now';
<!-- Exploring Section --> <!-- Exploring Section -->
<section class="py-16 relative page-section-soft"> <section class="py-16 relative page-section-soft">
<Container> <Container>
<div class="max-w-4xl mx-auto"> <div class="page-content-main">
<div class="flex items-center gap-4 mb-8"> <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"> <div class="w-12 h-12 bg-blue-500/20 rounded-xl flex items-center justify-center">
<span class="text-2xl">🔭</span> <span class="text-2xl">🔭</span>
@@ -108,7 +108,7 @@ const pageTitle = lang === 'zh' ? '现在' : 'Now';
<!-- Shipping Section --> <!-- Shipping Section -->
<section class="py-16 relative"> <section class="py-16 relative">
<Container> <Container>
<div class="max-w-4xl mx-auto"> <div class="page-content-main">
<div class="flex items-center gap-4 mb-8"> <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"> <div class="w-12 h-12 bg-green-500/20 rounded-xl flex items-center justify-center">
<span class="text-2xl">🚀</span> <span class="text-2xl">🚀</span>
@@ -140,7 +140,7 @@ const pageTitle = lang === 'zh' ? '现在' : 'Now';
<!-- Open to Collaborate Section --> <!-- 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"> <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> <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="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"> <div class="w-12 h-12 bg-yellow-500/20 rounded-xl flex items-center justify-center">
<span class="text-2xl">🤝</span> <span class="text-2xl">🤝</span>
@@ -178,7 +178,7 @@ const pageTitle = lang === 'zh' ? '现在' : 'Now';
<!-- Last Updated --> <!-- Last Updated -->
<section class="py-12"> <section class="py-12">
<Container> <Container>
<div class="max-w-4xl mx-auto text-center"> <div class="page-content-main text-center">
<p class="text-sm text-muted-foreground"> <p class="text-sm text-muted-foreground">
最后更新： 最后更新：
<span class="font-medium">2025年3月</span> <span class="font-medium">2025年3月</span>

4
src/pages/zh/projects.astro
View File

@@ -44,7 +44,7 @@ const statusClassMap = {
<h1 class="page-title-gradient text-5xl md:text-6xl font-bold mb-6"> <h1 class="page-title-gradient text-5xl md:text-6xl font-bold mb-6">
{t('projects.title')} {t('projects.title')}
</h1> </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')} {t('projects.slogan')} {t('projects.description')}
</p> </p>
</div> </div>
@@ -53,7 +53,7 @@ const statusClassMap = {
<section class="relative z-10 pb-20" data-projects-root> <section class="relative z-10 pb-20" data-projects-root>
<Container> <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"> <div class="page-surface flex flex-wrap gap-2 mb-8 p-1 rounded-xl">
{filterOptions.map((option, index) => ( {filterOptions.map((option, index) => (
<button <button

8
src/styles/global.css
View File

@@ -237,6 +237,14 @@
background: var(--ui-section-soft-bg); 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 { .animate-fade-in {
animation: fadeIn 0.6s ease-out forwards; animation: fadeIn 0.6s ease-out forwards;
} }