Add new documents and images to the public directory

- Added essays: qui-sumus-existential-dread.pdf and licencjat.pdf
- Added scripts: loop.pdf
- Added images: DSC_1283.avif, GAK00015.avif, GAK00017.avif, GAK00041.avif, GAK00042.avif, painter.avif, parasitic-god-1.avif, parasitic-god-2.avif, parasitic-god-3.avif, parasitic-god-4.avif, parasitic-god-5.avif, spanish-inq-1.avif, spanish-inq-2.avif, spanish-inq-3.avif, spanish-inq-4.avif, typing-game-1.avif, typing-game-2.avif

components/fun-zone-carousel.tsx

@@ -0,0 +1,113 @@
+"use client";
+
+import { useState, useCallback } from "react";
+import Image from "next/image";
+import { FunZoneItem } from "@/lib/types";
+import { Eye, Gamepad2 } from "lucide-react";
+
+interface FunZoneCarouselProps {
+  items: FunZoneItem[];
+}
+
+const FunZoneCarousel = ({ items }: FunZoneCarouselProps) => {
+  const [activeIndex, setActiveIndex] = useState(0);
+  const active = items[activeIndex];
+
+  const handleTabKeyDown = useCallback(
+    (e: React.KeyboardEvent) => {
+      if (e.key === "ArrowRight") {
+        e.preventDefault();
+        setActiveIndex((i) => (i + 1) % items.length);
+      } else if (e.key === "ArrowLeft") {
+        e.preventDefault();
+        setActiveIndex((i) => (i - 1 + items.length) % items.length);
+      }
+    },
+    [items.length],
+  );
+
+  return (
+    <div className="flex flex-col items-center gap-6 w-full max-w-2xl mx-auto">
+      {/* Spotlight card */}
+      <div
+        role="tabpanel"
+        aria-label={active.name}
+        className="w-full glass-effect glossy-effect bottom rounded-2xl overflow-hidden transition-all duration-300"
+      >
+        {/* Screenshot area */}
+        <div className="relative w-full h-64 sm:h-80 bg-gradient-to-br from-violet-600 via-indigo-600 to-blue-600 flex items-center justify-center">
+          {active.thumbnail ? (
+            <Image
+              src={active.thumbnail}
+              alt={active.name}
+              fill
+              className="object-cover"
+            />
+          ) : (
+            <Gamepad2 size={80} className="text-white/30" aria-hidden="true" />
+          )}
+        </div>
+
+        {/* Info bar */}
+        <div className="flex items-center justify-between p-4 sm:p-5">
+          <div>
+            <h2 className="text-white text-xl font-bold">{active.name}</h2>
+            <p className="text-white/50 text-sm">{active.tagline}</p>
+          </div>
+          <div className="flex gap-2">
+            <a
+              href={active.play_url}
+              target="_blank"
+              rel="noopener noreferrer"
+              className="relative overflow-hidden flex items-center gap-1.5 bg-yellow-400 hover:bg-yellow-500 px-5 py-2 rounded-full text-black text-sm font-bold transition-colors gloss-highlight"
+            >
+              <Eye size={16} />
+              Play
+            </a>
+          </div>
+        </div>
+      </div>
+
+      {/* Dots */}
+      <div className="flex gap-2">
+        {items.map((item, index) => (
+          <button
+            key={index}
+            onClick={() => setActiveIndex(index)}
+            aria-label={`Show ${item.name}`}
+            className={`w-2 h-2 rounded-full transition-colors ${
+              index === activeIndex ? "bg-yellow-400" : "bg-white/25"
+            }`}
+          />
+        ))}
+      </div>
+
+      {/* Tab bar */}
+      <div
+        role="tablist"
+        aria-label="Fun Zone projects"
+        className="flex gap-2 w-full"
+        onKeyDown={handleTabKeyDown}
+      >
+        {items.map((item, index) => (
+          <button
+            key={item.id}
+            role="tab"
+            aria-selected={index === activeIndex}
+            tabIndex={index === activeIndex ? 0 : -1}
+            onClick={() => setActiveIndex(index)}
+            className={`flex-1 py-2.5 px-2 rounded-xl text-xs sm:text-sm font-medium transition-all duration-200 ${
+              index === activeIndex
+                ? "glass-effect border-yellow-400 border-2 text-white"
+                : "bg-white/5 border border-white/10 text-white/50 hover:text-white/70 hover:bg-white/10"
+            }`}
+          >
+            {item.name}
+          </button>
+        ))}
+      </div>
+    </div>
+  );
+};
+
+export default FunZoneCarousel;