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

components/hero.tsx

@@ -0,0 +1,127 @@
+"use client";
+
+import { motion } from "framer-motion";
+
+export default function Hero() {
+  return (
+    <section className="grid grid-cols-1 lg:grid-cols-2 gap-10 items-center">
+      <motion.div
+        initial={{ opacity: 0, y: 10 }}
+        animate={{ opacity: 1, y: 0 }}
+        transition={{ duration: 0.45 }}
+      >
+
+        <h1 className="mt-3 text-5xl md:text-6xl font-semibold tracking-tight text-black/90 leading-[1.05]">
+          Brian De Winne.
+          <br />
+          <span className="text-black/65">Clean systems, clean UI.</span>
+        </h1>
+
+        <p className="mt-6 text-base md:text-lg text-black/70 leading-relaxed max-w-xl">
+          Portfolio + lab dashboard hosted on Unraid behind Cloudflare Tunnel and
+          Nginx Proxy Manager. Minimal design, hardened routing, real visibility.
+        </p>
+
+        <div className="mt-8 flex flex-wrap gap-3">
+          <a
+            href="#projects"
+            className="rounded-3xl bg-black text-white px-5 py-3 text-sm font-medium shadow-[0_10px_30px_rgba(0,0,0,0.15)] transition hover:translate-y-[-1px]"
+          >
+            View projects
+          </a>
+
+          <a
+            href="/lab"
+            className="rounded-3xl border border-black/15 px-5 py-3 text-sm font-medium transition hover:border-black/30"
+          >
+            Lab dashboard
+          </a>
+
+          <a
+            href="mailto:website+dewinnebrian@gmail.com"
+            className="rounded-3xl border border-black/15 px-5 py-3 text-sm font-medium transition hover:border-black/30"
+          >
+            Contact
+          </a>
+        </div>
+
+        <div className="mt-8 flex flex-wrap items-center gap-3 text-xs text-black/55">
+          <span className="inline-flex items-center gap-2 rounded-3xl border border-black/10 px-3 py-2 bg-white/60">
+            <span className="h-2 w-2 rounded-full bg-black/30" />
+            Belgium
+          </span>
+          <span className="inline-flex items-center gap-2 rounded-3xl border border-black/10 px-3 py-2 bg-white/60">
+            <span className="h-2 w-2 rounded-full bg-black/30" />
+            Unraid • Docker • CF Tunnel
+          </span>
+        </div>
+      </motion.div>
+
+      <motion.div
+        initial={{ opacity: 0, y: 12 }}
+        animate={{ opacity: 1, y: 0 }}
+        transition={{ duration: 0.55, delay: 0.05 }}
+        className="relative"
+      >
+        <div className="rounded-3xl glass-strong specular overflow-hidden">
+          <div className="px-5 py-4 border-b border-black/10 flex items-center justify-between">
+            <div className="text-sm font-semibold text-black/85">
+              System Snapshot
+            </div>
+            <div className="text-xs text-black/55">dewinnebrian.com</div>
+          </div>
+
+          <div className="p-5">
+            <div className="grid grid-cols-3 gap-3">
+              <MiniStat label="Containers" value="—" />
+              <MiniStat label="Running" value="—" />
+              <MiniStat label="Networks" value="—" />
+            </div>
+
+            <div className="mt-5 rounded-3xl border border-black/10 p-4 bg-white/60">
+              <div className="text-xs text-black/55">Status</div>
+              <div className="mt-2 text-sm font-medium text-black/85">
+                Reverse-proxied through NPM, tunneled via Cloudflare.
+              </div>
+              <div className="mt-3 text-xs text-black/60 leading-relaxed">
+                The lab dashboard will surface container inventory, networks, and
+                exposure—while hiding IP/ports by default.
+              </div>
+            </div>
+
+            <div className="mt-5 grid grid-cols-2 gap-3">
+              <div className="rounded-3xl border border-black/10 p-4 bg-white/60">
+                <div className="text-xs text-black/55">Design</div>
+                <div className="mt-2 text-sm font-medium text-black/85">
+                  Liquid glass
+                </div>
+              </div>
+              <div className="rounded-3xl border border-black/10 p-4 bg-white/60">
+                <div className="text-xs text-black/55">Deploy</div>
+                <div className="mt-2 text-sm font-medium text-black/85">
+                  Next.js container
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+
+        <div className="pointer-events-none absolute -z-10 inset-0 blur-3xl opacity-40">
+          <div className="absolute right-10 top-10 h-48 w-48 rounded-full bg-black/10" />
+          <div className="absolute left-10 bottom-10 h-56 w-56 rounded-full bg-black/10" />
+        </div>
+      </motion.div>
+    </section>
+  );
+}
+
+function MiniStat({ label, value }: { label: string; value: string }) {
+  return (
+    <div className="rounded-3xl border border-black/10 bg-white/70 p-4">
+      <div className="text-xs text-black/55">{label}</div>
+      <div className="mt-1 text-2xl font-semibold tracking-tight text-black/90">
+        {value}
+      </div>
+    </div>
+  );
+}