Initial portfolio commit (Next.js + Docker + Gitea integration)

components/desktop-ui-showcase.tsx

@@ -0,0 +1,75 @@
+"use client";
+
+import Image from "next/image";
+import { motion } from "framer-motion";
+import { Reveal } from "@/components/reveal";
+
+export type UIScreenshot = {
+  src: string;
+  title: string;
+  description?: string;
+};
+
+export function DesktopUIShowcase({
+  title = "Desktop Interface",
+  subtitle = "Control surface software designed for clarity and speed.",
+  screenshots,
+}: {
+  title?: string;
+  subtitle?: string;
+  screenshots: UIScreenshot[];
+}) {
+  return (
+    <section className="relative overflow-hidden">
+      <div className="glass-strong noise-overlay rounded-3xl p-6 sm:p-8 shadow-sm relative overflow-hidden">
+        {/* Header */}
+        <div className="flex flex-col gap-2">
+          <h2 className="text-xl sm:text-2xl font-semibold tracking-tight">
+            {title}
+          </h2>
+          <p className="text-sm sm:text-[15px] text-black/60 max-w-3xl">
+            {subtitle}
+          </p>
+        </div>
+
+        {/* Grid */}
+        <div className="mt-6 sm:mt-8 grid gap-5 sm:grid-cols-2 lg:grid-cols-3">
+          {screenshots.map((shot, i) => (
+            <Reveal key={shot.src}>
+              <motion.div
+                whileHover={{ y: -6 }}
+                transition={{ type: "spring", stiffness: 160, damping: 18 }}
+                className="glass rounded-3xl overflow-hidden group"
+              >
+                {/* Image */}
+                <div className="relative aspect-[16/10] w-full overflow-hidden">
+                  <Image
+                    src={shot.src}
+                    alt={shot.title}
+                    fill
+                    className="object-cover transition duration-500 group-hover:scale-[1.04]"
+                  />
+                </div>
+
+                {/* Caption */}
+                <div className="p-4">
+                  <div className="text-sm font-semibold text-black/75">
+                    {shot.title}
+                  </div>
+                  {shot.description ? (
+                    <div className="mt-1 text-sm text-black/60 leading-relaxed">
+                      {shot.description}
+                    </div>
+                  ) : null}
+                </div>
+              </motion.div>
+            </Reveal>
+          ))}
+        </div>
+
+        {/* Specular highlight */}
+        <div className="pointer-events-none specular absolute -top-24 -right-24 h-64 w-64 rounded-full opacity-50 blur-2xl" />
+      </div>
+    </section>
+  );
+}