Update portfolio apps and skills

components/apps.tsx

@@ -11,10 +11,16 @@ const APPS = [
     screenshotMobile: "/images/app-inspannings-monitor-mobile.png",
     href: "https://inspannings-monitor.jp-visser.nl/dashboard",
   },
+  {
+    title: "Scrum4Me",
+    subtitle: "DevPlanner voor kleine teams",
+    description:
+      "Een desktop-first fullstack webapplicatie voor solo developers en kleine Scrum Teams die meerdere softwareprojecten parallel beheren. De app organiseert werk hierarchisch (product -> PBI -> story -> taak), biedt gesplitste planningsschermen met drag-and-drop, en integreert met Claude Code via een REST API.",
+    screenshot: "/images/app-scrum4me.svg",
+    href: "https://scrum4me.jp-visser.nl",
+  },
 ];
 
-const PLACEHOLDER_APPS = [{ label: "App 2 — binnenkort" }];
-
 export function AppsSection() {
   return (
     <section
@@ -70,6 +76,7 @@ export function AppsSection() {
                   fill
                   className="object-cover object-top transition-transform duration-500 group-hover:scale-105"
                   sizes="(max-width: 640px) 100vw, 420px"
+                  priority={i === 0}
                 />
                 {/* Mobile screenshot overlay */}
                 {app.screenshotMobile && (
@@ -118,24 +125,6 @@ export function AppsSection() {
           </FadeIn>
         ))}
 
-        {PLACEHOLDER_APPS.map((app, i) => (
-          <FadeIn key={i} delay={(APPS.length + i) * 0.1}>
-            <div
-              className="rounded-2xl p-8 flex flex-col items-center justify-center min-h-[200px] text-center"
-              style={{
-                background: "rgba(255,255,255,0.03)",
-                border: "1px dashed rgba(255,255,255,0.1)",
-              }}
-            >
-              <p
-                className="text-[14px]"
-                style={{ color: "rgba(255,255,255,0.3)" }}
-              >
-                {app.label}
-              </p>
-            </div>
-          </FadeIn>
-        ))}
       </div>
     </section>
   );

components/skills.tsx

@@ -6,6 +6,7 @@ import { CV_DATA } from "@/lib/cv-data";
 
 const DEVICONS = "https://cdn.jsdelivr.net/gh/devicons/devicon/icons";
 const SIMPLE = "https://cdn.simpleicons.org";
+const FLAGS = "https://cdn.jsdelivr.net/gh/lipis/flag-icons/flags/4x3";
 
 const SKILL_ICONS: Record<string, string> = {
   // Languages
@@ -23,7 +24,7 @@ const SKILL_ICONS: Record<string, string> = {
   "Tailwind CSS": `${SIMPLE}/tailwindcss/06B6D4`,
   Angular: `${DEVICONS}/angularjs/angularjs-original.svg`,
   "Angular Material": `${SIMPLE}/angular/DD0031`,
-  Nx: `${SIMPLE}/nx/143055`,
+  Redux: `${SIMPLE}/redux/764ABC`,
   "ASP.NET": `${SIMPLE}/dotnet/512BD4`,
   "ASP.NET Core": `${SIMPLE}/dotnet/512BD4`,
   // Databases
@@ -33,21 +34,37 @@ const SKILL_ICONS: Record<string, string> = {
   MariaDB: `${DEVICONS}/mariadb/mariadb-original.svg`,
   // Tools
   Claude: `${SIMPLE}/anthropic/c5a880`,
-  ChatGPT: `${SIMPLE}/openai/ffffff`,
+  "Claude Code": `${SIMPLE}/anthropic/c5a880`,
   Git: `${DEVICONS}/git/git-original.svg`,
+  GitHub: `${SIMPLE}/github/ffffff`,
   Supabase: `${SIMPLE}/supabase/3ECF8E`,
-  Vercel: `${SIMPLE}/vercel/ffffff`,
+  Obsidian: `${SIMPLE}/obsidian/7C3AED`,
+  NotebookLM: `${SIMPLE}/googlegemini/8E75B2`,
 };
 
-const LANGUAGE_FLAGS: Record<string, string> = {
+const BADGE_ICONS: Record<string, string> = {
-  Nederlands: "🇳🇱",
+  ChatGPT: "AI",
-  Engels: "🇬🇧",
+  Neon: "N",
-  Duits: "🇩🇪",
+  Vercel: "▲",
+};
+
+const LANGUAGE_ICONS: Record<string, string> = {
+  Nederlands: `${FLAGS}/nl.svg`,
+  Engels: `${FLAGS}/gb.svg`,
+  Duits: `${FLAGS}/de.svg`,
+};
+
+const LANGUAGE_PROGRESS: Record<string, number> = {
+  Nederlands: 100,
+  Engels: 85,
+  Duits: 55,
 };
 
 function SkillPill({ label }: { label: string }) {
-  const icon = SKILL_ICONS[label];
+  const icon = SKILL_ICONS[label] ?? LANGUAGE_ICONS[label];
-  const flag = LANGUAGE_FLAGS[label];
+  const badge = BADGE_ICONS[label];
+  const isLanguage = label in LANGUAGE_ICONS;
+
   return (
     <span
       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]"
@@ -57,20 +74,70 @@ function SkillPill({ label }: { label: string }) {
         color: "rgba(255,255,255,0.65)",
       }}
     >
-      {flag && <span className="text-base leading-none">{flag}</span>}
+      {icon && (
-      {!flag && icon && (
+        <Image
+          src={icon}
+          alt={label}
+          width={isLanguage ? 16 : 16}
+          height={isLanguage ? 12 : 16}
+          className={isLanguage ? "flex-shrink-0 rounded-[2px]" : "flex-shrink-0"}
+          style={{
+            height: isLanguage ? 12 : 16,
+            objectFit: "contain",
+            width: 16,
+          }}
+          unoptimized
+        />
+      )}
+      {!icon && badge && (
+        <span
+          className="inline-flex h-4 w-4 flex-shrink-0 items-center justify-center rounded-[3px] text-[9px] font-semibold leading-none"
+          style={{
+            background: "rgba(255,255,255,0.12)",
+            color: "#e8e4df",
+          }}
+        >
+          {badge}
+        </span>
+      )}
+      {label}
+    </span>
+  );
+}
+
+function LanguageProgress({ label }: { label: string }) {
+  const icon = LANGUAGE_ICONS[label];
+  const progress = LANGUAGE_PROGRESS[label] ?? 0;
+
+  return (
+    <div className="mb-4 last:mb-0">
+      <div className="mb-2 flex items-center gap-2 text-[13px] font-medium">
+        {icon && (
           <Image
             src={icon}
             alt={label}
             width={16}
-          height={16}
+            height={12}
-          className="flex-shrink-0"
+            className="flex-shrink-0 rounded-[2px]"
-          style={{ objectFit: "contain" }}
+            style={{ height: 12, objectFit: "contain", width: 16 }}
             unoptimized
           />
         )}
-      {label}
+        <span style={{ color: "rgba(255,255,255,0.65)" }}>{label}</span>
-    </span>
+      </div>
+      <div
+        className="h-1.5 overflow-hidden rounded-full"
+        style={{ background: "rgba(255,255,255,0.08)" }}
+      >
+        <div
+          className="h-full rounded-full"
+          style={{
+            width: `${progress}%`,
+            background: "linear-gradient(90deg, #c2339b, #e8e4df)",
+          }}
+        />
+      </div>
+    </div>
   );
 }
 
@@ -78,6 +145,7 @@ const SKILL_GROUPS = [
   { title: "Programmeertalen", items: CV_DATA.skills.languages },
   { title: "Frameworks", items: CV_DATA.skills.frameworks },
   { title: "Databases", items: CV_DATA.skills.databases },
+  { title: "AI / AI-tools", items: CV_DATA.skills.aiTools },
   { title: "Talen", items: CV_DATA.skills.spoken },
 ];
 
@@ -127,9 +195,9 @@ export function SkillsSection() {
                 {group.title}
               </h3>
               <div>
-                {group.items.map((s) => (
+                {group.title === "Talen"
-                  <SkillPill key={s} label={s} />
+                  ? group.items.map((s) => <LanguageProgress key={s} label={s} />)
-                ))}
+                  : group.items.map((s) => <SkillPill key={s} label={s} />)}
               </div>
             </div>
           </FadeIn>

lib/cv-data.ts

@@ -96,7 +96,7 @@ export const CV_DATA = {
       "Tailwind CSS",
       "Angular",
       "Angular Material",
-      "Nx",
+      "Redux",
       "ASP.NET",
       "ASP.NET Core",
     ],
@@ -106,7 +106,16 @@ export const CV_DATA = {
       "Oracle",
       "MySQL",
       "MariaDB",
-      "Microsoft Access",
+    ],
+    aiTools: [
+      "ChatGPT",
+      "Claude Code",
+      "Supabase",
+      "Neon",
+      "Vercel",
+      "Obsidian",
+      "NotebookLM",
+      "GitHub",
     ],
     tools: ["Claude", "ChatGPT", "Git", "Supabase", "Vercel"],
     spoken: ["Nederlands", "Engels", "Duits"],

public/images/app-scrum4me.svg

@@ -0,0 +1,89 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="1600" height="900" viewBox="0 0 1600 900" role="img" aria-labelledby="title desc">
+  <title id="title">Scrum4Me DevPlanner screenshot</title>
+  <desc id="desc">A desktop planning interface with product backlog and story planning columns.</desc>
+  <rect width="1600" height="900" fill="#f8f7fb"/>
+  <rect x="0" y="0" width="1600" height="78" fill="#f2f0f8"/>
+  <line x1="0" y1="78" x2="1600" y2="78" stroke="#c8c6d1" stroke-width="2"/>
+  <rect x="18" y="20" width="34" height="34" rx="8" fill="#171127"/>
+  <path d="M35 16c7 7 10 19 10 34H25c0-15 3-27 10-34z" fill="#7c4dff"/>
+  <circle cx="35" cy="30" r="3" fill="#c9b8ff"/>
+  <path d="M29 50h12l3 8H26z" fill="#4c2fc6"/>
+  <text x="64" y="45" font-family="Inter, Arial, sans-serif" font-size="25" font-weight="700" fill="#0472bd">Scrum4Me</text>
+  <rect x="194" y="23" width="74" height="30" rx="15" fill="#806900"/>
+  <text x="208" y="44" font-family="Inter, Arial, sans-serif" font-size="18" font-weight="700" fill="#ffffff">Demo</text>
+  <text x="320" y="45" font-family="Inter, Arial, sans-serif" font-size="23" fill="#4d4b55">Producten</text>
+  <text x="456" y="45" font-family="Inter, Arial, sans-serif" font-size="23" fill="#4d4b55">Todo's</text>
+
+  <text x="18" y="134" font-family="Inter, Arial, sans-serif" font-size="34" font-weight="700" fill="#24232b">DevPlanner</text>
+  <text x="18" y="168" font-family="Inter, Arial, sans-serif" font-size="20" fill="#55525d">Een lichtgewicht Scrum-gebaseerde projectplanner voor solo developers en kleine Scrum Teams.</text>
+  <line x1="0" y1="190" x2="1600" y2="190" stroke="#c8c6d1" stroke-width="2"/>
+
+  <line x1="990" y1="190" x2="990" y2="850" stroke="#c8c6d1" stroke-width="5"/>
+  <line x1="0" y1="260" x2="1600" y2="260" stroke="#c8c6d1" stroke-width="2"/>
+  <text x="18" y="234" font-family="Inter, Arial, sans-serif" font-size="22" font-weight="700" fill="#24232b">Product Backlog</text>
+  <text x="820" y="234" font-family="Inter, Arial, sans-serif" font-size="18" font-weight="700" fill="#24232b">all</text>
+  <path d="M934 224l7 7 7-7" fill="none" stroke="#4b4a52" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"/>
+  <text x="1015" y="234" font-family="Inter, Arial, sans-serif" font-size="22" font-weight="700" fill="#24232b">Stories</text>
+
+  <g font-family="Inter, Arial, sans-serif">
+    <rect x="18" y="283" width="80" height="31" rx="15" fill="#fde6e6" stroke="#efaaaa" stroke-width="1.5"/>
+    <text x="31" y="306" font-size="18" font-weight="700" fill="#cf2e2e">Kritiek</text>
+    <line x1="110" y1="298" x2="964" y2="298" stroke="#c8c6d1" stroke-width="1.5"/>
+    <text x="18" y="356" font-size="23" fill="#28272f">Authenticatie &amp; gebruikersbeheer</text>
+    <rect x="0" y="375" width="990" height="52" fill="#efedf5"/>
+    <text x="18" y="408" font-size="23" fill="#0d2b4a">Productbeheer</text>
+    <text x="18" y="461" font-size="23" fill="#28272f">Product Backlog</text>
+    <text x="18" y="514" font-size="23" fill="#28272f">Story-beheer</text>
+    <text x="18" y="566" font-size="23" fill="#28272f">Infrastructuur &amp; deployment</text>
+
+    <rect x="18" y="593" width="70" height="31" rx="15" fill="#fff0e8" stroke="#f0b897" stroke-width="1.5"/>
+    <text x="31" y="616" font-size="18" font-weight="700" fill="#d55a13">Hoog</text>
+    <line x1="100" y1="608" x2="964" y2="608" stroke="#c8c6d1" stroke-width="1.5"/>
+    <text x="18" y="663" font-size="23" fill="#28272f">Todo-lijst</text>
+    <text x="18" y="716" font-size="23" fill="#28272f">Sprint Backlog &amp; Sprint Planning</text>
+    <text x="18" y="769" font-size="23" fill="#28272f">Sprint Planning (taken per story)</text>
+    <text x="18" y="822" font-size="23" fill="#28272f">Claude Code integratie</text>
+  </g>
+
+  <g font-family="Inter, Arial, sans-serif">
+    <rect x="1015" y="286" width="80" height="31" rx="15" fill="#fde6e6" stroke="#efaaaa" stroke-width="1.5"/>
+    <text x="1028" y="309" font-size="18" font-weight="700" fill="#cf2e2e">Kritiek</text>
+    <line x1="1108" y1="301" x2="1580" y2="301" stroke="#c8c6d1" stroke-width="1.5"/>
+
+    <rect x="1015" y="330" width="160" height="165" rx="16" fill="#f2f0f8" stroke="#c9c6d3" stroke-width="1.5"/>
+    <text x="1028" y="360" font-size="18" font-weight="700" fill="#292832">Product</text>
+    <text x="1028" y="382" font-size="18" font-weight="700" fill="#292832">aanmaken</text>
+    <rect x="1028" y="422" width="64" height="29" rx="14" fill="#fde6e6" stroke="#efaaaa" stroke-width="1.5"/>
+    <text x="1038" y="443" font-size="16" font-weight="700" fill="#cf2e2e">Kritiek</text>
+    <rect x="1028" y="455" width="58" height="27" rx="13" fill="#ebe4ff" stroke="#cabcf0" stroke-width="1.5"/>
+    <text x="1038" y="475" font-size="15" font-weight="700" fill="#7558bd">Open</text>
+
+    <rect x="1188" y="330" width="160" height="165" rx="16" fill="#f2f0f8" stroke="#c9c6d3" stroke-width="1.5"/>
+    <text x="1201" y="360" font-size="18" font-weight="700" fill="#292832">Productenlijst</text>
+    <text x="1201" y="382" font-size="18" font-weight="700" fill="#292832">bekijken</text>
+    <rect x="1201" y="422" width="64" height="29" rx="14" fill="#fde6e6" stroke="#efaaaa" stroke-width="1.5"/>
+    <text x="1211" y="443" font-size="16" font-weight="700" fill="#cf2e2e">Kritiek</text>
+    <rect x="1201" y="455" width="58" height="27" rx="13" fill="#ebe4ff" stroke="#cabcf0" stroke-width="1.5"/>
+    <text x="1211" y="475" font-size="15" font-weight="700" fill="#7558bd">Open</text>
+
+    <rect x="1015" y="520" width="70" height="31" rx="15" fill="#fff0e8" stroke="#f0b897" stroke-width="1.5"/>
+    <text x="1028" y="543" font-size="18" font-weight="700" fill="#d55a13">Hoog</text>
+    <line x1="1098" y1="535" x2="1580" y2="535" stroke="#c8c6d1" stroke-width="1.5"/>
+
+    <rect x="1015" y="563" width="160" height="165" rx="16" fill="#f2f0f8" stroke="#c9c6d3" stroke-width="1.5"/>
+    <text x="1028" y="593" font-size="18" font-weight="700" fill="#292832">Product</text>
+    <text x="1028" y="615" font-size="18" font-weight="700" fill="#292832">bewerken</text>
+    <rect x="1028" y="654" width="58" height="27" rx="13" fill="#fff0e8" stroke="#f0b897" stroke-width="1.5"/>
+    <text x="1038" y="674" font-size="15" font-weight="700" fill="#d55a13">Hoog</text>
+    <rect x="1028" y="690" width="58" height="27" rx="13" fill="#ebe4ff" stroke="#cabcf0" stroke-width="1.5"/>
+    <text x="1038" y="710" font-size="15" font-weight="700" fill="#7558bd">Open</text>
+
+    <rect x="1188" y="563" width="160" height="165" rx="16" fill="#f2f0f8" stroke="#c9c6d3" stroke-width="1.5"/>
+    <text x="1201" y="593" font-size="18" font-weight="700" fill="#292832">Product</text>
+    <text x="1201" y="615" font-size="18" font-weight="700" fill="#292832">archiveren</text>
+    <rect x="1201" y="654" width="58" height="27" rx="13" fill="#fff0e8" stroke="#f0b897" stroke-width="1.5"/>
+    <text x="1211" y="674" font-size="15" font-weight="700" fill="#d55a13">Hoog</text>
+    <rect x="1201" y="690" width="58" height="27" rx="13" fill="#ebe4ff" stroke="#cabcf0" stroke-width="1.5"/>
+    <text x="1211" y="710" font-size="15" font-weight="700" fill="#7558bd">Open</text>
+  </g>
+</svg>