🙋Webseite Teil 3 – About Me & Skills

Nach dem visuellen Einstieg mit der TitleScreen-Komponente folgt direkt der Bereich „Über mich“. Diese Sektion stellt mich als Person vor, zeigt meine beruflichen Schwerpunkte und die wichtigsten Tools, mit denen ich arbeite. Mit einem Klick auf „Mehr Erfahren“ kommt man auf meine About Page.

AboutMe.tsx – Wer steckt hinter der Seite Über Mich?

Die Komponente AboutMe.tsx ist in drei Bereiche gegliedert:

1. Ein klarer Titel – zentriert und prägnant.
2. Ein kurzer Vorstellungstext – wer ich bin, was ich beruflich mache und was Besucher:innen auf der Seite erwartet.
3. Ein Grid aus SkillCards – interaktive Karten, die meine wichtigsten Technologien und Tools zeigen.

<PageWrapper>
  <h1>Über mich</h1>
  <p>Ich bin Claude Widmer und arbeite im GIS-Bereich ...</p>
 
  <section className="max-w-3xl mx-auto text-center mb-6">
  Ich bin {age} Jahre alt, begeistere mich für Geoinformatik, räumliche Datenanalyse und moderne Webtechnologien. ....
  </section>
 
 
  <div className="grid grid-cols-2 sm:grid-cols-3 md:grid-cols-4 gap-4 max-w-4xl mx-auto my-8">
    <SkillCard backgroundImage="/img/QGIS.png" text="QGIS" />
    <SkillCard backgroundImage="/img/PyQGIS.png" text="QGIS Plugins" />
    ...
  </div>
 
  <SkillRadar />
 
  <CV /> <- Map
 
</PageWrapper>

Nachdem ich eine kurze Section geschrieben habe, wer ich bin und für was ich mich interessiere, folgt eine Übersicht meiner wichtigsten Skills und Tools. Diese SkillCards zeigen auf einen Blick, mit welchen Technologien, Programmiersprachen und Frameworks ich am meisten arbeite – von QGIS und Python über Next.js bis hin zu React und R.

Die SkillCards sind nicht nur ein optisches Element, sondern helfen auch, meine Schwerpunkte und Interessen für Besucher:innen schnell sichtbar zu machen. Sie werden dynamisch aus einer Datenstruktur generiert und können einfach erweitert werden, wenn neue Tools oder Technologien dazukommen.

Direkt darunter folgt der SkillRadar: ein Radardiagramm, das meine Fähigkeiten in verschiedenen Kategorien visualisiert. Über Buttons kann zwischen Kategorien wie „Arbeit“, „Studium“ oder „Programmieren“ umgeschaltet werden, wodurch sich das Diagramm und die Beschreibung dynamisch anpassen. So bekommen Besucher:innen einen schnellen, aber auch detaillierten Überblick über meine Kompetenzen.

Abschliessend ist eine Karte eingebunden, die meinen Lebenslauf als interaktive Map darstellt. Auf diese gehe ich im nächsten Blog weiter ein.

🛠️ SkillCard.tsx – visuelle Übersicht meiner Tools

Jede SkillCard ist eine kleine, interaktive Kachel mit einem Bild (z. B. QGIS-Logo) und einem Titel, der beim Hover sichtbar wird. Das Design basiert auf Tailwind CSS und nutzt einfache Hover-Logik:

<div
  className="relative bg-cover bg-center p-8 rounded-lg border-4 group"
  style={{ backgroundImage: `url(${backgroundImage})` }}
>
  <div className="absolute inset-0 bg-white opacity-0 group-hover:opacity-90 transition-opacity duration-500 z-0"></div>
  <h2 className="text-2xl font-semibold text-gray-800 opacity-0 group-hover:opacity-100 z-10">
    {text}
  </h2>
</div>

SkillRadar – Interaktive Visualisierung meiner Fähigkeiten

Der SkillRadar ist eine dynamische, interaktive Komponente, die meine wichtigsten Fähigkeiten übersichtlich als Radardiagramm darstellt. Jede Achse repräsentiert einen Skill (z. B. QGIS, Python, Statistik), der Wert zeigt meine Selbsteinschätzung in diesem Bereich.

Was macht den SkillRadar besonders?

• Dynamisch filterbar: Über Buttons oberhalb des Diagramms kannst du zwischen verschiedenen Kategorien umschalten (z. B. „Arbeit“, „Studium“, „Programmieren“, „Freizeit“). Das Diagramm und die Skill-Liste passen sich sofort an die gewählte Kategorie an.
• Responsiv: Die Darstellung und die Schriftgrössen passen sich automatisch an die Bildschirmgrösse an – so bleibt alles auch auf dem Smartphone lesbar.
• Interaktive Beschreibung: Zu jeder Kategorie wird eine eigene Beschreibung angezeigt, die sich beim Umschalten animiert einblendet.
• Datenstruktur: Die Skills sind als Array von Objekten definiert, mit Name, Kategorie(n) und Wert. Das macht die Komponente flexibel und leicht erweiterbar.
• Technik: Für das Radardiagramm wird die Bibliothek recharts verwendet. Die Animationen und Übergänge (z. B. beim Wechsel der Kategorie) werden mit Framer Motion umgesetzt.

Warum das so gebaut ist

Ich wollte eine Mischung aus Inhalt und Visualisierung: Ein bisschen Text, aber auch etwas zum Entdecken – ohne zu überladen. Die Karten sind responsiv, passen sich dem Bildschirm an und machen die wichtigsten Skills auf einen Blick sichtbar.

Wie geht’s weiter?

Im nächsten Teil geht es um den Kartenbereich und meinen Lebenslauf (CV.tsx) – wie ich meinen Werdegang übersichtlich darstelle und welche interaktiven Elemente dabei zum Einsatz kommen.

Claude 👨‍💻