first commit

src/components/ExpertArea.jsx

@@ -0,0 +1,33 @@
+import React from "react";
+import workData from "../data/work.json";
+
+export default function ExpertArea() {
+  return (
+    <section
+      className="bg-[var(--card)] border border-[var(--border)] text-[var(--text)] flex-1 px-5 rounded-xl shadow py-3 flex flex-col gap-5"
+      aria-labelledby="expert-area-heading"
+    >
+      <h2 id="expert-area-heading" className="text-2xl font-semibold py-2">
+        My Expert Area
+      </h2>
+
+      <ul className="grid grid-cols-2 lg:grid-cols-3 gap-3" role="list">
+        {workData.map((work) => (
+          <li key={work.id} className="mt-2 list-none">
+            <figure className="bg-gray-200 rounded-xl flex items-center justify-center p-4">
+              <img
+                src={work.image}
+                alt={`${work.company} logo`}
+                className="h-8 w-20 object-contain"
+                loading="lazy"
+                decoding="async"
+              />
+              <figcaption className="sr-only">{work.company}</figcaption>
+            </figure>
+            <p className="text-center font-semibold">{work.company}</p>
+          </li>
+        ))}
+      </ul>
+    </section>
+  );
+}