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
@@ -3,7 +3,7 @@ import BlogLayout from '../../layouts/BlogLayout.astro';
|
||||
import BlogList from '../../components/blog/BlogList.astro';
|
||||
import CategoryCard from '../../components/blog/CategoryCard.astro';
|
||||
import TagCard from '../../components/blog/TagCard.astro';
|
||||
import Container from '../../components/ui/Container';
|
||||
import Container from "../../components/ui/Container.astro";
|
||||
import { type BlogPost } from '@/types';
|
||||
import { useTranslations } from '@/i18n/utils';
|
||||
import { type Lang } from '@/types/i18n';
|
||||
@@ -43,22 +43,22 @@ const sortedBlogPosts = sortPostsByDate(blogPosts);
|
||||
|
||||
---
|
||||
|
||||
<BlogLayout title="Blog - Joy Zhao" description="Dive into my thoughts on coding, tech trends, and developer life. Explore my latest posts below.">
|
||||
<BlogLayout title="Blog - Joy Zhao" description="Thoughts on AI products, full-stack development, and building in public. Explore my latest posts below.">
|
||||
<main class="min-h-screen">
|
||||
<!-- Header Section -->
|
||||
<Container client:load className="pt-24 pb-12">
|
||||
<Container className="pt-24 pb-12">
|
||||
<div class="text-center mb-16">
|
||||
<h1 class="text-5xl md:text-6xl font-bold bg-gradient-to-r from-foreground via-purple-600 to-purple-800 dark:from-foreground dark:via-purple-200 dark:to-purple-300 bg-clip-text text-transparent mb-6">
|
||||
Our <span class="text-purple-500">Latest</span> Blog
|
||||
<span class="text-purple-500">Blog</span>
|
||||
</h1>
|
||||
<p class="text-xl text-muted-foreground max-w-3xl mx-auto">
|
||||
{t('blog.slogan')} Dive into my thoughts on coding, tech trends, and developer life. Explore my latest posts below.
|
||||
Thoughts on AI products, full-stack development, and building in public. Exploring the intersection of technology and product building.
|
||||
</p>
|
||||
</div>
|
||||
</Container>
|
||||
|
||||
<!-- Main Content -->
|
||||
<Container client:load className="pb-20">
|
||||
<Container className="pb-20">
|
||||
<div class="grid grid-cols-1 lg:grid-cols-4 gap-8">
|
||||
<!-- 侧边栏 -->
|
||||
<div class="lg:col-span-1 space-y-8">
|
||||
@@ -85,4 +85,4 @@ const sortedBlogPosts = sortPostsByDate(blogPosts);
|
||||
-webkit-box-orient: vertical;
|
||||
overflow: hidden;
|
||||
}
|
||||
</style>
|
||||
</style>
|
||||
|
||||
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>
|
||||
@@ -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
|
||||
|
||||
203
src/pages/now.astro
Normal file
203
src/pages/now.astro
Normal file
@@ -0,0 +1,203 @@
|
||||
---
|
||||
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' ? '现在' : 'Now';
|
||||
---
|
||||
|
||||
<Layout title={pageTitle}>
|
||||
<GlassHeader lang={lang} client:only="react" />
|
||||
<main class="min-h-screen">
|
||||
<!-- Now 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' ? '关于我现在正在做什么' : "What's happening now"}
|
||||
</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' ? '现在' : 'Now'}
|
||||
</h1>
|
||||
<p class="text-lg text-muted-foreground max-w-2xl mx-auto">
|
||||
{lang === 'zh'
|
||||
? '持续更新我的现状、正在构建的内容以及合作机会'
|
||||
: 'Continuously updating my current status, what I am building, and collaboration opportunities'}
|
||||
</p>
|
||||
</div>
|
||||
</Container>
|
||||
</section>
|
||||
|
||||
<!-- Building Section -->
|
||||
<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' ? '正在构建' : 'Building'}
|
||||
</h2>
|
||||
</div>
|
||||
|
||||
<div class="bg-white/10 dark:bg-gray-800/50 backdrop-blur-sm rounded-2xl border border-purple-500/20 p-8">
|
||||
<div class="flex items-start gap-6">
|
||||
<div class="w-16 h-16 bg-gradient-to-br from-purple-600 to-blue-600 rounded-xl flex items-center justify-center flex-shrink-0">
|
||||
<span class="text-3xl">⚡</span>
|
||||
</div>
|
||||
<div class="flex-1">
|
||||
<h3 class="text-xl font-bold mb-2">Elynd</h3>
|
||||
<p class="text-muted-foreground mb-4">
|
||||
{lang === 'zh'
|
||||
? '一个开放的 AI 工作空间，让构建者能够更智能地工作。从 AI 第一性原理出发，打造完全开放、可自托管的协作工具。'
|
||||
: 'An open AI workspace for builders to work smarter. Built from first principles of AI, creating fully open, self-hostable collaboration tools.'}
|
||||
</p>
|
||||
<div class="flex flex-wrap gap-2">
|
||||
<span class="px-3 py-1 bg-purple-500/20 text-purple-600 dark:text-purple-400 rounded-full text-sm">AI Product</span>
|
||||
<span class="px-3 py-1 bg-blue-500/20 text-blue-600 dark:text-blue-400 rounded-full text-sm">TypeScript</span>
|
||||
<span class="px-3 py-1 bg-green-500/20 text-green-600 dark:text-green-400 rounded-full text-sm">Open Source</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</Container>
|
||||
</section>
|
||||
|
||||
<!-- Exploring Section -->
|
||||
<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' ? '正在探索' : 'Exploring'}
|
||||
</h2>
|
||||
</div>
|
||||
|
||||
<div class="grid gap-6">
|
||||
<div class="bg-white/10 dark:bg-gray-800/50 backdrop-blur-sm rounded-2xl border border-blue-500/20 p-6">
|
||||
<h3 class="text-lg font-bold mb-3">
|
||||
{lang === 'zh' ? 'AI Agents 与工作流自动化' : 'AI Agents & Workflow Automation'}
|
||||
</h3>
|
||||
<p class="text-muted-foreground">
|
||||
{lang === 'zh'
|
||||
? '研究如何构建能够自主完成复杂任务的 AI Agent，以及如何将 AI 能力融入日常工作流。'
|
||||
: 'Researching how to build AI Agents that can autonomously complete complex tasks, and how to integrate AI capabilities into daily workflows.'}
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div class="bg-white/10 dark:bg-gray-800/50 backdrop-blur-sm rounded-2xl border border-blue-500/20 p-6">
|
||||
<h3 class="text-lg font-bold mb-3">
|
||||
{lang === 'zh' ? '产品导向的开发实践' : 'Product-Led Development Practices'}
|
||||
</h3>
|
||||
<p class="text-muted-foreground">
|
||||
{lang === 'zh'
|
||||
? '探索从产品角度思考开发，构建真正解决用户问题的产品，而不仅仅是技术实现。'
|
||||
: 'Exploring product thinking in development, building products that truly solve user problems, not just technical implementations.'}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</Container>
|
||||
</section>
|
||||
|
||||
<!-- Shipping Section -->
|
||||
<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' ? '最近发布' : 'Shipping'}
|
||||
</h2>
|
||||
</div>
|
||||
|
||||
<div class="space-y-4">
|
||||
<div class="bg-white/10 dark:bg-gray-800/50 backdrop-blur-sm rounded-xl border border-green-500/20 p-6 flex items-center gap-4">
|
||||
<div class="w-12 h-12 bg-green-500/20 rounded-lg flex items-center justify-center flex-shrink-0">
|
||||
<span class="text-xl">✨</span>
|
||||
</div>
|
||||
<div>
|
||||
<h3 class="font-bold mb-1">
|
||||
{lang === 'zh' ? '个人网站全新改版' : 'Portfolio Website Redesign'}
|
||||
</h3>
|
||||
<p class="text-sm text-muted-foreground">
|
||||
{lang === 'zh'
|
||||
? '全新设计的个人网站，突出 AI 产品构建者的定位'
|
||||
: 'Redesigned portfolio with focus on AI product builder positioning'}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</Container>
|
||||
</section>
|
||||
|
||||
<!-- Open to Collaborate Section -->
|
||||
<section class="py-16 relative bg-gradient-to-br from-purple-900/10 to-blue-900/10 dark:from-purple-900/20 dark:to-blue-900/20">
|
||||
<Container>
|
||||
<div class="max-w-4xl mx-auto 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>
|
||||
</div>
|
||||
<h2 class="text-3xl font-bold">
|
||||
{lang === 'zh' ? '开放合作' : 'Open to Collaborate'}
|
||||
</h2>
|
||||
</div>
|
||||
|
||||
<div class="bg-white/10 dark:bg-gray-800/50 backdrop-blur-sm rounded-2xl border border-yellow-500/20 p-8">
|
||||
<p class="text-lg text-muted-foreground mb-8">
|
||||
{lang === 'zh'
|
||||
? '我始终对新的合作机会持开放态度。无论你是想要构建产品、寻找技术合伙人，还是需要技术咨询，都可以联系我。'
|
||||
: "I'm always open to new collaboration opportunities. Whether you're looking to build a product, seeking a technical co-founder, or need technical consulting, feel free to reach out."}
|
||||
</p>
|
||||
<div class="flex flex-col sm:flex-row gap-4 justify-center">
|
||||
<a
|
||||
href={lang === 'zh' ? '/zh/hire' : '/hire'}
|
||||
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>
|
||||
{lang === 'zh' ? '查看合作方式' : 'View Collaboration Options'}
|
||||
</a>
|
||||
<a
|
||||
href="mailto:zhaoguiyang18@gmail.com"
|
||||
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' ? '发送邮件' : 'Send Email'}
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</Container>
|
||||
</section>
|
||||
|
||||
<!-- Last Updated -->
|
||||
<section class="py-12">
|
||||
<Container>
|
||||
<div class="max-w-4xl mx-auto text-center">
|
||||
<p class="text-sm text-muted-foreground">
|
||||
{lang === 'zh' ? '最后更新：' : 'Last updated: '}
|
||||
<span class="font-medium">2025年3月</span>
|
||||
</p>
|
||||
</div>
|
||||
</Container>
|
||||
</section>
|
||||
</main>
|
||||
<Footer lang={lang} client:only="react" />
|
||||
</Layout>
|
||||
@@ -2,7 +2,7 @@
|
||||
import Layout from "@/layouts/Layout.astro";
|
||||
import GlassHeader from "@/components/GlassHeader";
|
||||
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";
|
||||
@@ -15,6 +15,15 @@ const pageTitle = t('projects.title');
|
||||
|
||||
// 根据当前语言获取项目数据
|
||||
const currentProjects = projects[lang as keyof typeof projects] || projects.en;
|
||||
|
||||
// Separate featured and grouped projects
|
||||
const featuredProject = currentProjects.find(p => p.featured);
|
||||
const otherProjects = currentProjects.filter(p => !p.featured);
|
||||
|
||||
// Group by type
|
||||
const productProjects = otherProjects.filter(p => p.type === 'product');
|
||||
const clientProjects = otherProjects.filter(p => p.type === 'client');
|
||||
const experimentProjects = otherProjects.filter(p => p.type === 'experiment');
|
||||
---
|
||||
|
||||
<Layout title={pageTitle}>
|
||||
@@ -24,8 +33,8 @@ const currentProjects = projects[lang as keyof typeof projects] || projects.en;
|
||||
<section class="py-24 relative overflow-hidden">
|
||||
<!-- 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">
|
||||
<!-- Main title -->
|
||||
<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">
|
||||
@@ -40,69 +49,274 @@ const currentProjects = projects[lang as keyof typeof projects] || projects.en;
|
||||
</Container>
|
||||
</section>
|
||||
|
||||
<!-- Projects Grid Section -->
|
||||
<section class="py-12 relative">
|
||||
<!-- Background gradient -->
|
||||
<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">
|
||||
<div class="grid grid-cols-1 lg:grid-cols-3 gap-8 items-stretch">
|
||||
{currentProjects.map((project) => (
|
||||
<div class={`group overflow-hidden border border-${project.color}-500/20 hover:border-${project.color}-500/40 h-full flex flex-col transition-all duration-500 hover:scale-105 bg-white/10 dark:bg-gray-800/50 backdrop-blur-sm rounded-xl relative`}>
|
||||
<!-- Project tag - positioned at top right -->
|
||||
<div class="absolute top-4 right-4 z-10">
|
||||
<span class={`px-3 py-1 bg-${project.color}-100 dark:bg-${project.color}-800 text-${project.color}-800 dark:text-${project.color}-200 text-xs rounded-full font-medium border border-${project.color}-200 dark:border-${project.color}-700`}>{t(`project.tag.${project.tag}`)}</span>
|
||||
</div>
|
||||
|
||||
<!-- Project image placeholder -->
|
||||
<div class={`h-48 bg-gradient-to-br ${project.image.bg} relative overflow-hidden`}>
|
||||
<div class={`absolute inset-0 bg-gradient-to-br ${project.image.bg} group-hover:${project.image.hover} transition-all duration-500`}></div>
|
||||
<div class="absolute bottom-4 left-4 right-4">
|
||||
<div class={`bg-black/50 backdrop-blur-sm rounded px-3 py-1 text-xs font-mono ${project.image.text}`}>
|
||||
{project.title}
|
||||
<!-- Featured Project Section -->
|
||||
{featuredProject && (
|
||||
<section class="py-12 bg-gradient-to-br from-purple-900/10 to-blue-900/10 dark:from-purple-900/20 dark:to-blue-900/20">
|
||||
<Container>
|
||||
<div class="max-w-5xl mx-auto">
|
||||
<div class="flex items-center gap-4 mb-8">
|
||||
<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">
|
||||
Featured
|
||||
</span>
|
||||
</div>
|
||||
|
||||
<div class="bg-white/10 dark:bg-gray-800/50 backdrop-blur-sm rounded-2xl border border-purple-500/30 overflow-hidden">
|
||||
<div class="grid lg:grid-cols-2">
|
||||
<div class="h-64 lg:h-auto 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="text-8xl">{featuredProject.icon}</div>
|
||||
</div>
|
||||
<div class="p-8">
|
||||
<div class="flex items-center gap-3 mb-4">
|
||||
<span class="px-3 py-1 bg-purple-500/20 text-purple-600 dark:text-purple-400 rounded-full text-sm">
|
||||
{t(`project.status.${featuredProject.status}`)}
|
||||
</span>
|
||||
<span class="px-3 py-1 bg-blue-500/20 text-blue-600 dark:text-blue-400 rounded-full text-sm">
|
||||
{t(`project.type.${featuredProject.type}`)}
|
||||
</span>
|
||||
</div>
|
||||
|
||||
<h2 class="text-3xl font-bold mb-4">{featuredProject.title}</h2>
|
||||
|
||||
<div class="space-y-4 mb-6">
|
||||
<div>
|
||||
<span class="text-sm text-muted-foreground">{t('project.role')}:</span>
|
||||
<p class="font-medium">{featuredProject.role}</p>
|
||||
</div>
|
||||
<div>
|
||||
<span class="text-sm text-muted-foreground">{t('project.impact')}:</span>
|
||||
<p class="font-medium">{featuredProject.impact}</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="space-y-2 mb-6">
|
||||
{featuredProject.description.map((desc) => (
|
||||
<p class="text-muted-foreground text-sm">{desc}</p>
|
||||
))}
|
||||
</div>
|
||||
|
||||
<div class="flex flex-wrap gap-2 mb-6">
|
||||
{featuredProject.tech.map((tech) => (
|
||||
<span class="px-3 py-1 bg-gray-500/10 dark:bg-gray-400/20 text-gray-600 dark:text-gray-300 text-sm rounded-md border border-gray-500/20 dark:border-gray-400/30">{tech}</span>
|
||||
))}
|
||||
</div>
|
||||
|
||||
<div class="flex gap-4">
|
||||
<a href={featuredProject.link} class="bg-purple-500 hover:bg-purple-600 text-white px-6 py-2 rounded-lg font-medium transition-colors inline-flex items-center gap-2">
|
||||
{t('project.visit')}
|
||||
<svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M14 5l7 7m0 0l-7 7m7-7H3"></path>
|
||||
</svg>
|
||||
</a>
|
||||
{featuredProject.links?.github && (
|
||||
<a href={featuredProject.links.github} target="_blank" rel="noopener noreferrer" class="border border-gray-500 text-gray-600 dark:text-gray-300 hover:bg-gray-500/10 px-6 py-2 rounded-lg font-medium transition-colors inline-flex items-center gap-2">
|
||||
<svg class="w-5 h-5" fill="currentColor" viewBox="0 0 24 24">
|
||||
<path d="M12 0c-6.626 0-12 5.373-12 12 0 5.302 3.438 9.8 8.207 11.387.599.111.793-.261.793-.577v-2.234c-3.338.726-4.033-1.416-4.033-1.416-.546-1.387-1.333-1.756-1.333-1.756-1.089-.745.083-.729.083-.729 1.205.084 1.839 1.237 1.839 1.237 1.07 1.834 2.807 1.304 3.492.997.107-.775.418-1.305.762-1.604-2.665-.305-5.467-1.334-5.467-5.931 0-1.311.469-2.381 1.236-3.221-.124-.303-.535-1.524.117-3.176 0 0 1.008-.322 3.301 1.23.957-.266 1.983-.399 3.003-.404 1.02.005 2.047.138 3.006.404 2.291-1.552 3.297-1.23 3.297-1.23.653 1.653.242 2.874.118 3.176.77.84 1.235 1.911 1.235 3.221 0 4.609-2.807 5.624-5.479 5.921.43.372.823 1.102.823 2.222v3.293c0 .319.192.694.801.576 4.765-1.589 8.199-6.086 8.199-11.386 0-6.627-5.373-12-12-12z"/>
|
||||
</svg>
|
||||
GitHub
|
||||
</a>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="p-6 pb-4">
|
||||
<h3 class={`text-xl group-hover:text-${project.color}-400 transition-colors duration-300 flex items-center gap-2 font-bold mb-4`}>
|
||||
<span class={`text-${project.color}-500`}>{project.icon}</span>
|
||||
{project.title}
|
||||
</h3>
|
||||
</div>
|
||||
|
||||
<div class="px-6 flex-grow">
|
||||
<div class="space-y-3">
|
||||
{project.description.map((desc) => (
|
||||
<div class="flex items-start gap-2 text-sm text-muted-foreground group-hover:text-foreground transition-colors duration-300">
|
||||
<span class={`text-${project.color}-500 mt-1`}>•</span>
|
||||
<span>{desc}</span>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
|
||||
<!-- Tech stack indicators with unified gray styling -->
|
||||
<div class="mt-6 mb-4 flex flex-wrap gap-2">
|
||||
{project.tech.map((tech) => (
|
||||
<span class="px-2 py-1 bg-gray-500/10 dark:bg-gray-400/20 text-gray-600 dark:text-gray-300 text-xs rounded-md border border-gray-500/20 dark:border-gray-400/30">{tech}</span>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Visit project link -->
|
||||
<div class="p-6 pt-2">
|
||||
<a href={project.link} class={`inline-flex items-center text-sm font-medium text-${project.color}-500 hover:text-${project.color}-600 dark:hover:text-${project.color}-400 transition-colors duration-300`}>
|
||||
{t('project.visit')}
|
||||
<svg class="ml-1 w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M14 5l7 7m0 0l-7 7m7-7H3"></path>
|
||||
</svg>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</Container>
|
||||
</section>
|
||||
)}
|
||||
|
||||
<!-- Projects by Type -->
|
||||
<section class="py-12 relative">
|
||||
<Container>
|
||||
<!-- Product Projects -->
|
||||
{productProjects.length > 0 && (
|
||||
<>
|
||||
<div class="flex items-center gap-4 mb-8">
|
||||
<div class="w-10 h-10 bg-purple-500/20 rounded-lg flex items-center justify-center">
|
||||
<span class="text-xl">🛍️</span>
|
||||
</div>
|
||||
<h2 class="text-2xl font-bold">{t('project.type.product')}</h2>
|
||||
</div>
|
||||
<div class="grid grid-cols-1 lg:grid-cols-3 gap-8 mb-12">
|
||||
{productProjects.map((project) => (
|
||||
<div class={`group overflow-hidden border border-${project.color}-500/20 hover:border-${project.color}-500/40 h-full flex flex-col transition-all duration-500 hover:scale-105 bg-white/10 dark:bg-gray-800/50 backdrop-blur-sm rounded-xl relative`}>
|
||||
<div class="absolute top-4 right-4 z-10 flex gap-2">
|
||||
<span class={`px-3 py-1 bg-${project.color}-100 dark:bg-${project.color}-800 text-${project.color}-800 dark:text-${project.color}-200 text-xs rounded-full font-medium border border-${project.color}-200 dark:border-${project.color}-700`}>{t(`project.status.${project.status}`)}</span>
|
||||
</div>
|
||||
|
||||
<div class={`h-48 bg-gradient-to-br ${project.image.bg} relative overflow-hidden`}>
|
||||
<div class={`absolute inset-0 bg-gradient-to-br ${project.image.bg} group-hover:${project.image.hover} transition-all duration-500`}></div>
|
||||
<div class="absolute bottom-4 left-4 right-4">
|
||||
<div class={`bg-black/50 backdrop-blur-sm rounded px-3 py-1 text-xs font-mono ${project.image.text}`}>
|
||||
{project.title}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="p-6 pb-4">
|
||||
<h3 class={`text-xl group-hover:text-${project.color}-400 transition-colors duration-300 flex items-center gap-2 font-bold mb-4`}>
|
||||
<span class={`text-${project.color}-500`}>{project.icon}</span>
|
||||
{project.title}
|
||||
</h3>
|
||||
</div>
|
||||
|
||||
<div class="px-6 flex-grow">
|
||||
<div class="space-y-3">
|
||||
{project.description.slice(0, 2).map((desc) => (
|
||||
<div class="flex items-start gap-2 text-sm text-muted-foreground group-hover:text-foreground transition-colors duration-300">
|
||||
<span class={`text-${project.color}-500 mt-1`}>•</span>
|
||||
<span>{desc}</span>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
|
||||
<div class="mt-6 mb-4 flex flex-wrap gap-2">
|
||||
{project.tech.slice(0, 4).map((tech) => (
|
||||
<span class="px-2 py-1 bg-gray-500/10 dark:bg-gray-400/20 text-gray-600 dark:text-gray-300 text-xs rounded-md border border-gray-500/20 dark:border-gray-400/30">{tech}</span>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="p-6 pt-2">
|
||||
<a href={project.link} class={`inline-flex items-center text-sm font-medium text-${project.color}-500 hover:text-${project.color}-600 dark:hover:text-${project.color}-400 transition-colors duration-300`}>
|
||||
{t('project.visit')}
|
||||
<svg class="ml-1 w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M14 5l7 7m0 0l-7 7m7-7H3"></path>
|
||||
</svg>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</>
|
||||
)}
|
||||
|
||||
<!-- Client Projects -->
|
||||
{clientProjects.length > 0 && (
|
||||
<>
|
||||
<div class="flex items-center gap-4 mb-8">
|
||||
<div class="w-10 h-10 bg-blue-500/20 rounded-lg flex items-center justify-center">
|
||||
<span class="text-xl">💼</span>
|
||||
</div>
|
||||
<h2 class="text-2xl font-bold">{t('project.type.client')}</h2>
|
||||
</div>
|
||||
<div class="grid grid-cols-1 lg:grid-cols-3 gap-8 mb-12">
|
||||
{clientProjects.map((project) => (
|
||||
<div class={`group overflow-hidden border border-${project.color}-500/20 hover:border-${project.color}-500/40 h-full flex flex-col transition-all duration-500 hover:scale-105 bg-white/10 dark:bg-gray-800/50 backdrop-blur-sm rounded-xl relative`}>
|
||||
<div class="absolute top-4 right-4 z-10 flex gap-2">
|
||||
<span class={`px-3 py-1 bg-${project.color}-100 dark:bg-${project.color}-800 text-${project.color}-800 dark:text-${project.color}-200 text-xs rounded-full font-medium border border-${project.color}-200 dark:border-${project.color}-700`}>{t(`project.status.${project.status}`)}</span>
|
||||
</div>
|
||||
|
||||
<div class={`h-48 bg-gradient-to-br ${project.image.bg} relative overflow-hidden`}>
|
||||
<div class={`absolute inset-0 bg-gradient-to-br ${project.image.bg} group-hover:${project.image.hover} transition-all duration-500`}></div>
|
||||
<div class="absolute bottom-4 left-4 right-4">
|
||||
<div class={`bg-black/50 backdrop-blur-sm rounded px-3 py-1 text-xs font-mono ${project.image.text}`}>
|
||||
{project.title}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="p-6 pb-4">
|
||||
<h3 class={`text-xl group-hover:text-${project.color}-400 transition-colors duration-300 flex items-center gap-2 font-bold mb-4`}>
|
||||
<span class={`text-${project.color}-500`}>{project.icon}</span>
|
||||
{project.title}
|
||||
</h3>
|
||||
</div>
|
||||
|
||||
<div class="px-6 flex-grow">
|
||||
<div class="space-y-3">
|
||||
{project.description.slice(0, 2).map((desc) => (
|
||||
<div class="flex items-start gap-2 text-sm text-muted-foreground group-hover:text-foreground transition-colors duration-300">
|
||||
<span class={`text-${project.color}-500 mt-1`}>•</span>
|
||||
<span>{desc}</span>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
|
||||
<div class="mt-6 mb-4 flex flex-wrap gap-2">
|
||||
{project.tech.slice(0, 4).map((tech) => (
|
||||
<span class="px-2 py-1 bg-gray-500/10 dark:bg-gray-400/20 text-gray-600 dark:text-gray-300 text-xs rounded-md border border-gray-500/20 dark:border-gray-400/30">{tech}</span>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="p-6 pt-2">
|
||||
<a href={project.link} class={`inline-flex items-center text-sm font-medium text-${project.color}-500 hover:text-${project.color}-600 dark:hover:text-${project.color}-400 transition-colors duration-300`}>
|
||||
{t('project.visit')}
|
||||
<svg class="ml-1 w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M14 5l7 7m0 0l-7 7m7-7H3"></path>
|
||||
</svg>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</>
|
||||
)}
|
||||
|
||||
<!-- Experiment Projects -->
|
||||
{experimentProjects.length > 0 && (
|
||||
<>
|
||||
<div class="flex items-center gap-4 mb-8">
|
||||
<div class="w-10 h-10 bg-green-500/20 rounded-lg flex items-center justify-center">
|
||||
<span class="text-xl">🧪</span>
|
||||
</div>
|
||||
<h2 class="text-2xl font-bold">{t('project.type.experiment')}</h2>
|
||||
</div>
|
||||
<div class="grid grid-cols-1 lg:grid-cols-3 gap-8">
|
||||
{experimentProjects.map((project) => (
|
||||
<div class={`group overflow-hidden border border-${project.color}-500/20 hover:border-${project.color}-500/40 h-full flex flex-col transition-all duration-500 hover:scale-105 bg-white/10 dark:bg-gray-800/50 backdrop-blur-sm rounded-xl relative`}>
|
||||
<div class="absolute top-4 right-4 z-10 flex gap-2">
|
||||
<span class={`px-3 py-1 bg-${project.color}-100 dark:bg-${project.color}-800 text-${project.color}-800 dark:text-${project.color}-200 text-xs rounded-full font-medium border border-${project.color}-200 dark:border-${project.color}-700`}>{t(`project.status.${project.status}`)}</span>
|
||||
</div>
|
||||
|
||||
<div class={`h-48 bg-gradient-to-br ${project.image.bg} relative overflow-hidden`}>
|
||||
<div class={`absolute inset-0 bg-gradient-to-br ${project.image.bg} group-hover:${project.image.hover} transition-all duration-500`}></div>
|
||||
<div class="absolute bottom-4 left-4 right-4">
|
||||
<div class={`bg-black/50 backdrop-blur-sm rounded px-3 py-1 text-xs font-mono ${project.image.text}`}>
|
||||
{project.title}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="p-6 pb-4">
|
||||
<h3 class={`text-xl group-hover:text-${project.color}-400 transition-colors duration-300 flex items-center gap-2 font-bold mb-4`}>
|
||||
<span class={`text-${project.color}-500`}>{project.icon}</span>
|
||||
{project.title}
|
||||
</h3>
|
||||
</div>
|
||||
|
||||
<div class="px-6 flex-grow">
|
||||
<div class="space-y-3">
|
||||
{project.description.slice(0, 2).map((desc) => (
|
||||
<div class="flex items-start gap-2 text-sm text-muted-foreground group-hover:text-foreground transition-colors duration-300">
|
||||
<span class={`text-${project.color}-500 mt-1`}>•</span>
|
||||
<span>{desc}</span>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
|
||||
<div class="mt-6 mb-4 flex flex-wrap gap-2">
|
||||
{project.tech.slice(0, 4).map((tech) => (
|
||||
<span class="px-2 py-1 bg-gray-500/10 dark:bg-gray-400/20 text-gray-600 dark:text-gray-300 text-xs rounded-md border border-gray-500/20 dark:border-gray-400/30">{tech}</span>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="p-6 pt-2">
|
||||
<a href={project.link} class={`inline-flex items-center text-sm font-medium text-${project.color}-500 hover:text-${project.color}-600 dark:hover:text-${project.color}-400 transition-colors duration-300`}>
|
||||
{t('project.visit')}
|
||||
<svg class="ml-1 w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M14 5l7 7m0 0l-7 7m7-7H3"></path>
|
||||
</svg>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</>
|
||||
)}
|
||||
</Container>
|
||||
</section>
|
||||
</main>
|
||||
<Footer lang={lang} client:load />
|
||||
</Layout>
|
||||
</Layout>
|
||||
|
||||
@@ -1,119 +0,0 @@
|
||||
---
|
||||
title: "My Services"
|
||||
description: "Explore the professional services I offer to help bring your digital projects to life"
|
||||
layout: "../layouts/AboutLayout.astro"
|
||||
---
|
||||
|
||||
import HighlightBox from '../components/ui/HighlightBox.astro';
|
||||
|
||||
# Services I Provide 🛠️
|
||||
|
||||
<HighlightBox type="tip">
|
||||
用优雅的代码和创新的思维，为复杂问题打造精致的解决方案。
|
||||
</HighlightBox>
|
||||
|
||||
## Web Development 🌐
|
||||
|
||||
<HighlightBox type="info" title="Web Development Services">
|
||||
|
||||
- Building responsive and modern websites using the latest technologies
|
||||
- Creating custom web applications tailored to your specific needs
|
||||
- Implementing frontend interfaces with React, Vue.js, or Angular
|
||||
- Developing backend systems with Node.js, Express, Django, or Flask
|
||||
- Optimizing website performance and user experience
|
||||
|
||||
</HighlightBox>
|
||||
|
||||
## App Development 📱
|
||||
|
||||
<HighlightBox type="success" title="Mobile App Solutions">
|
||||
|
||||
- Developing cross-platform mobile applications using React Native or Flutter
|
||||
- Creating native iOS and Android applications
|
||||
- Building progressive web apps (PWAs) for mobile-like experiences on the web
|
||||
- Implementing offline functionality and push notifications
|
||||
- Integrating with device features like camera, GPS, and sensors
|
||||
|
||||
</HighlightBox>
|
||||
|
||||
## WeChat Mini Program Development 💬
|
||||
|
||||
<HighlightBox type="tip" title="WeChat Mini Program Expertise">
|
||||
|
||||
- Designing and developing WeChat Mini Programs for businesses
|
||||
- Creating interactive and engaging user interfaces
|
||||
- Implementing WeChat Pay and other WeChat APIs
|
||||
- Optimizing for WeChat's ecosystem and requirements
|
||||
- Building custom features and functionalities specific to your business needs
|
||||
|
||||
</HighlightBox>
|
||||
|
||||
## UI Design 🎨
|
||||
|
||||
<HighlightBox type="note" title="UI Design Services">
|
||||
|
||||
- Creating modern, clean, and intuitive user interfaces
|
||||
- Designing responsive layouts that work across all devices
|
||||
- Developing brand identity and visual language
|
||||
- Creating wireframes, prototypes, and high-fidelity mockups
|
||||
- Implementing design systems for consistent user experiences
|
||||
|
||||
</HighlightBox>
|
||||
|
||||
## Bug Fixing 🐛
|
||||
|
||||
<HighlightBox type="error" title="Bug Fixing & Code Optimization">
|
||||
|
||||
- Identifying and resolving issues in existing applications
|
||||
- Debugging complex problems in frontend and backend systems
|
||||
- Optimizing code for better performance and reliability
|
||||
- Refactoring legacy code to modern standards
|
||||
- Implementing automated testing to prevent future bugs
|
||||
|
||||
</HighlightBox>
|
||||
|
||||
## Important Notes 📝
|
||||
|
||||
<HighlightBox type="warning" title="Before Contacting Me">
|
||||
To avoid unnecessary misunderstandings, please read the following notes before contacting me:
|
||||
|
||||
1. Please provide detailed project requirements, including wireframes or design specifications (if you don't understand these, I can help guide you).
|
||||
2. Please specify project completion time and development period.
|
||||
3. In general, I only accept commercial projects, and other forms of cooperation need to be discussed separately.
|
||||
4. I currently cannot provide invoicing services.
|
||||
5. Projects can be maintained free of charge for 3 months after completion.
|
||||
</HighlightBox>
|
||||
|
||||
## Collaboration Process 🤝
|
||||
|
||||
<HighlightBox type="info" title="How We'll Work Together">
|
||||
1. Confirm the project
|
||||
2. Determine the collaboration method
|
||||
3. Confirm project functional requirements
|
||||
4. Confirm development period and delivery time
|
||||
5. Confirm project design or wireframes
|
||||
6. Make payment
|
||||
7. Project development
|
||||
8. Project testing
|
||||
9. Project launch
|
||||
10. Project maintenance
|
||||
</HighlightBox>
|
||||
|
||||
## Payment Methods 💰
|
||||
|
||||
<HighlightBox type="note" title="Payment Options">
|
||||
|
||||
- WeChat Pay
|
||||
- Alipay
|
||||
- Bank Transfer
|
||||
|
||||
**Note: All projects use the 442 payment method**
|
||||
</HighlightBox>
|
||||
|
||||
## Contact Information 📞
|
||||
|
||||
<HighlightBox type="success" title="Get in Touch">
|
||||
- QQ: **2770723534**
|
||||
- WeChat: **JoyCodeing**
|
||||
- Email: **zhaoguiyang18@gmail.com**
|
||||
</HighlightBox>
|
||||
@@ -1,71 +1,42 @@
|
||||
---
|
||||
title: "My Services"
|
||||
description: "Explore the professional services I offer to help bring your digital projects to life"
|
||||
title: "What I Do"
|
||||
description: "Professional services focused on building AI products and technical excellence"
|
||||
layout: "../layouts/AboutLayout.astro"
|
||||
---
|
||||
|
||||
import HighlightBox from '../components/markdown/HighlightBox.astro';
|
||||
|
||||
# Services I Provide 🛠️
|
||||
# What I Do 🚀
|
||||
|
||||
<HighlightBox type="tip">
|
||||
用优雅的代码和创新的思维，为复杂问题打造精致的解决方案。
|
||||
Building AI-powered products and turning ambitious ideas into reality.
|
||||
</HighlightBox>
|
||||
|
||||
## Web Development 🌐
|
||||
## AI Product Development 🤖
|
||||
|
||||
- Building responsive and modern websites using the latest technologies
|
||||
- Creating custom web applications tailored to your specific needs
|
||||
- Implementing frontend interfaces with React, Vue.js, or Angular
|
||||
- Developing backend systems with Node.js, Express, Django, or Flask
|
||||
- Optimizing website performance and user experience
|
||||
- Building AI-powered products from concept to launch
|
||||
- RAG applications, AI agents, and intelligent automation
|
||||
- Full-stack development with modern tech stack (React, Next.js, Node.js)
|
||||
- Product thinking - focus on solving real problems
|
||||
- Rapid prototyping and iterative development
|
||||
|
||||
## Bug Fixing 🐛
|
||||
## Technical Consulting 📊
|
||||
|
||||
<HighlightBox type="error" title="Bug Fixing & Code Optimization">
|
||||
<HighlightBox type="info" title="How I Can Help">
|
||||
|
||||
- Identifying and resolving issues in existing applications
|
||||
- Debugging complex problems in frontend and backend systems
|
||||
- Optimizing code for better performance and reliability
|
||||
- Refactoring legacy code to modern standards
|
||||
- Implementing automated testing to prevent future bugs
|
||||
- Technical architecture and stack decisions
|
||||
- Code reviews and best practices implementation
|
||||
- Team mentoring and knowledge transfer
|
||||
- Performance optimization and scaling strategies
|
||||
- Technical due diligence for investments
|
||||
|
||||
</HighlightBox>
|
||||
|
||||
# Services I Provide 🛠️
|
||||
## Important Notes 📝
|
||||
|
||||
<HighlightBox type="warning" title="Before Contacting Me">
|
||||
To avoid unnecessary misunderstandings, please read the following notes before contacting me:
|
||||
|
||||
1. Please provide detailed project requirements, including wireframes or design specifications (if you don't understand these, I can help guide you).
|
||||
2. Please specify project completion time and development period.
|
||||
3. In general, I only accept commercial projects, and other forms of cooperation need to be discussed separately.
|
||||
4. I currently cannot provide invoicing services.
|
||||
5. Projects can be maintained free of charge for 3 months after completion.
|
||||
</HighlightBox>
|
||||
|
||||
# Services I Provide 🛠️
|
||||
## Collaboration Process 🤝
|
||||
|
||||
<HighlightBox type="info" title="How We'll Work Together">
|
||||
1. Confirm the project
|
||||
2. Determine the collaboration method
|
||||
3. Confirm project functional requirements
|
||||
4. Confirm development period and delivery time
|
||||
5. Confirm project design or wireframes
|
||||
6. Make payment
|
||||
7. Project development
|
||||
8. Project testing
|
||||
9. Project launch
|
||||
10. Project maintenance
|
||||
</HighlightBox>
|
||||
|
||||
# Services I Provide 🛠️
|
||||
## Contact Information 📞
|
||||
# Let's Build Together 💼
|
||||
|
||||
<HighlightBox type="success" title="Get in Touch">
|
||||
- QQ: **2770723534**
|
||||
- WeChat: **JoyCodeing**
|
||||
I'm always open to discussing new projects and opportunities. Whether you're looking for a technical co-founder, need help building an AI product, or want technical consulting - let's talk.
|
||||
|
||||
- Email: **zhaoguiyang18@gmail.com**
|
||||
</HighlightBox>
|
||||
- Check out my [Hire Me](/hire) page for collaboration options
|
||||
</HighlightBox>
|
||||
|
||||
@@ -3,7 +3,7 @@ import BlogLayout from '../../../layouts/BlogLayout.astro';
|
||||
import BlogList from '../../../components/blog/BlogList.astro';
|
||||
import CategoryCard from '../../../components/blog/CategoryCard.astro';
|
||||
import TagCard from '../../../components/blog/TagCard.astro';
|
||||
import Container from '../../../components/ui/Container';
|
||||
import Container from "../../../components/ui/Container.astro";
|
||||
import { type BlogPost } from '@/types';
|
||||
import { useTranslations } from '@/i18n/utils';
|
||||
import { type Lang } from '@/types/i18n';
|
||||
@@ -55,22 +55,22 @@ const tags = extractTags(allPostsArray);
|
||||
|
||||
---
|
||||
|
||||
<BlogLayout title="博客 - Joy Zhao" description="深入我对编程、技术趋势和开发者生活的思考。探索我的最新文章。">
|
||||
<BlogLayout title="博客 - Joy Zhao" description="关于 AI 产品、全栈开发和公开构建的思考。探索技术与产品构建的交汇点。">
|
||||
<main class="min-h-screen">
|
||||
<!-- 头部区域 -->
|
||||
<Container client:load className="pt-24 pb-12">
|
||||
<Container className="pt-24 pb-12">
|
||||
<div class="text-center mb-16">
|
||||
<h1 class="text-5xl md:text-6xl font-bold bg-gradient-to-r from-foreground via-purple-600 to-purple-800 dark:from-foreground dark:via-purple-200 dark:to-purple-300 bg-clip-text text-transparent mb-6">
|
||||
我的<span class="text-purple-500">博客</span>
|
||||
<span class="text-purple-500">博客</span>
|
||||
</h1>
|
||||
<p class="text-xl text-muted-foreground max-w-3xl mx-auto">
|
||||
{t('blog.slogan')} 探索我对网络开发、设计和技术的想法、教程和见解。
|
||||
关于 AI 产品、全栈开发和公开构建的思考。探索技术与产品构建的交汇点。
|
||||
</p>
|
||||
</div>
|
||||
</Container>
|
||||
|
||||
<!-- 主要内容 -->
|
||||
<Container client:load className="pb-20">
|
||||
<Container className="pb-20">
|
||||
<div class="grid grid-cols-1 lg:grid-cols-4 gap-8">
|
||||
<!-- 侧边栏 -->
|
||||
<div class="lg:col-span-1 space-y-8">
|
||||
@@ -98,4 +98,4 @@ const tags = extractTags(allPostsArray);
|
||||
-webkit-box-orient: vertical;
|
||||
overflow: hidden;
|
||||
}
|
||||
</style>
|
||||
</style>
|
||||
|
||||
332
src/pages/zh/hire.astro
Normal file
332
src/pages/zh/hire.astro
Normal file
@@ -0,0 +1,332 @@
|
||||
---
|
||||
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">
|
||||
专业合作
|
||||
</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">
|
||||
合作
|
||||
</h1>
|
||||
<p class="text-lg text-muted-foreground max-w-2xl mx-auto">
|
||||
构建优秀产品，从找到合适的技术合伙人开始
|
||||
</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">
|
||||
我与谁合作
|
||||
</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">
|
||||
初创公司
|
||||
</h3>
|
||||
<p class="text-muted-foreground">
|
||||
从零到一构建产品的早期创业团队，需要快速迭代和灵活响应的技术方案。
|
||||
</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">
|
||||
独立创始人
|
||||
</h3>
|
||||
<p class="text-muted-foreground">
|
||||
独自构建产品的创业者，需要技术合伙人来实现产品愿景。
|
||||
</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">
|
||||
传统企业
|
||||
</h3>
|
||||
<p class="text-muted-foreground">
|
||||
希望数字化转型的传统企业，需要现代化的技术解决方案。
|
||||
</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">
|
||||
技术团队
|
||||
</h3>
|
||||
<p class="text-muted-foreground">
|
||||
需要额外技术资源或特定技能集来推进项目的开发团队。
|
||||
</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">
|
||||
我能构建什么
|
||||
</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">
|
||||
从 AI 助手到 Agent 系统，从 RAG 应用到 AI 驱动的 SaaS 产品。我可以帮助你将 AI 能力产品化。
|
||||
</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">
|
||||
现代 Web 应用、SaaS 平台、电商系统、内容管理系统等。使用 React、Next.js、Node.js 等技术栈。
|
||||
</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">
|
||||
从前端到后端，从数据库到部署，我提供完整的全栈开发能力，一个项目只需一个开发者。
|
||||
</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">
|
||||
合作模式
|
||||
</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">
|
||||
技术合伙人
|
||||
</h3>
|
||||
<p class="text-sm text-muted-foreground">
|
||||
长期合作，股权合作，共同承担创业风险与回报
|
||||
</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">
|
||||
项目制
|
||||
</h3>
|
||||
<p class="text-sm text-muted-foreground">
|
||||
按项目交付，固定价格或按阶段付款，适合明确需求的项目
|
||||
</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">
|
||||
咨询/顾问
|
||||
</h3>
|
||||
<p class="text-sm text-muted-foreground">
|
||||
按小时咨询，帮助你做出技术决策，审查代码，指导团队
|
||||
</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">
|
||||
工作方式
|
||||
</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">敏捷迭代</strong>
|
||||
<p class="text-muted-foreground text-sm">
|
||||
2周一个迭代，快速交付可用功能，持续获取反馈
|
||||
</p>
|
||||
</div>
|
||||
</li>
|
||||
<li class="flex items-start gap-3">
|
||||
<span class="text-green-500 text-xl">✓</span>
|
||||
<div>
|
||||
<strong class="block mb-1">透明沟通</strong>
|
||||
<p class="text-muted-foreground text-sm">
|
||||
定期同步进度，及时报告问题，保持信息对称
|
||||
</p>
|
||||
</div>
|
||||
</li>
|
||||
<li class="flex items-start gap-3">
|
||||
<span class="text-green-500 text-xl">✓</span>
|
||||
<div>
|
||||
<strong class="block mb-1">代码质量</strong>
|
||||
<p class="text-muted-foreground text-sm">
|
||||
完整的测试覆盖，清晰的文档注释，可维护的代码结构
|
||||
</p>
|
||||
</div>
|
||||
</li>
|
||||
<li class="flex items-start gap-3">
|
||||
<span class="text-green-500 text-xl">✓</span>
|
||||
<div>
|
||||
<strong class="block mb-1">产品思维</strong>
|
||||
<p class="text-muted-foreground text-sm">
|
||||
不只是写代码，还思考产品价值，用户体验和业务目标
|
||||
</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">
|
||||
当前可用性
|
||||
</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">
|
||||
目前可接受新项目
|
||||
</span>
|
||||
</div>
|
||||
<p class="text-muted-foreground mb-6">
|
||||
我目前可以接受 1-2 个新项目。偏好长期合作模式（技术合伙人或长期项目），但也会考虑短期项目。
|
||||
</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">
|
||||
可立即开始
|
||||
</span>
|
||||
<span class="px-3 py-1 bg-blue-500/20 text-blue-600 dark:text-blue-400 rounded-full text-sm">
|
||||
远程工作
|
||||
</span>
|
||||
<span class="px-3 py-1 bg-purple-500/20 text-purple-600 dark:text-purple-400 rounded-full text-sm">
|
||||
中英双语
|
||||
</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">
|
||||
准备好一起构建了吗？
|
||||
</h2>
|
||||
<p class="text-lg text-muted-foreground mb-8 max-w-xl mx-auto">
|
||||
告诉我你的项目想法，让我们看看能否合作。
|
||||
</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>
|
||||
发送邮件
|
||||
</a>
|
||||
<a
|
||||
href="/zh/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>
|
||||
了解更多关于我
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</Container>
|
||||
</section>
|
||||
</main>
|
||||
<Footer lang={lang} client:only="react" />
|
||||
</Layout>
|
||||
@@ -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="/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="/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,79 @@ 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">
|
||||
Featured 项目
|
||||
</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">
|
||||
一个开放的 AI 工作空间，让构建者能够更智能地工作
|
||||
</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">
|
||||
让 AI 成为你的共同构建者
|
||||
</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">
|
||||
从第一天就融入 AI 思维
|
||||
</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">
|
||||
完全开放，可自托管
|
||||
</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">
|
||||
为构建者打造的工作空间
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex flex-col sm:flex-row gap-4 justify-center">
|
||||
<a
|
||||
href="/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="/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>
|
||||
了解更多
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</Container>
|
||||
</section>
|
||||
|
||||
<!-- Services Section - Inlined Content -->
|
||||
<section id="services" class="py-20 px-4 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 +315,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">
|
||||
@@ -389,7 +458,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">
|
||||
我的项目
|
||||
|
||||
191
src/pages/zh/now.astro
Normal file
191
src/pages/zh/now.astro
Normal file
@@ -0,0 +1,191 @@
|
||||
---
|
||||
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' ? '现在' : 'Now';
|
||||
---
|
||||
|
||||
<Layout title={pageTitle}>
|
||||
<GlassHeader lang={lang} client:only="react" />
|
||||
<main class="min-h-screen">
|
||||
<!-- Now 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">
|
||||
关于我现在正在做什么
|
||||
</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">
|
||||
现在
|
||||
</h1>
|
||||
<p class="text-lg text-muted-foreground max-w-2xl mx-auto">
|
||||
持续更新我的现状、正在构建的内容以及合作机会
|
||||
</p>
|
||||
</div>
|
||||
</Container>
|
||||
</section>
|
||||
|
||||
<!-- Building Section -->
|
||||
<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">
|
||||
正在构建
|
||||
</h2>
|
||||
</div>
|
||||
|
||||
<div class="bg-white/10 dark:bg-gray-800/50 backdrop-blur-sm rounded-2xl border border-purple-500/20 p-8">
|
||||
<div class="flex items-start gap-6">
|
||||
<div class="w-16 h-16 bg-gradient-to-br from-purple-600 to-blue-600 rounded-xl flex items-center justify-center flex-shrink-0">
|
||||
<span class="text-3xl">⚡</span>
|
||||
</div>
|
||||
<div class="flex-1">
|
||||
<h3 class="text-xl font-bold mb-2">Elynd</h3>
|
||||
<p class="text-muted-foreground mb-4">
|
||||
一个开放的 AI 工作空间，让构建者能够更智能地工作。从 AI 第一性原理出发，打造完全开放、可自托管的协作工具。
|
||||
</p>
|
||||
<div class="flex flex-wrap gap-2">
|
||||
<span class="px-3 py-1 bg-purple-500/20 text-purple-600 dark:text-purple-400 rounded-full text-sm">AI 产品</span>
|
||||
<span class="px-3 py-1 bg-blue-500/20 text-blue-600 dark:text-blue-400 rounded-full text-sm">TypeScript</span>
|
||||
<span class="px-3 py-1 bg-green-500/20 text-green-600 dark:text-green-400 rounded-full text-sm">开源</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</Container>
|
||||
</section>
|
||||
|
||||
<!-- Exploring Section -->
|
||||
<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">
|
||||
正在探索
|
||||
</h2>
|
||||
</div>
|
||||
|
||||
<div class="grid gap-6">
|
||||
<div class="bg-white/10 dark:bg-gray-800/50 backdrop-blur-sm rounded-2xl border border-blue-500/20 p-6">
|
||||
<h3 class="text-lg font-bold mb-3">
|
||||
AI Agents 与工作流自动化
|
||||
</h3>
|
||||
<p class="text-muted-foreground">
|
||||
研究如何构建能够自主完成复杂任务的 AI Agent，以及如何将 AI 能力融入日常工作流。
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div class="bg-white/10 dark:bg-gray-800/50 backdrop-blur-sm rounded-2xl border border-blue-500/20 p-6">
|
||||
<h3 class="text-lg font-bold mb-3">
|
||||
产品导向的开发实践
|
||||
</h3>
|
||||
<p class="text-muted-foreground">
|
||||
探索从产品角度思考开发，构建真正解决用户问题的产品，而不仅仅是技术实现。
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</Container>
|
||||
</section>
|
||||
|
||||
<!-- Shipping Section -->
|
||||
<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">
|
||||
最近发布
|
||||
</h2>
|
||||
</div>
|
||||
|
||||
<div class="space-y-4">
|
||||
<div class="bg-white/10 dark:bg-gray-800/50 backdrop-blur-sm rounded-xl border border-green-500/20 p-6 flex items-center gap-4">
|
||||
<div class="w-12 h-12 bg-green-500/20 rounded-lg flex items-center justify-center flex-shrink-0">
|
||||
<span class="text-xl">✨</span>
|
||||
</div>
|
||||
<div>
|
||||
<h3 class="font-bold mb-1">
|
||||
个人网站全新改版
|
||||
</h3>
|
||||
<p class="text-sm text-muted-foreground">
|
||||
全新设计的个人网站，突出 AI 产品构建者的定位
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</Container>
|
||||
</section>
|
||||
|
||||
<!-- Open to Collaborate Section -->
|
||||
<section class="py-16 relative bg-gradient-to-br from-purple-900/10 to-blue-900/10 dark:from-purple-900/20 dark:to-blue-900/20">
|
||||
<Container>
|
||||
<div class="max-w-4xl mx-auto 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>
|
||||
</div>
|
||||
<h2 class="text-3xl font-bold">
|
||||
开放合作
|
||||
</h2>
|
||||
</div>
|
||||
|
||||
<div class="bg-white/10 dark:bg-gray-800/50 backdrop-blur-sm rounded-2xl border border-yellow-500/20 p-8">
|
||||
<p class="text-lg text-muted-foreground mb-8">
|
||||
我始终对新的合作机会持开放态度。无论你是想要构建产品、寻找技术合伙人，还是需要技术咨询，都可以联系我。
|
||||
</p>
|
||||
<div class="flex flex-col sm:flex-row gap-4 justify-center">
|
||||
<a
|
||||
href="/zh/hire"
|
||||
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>
|
||||
查看合作方式
|
||||
</a>
|
||||
<a
|
||||
href="mailto:zhaoguiyang18@gmail.com"
|
||||
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>
|
||||
发送邮件
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</Container>
|
||||
</section>
|
||||
|
||||
<!-- Last Updated -->
|
||||
<section class="py-12">
|
||||
<Container>
|
||||
<div class="max-w-4xl mx-auto text-center">
|
||||
<p class="text-sm text-muted-foreground">
|
||||
最后更新：
|
||||
<span class="font-medium">2025年3月</span>
|
||||
</p>
|
||||
</div>
|
||||
</Container>
|
||||
</section>
|
||||
</main>
|
||||
<Footer lang={lang} client:only="react" />
|
||||
</Layout>
|
||||
@@ -2,7 +2,7 @@
|
||||
import Layout from "@/layouts/Layout.astro";
|
||||
import GlassHeader from "@/components/GlassHeader";
|
||||
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";
|
||||
@@ -15,6 +15,15 @@ const pageTitle = t('projects.title');
|
||||
|
||||
// 根据当前语言获取项目数据
|
||||
const currentProjects = projects[lang as keyof typeof projects] || projects.en;
|
||||
|
||||
// Separate featured and grouped projects
|
||||
const featuredProject = currentProjects.find(p => p.featured);
|
||||
const otherProjects = currentProjects.filter(p => !p.featured);
|
||||
|
||||
// Group by type
|
||||
const productProjects = otherProjects.filter(p => p.type === 'product');
|
||||
const clientProjects = otherProjects.filter(p => p.type === 'client');
|
||||
const experimentProjects = otherProjects.filter(p => p.type === 'experiment');
|
||||
---
|
||||
|
||||
<Layout title={pageTitle}>
|
||||
@@ -24,8 +33,8 @@ const currentProjects = projects[lang as keyof typeof projects] || projects.en;
|
||||
<section class="py-24 relative overflow-hidden">
|
||||
<!-- 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">
|
||||
<!-- Main title -->
|
||||
<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">
|
||||
@@ -40,69 +49,274 @@ const currentProjects = projects[lang as keyof typeof projects] || projects.en;
|
||||
</Container>
|
||||
</section>
|
||||
|
||||
<!-- Projects Grid Section -->
|
||||
<section class="py-12 relative">
|
||||
<!-- Background gradient -->
|
||||
<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">
|
||||
<div class="grid grid-cols-1 lg:grid-cols-3 gap-8 items-stretch">
|
||||
{currentProjects.map((project) => (
|
||||
<div class={`group overflow-hidden border border-${project.color}-500/20 hover:border-${project.color}-500/40 h-full flex flex-col transition-all duration-500 hover:scale-105 bg-white/10 dark:bg-gray-800/50 backdrop-blur-sm rounded-xl relative`}>
|
||||
<!-- Project tag - positioned at top right -->
|
||||
<div class="absolute top-4 right-4 z-10">
|
||||
<span class={`px-3 py-1 bg-${project.color}-100 dark:bg-${project.color}-800 text-${project.color}-800 dark:text-${project.color}-200 text-xs rounded-full font-medium border border-${project.color}-200 dark:border-${project.color}-700`}>{t(`project.tag.${project.tag}`)}</span>
|
||||
</div>
|
||||
|
||||
<!-- Project image placeholder -->
|
||||
<div class={`h-48 bg-gradient-to-br ${project.image.bg} relative overflow-hidden`}>
|
||||
<div class={`absolute inset-0 bg-gradient-to-br ${project.image.bg} group-hover:${project.image.hover} transition-all duration-500`}></div>
|
||||
<div class="absolute bottom-4 left-4 right-4">
|
||||
<div class={`bg-black/50 backdrop-blur-sm rounded px-3 py-1 text-xs font-mono ${project.image.text}`}>
|
||||
{project.title}
|
||||
<!-- Featured Project Section -->
|
||||
{featuredProject && (
|
||||
<section class="py-12 bg-gradient-to-br from-purple-900/10 to-blue-900/10 dark:from-purple-900/20 dark:to-blue-900/20">
|
||||
<Container>
|
||||
<div class="max-w-5xl mx-auto">
|
||||
<div class="flex items-center gap-4 mb-8">
|
||||
<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">
|
||||
Featured 项目
|
||||
</span>
|
||||
</div>
|
||||
|
||||
<div class="bg-white/10 dark:bg-gray-800/50 backdrop-blur-sm rounded-2xl border border-purple-500/30 overflow-hidden">
|
||||
<div class="grid lg:grid-cols-2">
|
||||
<div class="h-64 lg:h-auto 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="text-8xl">{featuredProject.icon}</div>
|
||||
</div>
|
||||
<div class="p-8">
|
||||
<div class="flex items-center gap-3 mb-4">
|
||||
<span class="px-3 py-1 bg-purple-500/20 text-purple-600 dark:text-purple-400 rounded-full text-sm">
|
||||
{t(`project.status.${featuredProject.status}`)}
|
||||
</span>
|
||||
<span class="px-3 py-1 bg-blue-500/20 text-blue-600 dark:text-blue-400 rounded-full text-sm">
|
||||
{t(`project.type.${featuredProject.type}`)}
|
||||
</span>
|
||||
</div>
|
||||
|
||||
<h2 class="text-3xl font-bold mb-4">{featuredProject.title}</h2>
|
||||
|
||||
<div class="space-y-4 mb-6">
|
||||
<div>
|
||||
<span class="text-sm text-muted-foreground">{t('project.role')}:</span>
|
||||
<p class="font-medium">{featuredProject.role}</p>
|
||||
</div>
|
||||
<div>
|
||||
<span class="text-sm text-muted-foreground">{t('project.impact')}:</span>
|
||||
<p class="font-medium">{featuredProject.impact}</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="space-y-2 mb-6">
|
||||
{featuredProject.description.map((desc) => (
|
||||
<p class="text-muted-foreground text-sm">{desc}</p>
|
||||
))}
|
||||
</div>
|
||||
|
||||
<div class="flex flex-wrap gap-2 mb-6">
|
||||
{featuredProject.tech.map((tech) => (
|
||||
<span class="px-3 py-1 bg-gray-500/10 dark:bg-gray-400/20 text-gray-600 dark:text-gray-300 text-sm rounded-md border border-gray-500/20 dark:border-gray-400/30">{tech}</span>
|
||||
))}
|
||||
</div>
|
||||
|
||||
<div class="flex gap-4">
|
||||
<a href={featuredProject.link} class="bg-purple-500 hover:bg-purple-600 text-white px-6 py-2 rounded-lg font-medium transition-colors inline-flex items-center gap-2">
|
||||
{t('project.visit')}
|
||||
<svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M14 5l7 7m0 0l-7 7m7-7H3"></path>
|
||||
</svg>
|
||||
</a>
|
||||
{featuredProject.links?.github && (
|
||||
<a href={featuredProject.links.github} target="_blank" rel="noopener noreferrer" class="border border-gray-500 text-gray-600 dark:text-gray-300 hover:bg-gray-500/10 px-6 py-2 rounded-lg font-medium transition-colors inline-flex items-center gap-2">
|
||||
<svg class="w-5 h-5" fill="currentColor" viewBox="0 0 24 24">
|
||||
<path d="M12 0c-6.626 0-12 5.373-12 12 0 5.302 3.438 9.8 8.207 11.387.599.111.793-.261.793-.577v-2.234c-3.338.726-4.033-1.416-4.033-1.416-.546-1.387-1.333-1.756-1.333-1.756-1.089-.745.083-.729.083-.729 1.205.084 1.839 1.237 1.839 1.237 1.07 1.834 2.807 1.304 3.492.997.107-.775.418-1.305.762-1.604-2.665-.305-5.467-1.334-5.467-5.931 0-1.311.469-2.381 1.236-3.221-.124-.303-.535-1.524.117-3.176 0 0 1.008-.322 3.301 1.23.957-.266 1.983-.399 3.003-.404 1.02.005 2.047.138 3.006.404 2.291-1.552 3.297-1.23 3.297-1.23.653 1.653.242 2.874.118 3.176.77.84 1.235 1.911 1.235 3.221 0 4.609-2.807 5.624-5.479 5.921.43.372.823 1.102.823 2.222v3.293c0 .319.192.694.801.576 4.765-1.589 8.199-6.086 8.199-11.386 0-6.627-5.373-12-12-12z"/>
|
||||
</svg>
|
||||
GitHub
|
||||
</a>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="p-6 pb-4">
|
||||
<h3 class={`text-xl group-hover:text-${project.color}-400 transition-colors duration-300 flex items-center gap-2 font-bold mb-4`}>
|
||||
<span class={`text-${project.color}-500`}>{project.icon}</span>
|
||||
{project.title}
|
||||
</h3>
|
||||
</div>
|
||||
|
||||
<div class="px-6 flex-grow">
|
||||
<div class="space-y-3">
|
||||
{project.description.map((desc) => (
|
||||
<div class="flex items-start gap-2 text-sm text-muted-foreground group-hover:text-foreground transition-colors duration-300">
|
||||
<span class={`text-${project.color}-500 mt-1`}>•</span>
|
||||
<span>{desc}</span>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
|
||||
<!-- Tech stack indicators with unified gray styling -->
|
||||
<div class="mt-6 mb-4 flex flex-wrap gap-2">
|
||||
{project.tech.map((tech) => (
|
||||
<span class="px-2 py-1 bg-gray-500/10 dark:bg-gray-400/20 text-gray-600 dark:text-gray-300 text-xs rounded-md border border-gray-500/20 dark:border-gray-400/30">{tech}</span>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Visit project link -->
|
||||
<div class="p-6 pt-2">
|
||||
<a href={project.link} class={`inline-flex items-center text-sm font-medium text-${project.color}-500 hover:text-${project.color}-600 dark:hover:text-${project.color}-400 transition-colors duration-300`}>
|
||||
{t('project.visit')}
|
||||
<svg class="ml-1 w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M14 5l7 7m0 0l-7 7m7-7H3"></path>
|
||||
</svg>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</Container>
|
||||
</section>
|
||||
)}
|
||||
|
||||
<!-- Projects by Type -->
|
||||
<section class="py-12 relative">
|
||||
<Container>
|
||||
<!-- Product Projects -->
|
||||
{productProjects.length > 0 && (
|
||||
<>
|
||||
<div class="flex items-center gap-4 mb-8">
|
||||
<div class="w-10 h-10 bg-purple-500/20 rounded-lg flex items-center justify-center">
|
||||
<span class="text-xl">🛍️</span>
|
||||
</div>
|
||||
<h2 class="text-2xl font-bold">{t('project.type.product')}</h2>
|
||||
</div>
|
||||
<div class="grid grid-cols-1 lg:grid-cols-3 gap-8 mb-12">
|
||||
{productProjects.map((project) => (
|
||||
<div class={`group overflow-hidden border border-${project.color}-500/20 hover:border-${project.color}-500/40 h-full flex flex-col transition-all duration-500 hover:scale-105 bg-white/10 dark:bg-gray-800/50 backdrop-blur-sm rounded-xl relative`}>
|
||||
<div class="absolute top-4 right-4 z-10 flex gap-2">
|
||||
<span class={`px-3 py-1 bg-${project.color}-100 dark:bg-${project.color}-800 text-${project.color}-800 dark:text-${project.color}-200 text-xs rounded-full font-medium border border-${project.color}-200 dark:border-${project.color}-700`}>{t(`project.status.${project.status}`)}</span>
|
||||
</div>
|
||||
|
||||
<div class={`h-48 bg-gradient-to-br ${project.image.bg} relative overflow-hidden`}>
|
||||
<div class={`absolute inset-0 bg-gradient-to-br ${project.image.bg} group-hover:${project.image.hover} transition-all duration-500`}></div>
|
||||
<div class="absolute bottom-4 left-4 right-4">
|
||||
<div class={`bg-black/50 backdrop-blur-sm rounded px-3 py-1 text-xs font-mono ${project.image.text}`}>
|
||||
{project.title}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="p-6 pb-4">
|
||||
<h3 class={`text-xl group-hover:text-${project.color}-400 transition-colors duration-300 flex items-center gap-2 font-bold mb-4`}>
|
||||
<span class={`text-${project.color}-500`}>{project.icon}</span>
|
||||
{project.title}
|
||||
</h3>
|
||||
</div>
|
||||
|
||||
<div class="px-6 flex-grow">
|
||||
<div class="space-y-3">
|
||||
{project.description.slice(0, 2).map((desc) => (
|
||||
<div class="flex items-start gap-2 text-sm text-muted-foreground group-hover:text-foreground transition-colors duration-300">
|
||||
<span class={`text-${project.color}-500 mt-1`}>•</span>
|
||||
<span>{desc}</span>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
|
||||
<div class="mt-6 mb-4 flex flex-wrap gap-2">
|
||||
{project.tech.slice(0, 4).map((tech) => (
|
||||
<span class="px-2 py-1 bg-gray-500/10 dark:bg-gray-400/20 text-gray-600 dark:text-gray-300 text-xs rounded-md border border-gray-500/20 dark:border-gray-400/30">{tech}</span>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="p-6 pt-2">
|
||||
<a href={project.link} class={`inline-flex items-center text-sm font-medium text-${project.color}-500 hover:text-${project.color}-600 dark:hover:text-${project.color}-400 transition-colors duration-300`}>
|
||||
{t('project.visit')}
|
||||
<svg class="ml-1 w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M14 5l7 7m0 0l-7 7m7-7H3"></path>
|
||||
</svg>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</>
|
||||
)}
|
||||
|
||||
<!-- Client Projects -->
|
||||
{clientProjects.length > 0 && (
|
||||
<>
|
||||
<div class="flex items-center gap-4 mb-8">
|
||||
<div class="w-10 h-10 bg-blue-500/20 rounded-lg flex items-center justify-center">
|
||||
<span class="text-xl">💼</span>
|
||||
</div>
|
||||
<h2 class="text-2xl font-bold">{t('project.type.client')}</h2>
|
||||
</div>
|
||||
<div class="grid grid-cols-1 lg:grid-cols-3 gap-8 mb-12">
|
||||
{clientProjects.map((project) => (
|
||||
<div class={`group overflow-hidden border border-${project.color}-500/20 hover:border-${project.color}-500/40 h-full flex flex-col transition-all duration-500 hover:scale-105 bg-white/10 dark:bg-gray-800/50 backdrop-blur-sm rounded-xl relative`}>
|
||||
<div class="absolute top-4 right-4 z-10 flex gap-2">
|
||||
<span class={`px-3 py-1 bg-${project.color}-100 dark:bg-${project.color}-800 text-${project.color}-800 dark:text-${project.color}-200 text-xs rounded-full font-medium border border-${project.color}-200 dark:border-${project.color}-700`}>{t(`project.status.${project.status}`)}</span>
|
||||
</div>
|
||||
|
||||
<div class={`h-48 bg-gradient-to-br ${project.image.bg} relative overflow-hidden`}>
|
||||
<div class={`absolute inset-0 bg-gradient-to-br ${project.image.bg} group-hover:${project.image.hover} transition-all duration-500`}></div>
|
||||
<div class="absolute bottom-4 left-4 right-4">
|
||||
<div class={`bg-black/50 backdrop-blur-sm rounded px-3 py-1 text-xs font-mono ${project.image.text}`}>
|
||||
{project.title}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="p-6 pb-4">
|
||||
<h3 class={`text-xl group-hover:text-${project.color}-400 transition-colors duration-300 flex items-center gap-2 font-bold mb-4`}>
|
||||
<span class={`text-${project.color}-500`}>{project.icon}</span>
|
||||
{project.title}
|
||||
</h3>
|
||||
</div>
|
||||
|
||||
<div class="px-6 flex-grow">
|
||||
<div class="space-y-3">
|
||||
{project.description.slice(0, 2).map((desc) => (
|
||||
<div class="flex items-start gap-2 text-sm text-muted-foreground group-hover:text-foreground transition-colors duration-300">
|
||||
<span class={`text-${project.color}-500 mt-1`}>•</span>
|
||||
<span>{desc}</span>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
|
||||
<div class="mt-6 mb-4 flex flex-wrap gap-2">
|
||||
{project.tech.slice(0, 4).map((tech) => (
|
||||
<span class="px-2 py-1 bg-gray-500/10 dark:bg-gray-400/20 text-gray-600 dark:text-gray-300 text-xs rounded-md border border-gray-500/20 dark:border-gray-400/30">{tech}</span>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="p-6 pt-2">
|
||||
<a href={project.link} class={`inline-flex items-center text-sm font-medium text-${project.color}-500 hover:text-${project.color}-600 dark:hover:text-${project.color}-400 transition-colors duration-300`}>
|
||||
{t('project.visit')}
|
||||
<svg class="ml-1 w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M14 5l7 7m0 0l-7 7m7-7H3"></path>
|
||||
</svg>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</>
|
||||
)}
|
||||
|
||||
<!-- Experiment Projects -->
|
||||
{experimentProjects.length > 0 && (
|
||||
<>
|
||||
<div class="flex items-center gap-4 mb-8">
|
||||
<div class="w-10 h-10 bg-green-500/20 rounded-lg flex items-center justify-center">
|
||||
<span class="text-xl">🧪</span>
|
||||
</div>
|
||||
<h2 class="text-2xl font-bold">{t('project.type.experiment')}</h2>
|
||||
</div>
|
||||
<div class="grid grid-cols-1 lg:grid-cols-3 gap-8">
|
||||
{experimentProjects.map((project) => (
|
||||
<div class={`group overflow-hidden border border-${project.color}-500/20 hover:border-${project.color}-500/40 h-full flex flex-col transition-all duration-500 hover:scale-105 bg-white/10 dark:bg-gray-800/50 backdrop-blur-sm rounded-xl relative`}>
|
||||
<div class="absolute top-4 right-4 z-10 flex gap-2">
|
||||
<span class={`px-3 py-1 bg-${project.color}-100 dark:bg-${project.color}-800 text-${project.color}-800 dark:text-${project.color}-200 text-xs rounded-full font-medium border border-${project.color}-200 dark:border-${project.color}-700`}>{t(`project.status.${project.status}`)}</span>
|
||||
</div>
|
||||
|
||||
<div class={`h-48 bg-gradient-to-br ${project.image.bg} relative overflow-hidden`}>
|
||||
<div class={`absolute inset-0 bg-gradient-to-br ${project.image.bg} group-hover:${project.image.hover} transition-all duration-500`}></div>
|
||||
<div class="absolute bottom-4 left-4 right-4">
|
||||
<div class={`bg-black/50 backdrop-blur-sm rounded px-3 py-1 text-xs font-mono ${project.image.text}`}>
|
||||
{project.title}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="p-6 pb-4">
|
||||
<h3 class={`text-xl group-hover:text-${project.color}-400 transition-colors duration-300 flex items-center gap-2 font-bold mb-4`}>
|
||||
<span class={`text-${project.color}-500`}>{project.icon}</span>
|
||||
{project.title}
|
||||
</h3>
|
||||
</div>
|
||||
|
||||
<div class="px-6 flex-grow">
|
||||
<div class="space-y-3">
|
||||
{project.description.slice(0, 2).map((desc) => (
|
||||
<div class="flex items-start gap-2 text-sm text-muted-foreground group-hover:text-foreground transition-colors duration-300">
|
||||
<span class={`text-${project.color}-500 mt-1`}>•</span>
|
||||
<span>{desc}</span>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
|
||||
<div class="mt-6 mb-4 flex flex-wrap gap-2">
|
||||
{project.tech.slice(0, 4).map((tech) => (
|
||||
<span class="px-2 py-1 bg-gray-500/10 dark:bg-gray-400/20 text-gray-600 dark:text-gray-300 text-xs rounded-md border border-gray-500/20 dark:border-gray-400/30">{tech}</span>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="p-6 pt-2">
|
||||
<a href={project.link} class={`inline-flex items-center text-sm font-medium text-${project.color}-500 hover:text-${project.color}-600 dark:hover:text-${project.color}-400 transition-colors duration-300`}>
|
||||
{t('project.visit')}
|
||||
<svg class="ml-1 w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M14 5l7 7m0 0l-7 7m7-7H3"></path>
|
||||
</svg>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</>
|
||||
)}
|
||||
</Container>
|
||||
</section>
|
||||
</main>
|
||||
<Footer lang={lang} client:load />
|
||||
</Layout>
|
||||
</Layout>
|
||||
|
||||
@@ -1,108 +1,42 @@
|
||||
---
|
||||
title: "我的服务"
|
||||
description: "探索我提供的专业服务，帮助您实现数字项目"
|
||||
title: "我能做什么"
|
||||
description: "专注于构建 AI 产品和技术卓越的专业服务"
|
||||
layout: "../../layouts/AboutLayout.astro"
|
||||
---
|
||||
|
||||
import HighlightBox from '../../components/markdown/HighlightBox.astro';
|
||||
|
||||
# 提供服务 🛠️
|
||||
# 我能做什么 🚀
|
||||
|
||||
<HighlightBox type="tip" title="服务理念">
|
||||
用优雅的代码和创新的思维，为复杂问题打造精致的解决方案。
|
||||
<HighlightBox type="tip">
|
||||
构建 AI 驱动产品，将雄心勃勃的想法变为现实。
|
||||
</HighlightBox>
|
||||
|
||||
## 网站开发 🌐
|
||||
## AI 产品开发 🤖
|
||||
|
||||
- 使用最新技术构建响应式现代网站
|
||||
- 创建根据您特定需求定制的网络应用程序
|
||||
- 使用 React、Vue.js 或 Angular 实现前端界面
|
||||
- 使用 Node.js、Express、Django 或 Flask 开发后端系统
|
||||
- 优化网站性能和用户体验
|
||||
- 从概念到上线构建 AI 驱动产品
|
||||
- RAG 应用、AI Agent 和智能自动化
|
||||
- 使用现代技术栈的全栈开发（React、Next.js、Node.js）
|
||||
- 产品思维 - 专注于解决实际问题
|
||||
- 快速原型和迭代开发
|
||||
|
||||
## APP 开发 📱
|
||||
## 技术咨询 📊
|
||||
|
||||
- 使用 React Native 或 Flutter 开发跨平台移动应用
|
||||
- 创建原生 iOS 和 Android 应用
|
||||
- 构建渐进式网络应用（PWAs），提供类似移动应用的网页体验
|
||||
- 实现离线功能和推送通知
|
||||
- 集成设备功能，如摄像头、GPS 和传感器
|
||||
<HighlightBox type="info" title="我可以如何帮助">
|
||||
|
||||
## 微信小程序开发 💬
|
||||
|
||||
- 为企业设计和开发微信小程序
|
||||
- 创建交互性强且引人入胜的用户界面
|
||||
- 实现微信支付和其他微信 API
|
||||
- 针对微信生态系统和要求进行优化
|
||||
- 构建特定于您业务需求的自定义功能
|
||||
|
||||
## UI设计 🎨
|
||||
|
||||
- 创建现代、简洁、直观的用户界面
|
||||
- 设计适用于所有设备的响应式布局
|
||||
- 开发品牌标识和视觉语言
|
||||
- 创建线框图、原型和高保真模型
|
||||
- 实现设计系统，确保一致的用户体验
|
||||
|
||||
## BUg 修复 🐛
|
||||
|
||||
<HighlightBox type="error" title="Bug修复与代码优化">
|
||||
|
||||
- 识别和解决现有应用程序中的问题
|
||||
- 调试前端和后端系统中的复杂问题
|
||||
- 优化代码以提高性能和可靠性
|
||||
- 将旧代码重构为现代标准
|
||||
- 实施自动化测试以防止未来出现错误
|
||||
- 技术架构和技术栈决策
|
||||
- 代码审查和最佳实践实施
|
||||
- 团队指导和知识转移
|
||||
- 性能优化和扩展策略
|
||||
- 投资技术尽职调查
|
||||
|
||||
</HighlightBox>
|
||||
|
||||
## 注意事项 📝
|
||||
# 一起构建 💼
|
||||
|
||||
<HighlightBox type="warning" title="合作前须知">
|
||||
为了减少不必要的麻烦，请在沟通之前仔细阅读以下注意事项：
|
||||
<HighlightBox type="success" title="联系我">
|
||||
我始终对讨论新项目和机会持开放态度。无论你是正在寻找技术合伙人、需要帮助构建 AI 产品，还是想要技术咨询 - 让我们聊聊。
|
||||
|
||||
1. 请提供详细的需求说明，有原型图或设计稿更佳（如果你不了解这些也没关系，我这边可以帮你整理）。
|
||||
2. 请提供项目完成时间，开发周期。
|
||||
3. 一般情况下只接商单，其他形式的合作需要另行协商。
|
||||
4. 暂时无法提供开票服务。
|
||||
5. 项目完成后可免费维护3个月。
|
||||
</HighlightBox>
|
||||
|
||||
## 合作步骤 🤝
|
||||
|
||||
<HighlightBox type="info" title="合作流程">
|
||||
|
||||
1. 确定合作项目
|
||||
2. 确定合作方式
|
||||
3. 确定项目功能需求
|
||||
4. 确定开发周期以及交付时间
|
||||
5. 确定项目设计图或原型图
|
||||
6. 支付费用
|
||||
7. 项目开发
|
||||
8. 项目测试
|
||||
9. 项目上线
|
||||
10. 项目维护
|
||||
|
||||
</HighlightBox>
|
||||
|
||||
## 付款方式 💰
|
||||
|
||||
<HighlightBox type="success" title="支付方式">
|
||||
|
||||
- 微信支付
|
||||
- 支付宝支付
|
||||
- 银行转账
|
||||
|
||||
**注：所有项目费用均为442付款制**
|
||||
|
||||
</HighlightBox>
|
||||
|
||||
## 联系方式 📞
|
||||
|
||||
<HighlightBox type="info" title="联系我">
|
||||
|
||||
- QQ: **2770723534**
|
||||
- 微信：**JoyCodeing**
|
||||
- 邮箱：**zhaoguiyang18@gmail.com**
|
||||
|
||||
</HighlightBox>
|
||||
- 查看我的[合作](/zh/hire)页面了解合作方式
|
||||
</HighlightBox>
|
||||
|
||||
Reference in New Issue
Block a user