feat(portfolio): redesign site as opportunity gateway
- add now/hire pages and update IA/navigation - feature Elynd in projects and homepage messaging - refresh services/blog/brand copy for AI product positioning - reduce hydration overhead by using Astro Container - remove Google Fonts external dependency and use local fallback stack
This commit is contained in:
zguiyang
@@ -4,7 +4,7 @@ import GlassHeader from "@/components/GlassHeader";
|
||||
import SkillsMarquee from "@/components/SkillsMarquee";
|
||||
import TypewriterEffect from "@/components/TypewriterEffect";
|
||||
import Footer from "@/components/Footer";
|
||||
import Container from "@/components/ui/Container";
|
||||
import Container from "@/components/ui/Container.astro";
|
||||
import { useTranslations } from "@/i18n/utils";
|
||||
import type { Lang } from "@/types/i18n";
|
||||
import { defaultLang } from "@/i18n/ui";
|
||||
@@ -24,7 +24,7 @@ const pageTitle = t('site.title');
|
||||
<!-- Background gradient -->
|
||||
<div class="absolute inset-0 bg-gradient-to-br from-purple-900/20 via-purple-800/10 to-purple-700/20 dark:from-purple-900/30 dark:via-purple-800/20 dark:to-purple-700/30"></div>
|
||||
|
||||
<Container client:load className="relative z-10">
|
||||
<Container className="relative z-10">
|
||||
<div class="text-center mb-16">
|
||||
<!-- Greeting -->
|
||||
<div class="flex items-center justify-center mb-6">
|
||||
@@ -79,23 +79,23 @@ const pageTitle = t('site.title');
|
||||
<!-- Action buttons -->
|
||||
<div class="flex flex-col sm:flex-row gap-4 justify-center items-center mb-16">
|
||||
<a
|
||||
href="#about"
|
||||
href={`/${lang === 'zh' ? 'zh/' : ''}hire`}
|
||||
class="bg-purple-500 hover:bg-purple-600 text-white px-8 py-3 rounded-lg font-semibold transition-colors flex items-center gap-2"
|
||||
>
|
||||
<svg class="h-5 w-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10 20l4-16m4 4l4 4-4 4M6 16l-4-4 4-4"></path>
|
||||
</svg>
|
||||
{t('hero.viewProjects')}
|
||||
{t('hero.ctaPrimary')}
|
||||
</a>
|
||||
|
||||
|
||||
<a
|
||||
href={`mailto:${personalInfo.email}`}
|
||||
href={`/${lang === 'zh' ? 'zh/' : ''}projects`}
|
||||
class="border border-purple-500 text-purple-500 hover:bg-purple-500 hover:text-white px-8 py-3 rounded-lg font-semibold transition-colors flex items-center gap-2"
|
||||
>
|
||||
<svg class="h-5 w-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 8l7.89 4.26a2 2 0 002.22 0L21 8M5 19h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z"></path>
|
||||
</svg>
|
||||
{t('hero.contactMe')}
|
||||
{t('hero.ctaSecondary')}
|
||||
</a>
|
||||
</div>
|
||||
|
||||
@@ -199,10 +199,81 @@ const pageTitle = t('site.title');
|
||||
</section>
|
||||
|
||||
<SkillsMarquee lang={lang} client:only="react" />
|
||||
|
||||
|
||||
<!-- Featured Project: Elynd -->
|
||||
<section class="py-24 bg-gradient-to-br from-purple-900/20 via-purple-800/10 to-blue-900/20 dark:from-purple-900/30 dark:via-purple-800/20 dark:to-blue-900/30">
|
||||
<Container>
|
||||
<div class="text-center mb-12">
|
||||
<span class="inline-block px-4 py-1 bg-purple-500/20 text-purple-600 dark:text-purple-400 rounded-full text-sm font-medium mb-4">
|
||||
{lang === 'zh' ? 'featured 项目' : 'Featured Project'}
|
||||
</span>
|
||||
<h2 class="text-4xl md:text-5xl font-bold mb-4 bg-gradient-to-r from-purple-400 via-blue-400 to-purple-400 bg-clip-text text-transparent">
|
||||
Elynd
|
||||
</h2>
|
||||
<p class="text-lg text-muted-foreground max-w-2xl mx-auto">
|
||||
{lang === 'zh'
|
||||
? '一个开放的 AI 工作空间，让构建者能够更智能地工作'
|
||||
: 'An open AI workspace for builders to work smarter'}
|
||||
</p>
|
||||
</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-purple-500/20 overflow-hidden">
|
||||
<div class="h-64 md:h-80 bg-gradient-to-br from-purple-600/20 via-blue-600/20 to-purple-600/20 flex items-center justify-center relative overflow-hidden">
|
||||
<div class="absolute inset-0 bg-grid-purple-500/10 [mask-image:linear-gradient(0deg,white,rgba(255,255,255,0.3))]"></div>
|
||||
<div class="text-center z-10">
|
||||
<div class="text-6xl md:text-8xl mb-4">⚡</div>
|
||||
<div class="text-2xl md:text-3xl font-bold text-purple-400">
|
||||
{lang === 'zh' ? '让 AI 成为你的共同构建者' : 'Make AI Your Co-Builder'}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="p-8">
|
||||
<div class="grid md:grid-cols-3 gap-6 mb-8">
|
||||
<div class="text-center">
|
||||
<div class="text-3xl font-bold text-purple-400 mb-2">AI-First</div>
|
||||
<div class="text-sm text-muted-foreground">
|
||||
{lang === 'zh' ? '从第一天就融入 AI 思维' : 'Built with AI from day one'}
|
||||
</div>
|
||||
</div>
|
||||
<div class="text-center">
|
||||
<div class="text-3xl font-bold text-blue-400 mb-2">Open</div>
|
||||
<div class="text-sm text-muted-foreground">
|
||||
{lang === 'zh' ? '完全开放，可自托管' : 'Fully open, self-hostable'}
|
||||
</div>
|
||||
</div>
|
||||
<div class="text-center">
|
||||
<div class="text-3xl font-bold text-green-400 mb-2">Builder-First</div>
|
||||
<div class="text-sm text-muted-foreground">
|
||||
{lang === 'zh' ? '为构建者打造的工作空间' : 'Workspace built for builders'}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex flex-col sm:flex-row gap-4 justify-center">
|
||||
<a
|
||||
href={`/${lang === 'zh' ? 'zh/' : ''}projects`}
|
||||
class="bg-purple-500 hover:bg-purple-600 text-white px-6 py-3 rounded-lg font-semibold transition-colors inline-flex items-center justify-center gap-2"
|
||||
>
|
||||
<span>🚀</span>
|
||||
{t('hero.ctaSecondary')}
|
||||
</a>
|
||||
<a
|
||||
href={`/${lang === 'zh' ? 'zh/' : ''}now`}
|
||||
class="border border-purple-500 text-purple-500 hover:bg-purple-500 hover:text-white px-6 py-3 rounded-lg font-semibold transition-colors inline-flex items-center justify-center gap-2"
|
||||
>
|
||||
<span>📡</span>
|
||||
{lang === 'zh' ? '了解更多' : 'Learn More'}
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</Container>
|
||||
</section>
|
||||
|
||||
<!-- Services Section - Inlined Content -->
|
||||
<section id="services" class="py-20 bg-gradient-to-br from-slate-50 to-blue-50 dark:from-slate-900 dark:to-slate-800">
|
||||
<Container client:load>
|
||||
<Container>
|
||||
<h2 class="text-4xl font-bold text-center mb-16 bg-gradient-to-r from-blue-600 to-purple-600 bg-clip-text text-transparent">
|
||||
{t('services.title')}
|
||||
</h2>
|
||||
@@ -246,7 +317,7 @@ const pageTitle = t('site.title');
|
||||
<!-- Background gradient -->
|
||||
<div class="absolute inset-0 bg-gradient-to-br from-blue-900/10 via-purple-800/5 to-indigo-700/10 dark:from-blue-900/20 dark:via-purple-800/10 dark:to-indigo-700/20"></div>
|
||||
|
||||
<Container client:load className="relative z-10">
|
||||
<Container className="relative z-10">
|
||||
<div class="text-center mb-16">
|
||||
<!-- Section Title -->
|
||||
<div class="flex items-center justify-center mb-6">
|
||||
@@ -388,7 +459,7 @@ const pageTitle = t('site.title');
|
||||
<!-- <section id="projects" class="py-20 relative">
|
||||
<div class="absolute inset-0 bg-gradient-to-b from-transparent via-purple-900/5 to-transparent"></div>
|
||||
|
||||
<Container client:load className="relative z-10">
|
||||
<Container className="relative z-10">
|
||||
<div class="text-center mb-16">
|
||||
<h2 class="text-4xl md:text-5xl font-bold mb-4 bg-gradient-to-r from-purple-400 to-purple-600 bg-clip-text text-transparent">
|
||||
Latest Projects
|
||||
|
||||
Reference in New Issue
Block a user