Update skills: brand icons, flags, AI tools, Supabase; update intro text

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

components/skills.tsx

@@ -1,18 +1,74 @@
 "use client";
 
+import Image from "next/image";
 import { FadeIn } from "./fade-in";
 import { CV_DATA } from "@/lib/cv-data";
 
+const DEVICONS = "https://cdn.jsdelivr.net/gh/devicons/devicon/icons";
+const SIMPLE = "https://cdn.simpleicons.org";
+
+const SKILL_ICONS: Record<string, string> = {
+  // Languages
+  Python: `${DEVICONS}/python/python-original.svg`,
+  TypeScript: `${DEVICONS}/typescript/typescript-original.svg`,
+  JavaScript: `${DEVICONS}/javascript/javascript-original.svg`,
+  "C#": `${DEVICONS}/csharp/csharp-original.svg`,
+  C: `${DEVICONS}/c/c-original.svg`,
+  "C++": `${DEVICONS}/cplusplus/cplusplus-original.svg`,
+  HTML: `${DEVICONS}/html5/html5-original.svg`,
+  CSS: `${DEVICONS}/css3/css3-original.svg`,
+  // Frameworks
+  "Next.js": `${DEVICONS}/nextjs/nextjs-original.svg`,
+  React: `${DEVICONS}/react/react-original.svg`,
+  "Tailwind CSS": `${SIMPLE}/tailwindcss/06B6D4`,
+  Angular: `${DEVICONS}/angularjs/angularjs-original.svg`,
+  "Angular Material": `${SIMPLE}/angular/DD0031`,
+  Nx: `${SIMPLE}/nx/143055`,
+  "ASP.NET": `${SIMPLE}/dotnet/512BD4`,
+  "ASP.NET Core": `${SIMPLE}/dotnet/512BD4`,
+  // Databases
+  "Microsoft SQL Server": `${DEVICONS}/microsoftsqlserver/microsoftsqlserver-plain.svg`,
+  Oracle: `${DEVICONS}/oracle/oracle-original.svg`,
+  MySQL: `${DEVICONS}/mysql/mysql-original.svg`,
+  MariaDB: `${DEVICONS}/mariadb/mariadb-original.svg`,
+  // Tools
+  Claude: `${SIMPLE}/anthropic/c5a880`,
+  ChatGPT: `${SIMPLE}/openai/ffffff`,
+  Git: `${DEVICONS}/git/git-original.svg`,
+  Supabase: `${SIMPLE}/supabase/3ECF8E`,
+  Vercel: `${SIMPLE}/vercel/ffffff`,
+};
+
+const LANGUAGE_FLAGS: Record<string, string> = {
+  Nederlands: "🇳🇱",
+  Engels: "🇬🇧",
+  Duits: "🇩🇪",
+};
+
 function SkillPill({ label }: { label: string }) {
+  const icon = SKILL_ICONS[label];
+  const flag = LANGUAGE_FLAGS[label];
   return (
     <span
-      className="inline-block px-4 py-1.5 rounded-full text-[13px] font-medium mr-1.5 mb-1.5 transition-all duration-200 hover:bg-[rgba(194,51,155,0.18)] hover:text-[#e8e4df]"
+      className="inline-flex items-center gap-2 px-4 py-1.5 rounded-full text-[13px] font-medium mr-1.5 mb-1.5 transition-all duration-200 hover:bg-[rgba(194,51,155,0.18)] hover:text-[#e8e4df]"
       style={{
         background: "rgba(194,51,155,0.08)",
         border: "1px solid rgba(194,51,155,0.15)",
         color: "rgba(255,255,255,0.65)",
       }}
     >
+      {flag && <span className="text-base leading-none">{flag}</span>}
+      {!flag && icon && (
+        <Image
+          src={icon}
+          alt={label}
+          width={16}
+          height={16}
+          className="flex-shrink-0"
+          style={{ objectFit: "contain" }}
+          unoptimized
+        />
+      )}
       {label}
     </span>
   );