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
374
src/pages/hire.astro
Normal file
374
src/pages/hire.astro
Normal file
@@ -0,0 +1,374 @@
|
||||
---
|
||||
import Layout from "@/layouts/Layout.astro";
|
||||
import GlassHeader from "@/components/GlassHeader";
|
||||
import Footer from "@/components/Footer";
|
||||
import Container from "@/components/ui/Container.astro";
|
||||
import { useTranslations } from "@/i18n/utils";
|
||||
import type { Lang } from "@/types/i18n";
|
||||
import { defaultLang } from "@/i18n/ui";
|
||||
|
||||
const lang = Astro.currentLocale as Lang || defaultLang;
|
||||
const t = useTranslations(lang);
|
||||
const pageTitle = lang === 'zh' ? '合作' : 'Hire Me';
|
||||
---
|
||||
|
||||
<Layout title={pageTitle}>
|
||||
<GlassHeader lang={lang} client:only="react" />
|
||||
<main class="min-h-screen">
|
||||
<!-- Hire Page Hero -->
|
||||
<section class="py-24 relative overflow-hidden">
|
||||
<div class="absolute inset-0 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"></div>
|
||||
|
||||
<Container className="relative z-10">
|
||||
<div class="text-center mb-16">
|
||||
<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' ? '专业合作' : 'Professional Collaboration'}
|
||||
</span>
|
||||
<h1 class="text-5xl md:text-6xl font-bold mb-6 bg-gradient-to-r from-gray-900 via-purple-600 to-purple-800 dark:from-white dark:via-purple-200 dark:to-purple-300 bg-clip-text text-transparent">
|
||||
{lang === 'zh' ? '合作' : 'Hire Me'}
|
||||
</h1>
|
||||
<p class="text-lg text-muted-foreground max-w-2xl mx-auto">
|
||||
{lang === 'zh'
|
||||
? '构建优秀产品，从找到合适的技术合伙人开始'
|
||||
: 'Building great products starts with finding the right technical partner'}
|
||||
</p>
|
||||
</div>
|
||||
</Container>
|
||||
</section>
|
||||
|
||||
<!-- Who I Work With -->
|
||||
<section class="py-16 relative">
|
||||
<Container>
|
||||
<div class="max-w-4xl mx-auto">
|
||||
<div class="flex items-center gap-4 mb-8">
|
||||
<div class="w-12 h-12 bg-purple-500/20 rounded-xl flex items-center justify-center">
|
||||
<span class="text-2xl">👥</span>
|
||||
</div>
|
||||
<h2 class="text-3xl font-bold">
|
||||
{lang === 'zh' ? '我与谁合作' : 'Who I Work With'}
|
||||
</h2>
|
||||
</div>
|
||||
|
||||
<div class="grid md:grid-cols-2 gap-6">
|
||||
<div class="bg-white/10 dark:bg-gray-800/50 backdrop-blur-sm rounded-2xl border border-purple-500/20 p-6">
|
||||
<h3 class="text-lg font-bold mb-3">
|
||||
{lang === 'zh' ? '初创公司' : 'Startups'}
|
||||
</h3>
|
||||
<p class="text-muted-foreground">
|
||||
{lang === 'zh'
|
||||
? '从零到一构建产品的早期创业团队，需要快速迭代和灵活响应的技术方案。'
|
||||
: 'Early-stage startup teams building products from scratch, needing fast iteration and flexible technical solutions.'}
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div class="bg-white/10 dark:bg-gray-800/50 backdrop-blur-sm rounded-2xl border border-purple-500/20 p-6">
|
||||
<h3 class="text-lg font-bold mb-3">
|
||||
{lang === 'zh' ? '独立创始人' : 'Indie Hackers'}
|
||||
</h3>
|
||||
<p class="text-muted-foreground">
|
||||
{lang === 'zh'
|
||||
? '独自构建产品的创业者，需要技术合伙人来实现产品愿景。'
|
||||
: 'Solo founders building products who need a technical partner to realize their product vision.'}
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div class="bg-white/10 dark:bg-gray-800/50 backdrop-blur-sm rounded-2xl border border-purple-500/20 p-6">
|
||||
<h3 class="text-lg font-bold mb-3">
|
||||
{lang === 'zh' ? '传统企业' : 'Traditional Businesses'}
|
||||
</h3>
|
||||
<p class="text-muted-foreground">
|
||||
{lang === 'zh'
|
||||
? '希望数字化转型的传统企业，需要现代化的技术解决方案。'
|
||||
: 'Traditional businesses looking to go digital and need modern technical solutions.'}
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div class="bg-white/10 dark:bg-gray-800/50 backdrop-blur-sm rounded-2xl border border-purple-500/20 p-6">
|
||||
<h3 class="text-lg font-bold mb-3">
|
||||
{lang === 'zh' ? '技术团队' : 'Technical Teams'}
|
||||
</h3>
|
||||
<p class="text-muted-foreground">
|
||||
{lang === 'zh'
|
||||
? '需要额外技术资源或特定技能集来推进项目的开发团队。'
|
||||
: 'Development teams needing additional technical resources or specific skill sets to move projects forward.'}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</Container>
|
||||
</section>
|
||||
|
||||
<!-- What I Build -->
|
||||
<section class="py-16 relative bg-white/5 dark:bg-gray-900/50">
|
||||
<Container>
|
||||
<div class="max-w-4xl mx-auto">
|
||||
<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>
|
||||
</div>
|
||||
<h2 class="text-3xl font-bold">
|
||||
{lang === 'zh' ? '我能构建什么' : 'What I Build'}
|
||||
</h2>
|
||||
</div>
|
||||
|
||||
<div class="space-y-6">
|
||||
<div class="bg-white/10 dark:bg-gray-800/50 backdrop-blur-sm rounded-2xl border border-blue-500/20 p-8">
|
||||
<div class="flex items-start gap-4">
|
||||
<div class="w-12 h-12 bg-gradient-to-br from-purple-600 to-blue-600 rounded-xl flex items-center justify-center flex-shrink-0">
|
||||
<span class="text-2xl">⚡</span>
|
||||
</div>
|
||||
<div>
|
||||
<h3 class="text-xl font-bold mb-2">AI 产品与应用</h3>
|
||||
<p class="text-muted-foreground">
|
||||
{lang === 'zh'
|
||||
? '从 AI 助手到 Agent 系统，从 RAG 应用到 AI 驱动的 SaaS 产品。我可以帮助你将 AI 能力产品化。'
|
||||
: 'From AI assistants to Agent systems, from RAG applications to AI-powered SaaS products. I can help you productize AI capabilities.'}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="bg-white/10 dark:bg-gray-800/50 backdrop-blur-sm rounded-2xl border border-blue-500/20 p-8">
|
||||
<div class="flex items-start gap-4">
|
||||
<div class="w-12 h-12 bg-gradient-to-br from-green-600 to-teal-600 rounded-xl flex items-center justify-center flex-shrink-0">
|
||||
<span class="text-2xl">🌐</span>
|
||||
</div>
|
||||
<div>
|
||||
<h3 class="text-xl font-bold mb-2">Web 应用</h3>
|
||||
<p class="text-muted-foreground">
|
||||
{lang === 'zh'
|
||||
? '现代 Web 应用、SaaS 平台、电商系统、内容管理系统等。使用 React、Next.js、Node.js 等技术栈。'
|
||||
: 'Modern web applications, SaaS platforms, e-commerce systems, content management systems, etc. Using React, Next.js, Node.js and other tech stacks.'}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="bg-white/10 dark:bg-gray-800/50 backdrop-blur-sm rounded-2xl border border-blue-500/20 p-8">
|
||||
<div class="flex items-start gap-4">
|
||||
<div class="w-12 h-12 bg-gradient-to-br from-orange-600 to-red-600 rounded-xl flex items-center justify-center flex-shrink-0">
|
||||
<span class="text-2xl">📱</span>
|
||||
</div>
|
||||
<div>
|
||||
<h3 class="text-xl font-bold mb-2">全栈产品</h3>
|
||||
<p class="text-muted-foreground">
|
||||
{lang === 'zh'
|
||||
? '从前端到后端，从数据库到部署，我提供完整的全栈开发能力，一个项目只需一个开发者。'
|
||||
: 'From frontend to backend, from database to deployment, I provide complete full-stack development capabilities - one developer for the entire project.'}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</Container>
|
||||
</section>
|
||||
|
||||
<!-- Engagement Models -->
|
||||
<section class="py-16 relative">
|
||||
<Container>
|
||||
<div class="max-w-4xl mx-auto">
|
||||
<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>
|
||||
</div>
|
||||
<h2 class="text-3xl font-bold">
|
||||
{lang === 'zh' ? '合作模式' : 'Engagement Models'}
|
||||
</h2>
|
||||
</div>
|
||||
|
||||
<div class="grid md:grid-cols-3 gap-6">
|
||||
<div class="bg-white/10 dark:bg-gray-800/50 backdrop-blur-sm rounded-2xl border border-green-500/20 p-6 text-center">
|
||||
<div class="w-12 h-12 bg-green-500/20 rounded-xl flex items-center justify-center mx-auto mb-4">
|
||||
<span class="text-2xl">🤝</span>
|
||||
</div>
|
||||
<h3 class="text-lg font-bold mb-2">
|
||||
{lang === 'zh' ? '技术合伙人' : 'Technical Co-founder'}
|
||||
</h3>
|
||||
<p class="text-sm text-muted-foreground">
|
||||
{lang === 'zh'
|
||||
? '长期合作，股权合作，共同承担创业风险与回报'
|
||||
: 'Long-term partnership, equity-based, sharing startup risks and rewards'}
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div class="bg-white/10 dark:bg-gray-800/50 backdrop-blur-sm rounded-2xl border border-green-500/20 p-6 text-center">
|
||||
<div class="w-12 h-12 bg-blue-500/20 rounded-xl flex items-center justify-center mx-auto mb-4">
|
||||
<span class="text-2xl">💰</span>
|
||||
</div>
|
||||
<h3 class="text-lg font-bold mb-2">
|
||||
{lang === 'zh' ? '项目制' : 'Project-based'}
|
||||
</h3>
|
||||
<p class="text-sm text-muted-foreground">
|
||||
{lang === 'zh'
|
||||
? '按项目交付，固定价格或按阶段付款，适合明确需求的项目'
|
||||
: 'Fixed-price or milestone-based, suitable for projects with clear requirements'}
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div class="bg-white/10 dark:bg-gray-800/50 backdrop-blur-sm rounded-2xl border border-green-500/20 p-6 text-center">
|
||||
<div class="w-12 h-12 bg-purple-500/20 rounded-xl flex items-center justify-center mx-auto mb-4">
|
||||
<span class="text-2xl">⏰</span>
|
||||
</div>
|
||||
<h3 class="text-lg font-bold mb-2">
|
||||
{lang === 'zh' ? '咨询/顾问' : 'Consulting'}
|
||||
</h3>
|
||||
<p class="text-sm text-muted-foreground">
|
||||
{lang === 'zh'
|
||||
? '按小时咨询，帮助你做出技术决策，审查代码，指导团队'
|
||||
: 'Hourly consulting, helping you make technical decisions, code reviews, team guidance'}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</Container>
|
||||
</section>
|
||||
|
||||
<!-- Delivery Style -->
|
||||
<section class="py-16 relative bg-white/5 dark:bg-gray-900/50">
|
||||
<Container>
|
||||
<div class="max-w-4xl mx-auto">
|
||||
<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>
|
||||
</div>
|
||||
<h2 class="text-3xl font-bold">
|
||||
{lang === 'zh' ? '工作方式' : 'Delivery Style'}
|
||||
</h2>
|
||||
</div>
|
||||
|
||||
<div class="bg-white/10 dark:bg-gray-800/50 backdrop-blur-sm rounded-2xl border border-yellow-500/20 p-8">
|
||||
<ul class="space-y-4">
|
||||
<li class="flex items-start gap-3">
|
||||
<span class="text-green-500 text-xl">✓</span>
|
||||
<div>
|
||||
<strong class="block mb-1">
|
||||
{lang === 'zh' ? '敏捷迭代' : 'Agile Iteration'}
|
||||
</strong>
|
||||
<p class="text-muted-foreground text-sm">
|
||||
{lang === 'zh'
|
||||
? '2周一个迭代，快速交付可用功能，持续获取反馈'
|
||||
: '2-week sprints, rapid delivery of usable features, continuous feedback'}
|
||||
</p>
|
||||
</div>
|
||||
</li>
|
||||
<li class="flex items-start gap-3">
|
||||
<span class="text-green-500 text-xl">✓</span>
|
||||
<div>
|
||||
<strong class="block mb-1">
|
||||
{lang === 'zh' ? '透明沟通' : 'Transparent Communication'}
|
||||
</strong>
|
||||
<p class="text-muted-foreground text-sm">
|
||||
{lang === 'zh'
|
||||
? '定期同步进度，及时报告问题，保持信息对称'
|
||||
: 'Regular progress updates, timely issue reporting, keeping information symmetric'}
|
||||
</p>
|
||||
</div>
|
||||
</li>
|
||||
<li class="flex items-start gap-3">
|
||||
<span class="text-green-500 text-xl">✓</span>
|
||||
<div>
|
||||
<strong class="block mb-1">
|
||||
{lang === 'zh' ? '代码质量' : 'Code Quality'}
|
||||
</strong>
|
||||
<p class="text-muted-foreground text-sm">
|
||||
{lang === 'zh'
|
||||
? '完整的测试覆盖，清晰的文档注释，可维护的代码结构'
|
||||
: 'Complete test coverage, clear documentation, maintainable code structure'}
|
||||
</p>
|
||||
</div>
|
||||
</li>
|
||||
<li class="flex items-start gap-3">
|
||||
<span class="text-green-500 text-xl">✓</span>
|
||||
<div>
|
||||
<strong class="block mb-1">
|
||||
{lang === 'zh' ? '产品思维' : 'Product Thinking'}
|
||||
</strong>
|
||||
<p class="text-muted-foreground text-sm">
|
||||
{lang === 'zh'
|
||||
? '不只是写代码，还思考产品价值，用户体验和业务目标'
|
||||
: 'Not just writing code, but also thinking about product value, user experience, and business goals'}
|
||||
</p>
|
||||
</div>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</Container>
|
||||
</section>
|
||||
|
||||
<!-- Availability -->
|
||||
<section class="py-16 relative">
|
||||
<Container>
|
||||
<div class="max-w-4xl mx-auto">
|
||||
<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>
|
||||
</div>
|
||||
<h2 class="text-3xl font-bold">
|
||||
{lang === 'zh' ? '当前可用性' : 'Availability'}
|
||||
</h2>
|
||||
</div>
|
||||
|
||||
<div class="bg-white/10 dark:bg-gray-800/50 backdrop-blur-sm rounded-2xl border border-red-500/20 p-8">
|
||||
<div class="flex items-center gap-4 mb-6">
|
||||
<div class="w-4 h-4 bg-green-500 rounded-full animate-pulse"></div>
|
||||
<span class="text-lg font-semibold">
|
||||
{lang === 'zh' ? '目前可接受新项目' : 'Currently Available for New Projects'}
|
||||
</span>
|
||||
</div>
|
||||
<p class="text-muted-foreground mb-6">
|
||||
{lang === 'zh'
|
||||
? '我目前可以接受 1-2 个新项目。偏好长期合作模式（技术合伙人或长期项目），但也会考虑短期项目。'
|
||||
: 'I can currently take on 1-2 new projects. Prefer long-term partnership (technical co-founder or long-term projects), but also open to short-term projects.'}
|
||||
</p>
|
||||
<div class="flex flex-wrap gap-2">
|
||||
<span class="px-3 py-1 bg-green-500/20 text-green-600 dark:text-green-400 rounded-full text-sm">
|
||||
{lang === 'zh' ? '可立即开始' : 'Available immediately'}
|
||||
</span>
|
||||
<span class="px-3 py-1 bg-blue-500/20 text-blue-600 dark:text-blue-400 rounded-full text-sm">
|
||||
{lang === 'zh' ? '远程工作' : 'Remote only'}
|
||||
</span>
|
||||
<span class="px-3 py-1 bg-purple-500/20 text-purple-600 dark:text-purple-400 rounded-full text-sm">
|
||||
{lang === 'zh' ? '中英双语' : 'Bilingual EN/ZH'}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</Container>
|
||||
</section>
|
||||
|
||||
<!-- Contact CTA -->
|
||||
<section class="py-16 relative bg-gradient-to-br from-purple-900/20 to-blue-900/20 dark:from-purple-900/30 dark:to-blue-900/30">
|
||||
<Container>
|
||||
<div class="max-w-4xl mx-auto 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">
|
||||
{lang === 'zh'
|
||||
? '告诉我你的项目想法，让我们看看能否合作。'
|
||||
: "Tell me about your project idea and let's see if we can work together."}
|
||||
</p>
|
||||
<div class="flex flex-col sm:flex-row gap-4 justify-center">
|
||||
<a
|
||||
href="mailto:zhaoguiyang18@gmail.com"
|
||||
class="bg-purple-500 hover:bg-purple-600 text-white px-8 py-3 rounded-lg font-semibold transition-colors inline-flex items-center justify-center gap-2"
|
||||
>
|
||||
<span>📧</span>
|
||||
{lang === 'zh' ? '发送邮件' : 'Send Email'}
|
||||
</a>
|
||||
<a
|
||||
href={lang === 'zh' ? '/zh/now' : '/now'}
|
||||
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 inline-flex items-center justify-center gap-2"
|
||||
>
|
||||
<span>📡</span>
|
||||
{lang === 'zh' ? '了解更多关于我' : 'Learn More About Me'}
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</Container>
|
||||
</section>
|
||||
</main>
|
||||
<Footer lang={lang} client:only="react" />
|
||||
</Layout>
|
||||
Reference in New Issue
Block a user