feat: Major update

2026-06-03 15:45:02 +02:00
parent da9103faaa
commit 40526e115e
14 changed files with 611 additions and 170 deletions
@@ -0,0 +1,86 @@
+"use client";
+
+import { useProfile } from "../context/ProfileContext";
+
+export function AgentSkills() {
+  const { skills } = useProfile();
+
+  return (
+    <section className="w-full max-w-6xl mx-auto px-4 space-y-8">
+      <div className="text-center space-y-3">
+        <h2 className="text-4xl font-bold leading-tight text-transparent bg-clip-text bg-gradient-to-r from-amber-400 to-orange-500">
+          Agent Skills
+        </h2>
+        <p className="text-gray-400 max-w-2xl mx-auto">
+          Skills i throw at my Agents to help them solve my prompts.
+        </p>
+      </div>
+
+      {skills.length === 0 ? (
+        <div className="rounded-3xl border border-white/10 bg-white/5 px-6 py-10 text-center text-gray-400">
+          No agent skills published yet.
+        </div>
+      ) : (
+        <div className="grid grid-cols-1 lg:grid-cols-2 gap-6">
+          {skills.map((skill, index) => (
+            <article
+              key={`${skill.name}-${index}`}
+              className="group rounded-3xl border border-amber-500/20 bg-gradient-to-br from-amber-500/10 via-white/5 to-orange-500/5 p-6 md:p-7 shadow-[0_0_0_1px_rgba(245,158,11,0.08)] backdrop-blur-sm transition-all duration-300 hover:border-amber-500/40"
+            >
+              <div className="flex flex-wrap items-start justify-between gap-4">
+                <div className="space-y-2">
+                  <div className="flex flex-wrap gap-2">
+                    {(skill.emojis || []).map((emoji, emojiIndex) => (
+                      <span
+                        key={`${skill.name}-emoji-${emojiIndex}`}
+                        className="inline-flex h-9 w-9 items-center justify-center rounded-xl bg-amber-500/15 text-lg border border-amber-500/20"
+                        title={emoji}
+                      >
+                        {emoji}
+                      </span>
+                    ))}
+                  </div>
+                  <h3 className="text-2xl font-semibold text-white">{skill.name}</h3>
+                </div>
+
+                {skill.link ? (
+                  <a
+                    href={skill.link}
+                    target="_blank"
+                    rel="noreferrer"
+                    className="inline-flex items-center rounded-full border border-amber-400/30 bg-amber-400/10 px-4 py-2 text-xs font-semibold text-amber-100 transition-colors hover:bg-amber-400/20"
+                  >
+                    Open Link
+                  </a>
+                ) : null}
+              </div>
+
+              <div className="mt-5 space-y-4 text-sm leading-6 text-gray-300">
+                <p>
+                  <span className="font-semibold text-amber-200">Description:</span> {skill.description}
+                </p>
+                <p>
+                  <span className="font-semibold text-amber-200">Purpose:</span> {skill.purpose}
+                </p>
+                <p>
+                  <span className="font-semibold text-amber-200">Solves:</span> {skill.what_it_solves}
+                </p>
+              </div>
+
+              <div className="mt-6 flex flex-wrap gap-2">
+                {(skill.tags || []).map((tag, tagIndex) => (
+                  <span
+                    key={`${skill.name}-tag-${tagIndex}`}
+                    className="rounded-full border border-white/10 bg-black/20 px-3 py-1 text-xs font-medium text-gray-200"
+                  >
+                    {tag}
+                  </span>
+                ))}
+              </div>
+            </article>
+          ))}
+        </div>
+      )}
+    </section>
+  );
+}