feat: add a first version of the skills page

package.json

@@ -25,6 +25,7 @@
     "@eslint/js": "^10.0.1",
     "@markuplint/astro-parser": "^4.6.23",
     "@markuplint/ml-config": "^4.8.15",
+    "@tailwindcss/typography": "^0.5.19",
     "@typescript-eslint/parser": "^8.57.2",
     "cspell": "^9.7.0",
     "eslint": "^10.1.0",

pnpm-lock.yaml

@@ -36,6 +36,9 @@ importers:
       '@markuplint/ml-config':
         specifier: ^4.8.15
         version: 4.8.15
+      '@tailwindcss/typography':
+        specifier: ^0.5.19
+        version: 0.5.19(tailwindcss@4.2.2)
       '@typescript-eslint/parser':
         specifier: ^8.57.2
         version: 8.57.2(eslint@10.1.0(jiti@2.6.1))(typescript@5.9.3)
@@ -1170,6 +1173,11 @@ packages:
     resolution: {integrity: sha512-qEUA07+E5kehxYp9BVMpq9E8vnJuBHfJEC0vPC5e7iL/hw7HR61aDKoVoKzrG+QKp56vhNZe4qwkRmMC0zDLvg==}
     engines: {node: '>= 20'}
 
+  '@tailwindcss/typography@0.5.19':
+    resolution: {integrity: sha512-w31dd8HOx3k9vPtcQh5QHP9GwKcgbMp87j58qi6xgiBnFFtKEAgCWnDw4qUT8aHwkCp8bKvb/KGKWWHedP0AAg==}
+    peerDependencies:
+      tailwindcss: '>=3.0.0 || insiders || >=4.0.0-alpha.20 || >=4.0.0-beta.1'
+
   '@tailwindcss/vite@4.2.2':
     resolution: {integrity: sha512-mEiF5HO1QqCLXoNEfXVA1Tzo+cYsrqV7w9Juj2wdUFyW07JRenqMG225MvPwr3ZD9N1bFQj46X7r33iHxLUW0w==}
     peerDependencies:
@@ -2904,6 +2912,10 @@ packages:
     peerDependencies:
       postcss: ^8.4.31
 
+  postcss-selector-parser@6.0.10:
+    resolution: {integrity: sha512-IQ7TZdoaqbT+LCpShg46jnZVlhWD2w6iQYAcYXfHARZ7X1t/UGhhceQDs5X0cGqKvYlHNOuv7Oa1xmb0oQuA3w==}
+    engines: {node: '>=4'}
+
   postcss-selector-parser@7.1.1:
     resolution: {integrity: sha512-orRsuYpJVw8LdAwqqLykBj9ecS5/cRHlI5+nvTo8LcCKmzDmqVORXtOIYEEQuL9D4BxtA1lm5isAqzQZCoQ6Eg==}
     engines: {node: '>=4'}
@@ -4619,6 +4631,11 @@ snapshots:
       '@tailwindcss/oxide-win32-arm64-msvc': 4.2.2
       '@tailwindcss/oxide-win32-x64-msvc': 4.2.2
 
+  '@tailwindcss/typography@0.5.19(tailwindcss@4.2.2)':
+    dependencies:
+      postcss-selector-parser: 6.0.10
+      tailwindcss: 4.2.2
+
   '@tailwindcss/vite@4.2.2(vite@7.3.1(jiti@2.6.1)(lightningcss@1.32.0)(yaml@2.8.3))':
     dependencies:
       '@tailwindcss/node': 4.2.2
@@ -6837,6 +6854,11 @@ snapshots:
     dependencies:
       postcss: 8.5.8
 
+  postcss-selector-parser@6.0.10:
+    dependencies:
+      cssesc: 3.0.0
+      util-deprecate: 1.0.2
+
   postcss-selector-parser@7.1.1:
     dependencies:
       cssesc: 3.0.0

src/pages/index.astro

@@ -28,6 +28,9 @@ import BaseLayout from "../layouts/BaseLayout.astro";
       </section>
       <nav>
         <ul class="flex flex-col gap-2">
+          <li>
+            <a href="/skills">Skills</a>
+          </li>
           <li>
             <ExternalLink
               cssClass="link-matrix"

src/pages/skills.astro

@@ -3,5 +3,217 @@ import BaseLayout from "../layouts/BaseLayout.astro";
 ---
 
 <BaseLayout>
-  <p>Skills</p>
+  <a href="/">Back</a>
+  <main>
+    <article class="prose prose-zinc dark:prose-invert lg:prose-xl">
+      <h1>Kai Moschcau</h1>
+      <h2>Meine Skills und was ich die letzten Jahre getrieben habe</h2>
+      <p>
+        Hier siehst du auf einen Blick, wo ich meine Stärken habe und welche
+        Technologien und Methoden in Projekten aktiv einsetzt wurden.<br />
+        Die Übersicht zeigt, wie ich mit meinem Know-how deine Projekte voran bringe
+        - von der Entwicklung über Architektur bis hin zur Team- und Kundenarbeit.
+      </p>
+
+      <h3>💻 Softwareentwicklung &amp; Technologien</h3>
+      <ul>
+        <li>
+          {/* 2018-… */}
+          Webentwicklung – 8+ Jahre<br />
+          (moderne Web-UIs, Responsive Design, komplexe Komponenten, Frontend-Integration,
+          Web Accessibility, Web App Security)<br />
+          (HTML, CSS, JavaScript, Typescript, TailwindCSS, daisyUI, SASS, vite, WebSocket,
+          jQuery, drizzle ORM, Mocha, Chai, Jest)
+        </li>
+        <li>
+          {/* 2018-… */}
+          Frontend-Frameworks – 8+ Jahre<br />
+          (Erweitern und Umbauen von statischen Web-App Frontends in reactive Frontends,
+          Neubau von reaktiven Frontends)<br />
+          (Vue 2, Vue 3, Svelte, SvelteKit, React)
+        </li>
+        <li>
+          {/* 2018-2023, 2026 */}
+          Java – 6+ Jahre<br />
+          (Enterprise B2B und B2C Web-Anwendungen, Web-APIs, Keycloak-Plugins, saubere
+          Architekturen, Web App Security)<br />
+          (Spring Boot, Spring MVC, Spring Security, Hibernate, JPA, Freemarker, Thymeleaf,
+          JSP, REST, JUnit, Mockito, Gradle, Maven)
+        </li>
+        <li>
+          {/* 2020-… */}
+          C# - 5+ Jahre<br />
+          (REST- und SOAP-APIs mit hohem Durchsatz, Enterprise-Anwendungen, Web-APIs,
+          Backend-Systeme, saubere Architekturen, Web App Security)<br />
+          (.NET 8, .NET Framework 4.8, Entity Framework Core, NHibernate, ASP.NET
+          Core, Blazor, Razor, REST, SOAP, NUnit, Moq)
+        </li>
+        <li>
+          {/* 2018-… */}
+          REST-APIs &amp; Backend-Services - 8+ Jahre<br />
+          (Schnittstellenkonzeption, REST, SignalR, WebSockets)
+        </li>
+      </ul>
+
+      <h3>🛡️ IT-Sicherheit</h3>
+      <ul>
+        <li>
+          {/* 2018-… */}
+          Sichere Anwendungsentwicklung &amp; Design – 8+ Jahre<br />
+          (OWASP, SSDLC, Threat Modeling, Web App Security)
+        </li>
+        <li>
+          {/* 2018-… */}
+          Authentication &amp; Authorization – 8+ Jahre<br />
+          (in-App &amp; extern)<br />
+          (OAuth2, OIDC, Keycloak)
+        </li>
+        <li>
+          {/* 2018-… */}
+          Observability im Betrieb – 8+ Jahre<br />
+          (Log-Analyse und statistische Auswertung, Telemetrie und Alarme)
+        </li>
+        <li>
+          {/* 2018-2023 */}
+          Sicherheits-Analyse und Tests – 5+ Jahre<br />
+          (statische und Dynamische Code Analyse, manuelles Penetration Testing)<br
+          />
+          (SonarQube, Veracode, Qualys, Zed Attack Proxy)
+        </li>
+      </ul>
+
+      <h3>☁️ Cloud, DevOps &amp; Betrieb</h3>
+      <ul>
+        <li>
+          {/* 2018-2024 */}
+          Public, Private &amp; Clouds – 7+ Jahre<br />
+          (<a
+            href="https://www.credly.com/badges/e06dda2d-a444-448d-809a-31565c3b8c8d/public_url"
+            >AWS Certified Solutions Architect – Associate</a
+          >, AWS, GCP, Azure, CloudFormation, HashiCorp Terraform)
+        </li>
+        <li>
+          {/* 2018-… */}
+          CI/CD &amp; DevOps – 8+ Jahre<br />
+          (Git, GitHub Actions, GitLab, Gitrunner, Azure DevOps, Jenkins)
+        </li>
+        <li>
+          {/* 2018-… */}
+          Containerisierung &amp; Images – 8+ Jahre<br />
+          (Docker, Docker Compose, Kubernetes, Helm, HashiCorp Packer)
+        </li>
+        <li>
+          {/* 2018-… */}
+          Deployment- &amp; Release-Management – 8+ Jahre
+        </li>
+      </ul>
+
+      <h3>🗄️ Datenbanken &amp; Persistence</h3>
+      <ul>
+        <li>
+          {/* 2015-… */}
+          Relationale Datenbanken – 11+ Jahre<br />
+          (MySQL, Oracle DB, Microsoft SQL Server, SQLite, PostgreSQL)
+        </li>
+        <li>
+          {/* 2018-2024… */}
+          Datenmodellierung &amp; Performance-Optimierung – 6+ Jahre
+        </li>
+        <li>
+          {/* 2014-2016 */}
+          Data Warehousing – 2+ Jahre
+        </li>
+      </ul>
+
+      <h3>🧱 Architektur &amp; Software Design</h3>
+      <ul>
+        <li>
+          {/* 2018-… */}
+          Software-Architektur &amp; Systemdesign – 8+ Jahre
+        </li>
+        <li>
+          {/* 2018-… */}
+          Modulare Systeme &amp; Multitenancy-Architekturen – 8+ Jahre
+        </li>
+        <li>
+          {/* 2018-… */}
+          Clean Code, Wartbarkeit &amp; Skalierbarkeit – 8+ Jahre
+        </li>
+      </ul>
+
+      <h3>🔁 Methoden &amp; Projektarbeit</h3>
+      <ul>
+        <li>
+          {/* 2014-… */}
+          Agile Entwicklung (Scrum) – 12+ Jahre
+        </li>
+        <li>
+          {/* 2018-2024 */}
+          Technische Projektverantwortung – 7+ Jahre
+        </li>
+        <li>
+          {/* 2024-… */}
+          Kundenberatung &amp; technische Abstimmung – 2+ Jahre
+        </li>
+        <li>
+          {/* 2018-… */}
+          Code Reviews &amp; technische Qualitätssicherung – 8+ Jahre
+        </li>
+      </ul>
+
+      <h3>🧪 Weitere Technologien &amp; Interessen</h3>
+      <ul>
+        <li>
+          {/* 2024-… */}
+          Mentoring &amp; Wissensvermittlung im Team – 2+ Jahre
+        </li>
+        <li>
+          {/* 2014-… */}
+          Git &amp; GitHub (Open Source, Versionskontrolle) – 12+ Jahre
+        </li>
+        <li>
+          Betriebssysteme: Linux (Daily Driver privat), Windows (Daily Driver
+          Arbeit)
+        </li>
+        <li>
+          Weitere Sprachen, Frameworks und Tools: Ruby, Rust, LaTeX, Lua,
+          treesitter, Shell, Python, C/C++, SSH, systemd, cron, Vim, Neovim
+        </li>
+        <li>
+          Interesse an 3D-Grafik: 3D Modellierung, Blender, Grundkonzepte
+          3D-Renderer
+        </li>
+      </ul>
+
+      <p style="text-align: center">
+        <a
+          title="Besuche mich auf meiner Webseite"
+          href="https://kmoschcau.de/"
+          target="_blank"
+          rel="nofollow noopener">🔗&nbsp;kmoschcau.de</a
+        >
+        |
+        <a
+          title="Besuche mich auf LinkedIn"
+          href="https://www.linkedin.com/in/kmoschcau/"
+          target="_blank"
+          rel="nofollow noopener">🔗&nbsp;linkedin.com/in/kmoschcau</a
+        >
+        |
+        <a
+          title="Finde mich auf GitHub"
+          href="https://github.com/kmoschcau/"
+          target="_blank"
+          rel="nofollow noopener">🔗&nbsp;github.com/kmoschcau</a
+        >
+        |
+        <a
+          title="Lade dir meine Kontaktdaten herunter"
+          href="https://vcard.blecon.de/kai.moschcau"
+          target="_blank"
+          rel="nofollow noopener">🔗&nbsp;vcard.blecon.de/kai.moschcau</a
+        >
+      </p>
+    </article>
+  </main>
 </BaseLayout>

src/styles/global.css

@@ -1,4 +1,5 @@
 @import "tailwindcss";
+@plugin "@tailwindcss/typography";
 
 @theme {
   --color-background-dark: oklch(from var(--color-violet-950) 24% 0.08 h);
@@ -34,7 +35,7 @@
 
 @layer base {
   body {
-    @apply dark:bg-background-dark bg-neutral-50 text-black dark:text-white;
+    @apply dark:bg-background-dark bg-neutral-50 text-zinc-900 dark:text-zinc-50;
   }
 
   h1 {