Mein erstes Portfolio v1.0

Über mein erstes Portfolio v1.0

Nach der Umsetzung mehrerer Freelance Projekte sowie der Zusammenarbeit mit anderen Designern im Team habe ich mich entschieden, mein eigenes persönliches Portfolio zu erstellen, um meine Fähigkeiten und Projekte zu präsentieren. Dies war mein erstes Portfolio mit Next.js und stellte einen wichtigen Schritt dar, mein Frontend und Backend Wissen in einer realen Umgebung anzuwenden.

Bild, das eine alte Version der Startseite der Website nfwdesign.com auf verschiedenen Endgeräten darstellt

Technische Umsetzung

Das Portfolio wurde mit Next.js 13 unter Verwendung des App Routers und TypeScript entwickelt. Das Styling erfolgte mit TailwindCSS sowie ShadCN UI Komponenten für wiederverwendbare UI Elemente. Das Backend basierte auf einer MySQL Datenbank und das gesamte Projekt war selbst gehostet auf einem Shared Webhosting auf einem Node.js Server.

Ein maßgeschneidertes Admin Panel (CMS) wurde entwickelt, um dynamische Projektseiten zu verwalten. Dadurch konnte ich neue Projekte nach Abschluss von Kundenarbeiten hinzufügen, ohne den Code manuell anpassen zu müssen. Bilder und Projektinhalte wurden direkt über das Admin Interface gepflegt, was den Workflow für ein wachsendes Portfolio deutlich effizienter machte.

Bild, das eine alte Version des Admin-Dashboards der Website nfwdesign.com auf verschiedenen Endgeräten darstellt

Zentrale Funktionen

Selbst gehostet auf Shared Webhosting (Umzug auf VPS geplant)
Custom Admin Panel (CMS) zur dynamischen Projektverwaltung
Vollständig responsives Design für Desktop, Tablet und mobile Geräte
SEO Optimierung mit statischen und dynamischen Schema Markups sowie Metadaten
Klare Navigation und übersichtliche Struktur für schnellen Informationszugriff
Erstes Portfolio Projekt mit Next.js + TailwindCSS + ShadCN UI

Herausforderungen und Erfolge

Das Hosting eines Next.js 13 Projekts auf einem Shared Server war eine Herausforderung, ermöglichte mir jedoch wichtige Einblicke in Deployment, Skalierbarkeit und Serverkonfiguration. Trotz dieser Einschränkungen konnte ich ein vollständig funktionsfähiges Portfolio veröffentlichen, das übersichtlich war, abgeschlossene Projekte präsentierte und für zukünftige Erweiterungen vorbereitet war.

Die dynamischen Projektseiten und das Admin CMS sorgten für einen effizienten Workflow bei der Inhaltsverwaltung, noch bevor spätere Portfolio Erweiterungen mit Blog Funktionen, erweitertem SEO und verbessertem UI und UX umgesetzt wurden.

Ergebnis

Das erste Portfolio demonstrierte erfolgreich meine Fähigkeit, ein vollwertiges Webprojekt zu entwickeln, zu hosten und zu pflegen. Es war responsiv, skalierbar und verfügte über eine saubere Benutzeroberfläche und bildete gleichzeitig die Grundlage für meine zukünftigen Portfolio Verbesserungen.