From 1ace97c5e105d68e22d47ec4b59c4cac0f352ec8 Mon Sep 17 00:00:00 2001 From: joyzhao Date: Mon, 16 Jun 2025 18:32:43 +0800 Subject: [PATCH] refactor: simplify personal info and remove unused components - Replace translation-based personal info with direct values - Remove unused HeroSection, AboutSection, and ProjectsSection components - Clean up i18n translations to only keep essential navigation items --- src/components/AboutSection.tsx | 194 ----------- src/components/Footer.tsx | 3 +- src/components/HeroSection.tsx | 204 ----------- src/components/ProjectsSection.tsx | 133 ------- src/i18n/ui.ts | 382 ++------------------ src/lib/data.ts | 48 +-- src/pages/index.astro | 538 +++++++++++++++++++++++++++-- src/pages/zh/index.astro | 538 +++++++++++++++++++++++++++-- 8 files changed, 1062 insertions(+), 978 deletions(-) delete mode 100644 src/components/AboutSection.tsx delete mode 100644 src/components/HeroSection.tsx delete mode 100644 src/components/ProjectsSection.tsx diff --git a/src/components/AboutSection.tsx b/src/components/AboutSection.tsx deleted file mode 100644 index b8224de..0000000 --- a/src/components/AboutSection.tsx +++ /dev/null @@ -1,194 +0,0 @@ -import { motion } from "framer-motion"; -import { useTranslations } from "@/i18n/utils"; -import MotionWrapper from "./MotionWrapper"; -import { User, Code, Coffee, Heart } from "lucide-react"; - -/** - * About section component that displays personal introduction - */ -export default function AboutSection({ lang }: { lang: "en" | "zh" }) { - const t = useTranslations(lang); - - const containerVariants = { - hidden: { opacity: 0 }, - visible: { - opacity: 1, - transition: { - staggerChildren: 0.2, - delayChildren: 0.1, - }, - }, - }; - - const itemVariants = { - hidden: { opacity: 0, y: 20 }, - visible: { - opacity: 1, - y: 0, - transition: { - duration: 0.6, - }, - }, - }; - - const stats = [ - { - number: "152", - label: t('about.stats.repositories'), - icon: Code, - }, - { - number: "42K", - label: t('about.stats.commits'), - icon: Coffee, - }, - { - number: "87", - label: t('about.stats.prsmerged'), - icon: Heart, - }, - ]; - - return ( -
- {/* Background gradient */} -
- -
- - - {/* Section Title */} - -

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

- - - {/* About Content */} -
- {/* Left side - Description and Stats */} - - {/* Description */} -
-

- 👋 - 关于我 -

-
-

- {t('about.description.paragraph1')} -

-

- {t('about.description.paragraph2')} -

-

- {t('about.description.paragraph3')} -

-
-
- - {/* Stats Grid */} -
- {stats.map((stat, index) => { - const IconComponent = stat.icon; - return ( - - -
- {stat.number} -
-
- {stat.label} -
- - ); - })} -
- - - {/* Right side - Skills Toolbox */} - -

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

- -
- {/* Skills Progress */} -
-
- {t('about.toolbox.frontend')} - 90% -
-
-
-
- -
- {t('about.toolbox.backend')} - 85% -
-
-
-
- -
- {t('about.toolbox.devops')} - 75% -
-
-
-
- -
- {t('about.toolbox.mobile')} - 65% -
-
-
-
-
- - {/* Tech Stack Tags */} -
-
- {['JavaScript', 'React', 'Node.js', 'TypeScript', 'TailwindCSS', 'Python', 'Docker', 'Git'].map((tech) => ( - - {tech} - - ))} -
-
-
- -
- - -
-
- ); -} \ No newline at end of file diff --git a/src/components/Footer.tsx b/src/components/Footer.tsx index 4fe08a9..47932bc 100644 --- a/src/components/Footer.tsx +++ b/src/components/Footer.tsx @@ -1,4 +1,5 @@ import { useTranslations, type Lang } from "@/i18n/utils"; +import { personalInfo } from "@/lib/data"; import { motion } from "framer-motion"; interface FooterProps { @@ -21,7 +22,7 @@ export default function Footer({ lang }: FooterProps) { className="text-sm text-muted-foreground text-center md:text-left" whileHover={{ scale: 1.01 }} > - © {new Date().getFullYear()} {t('personal.name')}. {t('footer.rights')} ✨ + © {new Date().getFullYear()} { personalInfo.name }. {t('footer.rights')} ✨ - {/* Background gradient */} -
- -
- - {/* Greeting */} - - - - {lang === 'zh' ? 'Hello World! 我是' : 'Hello World! I\'m'} - - - - {/* Main title */} - - {t('personal.name')} - - - {/* Subtitle */} - - {t('personal.title')} - - - {/* Description */} - - {lang === 'zh' - ? '致力于用简洁的代码和创新思维解决复杂问题。欢迎来到我的个人开发工作空间，这里是想法变为现实的地方。' - : 'Crafting elegant solutions to complex problems with clean code and innovative thinking. Welcome to my personal dev workspace where ideas come to life.' - } - - - {/* Action buttons */} - - - - {lang === 'zh' ? '查看项目' : 'View Projects'} - - - - - {lang === 'zh' ? '联系我' : 'Contact Me'} - - - - {/* Contact info */} - - - - {t('personal.location')} - - - - - {t('hero.githubLink')} - - - - - {t('hero.linkedinLink')} - - - - - {/* Terminal mockup */} - -
-
- {/* Terminal header */} -
-
-
-
-
-
-
- {lang === 'zh' ? 'john@dev-workspace' : 'john@dev-workspace'} -
-
-
- - {/* Terminal content */} -
-
-
- $ - whoami -
-
{t('personal.name')}
- -
- $ - cat about.txt -
-
- {lang === 'zh' - ? 'OS: DevOS v4.2.0\nHost: ThinkPad X1 Carbon\nKernel: 5.15.0-dev\nUptime: 45 days, 17 hours\nLanguages: JavaScript, Python, Go\nEditor: VSCode / Neovim\nFrameworks: React, Next.js, Node.js' - : 'OS: DevOS v4.2.0\nHost: ThinkPad X1 Carbon\nKernel: 5.15.0-dev\nUptime: 45 days, 17 hours\nLanguages: JavaScript, Python, Go\nEditor: VSCode / Neovim\nFrameworks: React, Next.js, Node.js' - } -
- -
- $ - ls projects/ -
-
- taskify-app/ e-commerce-platform/ portfolio-site/ -
- -
- $ - _ -
-
-
-
-
- -
- - ); -} diff --git a/src/components/ProjectsSection.tsx b/src/components/ProjectsSection.tsx deleted file mode 100644 index 0e00e56..0000000 --- a/src/components/ProjectsSection.tsx +++ /dev/null @@ -1,133 +0,0 @@ -import React from "react"; -import { projects } from "@/lib/data"; -import { useTranslations } from "@/i18n/utils"; -import { - CardContent, - CardDescription, - CardFooter, - CardHeader, - CardTitle, -} from "./ui/card"; -import { Github } from "lucide-react"; -import { GlassCard } from "./ui/glass-card"; -import MotionWrapper from "./MotionWrapper"; -import { motion } from "framer-motion"; - -export default function ProjectsSection({ lang }: { lang: "en" | "zh" }) { - const t = useTranslations(lang); - return ( -
- {/* Background gradient */} -
- -
- -
-

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

-

- {lang === 'zh' - ? '我最新工作的集合，展示创新解决方案和简洁代码。点击探索详情。' - : 'A collection of my recent work, showcasing innovative solutions and clean code. Click to explore details.' - } -

-
- - -
- {projects.map((project, index) => ( - - - {/* Project image placeholder */} -
-
-
-
- {index === 0 ? 'Taskify App' : index === 1 ? 'E-Shop Platform' : 'Portfolio Site'} -
-
-
- - - - 📱 - {t(project.title as any)} - - - - -
- {project.description.slice(0, 3).map((desc, i) => ( - - • - {t(desc as any)} - - ))} -
- - {/* Tech stack indicators */} -
- {index === 0 && ( - <> - React - Node.js - MongoDB - - )} - {index === 1 && ( - <> - Next.js - Stripe - TailwindCSS - - )} - {index === 2 && ( - <> - HTML - TailwindCSS - Alpine.js - - )} -
- - - -
- - - {t('projects.viewOnGithub')} - - - - 🔗 - {lang === 'zh' ? '查看详情' : 'Live Demo'} - -
- - - - ))} -
-
-
- ); -} diff --git a/src/i18n/ui.ts b/src/i18n/ui.ts index c475e2e..4d51118 100644 --- a/src/i18n/ui.ts +++ b/src/i18n/ui.ts @@ -9,370 +9,28 @@ export const defaultLang = 'en'; export const ui = { en: { 'nav.home': 'Home', - 'nav.about': 'About Me', + 'nav.about': 'About', 'nav.projects': 'Projects', - 'footer.rights': 'All rights reserved.', - 'site.title': 'My Portfolio', - 'page.home.title': 'Home', - - // Personal Info - 'personal.name': 'Joy Zhao', - 'personal.title': 'Full Stack Engineer 👨‍💻', - 'personal.location': 'China', - 'personal.email': 'rkesh2003@gmail.com', - - // Hero Section - 'hero.githubLink': 'GitHub', - 'hero.linkedinLink': 'LinkedIn', - 'hero.description': '🚀 Passionate software engineer with a versatile skill set spanning multiple domains. I thrive on solving complex challenges across different platforms and environments, adapting quickly to new technologies and methodologies. My holistic approach combines technical expertise with creative problem-solving, allowing me to develop solutions that are both innovative and practical. I\'m driven by continuous learning and a commitment to excellence, whether working independently or collaborating with diverse teams to create impactful, scalable solutions.', - - // Experience Section - 'experience.title': 'Work Experience', - 'experience.keyAchievements': 'Key Achievements', - - // Education Section - 'education.title': 'Education', - 'education.achievementsAndActivities': 'Achievements & Activities', - - // Skills Section - 'skills.title': 'Skills', - - // About Section - 'about.title': 'About Me', - 'about.description.paragraph1': 'I\'m a passionate developer with 5+ years of experience building web applications and contributing to open source projects. I specialize in creating clean, efficient, and maintainable code.', - 'about.description.paragraph2': 'When I\'m not coding, you can find me exploring new technologies, writing tech articles, or enjoying a fresh cup of coffee while debugging complex problems.', - 'about.description.paragraph3': 'I believe in continuous learning and staying up-to-date with the latest industry trends and best practices.', - 'about.stats.repositories': 'Repositories', - 'about.stats.commits': 'Commits', - 'about.stats.prsmerged': 'PRs Merged', - 'about.toolbox.title': 'My Toolbox', - 'about.toolbox.frontend': 'Frontend', - 'about.toolbox.backend': 'Backend', - 'about.toolbox.devops': 'DevOps', - 'about.toolbox.mobile': 'Mobile', - - // Projects Section - 'projects.title': 'Latest Projects', - 'projects.viewOnGithub': 'View on GitHub', - - // Services Section - 'services.title': 'Services I Offer', - 'services.outsourcing.title': 'Outsourcing Projects', - 'services.outsourcing.item1': 'Provide outsourcing project services for overseas clients', - 'services.outsourcing.item2': 'Project packaging, can provide services in different packages', - 'services.outsourcing.item3': 'Use popular technologies: React, nest.js, next.js, etc.', - 'services.outsourcing.item4': 'Project delivery, provide three months of free maintenance', - 'services.outsourcing.item5': 'Regardless of project size, can provide services', - 'services.bugfix.title': 'Bug Fixes', - 'services.bugfix.item1': 'Quickly locate and fix website issues, able to quickly locate and solve problems', - 'services.bugfix.item2': 'Help you solve any problems encountered in the project, Bug, functional optimization issues', - 'services.bugfix.item3': 'Application of Vue, React, Node and other technologies', - 'services.bugfix.item4': 'Frontend automation, deployment, monitoring, automation, etc.', - 'services.bugfix.item5': 'Only limited to Node.js projects', - - // Awards Section - 'awards.title': 'Awards', - - // Work Experience - 'work.chatbyte.company': 'Chatbyte GmbH', - 'work.chatbyte.location': 'Remote', - 'work.chatbyte.position': 'Software Engineer', - 'work.chatbyte.period': 'Mar 2024 - Present', - 'work.chatbyte.achievement1': 'Designed and implemented business logic for AWS Lambdas using the Serverless Framework, forming the backbone of the application\'s functionality and ensuring seamless backend operations.', - 'work.chatbyte.achievement2': 'Built a comprehensive admin panel for managing content, user data, and analytics.', - 'work.chatbyte.achievement3': 'Contributed to the development and integration of a scalable CMS for managing blog content and other platform data.', - 'work.chatbyte.achievement4': 'Reduced database costs by introducing materialized views, optimizing query performance and resource usage.', - 'work.chatbyte.achievement5': 'Drove the integration of a custom affiliate marketing system, enabling seamless tracking and reporting of referrals and user activities.', - 'work.chatbyte.achievement6': 'Integrated Text-to-Speech (TTS) services for enhanced user experiences, optimizing both frontend and backend systems.', - 'work.chatbyte.achievement7': 'Collaborated with cross-functional teams to deliver high-quality features, actively reviewing pull requests to ensure code quality, adherence to standards, and efficient implementation.', - - 'work.devcrew.company': 'DevCrew', - 'work.devcrew.location': 'Coimbatore, India', - 'work.devcrew.position': 'Software Engineer', - 'work.devcrew.period': 'Mar 2023 - Mar 2024', - 'work.devcrew.achievement1': 'Developed responsive frontend components using React.js, enhancing user experience and app performance.', - 'work.devcrew.achievement2': 'Optimized JavaScript solutions to improve load times and data-fetching efficiency.', - - 'work.phoenitags.company': 'Phoenitags', - 'work.phoenitags.location': 'Coimbatore, India', - 'work.phoenitags.position': 'Software Engineering Intern', - 'work.phoenitags.period': 'Jan 2023 - Mar 2023', - 'work.phoenitags.achievement1': 'Built interactive UIs with React.js, focusing on reusable components and performance optimization.', - 'work.phoenitags.achievement2': 'Implemented JavaScript-based features like user authentication and real-time updates.', - - // Education - 'education.skcet.institution': 'Sri Krishna College of Engineering and Technology', - 'education.skcet.location': 'Coimbatore, India', - 'education.skcet.degree': 'B Tech Information Technology', - 'education.skcet.period': 'Jun 2021 - Jun 2025', - 'education.skcet.achievement1': 'President of the Department of Information Technology', - 'education.skcet.achievement2': 'G20 student delegate', - 'education.skcet.achievement3': 'Organized multiple technical workshops and events', - 'education.skcet.achievement4': 'Represented my college in multiple national and international hackathons and won.', - - // Skills - 'skills.programmingLanguages': 'Programming Languages', - 'skills.frontendDevelopment': 'Frontend Development', - 'skills.backendDevelopment': 'Backend Development', - 'skills.databaseAndStorage': 'Database & Storage', - 'skills.cloudAndDevOps': 'Cloud & DevOps', - 'skills.toolsAndServices': 'Tools & Services', - - // Projects - 'projects.taskify.title': 'Taskify App', - 'projects.taskify.description.0': 'A task management app with real-time collaboration, built using React, Node.js, and MongoDB.', - 'projects.taskify.description.1': 'Real-time collaboration features with WebSocket integration for instant updates.', - 'projects.taskify.description.2': 'Advanced task filtering, sorting, and project management capabilities.', - 'projects.taskify.description.3': 'User authentication and role-based access control system.', - 'projects.taskify.description.4': 'Responsive design optimized for both desktop and mobile devices.', - - 'projects.eshop.title': 'E-Shop Platform', - 'projects.eshop.description.0': 'A scalable e-commerce platform with Next.js, Stripe payments, and TailwindCSS.', - 'projects.eshop.description.1': 'Integrated Stripe payment processing for secure transactions.', - 'projects.eshop.description.2': 'Advanced product catalog with search, filtering, and recommendation features.', - 'projects.eshop.description.3': 'Admin dashboard for inventory management and order tracking.', - 'projects.eshop.description.4': 'SEO-optimized with server-side rendering and dynamic routing.', - - 'projects.portfolio.title': 'Portfolio Site', - 'projects.portfolio.description.0': 'My personal portfolio showcasing my work, built with HTML, TailwindCSS, and Alpine.js.', - 'projects.portfolio.description.1': 'Modern glassmorphism design with smooth animations and transitions.', - 'projects.portfolio.description.2': 'Fully responsive layout optimized for all device sizes.', - 'projects.portfolio.description.3': 'Interactive components with Alpine.js for enhanced user experience.', - 'projects.portfolio.description.4': 'Performance-optimized with lazy loading and efficient asset management.', - 'projects.netzero.description5': 'Reward Integration: Built QR-based green points system to incentivize eco-friendly actions.', - - 'projects.mentalaarog.title': 'Mental Aarog', - 'projects.mentalaarog.description1': 'A holistic mental health app leveraging AI and blockchain for early detection and personalized solutions for depression.', - 'projects.mentalaarog.description2': 'Features include social media analysis (ML-based sentiment tracking), PHQ-9 assessments, smartwatch integration for sleep and activity data, guided meditation, and smart suggestions for food, travel, music, and movies.', - 'projects.mentalaarog.description3': 'Developed a rewards system using MAG crypto token on Ethereum, enabling user engagement through in-app incentives.', - 'projects.mentalaarog.description4': 'Secure storage implemented via web3.storage, IPFS, and FileCoin.', - 'projects.mentalaarog.description5': 'Built with React, Supabase, Node.js, Flask, and Solidity, showcasing seamless integration of health tech and blockchain.', - - // Awards - 'awards.ieee.name': 'IEEE YESIST12 Hackathon', - 'awards.ieee.issuer': 'IEEE', - 'awards.ieee.date': 'Sep 2022', - 'awards.ieee.type': 'International', - 'awards.ieee.position': 'Second Place', - - 'awards.prodigi.name': 'Prodigi Cognizant Hackathon', - 'awards.prodigi.issuer': 'Cognizant', - 'awards.prodigi.date': 'Feb 2023', - 'awards.prodigi.type': 'National', - 'awards.prodigi.position': 'Second Runner-up', - - 'awards.cisco.name': 'Cisco Thingqbator Hackathon', - 'awards.cisco.issuer': 'Cisco', - 'awards.cisco.date': 'Jan 2023', - 'awards.cisco.type': 'National', - 'awards.cisco.position': 'First Runner-up', - - 'awards.innovators.name': 'Innovators Day', - 'awards.innovators.issuer': 'Sri Manakula Vinayagar Engineering College, Pondicherry', - 'awards.innovators.date': 'Sep 2022', - 'awards.innovators.type': 'National', - 'awards.innovators.position': 'First Prize', - - 'awards.kghackfest.name': 'KG Hackfest\'22', - 'awards.kghackfest.issuer': 'KGiSL Institute of Technology, Coimbatore', - 'awards.kghackfest.date': 'Sep 2022', - 'awards.kghackfest.type': 'National', - 'awards.kghackfest.position': 'Second Prize', - - 'awards.innohacks.name': 'Innohacks\'22', - 'awards.innohacks.issuer': 'Innogeeks, KIET Group of Institutions, New Delhi', - 'awards.innohacks.date': 'May 2022', - 'awards.innohacks.type': 'National', - 'awards.innohacks.position': 'Second Runner-up', - - 'awards.hackskcet.name': 'Hack @ SKCET', - 'awards.hackskcet.issuer': 'Hackclub SKCET, SKCET, Coimbatore', - 'awards.hackskcet.date': 'Feb 2022', - 'awards.hackskcet.type': 'National', - 'awards.hackskcet.position': 'Most Impactful Hack', + 'nav.contact': 'Contact', + 'site.title': 'Joy Zhao - Full Stack Developer', + 'site.description': 'Full Stack Developer specializing in React, Node.js, and modern web technologies', + 'hero.githubLink': 'GitHub Profile', + 'hero.linkedinLink': 'LinkedIn Profile', + 'footer.rights': 'All rights reserved' + // Projects and services content has been inlined into respective page files + // to reduce reliance on the translation system and improve maintainability }, zh: { 'nav.home': '首页', - 'nav.projects': '项目经历', - 'nav.about': '关于我', - 'footer.rights': '版权所有。', - 'site.title': '我的作品集', - 'page.home.title': '首页', - - // Personal Info - 'personal.name': 'Joy Zhao', - 'personal.title': '全栈工程师 👨‍💻', - 'personal.location': '中国', - 'personal.email': 'rkesh2003@gmail.com', - - // Hero Section - 'hero.githubLink': 'GitHub', - 'hero.linkedinLink': '领英', - 'hero.description': '🚀 我是一名充满热情的软件工程师，拥有跨越多个领域的多才多艺的技能。我乐于在不同平台和环境中解决复杂挑战，能够快速适应新技术和方法论。我的整体方法将技术专长与创造性问题解决相结合，使我能够开发出既创新又实用的解决方案。无论是独立工作还是与多元化团队合作创建有影响力、可扩展的解决方案，我都以持续学习和追求卓越为动力。', - - // Experience Section - 'experience.title': '工作经历', - 'experience.keyAchievements': '主要成就', - - // Education Section - 'education.title': '教育背景', - 'education.achievementsAndActivities': '成就与活动', - - // Skills Section - 'skills.title': '专业技能', - - // About Section - 'about.title': '关于我', - 'about.description.paragraph1': '我是一名充满热情的开发者，拥有5年以上构建Web应用程序和参与开源项目的经验。我专注于创建简洁、高效且易于维护的代码。', - 'about.description.paragraph2': '当我不在编程时，你可以发现我在探索新技术、撰写技术文章，或者在调试复杂问题时享受一杯新鲜的咖啡。', - 'about.description.paragraph3': '我相信持续学习，并与最新的行业趋势和最佳实践保持同步。', - 'about.stats.repositories': '代码仓库', - 'about.stats.commits': '提交次数', - 'about.stats.prsmerged': '合并请求', - 'about.toolbox.title': '我的工具箱', - 'about.toolbox.frontend': '前端', - 'about.toolbox.backend': '后端', - 'about.toolbox.devops': 'DevOps', - 'about.toolbox.mobile': '移动端', - - // Projects Section - 'projects.title': '最新项目', - 'projects.viewOnGithub': '在 GitHub 上查看', - - // Services Section - 'services.title': '我提供的服务', - 'services.outsourcing.title': '外包项目', - 'services.outsourcing.item1': '面向海外客户，提供外包项目服务', - 'services.outsourcing.item2': '项目整包，分包均可提供服务', - 'services.outsourcing.item3': '使用热门流行的技术栈：React、nest.js、next.js等', - 'services.outsourcing.item4': '项目交付后，提供三个月免费的维护', - 'services.outsourcing.item5': '不论项目大小，均可提供服务', - 'services.bugfix.title': 'Bug修复', - 'services.bugfix.item1': '拥有丰富的错误问题经验，能够快速定位并解决问题', - 'services.bugfix.item2': '帮助你解决项目中遇到的任何问题、Bug、功能优化等问题', - 'services.bugfix.item3': 'Vue、React、Node等技术栈的应用', - 'services.bugfix.item4': '前端自动化、部署、监控、自动化等', - 'services.bugfix.item5': '仅限前端、Node.js项目', - - // Awards Section - 'awards.title': '获奖经历', - - // Work Experience - 'work.chatbyte.company': 'Chatbyte GmbH', - 'work.chatbyte.location': '远程', - 'work.chatbyte.position': '软件工程师', - 'work.chatbyte.period': '2024年3月 - 至今', - 'work.chatbyte.achievement1': '使用无服务器框架设计并实现了 AWS Lambda 的业务逻辑，构成了应用程序功能的支柱，并确保了无缝的后端操作。', - 'work.chatbyte.achievement2': '构建了一个全面的管理面板，用于管理内容、用户数据和分析。', - 'work.chatbyte.achievement3': '参与了可扩展 CMS 的开发和集成，用于管理博客内容和其他平台数据。', - 'work.chatbyte.achievement4': '通过引入物化视图降低了数据库成本，优化了查询性能和资源使用。', - 'work.chatbyte.achievement5': '推动了自定义联盟营销系统的集成，实现了对推荐和用户活动的无缝跟踪和报告。', - 'work.chatbyte.achievement6': '集成了文本转语音 (TTS) 服务以增强用户体验，优化了前端和后端系统。', - 'work.chatbyte.achievement7': '与跨职能团队合作交付高质量功能，积极审查拉取请求以确保代码质量、遵守标准和高效实施。', - - 'work.devcrew.company': 'DevCrew', - 'work.devcrew.location': '哥印拜陀，印度', - 'work.devcrew.position': '软件工程师', - 'work.devcrew.period': '2023年3月 - 2024年3月', - 'work.devcrew.achievement1': '使用 React.js 开发了响应式前端组件，增强了用户体验和应用程序性能。', - 'work.devcrew.achievement2': '优化了 JavaScript 解决方案，以提高加载时间和数据获取效率。', - - 'work.phoenitags.company': 'Phoenitags', - 'work.phoenitags.location': '哥印拜陀，印度', - 'work.phoenitags.position': '软件工程实习生', - 'work.phoenitags.period': '2023年1月 - 2023年3月', - 'work.phoenitags.achievement1': '使用 React.js 构建了交互式 UI，专注于可重用组件和性能优化。', - 'work.phoenitags.achievement2': '实现了基于 JavaScript 的功能，如用户身份验证和实时更新。', - - // Education - 'education.skcet.institution': 'Sri Krishna 工程技术学院', - 'education.skcet.location': '哥印拜陀，印度', - 'education.skcet.degree': '信息技术学士', - 'education.skcet.period': '2021年6月 - 2025年6月', - 'education.skcet.achievement1': '信息技术系主席', - 'education.skcet.achievement2': 'G20 学生代表', - 'education.skcet.achievement3': '组织了多次技术研讨会和活动', - 'education.skcet.achievement4': '代表学院参加了多次国家级和国际级黑客马拉松并获奖。', - - // Skills - 'skills.programmingLanguages': '编程语言', - 'skills.frontendDevelopment': '前端开发', - 'skills.backendDevelopment': '后端开发', - 'skills.databaseAndStorage': '数据库与存储', - 'skills.cloudAndDevOps': '云计算与 DevOps', - 'skills.toolsAndServices': '工具与服务', - - // Projects - 'projects.taskify.title': 'Taskify 应用', - 'projects.taskify.description.0': '使用 React、Node.js 和 MongoDB 构建的实时协作任务管理应用。', - 'projects.taskify.description.1': '通过 WebSocket 集成实现实时协作功能，提供即时更新。', - 'projects.taskify.description.2': '高级任务过滤、排序和项目管理功能。', - 'projects.taskify.description.3': '用户认证和基于角色的访问控制系统。', - 'projects.taskify.description.4': '针对桌面和移动设备优化的响应式设计。', - - 'projects.eshop.title': '电商平台', - 'projects.eshop.description.0': '使用 Next.js、Stripe 支付和 TailwindCSS 构建的可扩展电商平台。', - 'projects.eshop.description.1': '集成 Stripe 支付处理，确保交易安全。', - 'projects.eshop.description.2': '高级产品目录，具备搜索、过滤和推荐功能。', - 'projects.eshop.description.3': '管理员仪表板，用于库存管理和订单跟踪。', - 'projects.eshop.description.4': '通过服务端渲染和动态路由进行 SEO 优化。', - - 'projects.portfolio.title': '个人作品集', - 'projects.portfolio.description.0': '使用 HTML、TailwindCSS 和 Alpine.js 构建的个人作品集网站。', - 'projects.portfolio.description.1': '现代玻璃拟态设计，具有流畅的动画和过渡效果。', - 'projects.portfolio.description.2': '针对所有设备尺寸优化的完全响应式布局。', - 'projects.portfolio.description.3': '使用 Alpine.js 的交互式组件，增强用户体验。', - 'projects.portfolio.description.4': '通过懒加载和高效资源管理进行性能优化。', - 'projects.netzero.description5': '奖励整合：构建了基于二维码的绿色积分系统以激励环保行为。', - - 'projects.mentalaarog.title': 'Mental Aarog', - 'projects.mentalaarog.description1': '一个利用人工智能和区块链进行早期检测和个性化抑郁症解决方案的整体心理健康应用程序。', - 'projects.mentalaarog.description2': '功能包括社交媒体分析（基于机器学习的情感跟踪）、PHQ-9 评估、智能手表集成用于睡眠和活动数据、引导冥想以及食物、旅行、音乐和电影的智能建议。', - 'projects.mentalaarog.description3': '使用以太坊上的 MAG 加密代币开发了奖励系统，通过应用内激励实现用户参与。', - 'projects.mentalaarog.description4': '通过 web3.storage、IPFS 和 FileCoin 实现安全存储。', - 'projects.mentalaarog.description5': '使用 React、Supabase、Node.js、Flask 和 Solidity 构建，展示了健康技术和区块链的无缝集成。', - - // Awards - 'awards.ieee.name': 'IEEE YESIST12 黑客马拉松', - 'awards.ieee.issuer': 'IEEE', - 'awards.ieee.date': '2022年9月', - 'awards.ieee.type': '国际', - 'awards.ieee.position': '第二名', - - 'awards.prodigi.name': 'Prodigi Cognizant 黑客马拉松', - 'awards.prodigi.issuer': 'Cognizant', - 'awards.prodigi.date': '2023年2月', - 'awards.prodigi.type': '国家级', - 'awards.prodigi.position': '季军', - - 'awards.cisco.name': 'Cisco Thingqbator 黑客马拉松', - 'awards.cisco.issuer': 'Cisco', - 'awards.cisco.date': '2023年1月', - 'awards.cisco.type': '国家级', - 'awards.cisco.position': '亚军', - - 'awards.innovators.name': '创新者日', - 'awards.innovators.issuer': 'Sri Manakula Vinayagar 工程学院，本地治里', - 'awards.innovators.date': '2022年9月', - 'awards.innovators.type': '国家级', - 'awards.innovators.position': '一等奖', - - 'awards.kghackfest.name': 'KG Hackfest\'22', - 'awards.kghackfest.issuer': 'KGiSL 理工学院，哥印拜陀', - 'awards.kghackfest.date': '2022年9月', - 'awards.kghackfest.type': '国家级', - 'awards.kghackfest.position': '二等奖', - - 'awards.innohacks.name': 'Innohacks\'22', - 'awards.innohacks.issuer': 'Innogeeks, KIET 集团机构，新德里', - 'awards.innohacks.date': '2022年5月', - 'awards.innohacks.type': '国家级', - 'awards.innohacks.position': '季军', - - 'awards.hackskcet.name': 'Hack @ SKCET', - 'awards.hackskcet.issuer': 'Hackclub SKCET, SKCET，哥印拜陀', - 'awards.hackskcet.date': '2022年2月', - 'awards.hackskcet.type': '国家级', - 'awards.hackskcet.position': '最具影响力黑客奖', - }, + 'nav.about': '关于', + 'nav.projects': '项目', + 'nav.contact': '联系', + 'site.title': 'Joy Zhao - 全栈开发者', + 'site.description': '专注于 React、Node.js 和现代 Web 技术的全栈开发者', + 'hero.githubLink': 'GitHub 主页', + 'hero.linkedinLink': 'LinkedIn 主页', + 'footer.rights': '版权所有' + // Projects and services content has been inlined into respective page files + // to reduce reliance on the translation system and improve maintainability + } } as const; \ No newline at end of file diff --git a/src/lib/data.ts b/src/lib/data.ts index 6643072..a1d3ac6 100644 --- a/src/lib/data.ts +++ b/src/lib/data.ts @@ -1,43 +1,7 @@ export const personalInfo = { - name: "personal.name", - location: "personal.location", - email: "rkesh2003@gmail.com", // Email might not be a translated key, but a value - github: "https://github.com/rishikesh2003", - linkedin: "https://www.linkedin.com/in/rishikeshs/", -}; - -export const projects = [ - { - title: "projects.taskify.title", - github: "https://github.com/joyzhao/taskify-app", - description: [ - "projects.taskify.description.0", - "projects.taskify.description.1", - "projects.taskify.description.2", - "projects.taskify.description.3", - "projects.taskify.description.4", - ], - }, - { - title: "projects.eshop.title", - github: "https://github.com/joyzhao/e-commerce-platform", - description: [ - "projects.eshop.description.0", - "projects.eshop.description.1", - "projects.eshop.description.2", - "projects.eshop.description.3", - "projects.eshop.description.4", - ], - }, - { - title: "projects.portfolio.title", - github: "https://github.com/joyzhao/portfolio-site", - description: [ - "projects.portfolio.description.0", - "projects.portfolio.description.1", - "projects.portfolio.description.2", - "projects.portfolio.description.3", - "projects.portfolio.description.4", - ], - }, -]; + name: "Joy Zhao", + location: "Shanghai, China", + email: "zhaoguiyang@example.com", + github: "https://github.com/zhaoguiyang", + linkedin: "https://linkedin.com/in/zhaoguiyang" +}; \ No newline at end of file diff --git a/src/pages/index.astro b/src/pages/index.astro index 1866c64..b36c812 100644 --- a/src/pages/index.astro +++ b/src/pages/index.astro @@ -1,30 +1,176 @@ --- import Layout from "@/layouts/Layout.astro"; import GlassHeader from "@/components/GlassHeader"; -import HeroSection from "@/components/HeroSection"; -import AboutSection from "@/components/AboutSection"; import SkillsMarquee from "@/components/SkillsMarquee"; -import ProjectsSection from "@/components/ProjectsSection"; import Footer from "@/components/Footer"; import { useTranslations, type Lang } from "@/i18n/utils"; import { defaultLang } from "@/i18n/ui"; +import { personalInfo } from "@/lib/data"; const lang: Lang = defaultLang; const t = useTranslations(lang); -const pageTitle = t('page.home.title'); +const pageTitle = t('site.title'); ---
- + +
+ +
+ +
+
+ +
+ + + + + Hello World! I'm + +
+ + +

+ Joy Zhao +

+ + +

+ Full Stack Engineer 👨‍💻 +

+ + +

+ Crafting elegant solutions to complex problems with clean code and innovative thinking. Welcome to my personal dev workspace where ideas come to life. +

+ + +
+ + + + + View Projects + + + + + + + Contact Me + +
+ + +
+
+ + + + + China +
+ + + + + + GitHub + + + + + + + LinkedIn + +
+
+ + +
+
+ +
+
+
+
+
+
+
+ john@dev-workspace +
+
+
+ + +
+
+
+ $ + 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: JavaScript, Python, Go
+ Editor: VSCode / Neovim
+ Frameworks: React, Next.js, Node.js +
+ +
+ $ + ls projects/ +
+
+ taskify-app/ e-commerce-platform/ portfolio-site/ +
+ +
+ $ + _ +
+
+
+
+
+
+
+ - +

- {t('services.title')} + Services I Offer

@@ -36,28 +182,28 @@ const pageTitle = t('page.home.title');
-

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

+

Outsourcing Projects

  • 1. - {t('services.outsourcing.item1')} + Provide outsourcing project services for overseas clients
  • 2. - {t('services.outsourcing.item2')} + Project packaging, can provide services in different packages
  • 3. - {t('services.outsourcing.item3')} + Use popular technologies: React, nest.js, next.js, etc.
  • 4. - {t('services.outsourcing.item4')} + Project delivery, provide three months of free maintenance
  • 5. - {t('services.outsourcing.item5')} + Regardless of project size, can provide services
@@ -71,28 +217,28 @@ const pageTitle = t('page.home.title'); -

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

+

Bug Fixes

  • 1. - {t('services.bugfix.item1')} + Quickly locate and fix website issues, able to quickly locate and solve problems
  • 2. - {t('services.bugfix.item2')} + Help you solve any problems encountered in the project, Bug, functional optimization issues
  • 3. - {t('services.bugfix.item3')} + Application of Vue, React, Node and other technologies
  • 4. - {t('services.bugfix.item4')} + Frontend automation, deployment, monitoring, automation, etc.
  • 5. - {t('services.bugfix.item5')} + Only limited to Node.js projects
@@ -100,8 +246,358 @@ const pageTitle = t('page.home.title');
- - + +
+ +
+ +
+
+ +
+

+ About Me +

+
+ + +
+ +
+ +
+

+ 👋 + About Me +

+
+

+ I'm a passionate developer with 5+ years of experience building web applications and contributing to open source projects. I specialize in creating clean, efficient, and maintainable code. +

+

+ When I'm not coding, you can find me exploring new technologies, writing tech articles, or enjoying a fresh cup of coffee while debugging complex problems. +

+

+ I believe in continuous learning and staying up-to-date with the latest industry trends and best practices. +

+
+
+ + +
+
+ + + +
+ 152 +
+
+ Repositories +
+
+ +
+ + + +
+ 42K +
+
+ Commits +
+
+ +
+ + + +
+ 87 +
+
+ PRs Merged +
+
+
+
+ + +
+

+ 💻 + My Toolbox +

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

+ Latest Projects +

+

+ A collection of my recent work, showcasing innovative solutions and clean code. Click to explore details. +

+
+ +
+ +
+ +
+
+
+
+ Taskify App +
+
+
+ +
+

+ 📱 + Taskify App +

+
+ +
+
+
+ • + A task management app with real-time collaboration, built using React, Node.js, and MongoDB. +
+
+ • + Real-time collaboration features with WebSocket integration for instant updates. +
+
+ • + Advanced task filtering, sorting, and project management capabilities. +
+
+ + +
+ React + Node.js + MongoDB +
+
+ +
+
+ + + + + View on GitHub + + + +
+
+
+ + +
+ +
+
+
+
+ E-Shop Platform +
+
+
+ +
+

+ 📱 + E-Shop Platform +

+
+ +
+
+
+ • + A scalable e-commerce platform with Next.js, Stripe payments, and TailwindCSS. +
+
+ • + Integrated Stripe payment processing for secure transactions. +
+
+ • + Advanced product catalog with search, filtering, and recommendation features. +
+
+ + +
+ Next.js + Stripe + TailwindCSS +
+
+ +
+
+ + + + + View on GitHub + + + +
+
+
+ + +
+ +
+
+
+
+ Portfolio Site +
+
+
+ +
+

+ 📱 + Portfolio Site +

+
+ +
+
+
+ • + My personal portfolio showcasing my work, built with HTML, TailwindCSS, and Alpine.js. +
+
+ • + Modern glassmorphism design with smooth animations and transitions. +
+
+ • + Fully responsive layout optimized for all device sizes. +
+
+ + +
+ HTML + TailwindCSS + Alpine.js +
+
+ +
+
+ + + + + View on GitHub + + + +
+
+
+
+
+