Webseite Teil 2 – Der Einstieg: Die Titelseite

Im ersten Teil meines Blogposts habe ich beschrieben, wie ich meine Webseite technisch aufgebaut, strukturiert und mit Komponenten modularisiert habe. Nun möchte ich Schritt für Schritt auf die wichtigsten Bestandteile eingehen – und beginne ganz vorne: mit der Titelseite.

TitleScreen.tsx – Der visuelle Einstieg

Wenn man meine Webseite öffnet, sieht man als erstes ein ganzseitiges Bild mit einer klaren Botschaft: wer ich bin und wofür ich stehe. Diese erste Sektion nennt sich TitleScreen.tsx und erfüllt gleich mehrere Aufgaben:

• Identität zeigen: Mein Name steht im Zentrum, zusammen mit meinem Fachgebiet: GIS, QGIS, Data Science, Web-GIS.
• Stimmung setzen: Das Hintergrundbild vermittelt Atmosphäre. Ich habe es bewusst grossflächig und dezent gehalten – keine Ablenkung, sondern ein ruhiger Einstieg.
• Responsive Design: Die Schriftgrössen passen sich je nach Bildschirm an, damit es auch auf Smartphones gut aussieht.
• Usability-Element: Ein animierter „Scroll down“-Pfeil unten signalisiert: Es geht weiter. Besucher:innen sollen neugierig nach unten scrollen.
• Dynamische Skills: Unter dem Titel rotiert eine animierte SkillCard mit meinen wichtigsten Tools (QGIS, Python, Next.js etc.).

Die SkillCard-Animation ist ein kleines Highlight: Alle paar Sekunden wird automatisch ein anderes Tool aus meinem Stack angezeigt – mit sanftem Fade-In/Fade-Out-Effekt dank Framer Motion. So bleibt die Titelseite lebendig und zeigt auf einen Blick, womit ich arbeite.

Code-Struktur (Ausschnitt)

Die Komponente ist modular aufgebaut und nutzt Framer Motion für Animationen. Die Skills werden aus einem Array rotiert angezeigt:

<section className="relative w-full h-screen overflow-hidden">
  {/* HINTERGRUNDBILD */}
  <div
    className="absolute top-0 left-0 w-full h-full bg-cover bg-center"
    style={{ backgroundImage: 'url(/img/background.png)' }}
  ></div>
 
  {/* DUNKLE ÜBERLAGERUNG */}
  <div className="absolute top-0 left-0 w-full h-full bg-black/50 "></div>
 
  {/* ZENTRIERTER TEXT-INHALT */}
  <div className="relative z-10 flex flex-col items-center justify-center h-full text-white text-center px-6">
    <h1 className="text-5xl md:text-7xl font-extrabold leading-tight drop-shadow-xl">Claude Widmer</h1>
    <p className="text-lg md:text-2xl mt-4 text-white/90">GIS-Enthusiast | QGIS | Data Science | Web-GIS</p>
    <p className="mt-2 text-white/70 text-sm md:text-base italic mb-0">Tools, die ich nutze:</p>
    {/* Animierte SkillCard */}
    <div className="mt-4 w-64 h-40 relative">
      {/* ...SkillCard-Animation... */}
    </div>
  </div>
 
  {/* SCROLL-HINWEIS */}
  <div className="absolute bottom-12 left-0 right-0 flex justify-center z-10">
    {/* ...Scroll-Down-Animation... */}
  </div>
</section>

Warum das wichtig ist

Der TitleScreen ist kein reines Designelement – er ist ein digitaler erster Eindruck. In wenigen Sekunden muss klar werden, worum es auf dieser Seite geht. Und genau das war mein Ziel: Einen aufgeräumten, fokussierten Einstieg zu schaffen, der mich als Person, meine Themen und meine Arbeit kurz und prägnant zusammenfasst.

Gerade die Kombination aus Bild, Titel, animierter SkillCard und Scroll-Hinweis sorgt dafür, dass Besucher:innen sofort einen Eindruck bekommen – und Lust haben, weiterzuscrollen.

Wie geht’s weiter?

Im nächsten Teil zeige ich dir die AboutMe.tsx Komponente – wo ich meinen Werdegang, meine Interessen und Skills darstelle. Diese Informationen sind direkt unter dem TitleScreen eingebettet – und machen den Einstieg in meine digitale Welt komplett.

Claude 👨‍💻