Ich habe mein Portfolio mit Vue.js und Nuxt selbst gebaut – von der ersten Zeile Code bis zur fertigen Webseite. In diesem Beitrag zeige ich, wie ich die Seite strukturiert, Projekte eingebunden und gestaltet habe. Ein praktischer Einblick für alle, die ihr eigenes Webportfolio starten möchten.

Die Idee: Eine eigene Bühne für meine Arbeiten

Mir war früh klar: Ich will keine einfache Baukasten-Website, sondern ein Portfolio, das ich selbst gestalten und jederzeit flexibel erweitern kann. Eine Seite, die nicht nur zeigt was ich mache, sondern auch wie.
Darum fiel meine Wahl auf Vue.js und das darauf basierende Framework Nuxt.

Warum Vue.js und Nuxt?

Vue.js ist ein modernes JavaScript-Framework, das ermöglicht, Komponenten-basiert zu arbeiten — perfekt für ein Portfolio mit wiederkehrenden Elementen wie Projektkarten oder Navigationsleisten.
Nuxt baut darauf auf und erleichtert zusätzlich das Routing (also das Anlegen von Seiten) und das Deployment.

Statische Seiten? Dynamische Projekte? Kein Problem. Mit Nuxt wird das kinderleicht umgesetzt — und auch SEO (Suchmaschinenoptimierung) ist direkt mitgedacht.

Projektstart: Die Basis steht schnell

Gestartet habe ich mein Projekt mit folgendem Befehl:

npx nuxi init portfolio cd portfolio npm install npm run dev

Schon lief die lokale Version meiner Seite im Browser.
Die klare Struktur von Nuxt war direkt verständlich:

/pages für die Seiten (Home, About, Projects)
/components für wiederverwendbare Elemente (Header, Footer, Inhalt)
/assets für Bilder und Styles

Ein riesiger Pluspunkt: Sobald man eine neue Seite unter /pages anlegt, erstellt Nuxt automatisch die passende Route. Kein manuelles Routing nötig.

Komponenten: Bausteine für Wiederverwendbarkeit

Die Grundstruktur war da, jetzt ging es ans Design.
Mein Ansatz: Alles als Komponenten aufbauen, um flexibel zu bleiben.

Beispiele:

Header.vue: Hero-Bilder, Schriftart-Animation, Kontakt-Informationen
AboutMe.vue, AnalogImages.vue, Skills.vue, etc: einzelne Teilbereiche des Portfolio
ProjectModal.vue: Eine Vorlage für alle Projekte

Gerade die ProjectModal-Komponente war spannend. Hier konnte ich Props nutzen, um Titel, Beschreibung und Bilder dynamisch einzufügen. Einmal gebaut, für alle Projekte wiederverwendbar.