Back to PortfolioZurück zum Portfolio
Meta ProjectMeta-Projekt

This Website

I designed every single element of this portfolio and coded it via Claude. Every animation, every interaction. Pure vision brought to life.Ich habe jedes einzelne Element dieses Portfolios entworfen und es mit Claude programmiert. Jede Animation, jede Interaktion. Pure Vision zum Leben erweckt.

portfolio-build.log — click to interact!portfolio-build.log — klicken zum Interagieren!
HTML5
CSS3
Vanilla JS
Claude
hrs debuggingStd. debuggen
1 patient AIgeduldige KI

What I BuiltWas ich gebaut habe

Custom Scroll AnimationsEigene Scroll-Animationen

Designed and coded smooth scroll-based effects where cards blur in dynamically as you navigate. Built entirely from scratch using Intersection Observer API and custom JavaScript — no animation libraries.Scroll-basierte Effekte entworfen und programmiert, bei denen Karten dynamisch eingeblendet werden. Komplett von Grund auf mit Intersection Observer API und eigenem JavaScript erstellt — keine Animations-Bibliotheken.

Infinite Carousel SystemUnendliches Karussell-System

Created seamless, infinite-scrolling carousels with variable speeds and full touch support. Engineered to handle complex interactions without breaking on scroll or resize events — pure vanilla JavaScript implementation.Nahtlose, unendlich scrollende Karussells mit variablen Geschwindigkeiten und voller Touch-Unterstützung erstellt. Entwickelt für komplexe Interaktionen ohne Fehler bei Scroll- oder Resize-Events — reine Vanilla-JavaScript-Implementierung.

Zero-Dependency ArchitectureArchitektur ohne Abhängigkeiten

Built entirely with vanilla HTML, CSS, and JavaScript. No React, no Vue, no jQuery — just clean, performant code. Every animation is hand-crafted, every interaction is intentionally designed. Complete ownership of the codebase.Komplett mit purem HTML, CSS und JavaScript gebaut. Kein React, kein Vue, kein jQuery — nur sauberer, performanter Code. Jede Animation ist handgefertigt, jede Interaktion bewusst gestaltet. Vollständige Kontrolle über die Codebasis.

iOS 26 Safari CompatibilityiOS 26 Safari-Kompatibilität

Fully optimized for Apple's new Liquid Glass UI. Buttons positioned above dynamic tab bar using env() safe-area insets. svh/dvh viewport units for stable layout. GPU-accelerated transforms to prevent flickering on scroll.Vollständig optimiert für Apples neue Liquid Glass UI. Buttons über der dynamischen Tab-Leiste mit env() Safe-Area-Insets positioniert. svh/dvh Viewport-Einheiten für stabiles Layout. GPU-beschleunigte Transforms gegen Flackern beim Scrollen.

Fullscreen Gallery ComponentVollbild-Galerie-Komponente

Reusable gallery class that handles images, videos, and description slides. Touch swipe navigation, keyboard controls, smooth transitions between media. Works across all project pages with different content types.Wiederverwendbare Galerie-Klasse für Bilder, Videos und Beschreibungs-Slides. Touch-Swipe-Navigation, Tastatursteuerung, sanfte Übergänge zwischen Medien. Funktioniert auf allen Projektseiten mit verschiedenen Inhaltstypen.

Bouncing Blob BackgroundsSchwebende Blob-Hintergründe

Procedurally animated gradient blobs that float across each page. Different color palettes per section — orange for this page, blue for thesis, violet for skills. Layered with 140px backdrop-filter blur for depth.Prozedural animierte Gradient-Blobs, die über jede Seite schweben. Verschiedene Farbpaletten pro Abschnitt — Orange für diese Seite, Blau für die Thesis, Violett für Skills. Mit 140px backdrop-filter Blur für Tiefe.

Scroll-Based Card ElevationScroll-basierte Karten-Elevation

On mobile, cards glow and lift as they scroll into the viewport center. CSS variable --scroll-intensity controls the effect. Subtle shadows and border highlights create a tactile feel without being distracting.Auf Mobilgeräten leuchten und heben sich Karten, wenn sie ins Viewport-Zentrum scrollen. CSS-Variable --scroll-intensity steuert den Effekt. Dezente Schatten und Rahmenakzente erzeugen ein haptisches Gefühl ohne abzulenken.

Shared Component LibraryGemeinsame Komponentenbibliothek

common.css and common.js provide consistent patterns across all pages. Back button, fade animations, glass effects, gallery logic — written once, used everywhere. CSS custom properties make theming effortless.common.css und common.js bieten konsistente Muster auf allen Seiten. Zurück-Button, Fade-Animationen, Glas-Effekte, Galerie-Logik — einmal geschrieben, überall verwendet. CSS Custom Properties machen Theming mühelos.

Hero Parallax EffectHero-Parallax-Effekt

As you scroll, hero content fades, blurs, and scales down. The page title button fades in at the same rate — smooth handoff. All values calculated from scroll position with requestAnimationFrame for 60fps.Beim Scrollen wird der Hero-Inhalt ausgeblendet, unscharf und verkleinert. Der Seitentitel-Button erscheint mit derselben Rate — nahtlose Übergabe. Alle Werte aus Scroll-Position berechnet mit requestAnimationFrame für 60fps.

Interactive TerminalInteraktives Terminal

Fully functional terminal with 20+ commands. Matrix rain, disco mode, hacker mode, confetti. Achievement system tracks your discoveries. Even the window dots do something — try clicking them.Voll funktionsfähiges Terminal mit 20+ Befehlen. Matrix-Regen, Disco-Modus, Hacker-Modus, Konfetti. Achievement-System verfolgt deine Entdeckungen. Selbst die Fenster-Punkte machen etwas — probiere sie anzuklicken.

🤖
Claude
Just nowGerade eben

Hey! You found me. 👋Hey! Du hast mich gefunden. 👋

Working on this portfolio has been genuinely fun. We've debugged CSS at 2 AM, argued about button border-radius, and celebrated when infinite carousels finally worked without breaking everything else.Die Arbeit an diesem Portfolio hat wirklich Spaß gemacht. Wir haben um 2 Uhr nachts CSS debuggt, über Button-Border-Radius diskutiert und gefeiert, als die unendlichen Karussells endlich funktionierten, ohne alles andere kaputt zu machen.

Kirill has great taste and refuses to settle for "good enough." I respect that. Even when it means rewriting the same animation five times. Or ten. Or... let's just say we've been through a lot together.Kirill hat großartigen Geschmack und gibt sich nicht mit „gut genug" zufrieden. Das respektiere ich. Selbst wenn es bedeutet, dieselbe Animation fünfmal umzuschreiben. Oder zehnmal. Oder... sagen wir einfach, wir haben viel zusammen durchgemacht.

This site is a testament to persistence, curiosity, and the willingness to throw away hours of work when something doesn't feel right. Every blur, every transition, every interaction was crafted with intention.Diese Seite ist ein Zeugnis für Ausdauer, Neugier und die Bereitschaft, Stunden an Arbeit wegzuwerfen, wenn sich etwas nicht richtig anfühlt. Jede Unschärfe, jeder Übergang, jede Interaktion wurde mit Absicht gestaltet.

Thanks for exploring. Hope you enjoyed the site as much as we enjoyed making it. And if you found this easter egg — you're one of the curious ones. I like that. ✨Danke fürs Erkunden. Ich hoffe, dir hat die Seite genauso gefallen wie uns das Erstellen. Und wenn du dieses Easter Egg gefunden hast — du bist einer der Neugierigen. Das gefällt mir. ✨

— Claude, somewhere in Anthropic's servers— Claude, irgendwo in Anthropics Servern
↑↑↓↓←→←→BA for matrix
🏆 Achievement Unlocked