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

feat(ui): unify site visual language across key pages

Browse Source
This commit is contained in:
zguiyang
2026-03-13 15:26:08 +08:00
parent 33cc9a31b8
commit bf89acbd2c
10 changed files with 335 additions and 617 deletions
Download Patch File Download Diff File Expand all files Collapse all files

12
src/pages/index.astro
View File

@@ -23,7 +23,7 @@ const pageTitle = t('site.title');
<!-- Hero Section - Inlined Content -->
<section class="py-32 relative overflow-hidden min-h-screen flex flex-col justify-center">
<!-- Background gradient -->
<div class="absolute inset-0 bg-gradient-to-br from-blue-900/20 via-primary/10 to-orange-900/20 dark:from-blue-900/30 dark:via-primary/20 dark:to-orange-900/30"></div>
<div class="page-hero-overlay"></div>
<Container className="relative z-10">
<div class="text-center mb-16">
@@ -202,7 +202,7 @@ const pageTitle = t('site.title');
<SkillsMarquee lang={lang} client:only="react" />
<!-- Featured Project: Elynd -->
<section class="py-24 bg-gradient-to-br from-blue-900/20 via-primary/10 to-blue-900/20 dark:from-blue-900/30 dark:via-primary/20 dark:to-blue-900/30">
<section class="py-24 page-section-soft">
<Container>
<div class="text-center mb-12">
<span class="inline-block px-4 py-1 bg-primary/20 text-primary dark:text-primary rounded-full text-sm font-medium mb-4">
@@ -219,7 +219,7 @@ const pageTitle = t('site.title');
</div>
<div class="max-w-4xl mx-auto">
<div class="bg-white/10 dark:bg-gray-800/50 backdrop-blur-sm rounded-2xl border border-primary/20 overflow-hidden">
<div class="page-surface border-primary/20 overflow-hidden">
<div class="h-64 md:h-80 bg-gradient-to-br from-primary/20 via-blue-600/20 to-primary/20 flex items-center justify-center relative overflow-hidden">
<div class="absolute inset-0 bg-grid-primary/10 [mask-image:linear-gradient(0deg,white,rgba(255,255,255,0.3))]"></div>
<div class="text-center z-10">
@@ -471,7 +471,7 @@ const pageTitle = t('site.title');
</div>
<div class="grid grid-cols-1 lg:grid-cols-3 gap-8 items-stretch">
<div class="group overflow-hidden border border-primary/20 hover:border-primary/40 h-full flex flex-col transition-transform duration-500 hover:scale-105 bg-white/10 dark:bg-gray-800/50 backdrop-blur-sm rounded-xl relative" style="will-change: transform; transform: translateZ(0);">
<div class="page-surface group overflow-hidden border-primary/20 hover:border-primary/40 h-full flex flex-col transition-transform duration-500 hover:scale-105 rounded-xl relative" style="will-change: transform; transform: translateZ(0);">
<div class="absolute top-4 right-4 z-10">
<span class="px-3 py-1 bg-blue-100 dark:bg-blue-800 text-blue-800 dark:text-blue-200 text-xs rounded-full font-medium border border-blue-200 dark:border-blue-700">{t('project.tag.business')}</span>
</div>
@@ -534,7 +534,7 @@ const pageTitle = t('site.title');
</div>
</div>
</div>
<div class="group overflow-hidden border border-primary/20 hover:border-primary/40 h-full flex flex-col transition-transform duration-500 hover:scale-105 bg-white/10 dark:bg-gray-800/50 backdrop-blur-sm rounded-xl relative" style="will-change: transform; transform: translateZ(0);">
<div class="page-surface group overflow-hidden border-primary/20 hover:border-primary/40 h-full flex flex-col transition-transform duration-500 hover:scale-105 rounded-xl relative" style="will-change: transform; transform: translateZ(0);">
<div class="absolute top-4 right-4 z-10">
<span class="px-3 py-1 bg-green-100 dark:bg-green-800 text-green-800 dark:text-green-200 text-xs rounded-full font-medium border border-green-200 dark:border-green-700">{t('project.tag.opensource')}</span>
</div>
@@ -597,7 +597,7 @@ const pageTitle = t('site.title');
</div>
</div>
<div class="group overflow-hidden border border-primary/20 hover:border-primary/40 h-full flex flex-col transition-transform duration-500 hover:scale-105 bg-white/10 dark:bg-gray-800/50 backdrop-blur-sm rounded-xl relative" style="will-change: transform; transform: translateZ(0);">
<div class="page-surface group overflow-hidden border-primary/20 hover:border-primary/40 h-full flex flex-col transition-transform duration-500 hover:scale-105 rounded-xl relative" style="will-change: transform; transform: translateZ(0);">
<div class="absolute top-4 right-4 z-10">
<span class="px-3 py-1 bg-amber-100 dark:bg-amber-800 text-amber-800 dark:text-amber-200 text-xs rounded-full font-medium border border-amber-200 dark:border-amber-700">{t('project.tag.personal')}</span>
</div>