From 6bc7abe98e36d0aa554298d199c397ec3d2fa075 Mon Sep 17 00:00:00 2001
From: Madhura68 <janpetervisser2@gmail.com>
Date: Sun, 19 Apr 2026 21:58:13 +0200
Subject: [PATCH] Update skills: brand icons, flags, AI tools, Supabase; update
 intro text

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
---
 components/skills.tsx | 58 ++++++++++++++++++++++++++++++++++++++++++-
 lib/cv-data.ts        | 19 +++++++-------
 2 files changed, 67 insertions(+), 10 deletions(-)

diff --git a/components/skills.tsx b/components/skills.tsx
index d02afa3..d9a1644 100644
--- a/components/skills.tsx
+++ b/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>
   );
diff --git a/lib/cv-data.ts b/lib/cv-data.ts
index cbd6696..28cc980 100644
--- a/lib/cv-data.ts
+++ b/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: [