feat(i18n): add multilingual support for all sections

Implement internationalization across all components by adding lang prop and translation keys
Update data structure to use translation keys instead of hardcoded text
Add comprehensive English and Chinese translations in ui.ts

src/components/HeroSection.tsx

@@ -1,9 +1,11 @@
 import { personalInfo } from "@/lib/data";
 import { Mail, Github, MapPin, Linkedin } from "lucide-react";
+import { useTranslations } from "@/i18n/utils";
 import { motion } from "framer-motion";
 import MotionWrapper from "./MotionWrapper";
 
-export default function HeroSection() {
+export default function HeroSection({ lang }: { lang: "en" | "zh" }) {
+  const t = useTranslations(lang);
   const containerVariants = {
     hidden: { opacity: 0 },
     visible: {
@@ -40,7 +42,7 @@ export default function HeroSection() {
               className="text-4xl font-bold mb-2"
               variants={childVariants}
             >
-              {personalInfo.name}{" "}
+              {t('personal.name')}{" "}
               <span className="inline-block animate-pulse">✨</span>
             </motion.h1>
 
@@ -48,7 +50,7 @@ export default function HeroSection() {
               className="text-xl text-muted-foreground mb-6"
               variants={childVariants}
             >
-              Software Engineer 👨‍💻
+              {t('personal.title')}
             </motion.p>
 
             <motion.div
@@ -61,17 +63,17 @@ export default function HeroSection() {
                 whileHover={{ scale: 1.05, color: "#4b5563" }}
               >
                 <MapPin className="h-4 w-4 mr-2" />
-                📍 {personalInfo.location}
+                📍 {t('personal.location')}
               </motion.div>
 
               <motion.a
-                href={`mailto:${personalInfo.email}`}
+                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" />
-                ✉️ {personalInfo.email}
+                ✉️ {t('personal.email')}
               </motion.a>
 
               <motion.a
@@ -83,7 +85,7 @@ export default function HeroSection() {
                 whileHover={{ scale: 1.05, color: "#4b5563" }}
               >
                 <Github className="h-4 w-4 mr-2" />
-                🌟 GitHub
+                🌟 {t('hero.githubLink')}
               </motion.a>
 
               <motion.a
@@ -95,7 +97,7 @@ export default function HeroSection() {
                 whileHover={{ scale: 1.05, color: "#4b5563" }}
               >
                 <Linkedin className="h-4 w-4 mr-2" />
-                🔗 LinkedIn
+                🔗 {t('hero.linkedinLink')}
               </motion.a>
             </motion.div>
           </div>
@@ -122,15 +124,7 @@ export default function HeroSection() {
           <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>
-              🚀 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.
+              {t('hero.description')}
             </p>
           </div>
         </MotionWrapper>