copilot. Split into components

src/components/ExperienceModal.tsx

@@ -0,0 +1,117 @@
+import type { Experience } from "../types";
+import { getTypeColor, getTypeIcon } from "./utils";
+
+export function ExperienceModal({
+  experience,
+  onClose,
+}: {
+  experience: Experience;
+  onClose: () => void;
+}) {
+  return (
+    <div
+      className="fixed inset-0 z-50 flex items-center justify-center p-4 bg-black/80 backdrop-blur-sm animate-fade-in"
+      onClick={onClose}
+    >
+      <div
+        className="relative max-w-2xl w-full max-h-[90vh] overflow-y-auto bg-gradient-to-br from-gray-900 to-black border border-purple-500/30 rounded-2xl shadow-2xl animate-scale-in"
+        onClick={(e) => e.stopPropagation()}
+      >
+        {/* Close Button */}
+        <button
+          onClick={onClose}
+          className="absolute top-4 right-4 p-2 rounded-full bg-white/10 hover:bg-white/20 text-white transition-colors z-10"
+        >
+          <svg
+            className="w-6 h-6"
+            fill="none"
+            stroke="currentColor"
+            viewBox="0 0 24 24"
+          >
+            <path
+              strokeLinecap="round"
+              strokeLinejoin="round"
+              strokeWidth="2"
+              d="M6 18L18 6M6 6l12 12"
+            />
+          </svg>
+        </button>
+
+        {/* Content */}
+        <div className="p-8 space-y-6">
+          <div className="flex items-center gap-4">
+            <div
+              className={`text-4xl p-3 rounded-lg ${getTypeColor(experience.type)} flex items-center justify-center shrink-0 ${experience.image ? "w-16 h-16" : ""}`}
+            >
+              {experience.image ? (
+                <img
+                  src={experience.image}
+                  alt={experience.name}
+                  className="w-full h-full object-contain"
+                />
+              ) : (
+                getTypeIcon(experience.type)
+              )}
+            </div>
+            <div>
+              <h2 className="text-3xl font-bold text-transparent bg-clip-text bg-gradient-to-r from-purple-400 to-pink-500">
+                {experience.name}
+              </h2>
+              <p className="text-sm text-gray-400 mt-1">
+                {getTypeIcon(experience.type)}{" "}
+                {experience.type.charAt(0).toUpperCase() +
+                  experience.type.slice(1)}
+              </p>
+            </div>
+          </div>
+
+          <div className="space-y-4">
+            {experience.description && (
+              <div>
+                <h3 className="text-lg font-semibold text-purple-400 mb-2">
+                  Description
+                </h3>
+                <p className="text-gray-300 leading-relaxed">
+                  {experience.description}
+                </p>
+              </div>
+            )}
+
+            {experience.learned_at && (
+              <div>
+                <h3 className="text-lg font-semibold text-purple-400 mb-2">
+                  📅 When I Learned It
+                </h3>
+                <p className="text-gray-300 leading-relaxed">
+                  {experience.learned_at}
+                </p>
+              </div>
+            )}
+
+            {experience.learned_from && (
+              <div>
+                <h3 className="text-lg font-semibold text-purple-400 mb-2">
+                  👨‍🏫 How I Learned It
+                </h3>
+                <p className="text-gray-300 leading-relaxed">
+                  {experience.learned_from}
+                </p>
+              </div>
+            )}
+
+            {experience.learned_because && (
+              <div>
+                <h3 className="text-lg font-semibold text-purple-400 mb-2">
+                  💡 Why I Learned It
+                </h3>
+                <p className="text-gray-300 leading-relaxed">
+                  {experience.learned_because}
+                </p>
+              </div>
+            )}
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+}