Website-Erstellung – Mein digitaler Auftritt

Die Idee hinter der Website

Meine persönliche Website soll nicht nur als digitale Visitenkarte dienen, sondern auch als Plattform, auf der ich Projekte, Artikel und meine beruflichen Interessen teilen kann. Ziel war es, ein minimalistisches, aber ausdrucksstarkes Design zu schaffen, das meinen Stil widerspiegelt und gleichzeitig modern, performant und responsiv ist. Es sollte so stukturiert sein dass es einfach ist Blog Beiträge zu erstellen, zukünftige Projekte darzustellen um einen möglichen Monitierasierungsfaktor zu schaffen.

Planung und Design

Bevor ich mit dem Coden begonnen habe, stand eine klare Strukturierung im Vordergrund:

• Welche Inhalte sollen dargestellt werden? (Über mich, Blog, Projekte, Techstack, Kontakt, Impressum)
• Wie navigiert der Nutzer möglichst intuitiv durch die Seite?
• Welche Farbwelt, Typografie und Stilmittel passen zu meiner Identität?

Ich habe ein TailwindUI Template integriert und weiterentwickelt. Ich habe mich für TailwindUI welches (React,tsx,jsx,next,js) verwendet entschieden da ich mit diesen Technologien vertraut bin und ich TailwindUIPlus besitze. Dabei habe ich das Template geändert, auf mich angepasst und einige Features hinzugefügt.

Technische Umsetzung

Ich habe mich für Next.js als Framework entschieden – wegen seiner Performance, der SEO-Freundlichkeit und der Flexibilität. Für das Styling nutze ich Tailwind CSS, weil es mir schnelles, sauberes und konsistentes Design ermöglicht.

Weitere Technologien:

• MDX für Blogbeiträge (wie diesen hier) – Markdown + JSX kombiniert
• React Libarys für Komponenten wie Buttons, Cards etc.
• Hostinger als Hosting-Plattform – schnell, einfach & direkt mit Git verbunden
• Git für einfache Änderungen und Test von Source Code

Responsives Design

Da die Website auf allen Endgeräten gut funktionieren soll, habe ich besonders auf die mobile Darstellung geachtet. Mit Hilfe von Tailwind's Responsive Utilities war das einfach und präzise umsetzbar.

Deployment & Optimierung

Nach dem lokalen Aufbau habe ich die Seite mit Hostinger deployed. Durch die automatische Optimierung von Bildern, statischem Rendering und Caching ist die Seite sehr schnell – auch bei schlechter Verbindung was man anhand von den Dev-tools in Lighthouse überprüfen kann.

Fazit

Die Entwicklung meiner Website war ein kreativer und technischer Lernprozess. Sie ist nicht nur mein zukünftiges Portfolio und Blog in einem, sondern auch ein laufendes Projekt, das ich ständig weiterentwickeln und optimieren möchte.

Source Code

Sollten Sie Intresse am Source Code haben gebe es die Möglichkeit dass ich Ihnen einen Link zum clonen des privaten Repos sende.

Mein Ziel war eine Seite, die mich professionell repräsentiert – modern, performant und authentisch.