feat(homepage): add typewriter effect to subtitle section

Implement a dynamic typewriter animation that cycles through multiple role descriptions. The effect includes customizable typing and deleting speeds, delays, and looping behavior to enhance user engagement on the homepage.

src/pages/index.astro

@@ -2,6 +2,7 @@
 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";
 import { useTranslations, type Lang } from "@/i18n/utils";
@@ -39,9 +40,28 @@ const pageTitle = t('site.title');
             {personalInfo.name}
           </h1>
 
-          <!-- Subtitle -->
-          <p class="text-2xl md:text-3xl text-muted-foreground mb-8 font-light">
-            {personalInfo.position.en} 👨‍💻
+          <!-- Subtitle with Typewriter Effect -->
+          <p class="text-2xl md:text-3xl text-muted-foreground mb-8 font-light flex items-center justify-center">
+            <span class="inline-flex items-center">
+              <TypewriterEffect 
+                client:load
+                text={[
+                  personalInfo.position.en,
+                  "Frontend Developer",
+                  "TypeScript Enthusiast",
+                  "React Specialist",
+                  "Full-stack Engineer"
+                ]}
+                typingSpeed={100}
+                deletingSpeed={50}
+                delayBeforeDelete={3500}
+                delayBeforeTyping={1800}
+                loop={true}
+                cursorClassName="text-purple-600 dark:text-purple-400"
+                className="mr-2 font-medium text-muted-foreground"
+              />
+              <span>👨‍💻</span>
+            </span>
           </p>
 
           <!-- Description -->

src/pages/zh/index.astro

@@ -2,6 +2,7 @@
 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";
 import { useTranslations, type Lang } from "@/i18n/utils";
@@ -39,9 +40,28 @@ const pageTitle = t('site.title');
             {personalInfo.name}
           </h1>
 
-          <!-- Subtitle -->
-          <p class="text-2xl md:text-3xl text-muted-foreground mb-8 font-light">
-            {personalInfo.position.zh}  👨‍💻
+          <!-- Subtitle with Typewriter Effect -->
+          <p class="text-2xl md:text-3xl text-muted-foreground mb-8 font-light flex items-center justify-center">
+            <span class="inline-flex items-center">
+              <TypewriterEffect 
+                client:load
+                text={[
+                  personalInfo.position.zh,
+                  "前端开发工程师",
+                  "TypeScript 爱好者",
+                  "React 专家",
+                  "全栈工程师"
+                ]}
+                typingSpeed={100}
+                deletingSpeed={50}
+                delayBeforeDelete={3500}
+                delayBeforeTyping={1800}
+                loop={true}
+                cursorClassName="text-purple-600 dark:text-purple-400"
+                className="mr-2 font-medium text-muted-foreground"
+              />
+              <span>👨‍💻</span>
+            </span>
           </p>
 
           <!-- Description -->