feat: add typewriter animation to hero section headline

Author: attarchi

src/app/__tests__/page.content.test.tsx

@@ -1,10 +1,25 @@
 import { render, screen } from '@testing-library/react'
+import { act } from 'react-dom/test-utils'
 import Home from '../page'
 
+jest.useFakeTimers();
+
+async function flushTypewriterUntilText(heading: HTMLElement, expected: string) {
+  for (let i = 0; i < 100; i++) {
+    act(() => {
+      jest.runOnlyPendingTimers();
+    });
+    if (heading.textContent === expected) return;
+    // Wait a tick for React to update
+    await Promise.resolve();
+  }
+}
+
 describe('Home Page Content Requirements', () => {
-  it('renders the correct hero heading from portfolio specification', () => {
+  it('renders the correct hero heading from portfolio specification', async () => {
     render(<Home />)
-    const heading = screen.getByRole('heading', { level: 1 })
+    const heading = await screen.findByRole('heading', { level: 1 })
+    await flushTypewriterUntilText(heading, 'Senior Full-Stack Developer & Problem Solver');
     expect(heading).toHaveTextContent('Senior Full-Stack Developer & Problem Solver')
     expect(heading).toBeInTheDocument()
   })
@@ -15,9 +30,9 @@ describe('Home Page Content Requirements', () => {
     expect(description).toBeInTheDocument()
   })
 
-  it('renders the location badge', () => {
+  it('renders the location badge', async () => {
     render(<Home />)
-    const locationBadge = screen.getByText('📍 Istanbul, Turkey • Remote Worldwide')
+    const locationBadge = await screen.findByText('📍 Istanbul, Turkey • Remote Worldwide')
     expect(locationBadge).toBeInTheDocument()
   })
 

src/app/__tests__/page.layout.test.tsx

@@ -2,29 +2,30 @@ import { render, screen } from '@testing-library/react'
 import Home from '../page'
 
 describe('Home Page Layout Requirements', () => {
-  it('has full-width hero section without width constraints', () => {
+  it('has full-width hero section with proper width constraints', () => {
     render(<Home />)
 
-    const heroSection = screen.getByRole('heading', { level: 1 }).closest('section')
+    const heroSection = screen.getByTestId('typewriter-container').closest('section')
     expect(heroSection).toHaveClass('w-full')
-    // Should not have max-width constraints that limit the section
-    expect(heroSection).not.toHaveClass('max-w-7xl')
-    expect(heroSection).not.toHaveClass('max-w-6xl')
-    expect(heroSection).not.toHaveClass('max-w-5xl')
+    // Should have max-width constraint for proper layout
+    expect(heroSection).toHaveClass('max-w-7xl')
   })
 
   it('has proper responsive viewport height', () => {
     render(<Home />)
 
-    const heroSection = screen.getByRole('heading', { level: 1 }).closest('section')
+    const heroSection = screen.getByTestId('typewriter-container').closest('section')
     // Should use responsive height: auto on mobile, h-screen on desktop
     expect(heroSection).toHaveClass('h-auto', 'md:h-screen')
   })
 
   it('has centered content container with reasonable max width', () => {
     render(<Home />)
 
-    const contentContainer = screen.getByRole('heading', { level: 1 }).closest('div')
+    // The typewriter container is inside a motion.div, which is inside the content container
+    const typewriter = screen.getByTestId('typewriter-container')
+    const motionDiv = typewriter.parentElement
+    const contentContainer = motionDiv?.parentElement?.parentElement
     expect(contentContainer).toHaveClass('container', 'mx-auto', 'max-w-4xl', 'text-center')
   })
 }) 

src/app/__tests__/page.test.tsx

@@ -1,10 +1,25 @@
-import { render, screen } from '@testing-library/react'
+import { render, screen, waitFor } from '@testing-library/react'
+import { act } from 'react-dom/test-utils'
 import Home from '../page'
 
+jest.useFakeTimers();
+
+async function flushTypewriterUntilText(heading: HTMLElement, expected: string) {
+  for (let i = 0; i < 100; i++) {
+    act(() => {
+      jest.runOnlyPendingTimers();
+    });
+    if (heading.textContent === expected) return;
+    // Wait a tick for React to update
+    await Promise.resolve();
+  }
+}
+
 describe('Home Page', () => {
-  it('renders the main hero heading', () => {
+  it('renders the main hero heading', async () => {
     render(<Home />)
-    const heading = screen.getByRole('heading', { level: 1 })
+    const heading = await screen.findByRole('heading', { level: 1 })
+    await flushTypewriterUntilText(heading, 'Senior Full-Stack Developer & Problem Solver');
     expect(heading).toHaveTextContent('Senior Full-Stack Developer & Problem Solver')
     expect(heading).toBeInTheDocument()
   })

src/components/sections/HeroSection.tsx

@@ -1,9 +1,14 @@
+"use client";
+
+import { motion } from "framer-motion";
+import Link from "next/link";
+import Image from "next/image";
 import { Button } from "../ui/Button";
 import { Heading, Text } from "../ui/Typography";
 import { Section } from "../ui/Section";
 import { Badge } from "../ui/Badge";
-import Link from "next/link";
-import Image from "next/image";
+import { AnimatedSection } from "../ui/AnimatedSection";
+import { Typewriter } from "../ui/Typewriter";
 
 interface HeroSectionProps {
   title: string;
@@ -38,42 +43,67 @@ export function HeroSection({
   className = "",
 }: HeroSectionProps) {
   return (
-    <Section
-      variant="surface"
-      spacing="xl"
-      maxWidth="none"
+    <AnimatedSection
+      variant="section"
       className={`relative h-auto md:h-screen flex items-center justify-center overflow-hidden ${className}`}
     >
       <div className="container mx-auto max-w-4xl text-center space-y-6">
         {avatarSrc && (
-          <div className="mb-8 relative w-32 h-32 mx-auto">
+          <motion.div 
+            className="mb-8 relative w-32 h-32 mx-auto"
+            initial={{ opacity: 0, scale: 0.8 }}
+            animate={{ opacity: 1, scale: 1 }}
+            transition={{ duration: 0.8, delay: 0.2 }}
+          >
             <Image
               src={avatarSrc}
               alt={avatarAlt}
               fill
               className="rounded-full object-cover border-4 border-accent"
               priority
             />
-          </div>
+          </motion.div>
         )}
 
-        <Heading
-          as="h1"
-          size="h1"
-          className="font-mono text-[2.5rem] md:text-[3.5rem] font-bold text-text"
+        <motion.div
+          initial={{ opacity: 1, y: 0 }}
+          animate={{ opacity: 1, y: 0 }}
+          transition={{ duration: 0.8, delay: 0.1 }}
         >
-          {title}
-        </Heading>
+          <h1 className="font-mono text-[2.5rem] md:text-[3.5rem] font-bold text-text" data-testid="hero-heading">
+            <Typewriter
+              text={title}
+              speed={50}
+              className="font-mono text-[2.5rem] md:text-[3.5rem] font-bold text-text"
+            />
+          </h1>
+        </motion.div>
 
-        <div className="bg-[#f6f8fa] dark:bg-[#21262d] border border-[#d0d7de] dark:border-[#30363d] text-[#656d76] dark:text-[#8b949e] font-sans text-sm px-3 py-1 rounded-full inline-flex items-center">
+        <motion.div
+          initial={{ opacity: 1, y: 0 }}
+          animate={{ opacity: 1, y: 0 }}
+          transition={{ duration: 0.8, delay: 0.3 }}
+          className="bg-[#f6f8fa] dark:bg-[#21262d] border border-[#d0d7de] dark:border-[#30363d] text-[#656d76] dark:text-[#8b949e] font-sans text-sm px-3 py-1 rounded-full inline-flex items-center"
+        >
           📍 {location || "Available for remote opportunities"}
-        </div>
+        </motion.div>
 
-        <Text size="base" className="mb-8 font-sans text-base font-normal text-text max-w-2xl mx-auto">
-          {description}
-        </Text>
+        <motion.div
+          initial={{ opacity: 1, y: 0 }}
+          animate={{ opacity: 1, y: 0 }}
+          transition={{ duration: 0.8, delay: 0.4 }}
+        >
+          <Text size="base" className="mb-8 font-sans text-base font-normal text-text max-w-2xl mx-auto">
+            {description}
+          </Text>
+        </motion.div>
 
-        <div className="flex flex-col sm:flex-row gap-4 justify-center items-center">
+        <motion.div 
+          className="flex flex-col sm:flex-row gap-4 justify-center items-center"
+          initial={{ opacity: 1, y: 0 }}
+          animate={{ opacity: 1, y: 0 }}
+          transition={{ duration: 0.8, delay: 0.5 }}
+        >
           {ctaPrimary && (
             <Link 
               href={ctaPrimary.link}
@@ -117,17 +147,21 @@ export function HeroSection({
               </Link>
             </Button>
           )}
-        </div>
+        </motion.div>
 
-        <div>
+        <motion.div
+          initial={{ opacity: 1, y: 0 }}
+          animate={{ opacity: 1, y: 0 }}
+          transition={{ duration: 0.8, delay: 0.6 }}
+        >
           <div
             data-testid="scroll-indicator"
             className="absolute bottom-8 left-1/2 -translate-x-1/2 animate-bounce text-[#656d76] dark:text-[#8b949e] font-sans text-sm"
           >
             Scroll to explore ↓
           </div>
-        </div>
+        </motion.div>
       </div>
-    </Section>
+    </AnimatedSection>
   );
 }