Es begann mit dem Portfolio eines Freundes und einem Funken Inspiration – plötzlich wollte ich etwas Eigenes: ein digitales Schaufenster, das meine Arbeit gut präsentiert und auf einem wirklich modernen technischen Fundament steht. So begann meine Reise in die moderne Webentwicklung, und ich möchte euch gerne erzählen, wie dieses Portfolio zu einem meiner liebsten digitalen Aushängeschilder geworden ist.

Der Start: Eine Vision nimmt Gestalt an

Die Idee war einfach. Ein zustandsloses Content-Management-System (CMS), vollständig datenbankgesteuert in Docker – ein System ohne klobigen Editor, bei dem alles über eine intuitive Oberfläche bearbeitbar ist. Von Anfang an wollte ich einen flexiblen, hybriden Ansatz, der sowohl server- als auch clientseitiges Rendering (SSR/CSR) unterstützt.

Ich wusste früh, dass ich moderne Technologie einsetzen wollte, also wählte ich SvelteKit als Meta-Framework – nichts fühlt sich leichter oder moderner an als das Neueste aus der Svelte-Welt. Svelte 5 mit seinen neuen Runes ($state, $derived, $effect) verlieh dem Projekt unglaubliche Reaktivität und Eleganz, während TypeScript den Code robust und wartbar hält.

Der Aufbau: Technologie trifft Kreativität

Frontend – das Gesicht meines Portfolios

Das Frontend war das kreative Abenteuer. Mit SvelteKit legte ich ein Fundament, das mir erlaubt, Inhalte flexibel und performant zu präsentieren. Tailwind CSS und die Flowbite-Svelte-Komponentenbibliothek erzeugten ein modernes, responsives Design, das sowohl im Hell- als auch im Dunkelmodus glänzt.

Es ist nicht nur schön anzusehen – es ist intuitiv und interaktiv: Live-Suche nach Skills und Teammitgliedern, Drag-and-Drop-Bild-Upload und ein schlankes, responsives Layout, das ich überall ohne Code-Editor bearbeiten kann. Sogar die Farben werden automatisch berechnet; ein einziger Seed-Wert generiert harmonische Komplementärtöne, sodass das gesamte Design stimmig bleibt.

Backend – das stille Fundament

Das Backend ist das unsichtbare Fundament, auf dem alles ruht. Hier setzte ich PocketBase ein – einen modernen Backend-Service, der mir einfaches Content-Management und eine typsichere API bietet. Dank generierter TypeScript-Typen bleiben meine API-Antworten sauber und zuverlässig.

Besonders stolz bin ich auf die Handhabung von Datei- und Bild-Uploads. Ob Hauptbild oder vollständige Galerie – mein System verwaltet Bilder effizient, ein wesentlicher Teil des Portfolios, denn Bilder erzählen oft Geschichten, die Worte allein nicht können.

Herausragende Features und technische Highlights

Dieses Portfolio ist weit mehr als eine einfache Website – es ist ein echtes CMS mit einer Reihe herausragender Features:

• Content-Management-System (CMS): ein vollständiges CRUD-System zum Erstellen, Bearbeiten und Löschen von Portfolio-Einträgen, mit einem integrierten Rich-Text-Editor und erweitertem Bildmanagement, die die Inhaltserstellung mühelos machen.

• SEO-freundliche URL-Slugs: intelligente Funktionen generieren Slugs automatisch aus Eintragstiteln, sodass Suchmaschinen die Seite problemlos indexieren können.

• Reaktive Suche und intelligente Slug-Generierung: dank Svelte 5 Runes und TypeScript – kleine Code-Schnipsel mit großer Wirkung.

• State-Management und modulare Architektur: eine klare, modulare Komponentenstruktur und effizientes lokales State-Management behalten alles im Blick – auch wenn ich später mehr Freunde und ihre Projekte einbinde.

Die persönliche Note: Eine Reise voller Freude und Herausforderung

Was mich an diesem Projekt am meisten fasziniert, ist die Symbiose aus moderner Technologie und persönlicher Kreativität. Ausgelöst durch die Inspiration eines Freundes, wuchs es zu einem Projekt heran, das mir jeden einzelnen Tag Freude bereitet. Es ist nicht nur eine Schaufensterdarstellung meiner Arbeit, sondern Ausdruck meiner Leidenschaft für sauberen Code, intuitives Design und innovative Lösungen.

Der zustandslose Aufbau und die hybride Rendering-Strategie ermöglichen es mir, Inhalte im Handumdrehen zu bearbeiten, ohne den üblichen Overhead. Und die Möglichkeit, wiederkehrende Nutzerbeziehungen abzubilden, eröffnet spannende Perspektiven für künftige Erweiterungen, bei denen Freunde und Mitstreiter ihre Projekte ebenfalls präsentieren können.

Fazit

Dieses Portfolio ist weit mehr als eine digitale Visitenkarte – es ist ein modernes Full-Stack-Webprojekt, das Best Practices und aktuelle Technologien in einem schlanken, intuitiven, flexiblen System vereint. Es zeigt, wie Tools wie SvelteKit, Svelte 5, TypeScript und PocketBase nicht nur technisch anspruchsvolle, sondern auch schöne, benutzerfreundliche Lösungen schaffen können.

Ich freue mich darauf, es weiter auszubauen und vielleicht bald meine Freunde und ihre Projekte in diese gemeinsame Plattform zu integrieren. Es war und ist eine große Freude, diesen Weg zu gehen.

CSS

Verwandte Projekte

Mein Portfolio-Projekt