From ed02039a9e1f07b683ba772e427267bb717b5620 Mon Sep 17 00:00:00 2001
From: joyzhao <zhaoguiyang18@gmail.com>
Date: Mon, 16 Jun 2025 11:29:53 +0800
Subject: [PATCH] feat(portfolio): redesign hero and projects sections with
 modern UI

- Implement new glassmorphism design for hero section with terminal mockup
- Redesign projects section with improved card layout and tech stack indicators
- Update project data with new entries and translations
- Add scroll-aware header with dynamic styling
- Remove unused ExperienceSection component
---
 src/components/GlassHeader.tsx     |  28 +++-
 src/components/HeroSection.tsx     | 244 +++++++++++++++++++----------
 src/components/ProjectsSection.tsx | 119 ++++++++++----
 src/i18n/ui.ts                     |  54 +++++--
 src/lib/data.ts                    |  39 +++--
 src/pages/index.astro              |   2 -
 src/pages/zh/index.astro           |   4 -
 7 files changed, 335 insertions(+), 155 deletions(-)

diff --git a/src/components/GlassHeader.tsx b/src/components/GlassHeader.tsx
index 53c7dfa..5eb11ae 100644
--- a/src/components/GlassHeader.tsx
+++ b/src/components/GlassHeader.tsx
@@ -1,7 +1,7 @@
 import ThemeToggle from "./ui/theme-toggle";
 import LanguageSwitcher from "./LanguageSwitcher";
 import { useTranslations, getLocalizedPath, type Lang } from "@/i18n/utils";
-import { useState } from "react";
+import { useState, useEffect } from "react";
 import { Menu, X } from "lucide-react";
 import { motion, AnimatePresence } from "framer-motion";
 
@@ -12,11 +12,25 @@ interface GlassHeaderProps {
 export default function GlassHeader({ lang }: GlassHeaderProps) {
   const t = useTranslations(lang);
   const [isMenuOpen, setIsMenuOpen] = useState(false);
+  const [isScrolled, setIsScrolled] = useState(false);
+
+  useEffect(() => {
+    const handleScroll = () => {
+      setIsScrolled(window.scrollY > 0);
+    };
+
+    window.addEventListener('scroll', handleScroll);
+    return () => window.removeEventListener('scroll', handleScroll);
+  }, []);
 
   const toggleMenu = () => setIsMenuOpen(!isMenuOpen);
 
   return (
-    <header className="sticky z-50 w-full backdrop-blur-md backdrop-filter bg-background/70 dark:bg-background/40 border-b border-border/40 supports-[backdrop-filter]:bg-background/60">
+    <header className={`fixed top-0 z-50 w-full transition-all duration-300 ${
+      isScrolled 
+        ? 'backdrop-blur-md backdrop-filter bg-white/80 dark:bg-black/80 border-b border-border/30 shadow-lg shadow-black/5 dark:shadow-black/20' 
+        : 'bg-transparent'
+    }`}>
       <div className="container max-w-4xl mx-auto p-4 flex justify-between items-center">
         <motion.a
           className="flex items-center text-lg font-medium"
@@ -30,7 +44,6 @@ export default function GlassHeader({ lang }: GlassHeaderProps) {
         {/* Desktop Navigation */}
         <nav className="hidden md:flex items-center space-x-6 text-sm font-medium">
           {[ 
-            // { key: 'nav.experience', icon: '💼 ', sectionId: 'experience' },
             { key: 'nav.skills', icon: '🛠️ ', sectionId: 'skills' },
             { key: 'nav.projects', icon: '🚀 ', sectionId: 'projects' },
           ].map(
@@ -72,7 +85,11 @@ export default function GlassHeader({ lang }: GlassHeaderProps) {
       <AnimatePresence>
         {isMenuOpen && (
           <motion.div
-            className="md:hidden py-4 px-4 border-t border-border/10 backdrop-blur-md backdrop-filter bg-background/80 dark:bg-background/40"
+            className={`md:hidden py-4 px-4 border-t border-border/10 transition-all duration-300 ${
+              isScrolled 
+                ? 'backdrop-blur-md backdrop-filter bg-white/80 dark:bg-black/80 shadow-lg shadow-black/5 dark:shadow-black/20' 
+                : 'bg-transparent'
+            }`}
             initial={{ opacity: 0, height: 0 }}
             animate={{ opacity: 1, height: "auto" }}
             exit={{ opacity: 0, height: 0 }}
@@ -80,11 +97,8 @@ export default function GlassHeader({ lang }: GlassHeaderProps) {
           >
             <nav className="flex flex-col space-y-4 text-sm font-medium">
               {[ 
-            { key: 'nav.experience', icon: '💼 ', sectionId: 'experience' },
             { key: 'nav.skills', icon: '🛠️ ', sectionId: 'skills' },
             { key: 'nav.projects', icon: '🚀 ', sectionId: 'projects' },
-            { key: 'nav.awards', icon: '🏆 ', sectionId: 'awards' },
-            { key: 'nav.education', icon: '🎓 ', sectionId: 'education' },
           ].map(
                 (item, index) => (
                   <motion.a
diff --git a/src/components/HeroSection.tsx b/src/components/HeroSection.tsx
index cd616dc..3f95c7c 100644
--- a/src/components/HeroSection.tsx
+++ b/src/components/HeroSection.tsx
@@ -1,8 +1,8 @@
-import { personalInfo } from "@/lib/data";
-import { Mail, Github, MapPin, Linkedin } from "lucide-react";
+import { Mail, Github, MapPin, Linkedin, Code, Terminal } from "lucide-react";
 import { useTranslations } from "@/i18n/utils";
 import { motion } from "framer-motion";
 import MotionWrapper from "./MotionWrapper";
+import { personalInfo } from "@/lib/data";
 
 export default function HeroSection({ lang }: { lang: "en" | "zh" }) {
   const t = useTranslations(lang);
@@ -29,103 +29,173 @@ export default function HeroSection({ lang }: { lang: "en" | "zh" }) {
   };
 
   return (
-    <section className="py-16 md:py-24 relative overflow-hidden">
-      <div className="container max-w-4xl mx-auto px-6 md:px-4 relative z-10">
+    <section className="py-16 md:py-32 relative overflow-hidden min-h-screen flex items-center">
+      {/* Background gradient */}
+      <div className="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>
+      
+      <div className="container max-w-6xl mx-auto px-6 md:px-4 relative z-10">
         <motion.div
-          className="flex flex-col md:flex-row md:items-center justify-between mb-8"
+          className="text-center mb-16"
           variants={containerVariants}
           initial="hidden"
           animate="visible"
         >
-          <div className="text-center md:text-left">
-            <motion.h1
-              className="text-4xl font-bold mb-2"
-              variants={childVariants}
-            >
-              {t('personal.name')}{" "}
-              <span className="inline-block animate-pulse">✨</span>
-            </motion.h1>
-
-            <motion.p
-              className="text-xl text-muted-foreground mb-6"
-              variants={childVariants}
-            >
-              {t('personal.title')}
-            </motion.p>
-
-            <motion.div
-              className="flex flex-col gap-2 items-center md:items-start"
-              variants={containerVariants}
-            >
-              <motion.div
-                className="flex items-center text-sm text-muted-foreground"
-                variants={childVariants}
-                whileHover={{ scale: 1.05, color: "#4b5563" }}
-              >
-                <MapPin className="h-4 w-4 mr-2" />
-                📍 {t('personal.location')}
-              </motion.div>
-
-              <motion.a
-                href={`mailto:${t('personal.email')}`}
-                className="flex items-center text-sm text-muted-foreground hover:text-foreground transition-colors"
-                variants={childVariants}
-                whileHover={{ scale: 1.05, color: "#4b5563" }}
-              >
-                <Mail className="h-4 w-4 mr-2" />
-                ✉️ {t('personal.email')}
-              </motion.a>
-
-              <motion.a
-                href={personalInfo.github}
-                target="_blank"
-                rel="noopener noreferrer"
-                className="flex items-center text-sm text-muted-foreground hover:text-foreground transition-colors"
-                variants={childVariants}
-                whileHover={{ scale: 1.05, color: "#4b5563" }}
-              >
-                <Github className="h-4 w-4 mr-2" />
-                🌟 {t('hero.githubLink')}
-              </motion.a>
-
-              <motion.a
-                href={personalInfo.linkedin}
-                target="_blank"
-                rel="noopener noreferrer"
-                className="flex items-center text-sm text-muted-foreground hover:text-foreground transition-colors"
-                variants={childVariants}
-                whileHover={{ scale: 1.05, color: "#4b5563" }}
-              >
-                <Linkedin className="h-4 w-4 mr-2" />
-                🔗 {t('hero.linkedinLink')}
-              </motion.a>
-            </motion.div>
-          </div>
-
+          {/* Greeting */}
           <motion.div
-            className="mt-6 md:mt-0 flex justify-center"
+            className="flex items-center justify-center mb-6"
             variants={childVariants}
-            whileHover={{ scale: 1.05 }}
-            whileTap={{ scale: 0.95 }}
           >
-            <div className="relative">
-              <div className="absolute -inset-1 bg-gradient-to-r from-pink-500 to-purple-500 rounded-full blur opacity-30 group-hover:opacity-100 transition duration-1000 group-hover:duration-200"></div>
-              <img
-                src="/profile.jpg"
-                alt="Profile"
-                className="w-48 md:w-60 rounded-full relative ring-2 ring-purple-500/50"
-                style={{ objectFit: "cover" }}
-              />
-            </div>
+            <Code className="h-6 w-6 mr-2 text-purple-500" />
+            <span className="text-purple-500 font-mono text-lg">
+              {lang === 'zh' ? 'Hello World! 我是' : 'Hello World! I\'m'}
+            </span>
+          </motion.div>
+
+          {/* Main title */}
+          <motion.h1
+            className="text-6xl md:text-8xl 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"
+            variants={childVariants}
+          >
+            {t('personal.name')}
+          </motion.h1>
+
+          {/* Subtitle */}
+          <motion.p
+            className="text-2xl md:text-3xl text-muted-foreground mb-8 font-light"
+            variants={childVariants}
+          >
+            {t('personal.title')}
+          </motion.p>
+
+          {/* Description */}
+          <motion.p
+            className="text-lg text-muted-foreground max-w-3xl mx-auto mb-12 leading-relaxed"
+            variants={childVariants}
+          >
+            {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.'
+            }
+          </motion.p>
+
+          {/* Action buttons */}
+          <motion.div
+            className="flex flex-col sm:flex-row gap-4 justify-center items-center mb-16"
+            variants={childVariants}
+          >
+            <motion.a
+              href="#projects"
+              className="bg-purple-500 hover:bg-purple-600 text-white px-8 py-3 rounded-lg font-semibold transition-colors flex items-center gap-2"
+              whileHover={{ scale: 1.05 }}
+              whileTap={{ scale: 0.95 }}
+            >
+              <Code className="h-5 w-5" />
+              {lang === 'zh' ? '查看项目' : 'View Projects'}
+            </motion.a>
+            
+            <motion.a
+              href={`mailto:${t('personal.email')}`}
+              className="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"
+              whileHover={{ scale: 1.05 }}
+              whileTap={{ scale: 0.95 }}
+            >
+              <Mail className="h-5 w-5" />
+              {lang === 'zh' ? '联系我' : 'Contact Me'}
+            </motion.a>
+          </motion.div>
+
+          {/* Contact info */}
+          <motion.div
+            className="flex flex-wrap justify-center gap-6 text-sm text-muted-foreground"
+            variants={containerVariants}
+          >
+            <motion.div
+              className="flex items-center gap-2 hover:text-foreground transition-colors"
+              variants={childVariants}
+              whileHover={{ scale: 1.05 }}
+            >
+              <MapPin className="h-4 w-4" />
+              {t('personal.location')}
+            </motion.div>
+
+            <motion.a
+              href={personalInfo.github}
+              target="_blank"
+              rel="noopener noreferrer"
+              className="flex items-center gap-2 hover:text-foreground transition-colors"
+              variants={childVariants}
+              whileHover={{ scale: 1.05 }}
+            >
+              <Github className="h-4 w-4" />
+              {t('hero.githubLink')}
+            </motion.a>
+
+            <motion.a
+              href={personalInfo.linkedin}
+              target="_blank"
+              rel="noopener noreferrer"
+              className="flex items-center gap-2 hover:text-foreground transition-colors"
+              variants={childVariants}
+              whileHover={{ scale: 1.05 }}
+            >
+              <Linkedin className="h-4 w-4" />
+              {t('hero.linkedinLink')}
+            </motion.a>
           </motion.div>
         </motion.div>
 
+        {/* Terminal mockup */}
         <MotionWrapper>
-          <div className="bg-gradient-to-r from-purple-500/10 to-pink-500/10 backdrop-blur-sm backdrop-filter p-4 rounded-lg border border-purple-500/20 dark:border-purple-500/10 shadow-sm">
-            <p className="text-muted-foreground pl-4 py-2 mb-4 relative">
-              <span className="absolute left-0 top-0 h-full w-1 bg-gradient-to-b from-purple-500 to-pink-500 rounded-full"></span>
-              {t('hero.description')}
-            </p>
+          <div className="max-w-4xl mx-auto">
+            <div className="bg-gray-900/90 backdrop-blur-sm rounded-lg border border-gray-700/50 shadow-2xl overflow-hidden">
+              {/* Terminal header */}
+              <div className="flex items-center justify-between px-4 py-3 bg-gray-800/50 border-b border-gray-700/50">
+                <div className="flex items-center gap-2">
+                  <div className="w-3 h-3 rounded-full bg-red-500"></div>
+                  <div className="w-3 h-3 rounded-full bg-yellow-500"></div>
+                  <div className="w-3 h-3 rounded-full bg-green-500"></div>
+                </div>
+                <div className="text-gray-400 text-sm font-mono">
+                  {lang === 'zh' ? 'john@dev-workspace' : 'john@dev-workspace'}
+                </div>
+                <div></div>
+              </div>
+              
+              {/* Terminal content */}
+              <div className="p-6 font-mono text-sm">
+                <div className="space-y-2">
+                  <div className="flex items-center">
+                    <span className="text-purple-400 mr-2">$</span>
+                    <span className="text-white">whoami</span>
+                  </div>
+                  <div className="text-purple-300 ml-4">{t('personal.name')}</div>
+                  
+                  <div className="flex items-center mt-4">
+                    <span className="text-purple-400 mr-2">$</span>
+                    <span className="text-white">cat about.txt</span>
+                  </div>
+                  <div className="text-gray-300 ml-4 leading-relaxed">
+                    {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'
+                    }
+                  </div>
+                  
+                  <div className="flex items-center mt-4">
+                    <span className="text-purple-400 mr-2">$</span>
+                    <span className="text-white">ls projects/</span>
+                  </div>
+                  <div className="text-purple-200 ml-4">
+                    taskify-app/  e-commerce-platform/  portfolio-site/
+                  </div>
+                  
+                  <div className="flex items-center mt-4">
+                    <span className="text-purple-400 mr-2">$</span>
+                    <span className="text-white animate-pulse">_</span>
+                  </div>
+                </div>
+              </div>
+            </div>
           </div>
         </MotionWrapper>
       </div>
diff --git a/src/components/ProjectsSection.tsx b/src/components/ProjectsSection.tsx
index 0d3791e..0e00e56 100644
--- a/src/components/ProjectsSection.tsx
+++ b/src/components/ProjectsSection.tsx
@@ -16,51 +16,112 @@ import { motion } from "framer-motion";
 export default function ProjectsSection({ lang }: { lang: "en" | "zh" }) {
   const t = useTranslations(lang);
   return (
-    <section id="projects" className="py-12 relative">
-      <div className="container max-w-4xl mx-auto px-6 md:px-4">
+    <section id="projects" className="py-20 relative">
+      {/* Background gradient */}
+      <div className="absolute inset-0 bg-gradient-to-b from-transparent via-purple-900/5 to-transparent"></div>
+      
+      <div className="container max-w-6xl mx-auto px-6 md:px-4 relative z-10">
         <MotionWrapper>
-          <h2 className="text-2xl font-bold mb-8 text-center md:text-left">
-            🚀 {t('projects.title')}
-          </h2>
+          <div className="text-center mb-16">
+            <h2 className="text-4xl md:text-5xl font-bold mb-4 bg-gradient-to-r from-purple-400 to-purple-600 bg-clip-text text-transparent">
+              {t('projects.title')}
+            </h2>
+            <p className="text-lg text-muted-foreground max-w-2xl mx-auto">
+              {lang === 'zh' 
+                ? '我最新工作的集合，展示创新解决方案和简洁代码。点击探索详情。'
+                : 'A collection of my recent work, showcasing innovative solutions and clean code. Click to explore details.'
+              }
+            </p>
+          </div>
         </MotionWrapper>
 
-        <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
+        <div className="grid grid-cols-1 lg:grid-cols-3 gap-8">
           {projects.map((project, index) => (
             <MotionWrapper key={project.title} delay={index * 0.2}>
-              <GlassCard className="group overflow-hidden dark:border-purple-500/10 h-full flex flex-col">
-                <CardHeader className="bg-gradient-to-r from-purple-500/5 to-pink-500/5">
-                  <CardTitle className="text-center md:text-left group-hover:text-purple-500 transition-colors duration-300">
-                    {project.title}
+              <GlassCard className="group overflow-hidden border-purple-500/20 hover:border-purple-500/40 h-full flex flex-col transition-all duration-500 hover:scale-105">
+                {/* Project image placeholder */}
+                <div className="h-48 bg-gradient-to-br from-purple-500/20 to-purple-600/20 relative overflow-hidden">
+                  <div className="absolute inset-0 bg-gradient-to-br from-purple-500/10 to-purple-600/10 group-hover:from-purple-500/20 group-hover:to-purple-600/20 transition-all duration-500"></div>
+                  <div className="absolute bottom-4 left-4 right-4">
+                    <div className="bg-black/50 backdrop-blur-sm rounded px-3 py-1 text-xs font-mono text-purple-400">
+                      {index === 0 ? 'Taskify App' : index === 1 ? 'E-Shop Platform' : 'Portfolio Site'}
+                    </div>
+                  </div>
+                </div>
+                
+                <CardHeader className="pb-4">
+                  <CardTitle className="text-xl group-hover:text-purple-400 transition-colors duration-300 flex items-center gap-2">
+                    <span className="text-purple-500">📱</span>
+                    {t(project.title as any)}
                   </CardTitle>
                 </CardHeader>
+                
                 <CardContent className="flex-grow">
-                  <ul className="list-disc ml-4 space-y-1 text-sm group-hover:space-y-2 transition-all duration-300">
-                    {project.description.map((desc, i) => (
-                      <motion.li
+                  <div className="space-y-3">
+                    {project.description.slice(0, 3).map((desc, i) => (
+                      <motion.div
                         key={i}
-                        className="text-muted-foreground"
+                        className="flex items-start gap-2 text-sm text-muted-foreground group-hover:text-foreground transition-colors duration-300"
                         initial={{ opacity: 0, x: -10 }}
                         whileInView={{ opacity: 1, x: 0 }}
                         transition={{ delay: i * 0.1 }}
                         viewport={{ once: true }}
                       >
-                        {t(desc as any)}
-                      </motion.li>
+                        <span className="text-purple-500 mt-1">•</span>
+                        <span>{t(desc as any)}</span>
+                      </motion.div>
                     ))}
-                  </ul>
+                  </div>
+                  
+                  {/* Tech stack indicators */}
+                  <div className="mt-6 flex flex-wrap gap-2">
+                    {index === 0 && (
+                      <>
+                        <span className="px-2 py-1 bg-blue-500/20 text-blue-400 text-xs rounded-full">React</span>
+                        <span className="px-2 py-1 bg-green-500/20 text-green-400 text-xs rounded-full">Node.js</span>
+                        <span className="px-2 py-1 bg-purple-500/20 text-purple-400 text-xs rounded-full">MongoDB</span>
+                      </>
+                    )}
+                    {index === 1 && (
+                      <>
+                        <span className="px-2 py-1 bg-blue-500/20 text-blue-400 text-xs rounded-full">Next.js</span>
+                        <span className="px-2 py-1 bg-yellow-500/20 text-yellow-400 text-xs rounded-full">Stripe</span>
+                        <span className="px-2 py-1 bg-cyan-500/20 text-cyan-400 text-xs rounded-full">TailwindCSS</span>
+                      </>
+                    )}
+                    {index === 2 && (
+                      <>
+                        <span className="px-2 py-1 bg-orange-500/20 text-orange-400 text-xs rounded-full">HTML</span>
+                        <span className="px-2 py-1 bg-cyan-500/20 text-cyan-400 text-xs rounded-full">TailwindCSS</span>
+                        <span className="px-2 py-1 bg-green-500/20 text-green-400 text-xs rounded-full">Alpine.js</span>
+                      </>
+                    )}
+                  </div>
                 </CardContent>
-                <CardFooter className="flex justify-center md:justify-start items-center border-t border-border/30 bg-gradient-to-r from-purple-500/5 to-pink-500/5">
-                  <motion.a
-                    href={project.github}
-                    target="_blank"
-                    rel="noopener noreferrer"
-                    className="flex items-center text-sm text-muted-foreground hover:text-purple-500 transition-colors group/link pt-8"
-                    whileHover={{ scale: 1.05 }}
-                    whileTap={{ scale: 0.95 }}
-                  >
-                    <Github className="h-4 w-4 mr-2 group-hover/link:rotate-12 transition-transform duration-300" />
-                    {t('projects.viewOnGithub')} 🔗
-                  </motion.a>
+                
+                <CardFooter className="pt-4 border-t border-border/30">
+                  <div className="flex items-center justify-between w-full">
+                    <motion.a
+                      href={project.github}
+                      target="_blank"
+                      rel="noopener noreferrer"
+                      className="flex items-center gap-2 text-sm text-muted-foreground hover:text-purple-400 transition-colors group/link"
+                      whileHover={{ scale: 1.05 }}
+                      whileTap={{ scale: 0.95 }}
+                    >
+                      <Github className="h-4 w-4 group-hover/link:rotate-12 transition-transform duration-300" />
+                      {t('projects.viewOnGithub')}
+                    </motion.a>
+                    
+                    <motion.button
+                      className="flex items-center gap-2 text-sm text-purple-400 hover:text-purple-300 transition-colors"
+                      whileHover={{ scale: 1.05 }}
+                      whileTap={{ scale: 0.95 }}
+                    >
+                      <span>🔗</span>
+                      {lang === 'zh' ? '查看详情' : 'Live Demo'}
+                    </motion.button>
+                  </div>
                 </CardFooter>
               </GlassCard>
             </MotionWrapper>
diff --git a/src/i18n/ui.ts b/src/i18n/ui.ts
index a1b3903..022c488 100644
--- a/src/i18n/ui.ts
+++ b/src/i18n/ui.ts
@@ -41,7 +41,7 @@ export const ui = {
     'skills.title': 'Skills',
 
     // Projects Section
-    'projects.title': 'Projects',
+    'projects.title': 'Latest Projects',
     'projects.viewOnGithub': 'View on GitHub',
 
     // Awards Section
@@ -93,11 +93,26 @@ export const ui = {
     'skills.toolsAndServices': 'Tools & Services',
 
     // Projects
-    'projects.netzero.title': 'Net Zero Carbon Emissions',
-    'projects.netzero.description1': 'WiFi-RTT: Developed indoor occupancy tracking for energy optimization.',
-    'projects.netzero.description2': 'IoT Solutions: Implemented smart monitoring for energy efficiency and food waste reduction.',
-    'projects.netzero.description3': 'Real-Time Tracking: Designed systems to monitor carbon emissions and optimize resources.',
-    'projects.netzero.description4': 'Data-Driven Insights: Analyzed user patterns for adaptive energy and food management.',
+    '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',
@@ -184,7 +199,7 @@ export const ui = {
     'skills.title': '专业技能',
 
     // Projects Section
-    'projects.title': '个人项目',
+    'projects.title': '最新项目',
     'projects.viewOnGithub': '在 GitHub 上查看',
 
     // Awards Section
@@ -236,11 +251,26 @@ export const ui = {
     'skills.toolsAndServices': '工具与服务',
 
     // Projects
-    'projects.netzero.title': '净零碳排放',
-    'projects.netzero.description1': 'WiFi-RTT：开发了室内占用跟踪以优化能源。',
-    'projects.netzero.description2': '物联网解决方案：实施了智能监控以提高能源效率和减少食物浪费。',
-    'projects.netzero.description3': '实时跟踪：设计了监控碳排放和优化资源的系统。',
-    'projects.netzero.description4': '数据驱动洞察：分析用户模式以进行自适应能源和食物管理。',
+    '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',
diff --git a/src/lib/data.ts b/src/lib/data.ts
index fd765e8..9c2928e 100644
--- a/src/lib/data.ts
+++ b/src/lib/data.ts
@@ -38,25 +38,36 @@ export const skills = {
 
 export const projects = [
   {
-    title: "projects.netZeroCarbonEmissions.title",
-    github: "https://github.com/rishikesh2003/Prodigi",
+    title: "projects.taskify.title",
+    github: "https://github.com/joyzhao/taskify-app",
     description: [
-      "projects.netZeroCarbonEmissions.description.0",
-      "projects.netZeroCarbonEmissions.description.1",
-      "projects.netZeroCarbonEmissions.description.2",
-      "projects.netZeroCarbonEmissions.description.3",
-      "projects.netZeroCarbonEmissions.description.4",
+      "projects.taskify.description.0",
+      "projects.taskify.description.1",
+      "projects.taskify.description.2",
+      "projects.taskify.description.3",
+      "projects.taskify.description.4",
     ],
   },
   {
-    title: "projects.mentalAarog.title",
-    github: "https://github.com/rishikesh2003/mental-aarog",
+    title: "projects.eshop.title",
+    github: "https://github.com/joyzhao/e-commerce-platform",
     description: [
-      "projects.mentalAarog.description.0",
-      "projects.mentalAarog.description.1",
-      "projects.mentalAarog.description.2",
-      "projects.mentalAarog.description.3",
-      "projects.mentalAarog.description.4",
+      "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",
     ],
   },
 ];
diff --git a/src/pages/index.astro b/src/pages/index.astro
index 78d34de..70e232c 100644
--- a/src/pages/index.astro
+++ b/src/pages/index.astro
@@ -2,7 +2,6 @@
 import Layout from "@/layouts/Layout.astro";
 import GlassHeader from "@/components/GlassHeader";
 import HeroSection from "@/components/HeroSection";
-import ExperienceSection from "@/components/ExperienceSection";
 import SkillsSection from "@/components/SkillsSection";
 import ProjectsSection from "@/components/ProjectsSection";
 import Footer from "@/components/Footer";
@@ -18,7 +17,6 @@ const pageTitle = t('page.home.title');
   <GlassHeader lang={lang} client:only="react" />
   <main class="min-h-screen">
     <HeroSection lang={lang} client:only="react" />
-    <!-- <ExperienceSection lang={lang} client:only="react" /> -->
     <SkillsSection lang={lang} client:only="react" />
     <ProjectsSection lang={lang} client:only="react" />
   </main>
diff --git a/src/pages/zh/index.astro b/src/pages/zh/index.astro
index d5d9f74..3c3d2b6 100644
--- a/src/pages/zh/index.astro
+++ b/src/pages/zh/index.astro
@@ -2,14 +2,11 @@
 import Layout from "@/layouts/Layout.astro";
 import GlassHeader from "@/components/GlassHeader.tsx";
 import HeroSection from "@/components/HeroSection.tsx";
-import ExperienceSection from "@/components/ExperienceSection.tsx";
 import SkillsSection from "@/components/SkillsSection.tsx";
 import ProjectsSection from "@/components/ProjectsSection.tsx";
 import Footer from "@/components/Footer.tsx";
 import { useTranslations } from "@/i18n/utils";
 
-// For /zh/ pages, Astro.currentLocale should be 'zh'.
-// We explicitly set lang to 'zh' to ensure type correctness and intent.
 const lang: "en" | "zh" = 'zh';
 const t = useTranslations(lang);
 const pageTitle = t('page.home.title');
@@ -19,7 +16,6 @@ const pageTitle = t('page.home.title');
   <GlassHeader lang={lang} client:only="react" />
   <main class="min-h-screen">
     <HeroSection lang={lang} client:only="react" />
-    <!-- <ExperienceSection lang={lang} client:only="react" /> -->
     <SkillsSection lang={lang} client:only="react" />
     <ProjectsSection lang={lang} client:only="react" />
   </main>