Update portfolio apps and skills
This commit is contained in:
parent
6bc7abe98e
commit
efcc17d4d2
4 changed files with 195 additions and 40 deletions
|
|
@ -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>
|
||||
);
|
||||
|
|
|
|||
|
|
@ -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> = {
|
||||
Nederlands: "🇳🇱",
|
||||
Engels: "🇬🇧",
|
||||
Duits: "🇩🇪",
|
||||
const BADGE_ICONS: Record<string, string> = {
|
||||
ChatGPT: "AI",
|
||||
Neon: "N",
|
||||
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 flag = LANGUAGE_FLAGS[label];
|
||||
const icon = SKILL_ICONS[label] ?? LANGUAGE_ICONS[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>}
|
||||
{!flag && icon && (
|
||||
{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}
|
||||
className="flex-shrink-0"
|
||||
style={{ objectFit: "contain" }}
|
||||
height={12}
|
||||
className="flex-shrink-0 rounded-[2px]"
|
||||
style={{ height: 12, objectFit: "contain", width: 16 }}
|
||||
unoptimized
|
||||
/>
|
||||
)}
|
||||
{label}
|
||||
</span>
|
||||
<span style={{ color: "rgba(255,255,255,0.65)" }}>{label}</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) => (
|
||||
<SkillPill key={s} label={s} />
|
||||
))}
|
||||
{group.title === "Talen"
|
||||
? group.items.map((s) => <LanguageProgress key={s} label={s} />)
|
||||
: group.items.map((s) => <SkillPill key={s} label={s} />)}
|
||||
</div>
|
||||
</div>
|
||||
</FadeIn>
|
||||
|
|
|
|||
|
|
@ -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"],
|
||||
|
|
|
|||
89
public/images/app-scrum4me.svg
Normal file
89
public/images/app-scrum4me.svg
Normal file
|
|
@ -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 & 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 & 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 & 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>
|
||||
|
After Width: | Height: | Size: 7 KiB |
Loading…
Add table
Add a link
Reference in a new issue