Portfolio – mit Vue.js und Nuxt

von

Titelbild für Portfolio - mit vue.js und nuxt

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.

Styling: Feinschliff und UX

Für das Styling habe ich klassisches CSS verwendet, unterstützt durch Flexbox und Grid.
Besonderes Augenmerk lag auf:

  • Responsiveness → Mobile-First gedacht, auf allen Geräten schick
  • Hover- und Fade-Effekte → kleine Animationen für bessere UX
  • Klare Typografie und Abstände → ein aufgeräumtes, modernes Design

Künftig könnte ich hier z.B. TailwindCSS einbauen.

Deployment: Der Weg ins Internet

Nachdem alles stand, habe ich die Seite statisch gebuildet und generiert. Ich lud die Dateien via Filezilla auf mein Webhosting adrianjanka.ch.

Links

Meine Portfolio Seite:
https://www.adrianjanka.ch/

Mein GitHub-Repository:
https://github.com/adrianjanka/portfolio

Offizielle Nuxt Dokumentation:
https://nuxt.com/docs

Idee & Inspiration

Mir war von Anfang an klar, dass ich mein Portfolio von Grund auf selbst bauen möchte – und zwar mit modernen Technologien. Ich wollte kein Baukastensystem, sondern ein Projekt, bei dem ich mehr über Webentwicklung lerne. Da wir in der Schule bereits mit Vue.js und Nuxt gearbeitet hatten und ich diese Tools spannend fand, fiel meine Wahl ziemlich schnell darauf.

Vorgehen

Der Start verlief ziemlich reibungslos. Mit Nuxt war das Grundgerüst rasch erstellt, die Seiten waren schnell angelegt und die ersten Komponenten gebaut. Etwas zeitintensiver war es, den passenden Content für die Seite zusammenzutragen.
Die grösste Herausforderung kam aber beim Deployment. Im lokalen Dev-Environment sah alles gut aus, doch nach dem Build waren plötzlich Elemente verschoben und CSS-Klassen funktionierten nicht mehr. Zum Glück konnte mir Samuel dabei helfen und den Fehler finden. Dieser Moment hat mir gezeigt, wie wichtig Testen und Fehlersuche in der Webentwicklung sind.

Learnings

Durch das Projekt habe ich ein viel besseres Verständnis für Vue.js und Nuxt bekommen. Ich weiss jetzt, wie ich Seiten strukturiere, Komponenten aufbaue und Inhalte dynamisch einbinde. Trotzdem gibt es noch viel zu entdecken – gerade bei komplexeren Funktionen fühle ich mich noch nicht komplett sicher. Auch das Thema Deployment habe ich durch die Fehlerbehebung intensiv kennengelernt.

Fazit

Mit dem Resultat bin ich zufrieden. Die Seite läuft stabil, sieht so aus, wie ich es mir vorgestellt habe, und ich kann sie jederzeit erweitern. Rückblickend hätte es geholfen, wenn ich vorher einen genaueren Plan gehabt hätte, was ich wo zeigen möchte. Das werde ich bei zukünftigen Projekten auf jeden Fall berücksichtigen.

Mögliche Erweiterungen

Für die Zukunft habe ich bereits ein paar Ideen. Besonders spannend fände ich es, die Seite SEO-technisch zu optimieren, um sie besser auffindbar zu machen. Auch Blog-Beiträge könnte ich mir vorstellen, um die Seite lebendiger zu gestalten und regelmässig Inhalte zu veröffentlichen.