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>
   );

lib/cv-data.ts

@@ -2,7 +2,7 @@ export const CV_DATA = {
   name: "Janpeter Visser",
   tagline: "Software Engineer · Full Stack Developer",
   intro:
-    "Sinds mijn afstuderen werk ik met enthousiasme en nieuwsgierigheid in de IT. Ik ben een allround developer die graag nieuwe technologieën onderzoekt, evalueert en inzet in nieuwe projecten. De afgelopen jaren heb ik meerdere complexe projecten bij de hand gehad — ik vind het leuk om mij daarin vast te bijten en in een klein team naar oplossingen te zoeken.",
+    "Ik bouw al tientallen jaren software, maar de laatste tijd voelt het weer als het begin — dankzij AI. Met Claude en ChatGPT maak ik kleine tools die ergens echt bij helpen: voor vrijwilligers, voor mezelf, en soms gewoon uit nieuwsgierigheid.",
   contact: {
     email: "janpetervisser2@gmail.com",
     location: "Rotterdam",
@@ -79,21 +79,21 @@ export const CV_DATA = {
   },
   skills: {
     languages: [
+      "Python",
+      "TypeScript",
+      "JavaScript",
+      "C#",
       "C",
       "C++",
-      "C#",
-      "JavaScript",
-      "TypeScript",
       "HTML",
       "CSS",
       "Visual Basic",
       "Assembler",
-      "LISP",
-      "Prolog",
-      "Perl",
-      "Delphi",
     ],
     frameworks: [
+      "Next.js",
+      "React",
+      "Tailwind CSS",
       "Angular",
       "Angular Material",
       "Nx",
@@ -101,13 +101,14 @@ export const CV_DATA = {
       "ASP.NET Core",
     ],
     databases: [
+      "Supabase",
       "Microsoft SQL Server",
       "Oracle",
       "MySQL",
       "MariaDB",
       "Microsoft Access",
     ],
-    tools: ["Git", "Visual Sourcesafe"],
+    tools: ["Claude", "ChatGPT", "Git", "Supabase", "Vercel"],
     spoken: ["Nederlands", "Engels", "Duits"],
   },
   interests: [