This Portfolio Dieses Portfolio
The portfolio is the product. Built with a 6-role AI team.Das Portfolio ist das Produkt. Mit einem 6-Rollen-KI-Team gebaut.
Designed and developed using a structured AI team workflow — Researcher, Systems Lead, Experience Systems Lead, Senior Programmer, Critic. Astro 5 with React islands, canvas animations, Framer Motion, bilingual content, and a blog. Mit einem strukturierten KI-Team-Workflow entworfen und entwickelt. Astro 5 mit React-Islands, Canvas-Animationen, Framer Motion, zweisprachigem Inhalt und Blog.
// challenge // ausgangslage
A portfolio isn't just a showcase — it's an argument. Every design decision should demonstrate UX thinking. The challenge: build something that shows the process, not just the output. Without a client brief — which is the hardest brief of all. Ein Portfolio ist mehr als eine Galerie — es ist ein Argument. Jede Designentscheidung soll UX-Denken demonstrieren. Die Herausforderung: Prozess zeigen, nicht nur Ergebnisse. Ohne Client-Brief — das schwierigste Brief überhaupt.
// approach // vorgehen
Used a structured 6-role AI team: Researcher → Systems Lead → Experience Systems Lead → Senior Programmer → Critic. Each role documented its responsibilities and had to reference the previous agent's output. The Critic was required to raise at minimum 3 issues per review — and affected agents revised. Architecture: static-first Astro 5 for maximum performance, React islands only where interactivity is actually needed. The only SSR exception is the contact form API endpoint. Everything else pre-renders.
6-Rollen-KI-Team: Researcher → Systems Lead → Experience Systems Lead → Senior Programmer → Critic. Jede Rolle referenzierte den Output des Vorgängers. Der Critic musste mindestens 3 Kritikpunkte liefern. Architektur: statisches Astro 5 für maximale Performance, React Islands nur wo wirklich Interaktivität nötig ist.
// code // code
Canvas code waterfall — the hero backdrop Canvas-Code-Wasserfall — der Hero-Hintergrund
typescript// src/components/CodeRainBackdrop.tsx (simplified)
const CHARS = 'ABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789<>{}[]();=>';
const draw = () => {
ctx.fillStyle = 'rgba(10,10,10,0.05)'; // trail fade
ctx.fillRect(0, 0, w, h);
ctx.fillStyle = '#f57a00'; // brand orange
ctx.font = `${SIZE}px "JetBrains Mono"`;
drops.forEach((y, i) => {
const char = CHARS[Math.floor(Math.random() * CHARS.length)];
ctx.fillText(char, i * SIZE, y * SIZE);
// Probabilistic reset — each column resets independently
if (y * SIZE > h && Math.random() > 0.975) drops[i] = 0;
drops[i]++;
});
};
const id = setInterval(draw, 50);
return () => clearInterval(id);The semi-transparent fill creates the trail effect — each frame partially overwrites the previous, decaying older glyphs. No external library, no canvas framework. Die halbtransparente Füllung erzeugt den Trail-Effekt — jedes Frame überschreibt das vorherige teilweise und lässt ältere Glyphen verblassen. Keine externe Bibliothek.
Middleware: geo-hint cookie from Accept-Language header Middleware: Geo-Hint-Cookie aus Accept-Language-Header
typescript// src/middleware.ts — runs on every request via Node adapter
function detectGeoLang(acceptLanguage: string | null): 'de' | 'en' {
if (!acceptLanguage) return 'en';
const tags = acceptLanguage
.split(',')
.map((s) => {
const [tag, q] = s.trim().split(';q=');
return { lang: tag.trim().toLowerCase(), q: q ? parseFloat(q) : 1 };
})
.sort((a, b) => b.q - a.q);
for (const { lang } of tags) {
if (lang.startsWith('de')) return 'de';
if (lang.startsWith('en')) return 'en';
}
return 'en';
}
// Set geo hint cookie on first visit only
if (!existingCookies.includes('luka_geo=')) {
response.headers.append('Set-Cookie',
`luka_geo=${geoLang}; Path=/; Max-Age=86400; SameSite=Lax`);
}German visitors get German by default on first load — before localStorage, before navigator.language. Priority: stored choice → server geo hint → browser language. Deutsche Besucher bekommen beim ersten Laden standardmäßig Deutsch — vor localStorage, vor navigator.language. Priorität: gespeicherte Wahl → Server-Geo-Hint → Browser-Sprache.
// outcome // ergebnis
Astro 5 static site: canvas code waterfall hero, Framer Motion stagger throughout, bilingual EN/DE, blog with MDX + Shiki code highlighting, onboarding wizard with Resend email, 95+ Lighthouse across all metrics. Astro 5 Static Site: Canvas-Wasserfall-Hero, Framer Motion Stagger, zweisprachig EN/DE, Blog mit MDX + Shiki, Onboarding-Wizard mit Resend, 95+ Lighthouse in allen Metriken.
// brand // marke
Audience
Zielgruppe
Founders and product leads evaluating a freelance developer. Also technical collaborators and recruiters from the dev/design community. They read portfolios critically — they know the difference between showing work and showing process.
Gründer und Produktverantwortliche, die einen Freelance-Entwickler evaluieren. Auch technische Kollaboratoren und Recruiter aus der Dev/Design-Community.
Positioning
Positionierung
The portfolio is the product. Every technical and design decision demonstrates the thinking it describes. You are not reading about the process — you are inside it.
Das Portfolio ist das Produkt. Jede technische und gestalterische Entscheidung demonstriert das Denken, das es beschreibt. Du liest nicht über den Prozess — du bist darin.
Tone of Voice
Tonalität
Direct, confident, and self-aware. Talks to a technical audience without excluding non-technical readers. Dry wit where appropriate. No false modesty, no overselling.
Direkt, selbstsicher und selbstreflektiert. Spricht ein technisches Publikum an, ohne Nicht-Techniker auszuschließen. Trockener Witz wo angemessen. Keine falsche Bescheidenheit.
Visual Direction
Visual Direction
Dark-first, code-aesthetic. Canvas animation as hero. Orange brand accent bridging both portfolio sites. Monospace labels for technical signalling. Generous motion without performance compromise.
Dark-first, Code-Ästhetik. Canvas-Animation als Hero. Orange Marken-Akzent als Brücke zwischen beiden Portfolio-Sites. Monospace-Labels für technisches Signaling.
// stack
- Astro 5
- React
- Framer Motion
- Tailwind CSS v4
- MDX
- TypeScript