Pascal Heue

Portfolio: Aufbau und Implementierung

Das Erstellen eines modernen Portfolios erfordert nicht nur technische Raffinesse, sondern auch ein klares, durchdachtes Design. Ziel dieses Projekts war es, eine Webseite zu schaffen, die sowohl optisch minimalistisch als auch funktional stark ist. Dabei kamen verschiedene Technologien zum Einsatz, um eine reaktionsschnelle und benutzerfreundliche Erfahrung zu gewährleisten. Hier wird der Aufbau des Portfolios, die eingesetzten Tools und das Design näher beschrieben.

Tech Stack

Für die Entwicklung des Portfolios wurde auf bewährte, moderne Technologien zurückgegriffen, die Flexibilität und Skalierbarkeit bieten. Der Tech Stack umfasst:

Next.js: Für die Basis des Projekts diente Next.js, das serverseitiges Rendering (SSR) und statische Generierung (SSG) unterstützt. Diese Technologie sorgt für schnelle Ladezeiten, eine SEO-optimierte Struktur und bietet eine ideale Grundlage für dynamische Webseiten.
MDX: Die Integration von MDX ermöglicht es, Markdown-Dateien mit React-Komponenten zu mischen. Dies bietet eine flexible Möglichkeit, Inhalte zu verwalten, während dynamische Elemente problemlos eingebettet werden können.
TailwindCSS: Für das Styling wurde TailwindCSS verwendet, ein Utility-first CSS-Framework, das es ermöglicht, direkt im Markup zu designen. Diese Methode sorgt nicht nur für eine konsistente Optik, sondern ermöglicht es auch, zwischen Light- und Darkmode zu wechseln, ohne die Performance zu beeinträchtigen.
shadcn/ui: Die Benutzeroberfläche wurde mit Hilfe der shadcn/ui Library gestaltet, die vorgefertigte, anpassbare Komponenten bereitstellt. Diese helfen dabei, ein einheitliches visuelles Design zu bewahren und gleichzeitig eine hohe Funktionalität sicherzustellen.
Aceternity UI: Für dynamische Inhalte und Animationen sorgt Aceternity UI. Dezente Animationen und interaktive Effekte wurden eingebaut, um das Benutzererlebnis zu verbessern, ohne dabei den Fokus von den Inhalten abzulenken.

Diese Technologien zusammen bieten eine solide Grundlage, die es ermöglicht, eine ansprechende und skalierbare Webseite zu gestalten.

Features

Das Portfolio bietet mehr als nur eine einfache Darstellung von Projekten. Es enthält verschiedene Features, die die Benutzererfahrung optimieren und die Inhalte auf moderne Weise präsentieren:

Bento Grid Design für Projekte: Die wichtigsten Projekte werden in einem Bento-Grid dargestellt, das eine ansprechende und strukturierte Übersicht bietet. Weitere Projekte folgen in einer geordneten Liste, die für eine klare Hierarchie sorgt.
Responsive Navigation: Auf Desktop-Geräten erscheint eine horizontale Navigationsleiste, während auf mobilen Geräten eine vertikale Sidebar verwendet wird. Diese ist durch Swipe-Gesten zugänglich, was eine intuitive Benutzerführung ermöglicht.
Floating Navbar für mobile Geräte: Um die Navigation zu verbessern, wurde eine Floating Navbar implementiert, die Verknüpfungen zu LinkedIn, Xing, GitHub und den E-Mail-Kontakt enthält. Diese Leiste passt sich an mobile Geräte an und wird zu einem platzsparenden Button reduziert.
Light- und Darkmode: Eines der Hauptfeatures ist die Unterstützung von Light- und Darkmode. Durch die Verwendung von TailwindCSS wird die Farbpalette dynamisch angepasst, je nachdem, welche Einstellungen der Nutzer bevorzugt. Das sorgt für eine angenehme Nutzererfahrung bei unterschiedlichen Lichtverhältnissen und verbessert die Zugänglichkeit der Webseite.
Mailto-Verlinkung: Anstatt eines herkömmlichen Kontaktformulars wird eine direkte Mailto-Verlinkung verwendet. Ein Klick auf den Kontaktbutton öffnet das E-Mail-Programm des Nutzers mit vorgefertigtem Betreff und Nachrichtentext. Diese Lösung minimiert die Hürden für die Kontaktaufnahme und sorgt für eine unkomplizierte Kommunikation.

Design: Minimalismus im Fokus

Das Design des Portfolios ist minimalistisch gehalten, um die Benutzererfahrung zu verbessern und den Fokus auf das Wesentliche zu legen. Jedes Element wurde bewusst gewählt, um eine klare Struktur zu schaffen, ohne die Nutzer mit unnötigen Details zu überfordern.

Farbschema: Die Farbpalette bleibt in neutralen Tönen, um eine professionelle und ruhige Atmosphäre zu schaffen. Der Kontrast zwischen Light- und Darkmode sorgt dafür, dass die Seite unter verschiedenen Bedingungen gut lesbar ist, während dezente Akzente auf interaktive Elemente hinweisen.
Typografie: Eine einfache, gut lesbare Schriftart wurde gewählt, um den Fokus auf die Inhalte zu legen und eine klare Hierarchie in den Texten zu schaffen. Der Lesefluss bleibt durch gut abgestimmte Textgrößen und Abstände angenehm.
Whitespace: Ein zentrales Designelement ist der großzügige Einsatz von Weißraum. Dies sorgt nicht nur für eine aufgeräumte Optik, sondern lenkt den Blick der Nutzer auf die wichtigen Informationen, ohne die Seite zu überladen.

Detaillierte Einblicke und Anpassungen

Neben den Hauptfunktionen gibt es einige spezifische Anpassungen, die das Portfolio interaktiver und benutzerfreundlicher machen:

1. Detaillierte Projektseiten

Jedes Projekt hat eine eigene Unterseite, auf der detaillierte Informationen bereitgestellt werden. Dies ermöglicht es den Nutzern, tiefer in die Projekte einzutauchen, während die Hauptseite eine kompakte Übersicht bietet.

2. Scroll-Animationen

Die Seite wurde mit subtilen Scroll-Animationen ausgestattet, die das Navigieren flüssiger und angenehmer gestalten. Diese Animationen sind bewusst zurückhaltend, um den Fokus weiterhin auf die Inhalte zu legen.

3. Mobile-First Ansatz

Das gesamte Design wurde nach einem Mobile-First-Ansatz entwickelt, was bedeutet, dass die Seite auf mobilen Geräten priorisiert und optimiert ist. So wird sichergestellt, dass die Benutzererfahrung auf Smartphones ebenso hochwertig ist wie auf Desktop-Geräten.

Zusammenfassung

Das Portfolio vereint modernes Design mit einer stabilen und skalierbaren technischen Grundlage. Durch den Einsatz von Next.js, MDX und TailwindCSS wird eine benutzerfreundliche, schnelle und responsive Webseite gewährleistet. Zukünftige Erweiterungen sind bereits in Planung, um die Seite weiterhin aktuell zu halten und den Nutzern neue Funktionen zu bieten.