diff --git a/src/i18n/translations.ts b/src/i18n/translations.ts index f1d789a..185f7b3 100644 --- a/src/i18n/translations.ts +++ b/src/i18n/translations.ts @@ -82,6 +82,68 @@ export const translations = { learnMore: 'Learn More About Me', toolbox: 'My Toolbox', }, + home: { + hero: { + eyebrow: 'Personal Brand', + summary: 'I design and build reliable digital products with clear user value, strong engineering foundations, and practical AI integration.', + ctaPrimary: 'About Me', + ctaSecondary: 'Work With Me', + terminalStatus: 'Open to remote roles and project collaboration', + }, + trust: { + item1: 'Remote Ready', + item2: 'Async Friendly Collaboration', + item3: 'Product + Engineering Mindset', + item4: 'Stable Delivery Rhythm', + }, + metrics: { + item1: 'Focused on long-term product quality', + item2: 'Strong in TypeScript, React, and Node.js', + item3: 'Comfortable with AI-enabled product workflows', + item4: 'Available for freelance and full-time opportunities', + }, + services: { + eyebrow: 'What I Deliver', + title: 'Services', + description: 'Practical technical support from strategy to execution.', + }, + career: { + eyebrow: 'Career Snapshot', + title: 'Career Highlights', + description: 'Mock milestones for layout. Real details can be swapped in later.', + cta: 'View Full Resume', + card1: { + period: '2024 — Now', + title: 'AI Product Builder · Independent', + outcome: 'Built and iterated AI-first product concepts with fast prototyping and clear product direction.', + }, + card2: { + period: '2021 — 2024', + title: 'Senior Frontend Engineer · Remote Team', + outcome: 'Led core front-end modules and improved team delivery efficiency through reusable architecture.', + }, + card3: { + period: '2018 — 2021', + title: 'Full-stack Engineer · Growth Stage Startup', + outcome: 'Delivered multiple customer-facing features across web stack and supported stable product growth.', + }, + }, + featured: { + eyebrow: 'Featured Work', + title: 'Representative Project', + challenge: 'Challenge', + approach: 'Approach', + outcome: 'Outcome', + ctaPrimary: 'View Project', + ctaSecondary: 'See More Opportunities', + }, + final: { + title: 'Open to Meaningful Work', + description: 'If you are building quality products and need reliable execution, I would love to connect.', + ctaPrimary: 'Know Me Better', + ctaSecondary: 'Start a Conversation', + }, + }, }, zh: { nav: { @@ -160,6 +222,68 @@ export const translations = { learnMore: '了解更多', toolbox: '我的工具箱', }, + home: { + hero: { + eyebrow: '个人品牌', + summary: '我专注于打造可靠且有业务价值的数字产品，兼顾工程质量、产品思维与 AI 实践落地。', + ctaPrimary: '了解我', + ctaSecondary: '合作咨询', + terminalStatus: '可远程合作，开放全职与项目机会', + }, + trust: { + item1: '支持远程协作', + item2: '擅长异步协作流程', + item3: '产品与工程双视角', + item4: '稳定可预期的交付节奏', + }, + metrics: { + item1: '重视长期可维护的产品质量', + item2: '核心技术栈 TypeScript / React / Node.js', + item3: '具备 AI 产品化与工程化经验', + item4: '可承接项目合作与全职机会', + }, + services: { + eyebrow: '可交付能力', + title: '服务方向', + description: '从技术方案到落地交付，提供务实可靠的支持。', + }, + career: { + eyebrow: '履历速览', + title: '关键经历', + description: '当前为布局示例数据，后续可替换为你的真实履历。', + cta: '查看完整履历', + card1: { + period: '2024 — 至今', + title: 'AI 产品构建者 · 独立开发', + outcome: '围绕 AI 场景进行产品探索与快速原型迭代，持续验证方向与可行性。', + }, + card2: { + period: '2021 — 2024', + title: '高级前端工程师 · 远程团队', + outcome: '负责核心前端模块建设，通过可复用架构提升团队交付效率与稳定性。', + }, + card3: { + period: '2018 — 2021', + title: '全栈工程师 · 成长期团队', + outcome: '完成多项面向用户的功能交付，覆盖前后端协作并支撑产品稳定增长。', + }, + }, + featured: { + eyebrow: '代表作品', + title: '精选项目', + challenge: '挑战', + approach: '方案', + outcome: '结果', + ctaPrimary: '查看项目', + ctaSecondary: '了解合作方式', + }, + final: { + title: '期待长期且有价值的合作', + description: '如果你也在构建高质量产品，并需要稳定执行与协作，我很乐意进一步沟通。', + ctaPrimary: '进一步了解我', + ctaSecondary: '发起沟通', + }, + }, }, } as const; diff --git a/src/pages/index.astro b/src/pages/index.astro index 576ffe3..56e4fe7 100644 --- a/src/pages/index.astro +++ b/src/pages/index.astro @@ -1,197 +1,101 @@ --- import Layout from "@/layouts/Layout.astro"; 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.astro"; -import MotionWrapper from "@/components/MotionWrapper"; import { useTranslations } from "@/i18n/utils"; import type { Lang } from "@/types/i18n"; import { defaultLang } from "@/i18n/ui"; -import { personalInfo, services } from "@/lib/data/index"; +import { personalInfo, services, projects } from "@/lib/data/index"; -// 使用Astro.currentLocale获取当前语言环境 -const lang = Astro.currentLocale as Lang || defaultLang; +const lang = (Astro.currentLocale as Lang) || defaultLang; const t = useTranslations(lang); -const pageTitle = t('site.title'); +const pageTitle = t("site.title"); +const prefix = lang === "zh" ? "/zh" : ""; + +const localizedServices = services[lang]; +const featuredProject = projects[lang].find((project) => project.featured) ?? projects[lang][0]; + +const careerMilestones = [ + { + period: t("home.career.card1.period"), + title: t("home.career.card1.title"), + outcome: t("home.career.card1.outcome"), + }, + { + period: t("home.career.card2.period"), + title: t("home.career.card2.title"), + outcome: t("home.career.card2.outcome"), + }, + { + period: t("home.career.card3.period"), + title: t("home.career.card3.title"), + outcome: t("home.career.card3.outcome"), + }, +]; + +const keyFacts = [ + t("home.trust.item1"), + t("home.trust.item3"), + t("home.trust.item4"), +]; --- -
- -
- + +
+
- -
- -
- - - - - {t('hero.greeting')} {personalInfo.name} - -
- - -

- {personalInfo.name} -

- - -

- - - 👨‍💻 - -

- - -

- {personalInfo.description.en} -

- - -
-

{t('hero.lookingForJob')}

-

{t('hero.digitalNomad')}

-
- - -
- - - - - {t('hero.ctaPrimary')} - - - - - - - {t('hero.ctaSecondary')} - -
- - -
-
- - - - - China +
+
+
+

{t("home.hero.eyebrow")}

+

{personalInfo.name}

+

{personalInfo.position[lang]}

+

{t("home.hero.summary")}

- - - - - GitHub - - - {/* LinkedIn link temporarily hidden - - - - - LinkedIn - - */} -
-
- - -
-
- -
-
-
-
-
-
-
- {personalInfo.terminal.username} -
-
+
+ + {t("home.hero.ctaPrimary")} + + + {t("home.hero.ctaSecondary")} +
- - -
-
-
- $ - whoami -
-
Joy Zhao
- -
- $ - cat about.txt -
-
- OS: DevOS v4.2.0
- Host: ThinkPad X1 Carbon
- Kernel: 5.15.0-dev
- Uptime: 45 days, 17 hours
- Languages: TypeScript, JavaScript, Python
- Editor: VSCode / Neovim
- Frontend: React, Vue, Next.js, Nuxt.js
- Backend: Node.js, Express.js, Nest.js
- Database: PostgreSQL, MongoDB
- DevOps: Docker, Git, AWS, Cloudflare -
- -
- $ - ls projects/ -
-
- taskify-app/ e-commerce-platform/ portfolio-site/ -
- -
- $ - _ + +
+ {keyFacts.map((item) => ( + + {item} + + ))} +
+
+ +
+
+
+
+ + +
+ {personalInfo.terminal.username} +
+
+

$ whoami

+

{personalInfo.name}

+

$ role

+

{personalInfo.position[lang]}

+

$ stack

+

TypeScript, React, Node.js, Astro

+

$ status

+

{t("home.hero.terminalStatus")}

+

$ contact

+

{personalInfo.github}

@@ -199,466 +103,134 @@ const pageTitle = t('site.title');
- - - -
+
-
- - {lang === 'zh' ? 'featured 项目' : 'Featured Project'} - -

- Elynd -

-

- {lang === 'zh' - ? '一个开放的 AI 工作空间，让构建者能够更智能地工作' - : 'An open AI workspace for builders to work smarter'} -

-
- -
-
-
-
-
-
⚡
-
- {lang === 'zh' ? '让 AI 成为你的共同构建者' : 'Make AI Your Co-Builder'} -
-
-
-
-
-
-
AI-First
-
- {lang === 'zh' ? '从第一天就融入 AI 思维' : 'Built with AI from day one'} -
-
-
-
Open
-
- {lang === 'zh' ? '完全开放，可自托管' : 'Fully open, self-hostable'} -
-
-
-
Builder-First
-
- {lang === 'zh' ? '为构建者打造的工作空间' : 'Workspace built for builders'} -
-
-
-
- - 🚀 - {t('hero.ctaSecondary')} - - - 📡 - {lang === 'zh' ? '了解更多' : 'Learn More'} - -
-
+
+
+

{t("home.services.eyebrow")}

+

{t("home.services.title")}

+

{t("home.services.description")}

+
- -
- -
- -

- {t('services.title')} -

- -
- {services.en.map((service) => ( -
-
-
- +
+ {localizedServices.map((service) => ( +
+
+
+
-

{service.title}

+

{service.title}

-
    - {service.items.map((item, index) => ( -
  • - {index + 1}. - {item} +
      + {service.items.slice(0, 3).map((item) => ( +
    • + + {item}
      • ))}
    +
+ ))} +
+ +
+ +
+ +
+

{t("home.career.eyebrow")}

+

{t("home.career.title")}

+

{t("home.career.description")}

+
+ +
+ {careerMilestones.map((item) => ( +
+ +
+

{item.period}

+

{item.title}

+

{item.outcome}

+
))}
- -
- - - - - {t('services.viewAll')} + +
+ + {t("home.career.cta")}
- - -
- -
- - -
- -
-

- {t('about.title')} -

+ +
+ +
+

{t("home.featured.eyebrow")}

+

{t("home.featured.title")}

+
+ +
+
+ {t("project.featured")} +

{featuredProject.title}

- -
- -
- -
-

- 👋 - {t('about.sectionTitle')} -

-
- {personalInfo.about[lang].map((paragraph) => ( -

- {paragraph} -

- ))}
- -
- - - - - {t('about.learnMore')} - -
-
- - - +
+
+

{t("home.featured.challenge")}

+

{featuredProject.impact}

- - -
-

- 💻 - {t('about.toolbox')} -

- -
- -
-
- Frontend - 90% -
-
-
-
- -
- Backend - 85% -
-
-
-
- -
- DevOps - 75% -
-
-
-
- -
- Mobile - 65% -
-
-
-
-
- - -
-
- {['JavaScript', 'React', 'Node.js', 'TypeScript', 'TailwindCSS', 'Python', 'Docker', 'Git'].map((tech) => ( - - {tech} - - ))} -
-
-
+
+

{t("home.featured.approach")}

+

{featuredProject.description[0]}

+
+

{t("home.featured.outcome")}

+

{featuredProject.description[1]}

+
+
+ +
+ {featuredProject.tech.slice(0, 4).map((tech) => ( + {tech} + ))} +
+ +
+ + {t("home.featured.ctaPrimary")} + + + {t("home.featured.ctaSecondary")} + +
+
+ +
+ +
+ +
+

{t("home.final.title")}

+

{t("home.final.description")}

+
+ + {t("home.final.ctaPrimary")} + + + {t("home.final.ctaSecondary")} +
- - -
+