feat: add TechnicalExpertise component with category-based structure

- Create TechnicalExpertise section component with 4 skill categories
- Implement responsive 2x2 grid layout (mobile-first design)
- Add comprehensive test suite with 24 test cases covering:
  - Section structure and styling consistency with FeaturedProjects
  - Typography using JetBrains Mono for headings
  - Light/dark theme support with GitHub color palette
  - Category cards with hover effects and proper borders
  - Responsive grid behavior (1 col mobile, 2 cols desktop)
- Export component from sections index for easy importing
- Follow TDD approach: tests written first, implementation second
- All 243 tests passing with no regressions

Categories included:
- Frontend Development
- Backend Development
- Mobile Development
- DevOps & Tools

Author: attarchi

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

@@ -54,6 +54,18 @@ describe('Home Page Content Requirements', () => {
     expect(scrollIndicator).toBeInTheDocument()
   })
 
+  it('renders the Featured Projects section', () => {
+    render(<Home />)
+    const featuredProjectsHeading = screen.getByRole('heading', { name: /featured projects/i })
+    expect(featuredProjectsHeading).toBeInTheDocument()
+  })
+
+  it('renders the Technical Expertise section', () => {
+    render(<Home />)
+    const technicalExpertiseHeading = screen.getByRole('heading', { name: /technical expertise/i })
+    expect(technicalExpertiseHeading).toBeInTheDocument()
+  })
+
   describe('Theme Toggle Positioning', () => {
     it('has theme toggle positioned correctly in header', () => {
       render(<Home />)

src/app/page.tsx

@@ -1,4 +1,4 @@
-import { HeroSection, FeaturedProjects } from "@/components/sections";
+import { HeroSection, FeaturedProjects, TechnicalExpertise } from "@/components/sections";
 import { ThemeToggle } from '@/components/ui/ThemeToggle';
 
 export default function Home() {
@@ -32,6 +32,9 @@ export default function Home() {
 
       {/* Featured Projects Section */}
       <FeaturedProjects />
+
+      {/* Technical Expertise Section */}
+      <TechnicalExpertise />
     </div>
   );
 }

src/components/sections/TechnicalExpertise.tsx

@@ -0,0 +1,58 @@
+// Default skill categories
+const defaultCategories = [
+  {
+    title: "Frontend Development"
+  },
+  {
+    title: "Backend Development"
+  },
+  {
+    title: "Mobile Development"
+  },
+  {
+    title: "DevOps & Tools"
+  }
+];
+
+export interface SkillCategory {
+  title: string;
+}
+
+export interface TechnicalExpertiseProps {
+  categories?: SkillCategory[];
+}
+
+export function TechnicalExpertise({ categories = defaultCategories }: TechnicalExpertiseProps) {
+  return (
+    <section 
+      className="py-20 bg-[#ffffff] dark:bg-[#0d1117]"
+      aria-label="Technical Expertise"
+    >
+      <div 
+        className="max-w-6xl mx-auto px-4"
+        data-testid="technical-expertise-container"
+      >
+        <h2 className="font-mono text-[2rem] md:text-[2.5rem] font-semibold text-[#24292f] dark:text-[#f0f6fc]">
+          Technical Expertise
+        </h2>
+        
+        <div 
+          className="grid grid-cols-1 md:grid-cols-2 gap-8 mt-12"
+          data-testid="categories-grid"
+        >
+          {categories.map((category, index) => (
+            <div
+              key={index}
+              data-testid="category-card"
+              className="bg-[#f6f8fa] dark:bg-[#21262d] border border-muted/20 rounded-lg p-6 hover:shadow-lg transition-all duration-300"
+            >
+              <h3 className="font-mono text-xl font-semibold text-[#24292f] dark:text-[#f0f6fc]">
+                {category.title}
+              </h3>
+            </div>
+          ))}
+        </div>
+      </div>
+    </section>
+  );
+} 

src/components/sections/__tests__/TechnicalExpertise.test.tsx

@@ -0,0 +1,203 @@
+import { render, screen } from "@testing-library/react";
+import { TechnicalExpertise } from "../TechnicalExpertise";
+
+describe("TechnicalExpertise", () => {
+  describe("Section Structure", () => {
+    it("renders section with correct padding", () => {
+      render(<TechnicalExpertise />);
+      
+      const section = screen.getByRole("region", { name: /technical expertise/i });
+      expect(section).toHaveClass("py-20");
+    });
+
+    it("renders container with correct max-width and margins", () => {
+      render(<TechnicalExpertise />);
+      
+      const container = screen.getByTestId("technical-expertise-container");
+      expect(container).toHaveClass("max-w-6xl", "mx-auto", "px-4");
+    });
+
+    it("renders with light theme colors", () => {
+      render(<TechnicalExpertise />);
+      
+      const section = screen.getByRole("region", { name: /technical expertise/i });
+      expect(section).toHaveClass("bg-[#ffffff]");
+    });
+
+    it("renders with dark theme colors", () => {
+      document.documentElement.classList.add("dark");
+      
+      render(<TechnicalExpertise />);
+      
+      const section = screen.getByRole("region", { name: /technical expertise/i });
+      expect(section).toHaveClass("dark:bg-[#0d1117]");
+      
+      document.documentElement.classList.remove("dark");
+    });
+  });
+
+  describe("Section Heading", () => {
+    it("renders heading with correct text", () => {
+      render(<TechnicalExpertise />);
+      
+      const heading = screen.getByRole("heading", { level: 2 });
+      expect(heading).toHaveTextContent("Technical Expertise");
+    });
+
+    it("renders heading with JetBrains Mono font family", () => {
+      render(<TechnicalExpertise />);
+      
+      const heading = screen.getByRole("heading", { level: 2 });
+      expect(heading).toHaveClass("font-mono");
+    });
+
+    it("renders heading with correct sizes for desktop and mobile", () => {
+      render(<TechnicalExpertise />);
+      
+      const heading = screen.getByRole("heading", { level: 2 });
+      expect(heading).toHaveClass("text-[2rem]", "md:text-[2.5rem]");
+    });
+
+    it("renders heading with correct font weight", () => {
+      render(<TechnicalExpertise />);
+      
+      const heading = screen.getByRole("heading", { level: 2 });
+      expect(heading).toHaveClass("font-semibold");
+    });
+
+    it("renders heading with light theme text color", () => {
+      render(<TechnicalExpertise />);
+      
+      const heading = screen.getByRole("heading", { level: 2 });
+      expect(heading).toHaveClass("text-[#24292f]");
+    });
+
+    it("renders heading with dark theme text color", () => {
+      document.documentElement.classList.add("dark");
+      
+      render(<TechnicalExpertise />);
+      
+      const heading = screen.getByRole("heading", { level: 2 });
+      expect(heading).toHaveClass("dark:text-[#f0f6fc]");
+      
+      document.documentElement.classList.remove("dark");
+    });
+  });
+
+  describe("Category Grid", () => {
+    it("renders grid container with correct responsive classes", () => {
+      render(<TechnicalExpertise />);
+      
+      const grid = screen.getByTestId("categories-grid");
+      expect(grid).toHaveClass("grid", "grid-cols-1", "md:grid-cols-2");
+    });
+
+    it("renders grid with correct gap spacing", () => {
+      render(<TechnicalExpertise />);
+      
+      const grid = screen.getByTestId("categories-grid");
+      expect(grid).toHaveClass("gap-8");
+    });
+
+    it("renders grid with correct margin top from heading", () => {
+      render(<TechnicalExpertise />);
+      
+      const grid = screen.getByTestId("categories-grid");
+      expect(grid).toHaveClass("mt-12");
+    });
+  });
+
+  describe("Category Cards", () => {
+    it("renders all 4 category cards", () => {
+      render(<TechnicalExpertise />);
+      
+      const categoryCards = screen.getAllByTestId("category-card");
+      expect(categoryCards).toHaveLength(4);
+    });
+
+    it("renders Frontend Development category", () => {
+      render(<TechnicalExpertise />);
+      
+      expect(screen.getByText("Frontend Development")).toBeInTheDocument();
+    });
+
+    it("renders Backend Development category", () => {
+      render(<TechnicalExpertise />);
+      
+      expect(screen.getByText("Backend Development")).toBeInTheDocument();
+    });
+
+    it("renders Mobile Development category", () => {
+      render(<TechnicalExpertise />);
+      
+      expect(screen.getByText("Mobile Development")).toBeInTheDocument();
+    });
+
+    it("renders DevOps & Tools category", () => {
+      render(<TechnicalExpertise />);
+      
+      expect(screen.getByText("DevOps & Tools")).toBeInTheDocument();
+    });
+
+    it("renders category cards with correct background colors", () => {
+      render(<TechnicalExpertise />);
+      
+      const categoryCards = screen.getAllByTestId("category-card");
+      categoryCards.forEach(card => {
+        expect(card).toHaveClass("bg-[#f6f8fa]");
+      });
+    });
+
+    it("renders category cards with dark theme background colors", () => {
+      document.documentElement.classList.add("dark");
+      
+      render(<TechnicalExpertise />);
+      
+      const categoryCards = screen.getAllByTestId("category-card");
+      categoryCards.forEach(card => {
+        expect(card).toHaveClass("dark:bg-[#21262d]");
+      });
+      
+      document.documentElement.classList.remove("dark");
+    });
+
+    it("renders category cards with correct border styling", () => {
+      render(<TechnicalExpertise />);
+      
+      const categoryCards = screen.getAllByTestId("category-card");
+      categoryCards.forEach(card => {
+        expect(card).toHaveClass("border", "border-muted/20", "rounded-lg");
+      });
+    });
+
+    it("renders category cards with correct padding", () => {
+      render(<TechnicalExpertise />);
+      
+      const categoryCards = screen.getAllByTestId("category-card");
+      categoryCards.forEach(card => {
+        expect(card).toHaveClass("p-6");
+      });
+    });
+
+    it("renders category cards with hover effects", () => {
+      render(<TechnicalExpertise />);
+      
+      const categoryCards = screen.getAllByTestId("category-card");
+      categoryCards.forEach(card => {
+        expect(card).toHaveClass("hover:shadow-lg", "transition-all", "duration-300");
+      });
+    });
+  });
+
+  describe("Responsive Design", () => {
+    it("has mobile-first responsive grid classes", () => {
+      render(<TechnicalExpertise />);
+      
+      const grid = screen.getByTestId("categories-grid");
+      // Should start with 1 column on mobile
+      expect(grid).toHaveClass("grid-cols-1");
+      // Then 2 columns on medium screens
+      expect(grid).toHaveClass("md:grid-cols-2");
+    });
+  });
+}); 

src/components/sections/index.ts

@@ -1,2 +1,3 @@
 export * from "./HeroSection";
-export * from "./FeaturedProjects";
+export * from "./FeaturedProjects";
+export * from "./TechnicalExpertise";