copilot. Split into components

2026-03-12 23:08:38 +01:00
parent f8c6bacf61
commit 855cb4affd
14 changed files with 897 additions and 827 deletions
@@ -0,0 +1,67 @@
+import type { Project } from "../types";
+
+export function ProjectCard({ project }: { project: Project }) {
+  return (
+    <div className="group relative flex flex-col p-6 rounded-2xl bg-gradient-to-br from-white/10 to-white/5 backdrop-blur-sm border border-white/10 hover:border-purple-500/30 transition-all duration-300 hover:-translate-y-1 hover:shadow-2xl hover:shadow-purple-500/10">
+      {project.image && (
+        <div className="mb-6 overflow-hidden rounded-xl bg-black/20 aspect-video flex items-center justify-center relative">
+          <div className="absolute inset-0 bg-gradient-to-t from-black/60 to-transparent opacity-0 group-hover:opacity-100 transition-opacity duration-300" />
+          <img
+            src={project.image}
+            alt={project.name}
+            className={`object-contain ${project.rounded === false ? "w-full h-auto max-h-24 rounded-lg" : "h-24 w-24 rounded-full"} shadow-lg group-hover:scale-110 transition-transform duration-500`}
+          />
+        </div>
+      )}
+
+      <h3 className="text-xl font-bold text-white mb-2 group-hover:text-purple-400 transition-colors">
+        {project.name}
+      </h3>
+      <p className="text-gray-400 text-sm flex-grow mb-6 leading-relaxed">
+        {project.description}
+      </p>
+      {project.last_commit && (
+        <p className="text-gray-400 text-xs mb-2">
+          Last commit: {new Date(project.last_commit).toLocaleDateString()}
+        </p>
+      )}
+
+      <div className="flex gap-3 mt-auto">
+        <a
+          href={project.link + "?utm_source=portfolio&ref=space"}
+          target="_blank"
+          rel="noreferrer"
+          className="flex-1 py-2 px-4 rounded-lg bg-white/10 hover:bg-white/20 text-white text-sm font-medium text-center transition-colors flex items-center justify-center gap-2"
+        >
+          Visit
+          <svg
+            className="w-3 h-3"
+            fill="none"
+            stroke="currentColor"
+            viewBox="0 0 24 24"
+          >
+            <path
+              strokeLinecap="round"
+              strokeLinejoin="round"
+              strokeWidth="2"
+              d="M10 6H6a2 2 0 00-2 2v10a2 2 0 002 2h10a2 2 0 002-2v-4M14 4h6m0 0v6m0-6L10 14"
+            />
+          </svg>
+        </a>
+        {project.open_source && (
+          <a
+            href={project.open_source.link}
+            target="_blank"
+            rel="noreferrer"
+            className="p-2 rounded-lg bg-white/5 hover:bg-white/10 text-gray-400 hover:text-white transition-colors border border-white/5"
+            title="View Source"
+          >
+            <svg className="w-5 h-5" fill="currentColor" viewBox="0 0 24 24">
+              <path d="M12 0c-6.626 0-12 5.373-12 12 0 5.302 3.438 9.8 8.207 11.387.599.111.793-.261.793-.577v-2.234c-3.338.726-4.033-1.416-4.033-1.416-.546-1.387-1.333-1.756-1.333-1.756-1.089-.745.083-.729.083-.729 1.205.084 1.839 1.237 1.839 1.237 1.07 1.834 2.807 1.304 3.492.997.107-.775.418-1.305.762-1.604-2.665-.305-5.467-1.334-5.467-5.931 0-1.311.469-2.381 1.236-3.221-.124-.303-.535-1.524.117-3.176 0 0 1.008-.322 3.301 1.23.957-.266 1.983-.399 3.003-.404 1.02.005 2.047.138 3.006.404 2.291-1.552 3.297-1.23 3.297-1.23.653 1.653.242 2.874.118 3.176.77.84 1.235 1.911 1.235 3.221 0 4.609-2.807 5.624-5.479 5.921.43.372.823 1.102.823 2.222v3.293c0 .319.192.694.801.576 4.765-1.589 8.199-6.086 8.199-11.386 0-6.627-5.373-12-12-12z" />
+            </svg>
+          </a>
+        )}
+      </div>
+    </div>
+  );
+}