Wie ich meine persönliche Webseite aufgebaut habe

Schon seit längerer Zeit hatte ich den Wunsch, eine eigene Webseite zu erstellen – nicht nur als Blog, sondern als zentrale Plattform für meine Projekte, meinen Lebenslauf und andere Inhalte. Technisch sollte sie sauber aufgebaut, modern gestaltet und einfach erweiterbar sein.

Statt auf einen klassischen Webseiten-Builder zurückzugreifen, habe ich mich bewusst dafür entschieden, alles von Grund auf selbst zu programmieren. Erste Erfahrungen im Webbereich konnte ich bereits während meines Studiums sammeln – unter anderem mit HTML, CSS, JavaScript und RShiny. Ein Beispiel dafür ist die Geovis Website, die ich damals mit Bootstrap umgesetzt habe – einem weit verbreiteten CSS-Framework, das auf einem Komponenten- und Grid-System basiert.

Für meine neue Webseite wollte ich jedoch mehr gestalterische Freiheit – und entschied mich daher für Tailwind CSS. Dieses Utility-First-Framework erlaubt es, direkt im Markup mit einzelnen CSS-Klassen zu arbeiten. Das macht das Styling nicht nur flexibler und übersichtlicher, sondern hilft auch, konsistent zu bleiben und wiederkehrende Strukturen effizient umzusetzen. So konnte ich das Design individuell gestalten, ohne mich an vorgefertigte Komponenten binden zu müssen.

Ganz neu für mich waren dagegen Technologien wie React, TypeScript und Next.js. Ich wollte bewusst etwas Neues lernen – und dieses Projekt war die ideale Gelegenheit, tief in ein modernes Web-Stack einzutauchen.

Als Ausgangspunkt diente mir das offizielle Blog-Starter Template von Next.js – ein einfaches, aber solides Beispiel für statisch generierte Blogseiten mit Markdown-Unterstützung. Ich habe die Struktur jedoch sehr schnell angepasst und weiterentwickelt: Heute basiert mein System zwar lose auf diesem Starter, ist aber inhaltlich und technisch komplett auf meine eigenen Bedürfnisse zugeschnitten.

Die technische Grundlage

Als Basis diente mir das offizielle Blog-Starter Template von Next.js. Dieses liefert ein minimales Setup für statisch generierte Blogposts mit Markdown – geschrieben in TypeScript. Die wichtigsten Technologien, auf denen meine Seite aufbaut:

• Next.js – für Routing, Server-Side Rendering und Static Site Generation
• TypeScript – für sauberen, typsicheren Code
• MDX – für Blogbeiträge und Seiteninhalte, die Markdown und React-Komponenten kombinieren
• Tailwind CSS – für flexibles, komponentenbasiertes Styling

Das Template war ein guter Einstieg, doch ich habe schnell begonnen, es stark anzupassen: Ich habe eigene Komponenten entwickelt, neue Layoutstrukturen eingeführt und die komplette Ordnerarchitektur auf meine Bedürfnisse optimiert.

💻 Mein Aufbau im Überblick

Die Seite ist vollständig komponentenbasiert aufgebaut und folgt einer modularen Struktur. Das Herzstück liegt im src-Verzeichnis – dort befinden sich die Seiten, Komponenten, Interfaces und Hilfsfunktionen.

Wichtige Elemente:

• 📁 blogs/ – Alle Blogartikel als MDX-Dateien mit Metadaten-Export
• 📁 app/_components/ – Eigene Komponenten wie Navbar, PostList, PostBody, CVMap, SkillCard etc.
• 📁 blogs/[slug]/page.tsx – Dynamisches Routing: Jeder Blogpost bekommt eine eigene, statisch generierte Seite
• 📁 interfaces/ & lib/ – Typdefinitionen und Hilfsfunktionen, z. B. zur MDX-Verarbeitung
• 📄 layout.tsx & PageWrapper.tsx – Globales Layout mit wiederverwendbaren Strukturen

Das Design basiert auf Tailwind CSS – was mir erlaubt, direkt im Markup mit Utility-Klassen zu arbeiten. Dadurch ist das Styling flexibel, konsistent und gut wartbar.

☁️ Deployment mit Vercel

Für das Hosting setze ich auf Vercel – das nahtlos mit Next.js zusammenarbeitet.
Ein Commit auf GitHub reicht, und Vercel übernimmt den Rest: Deployment, CDN-Auslieferung und Optimierung.

Was eine kleine Herausforderung war:
Ich habe meine Domain bei hostpoint.ch gekauft. Nach einem tiefen Tauchgang in DNS-Einstellungen, A-Records und CNAMEs habe ich herausgefunden, wie man sie korrekt mit Vercel verbindet.

Sehr geholfen hat mir dabei dieser offizielle Guide von Vercel:
How do I add a custom domain to my Vercel project?

Wie geht’s weiter?

Im nächsten Blogpost werde ich gezielt auf einzelne Komponenten eingehen:

• Wie TitleScreen.tsx den Einstieg auf meiner Seite gestaltet
• Wie die Vorschau-Logik im post-preview.tsx aufgebaut ist
• Und wie CVMap.tsx meine berufliche Laufbahn visuell aufbereitet

Wenn dich interessiert, wie ich meine Webseite aufgebaut habe, und wie ich in Zukunft auch mit Karten und WebGIS-Anwendungen experimentieren möchte – dann bleib dran.
Ich plane, (hoffentlich) spannende Dinge mit interaktiven Karten, OpenStreetMap und Datenvisualisierung umzusetzen – alles direkt integriert in meine Seite.

---

Claude 👨‍💻