feat(skills): auto-calc years experience and add back arrow

src/duration-utils.ts

@@ -0,0 +1,11 @@
+const UNIX_EPOCH_YEAR = 1970;
+
+export function getDurationInYearsBetween(start: Date, end: Date): number {
+  return (
+    new Date(end.getTime() - start.getTime()).getUTCFullYear() - UNIX_EPOCH_YEAR
+  );
+}
+
+export function getDurationInYearsFrom(from: Date): number {
+  return getDurationInYearsBetween(from, new Date());
+}

src/icons/back.svg

@@ -0,0 +1,8 @@
+<svg role="presentation" viewBox="0 0 100 100">
+  <g fill="none" stroke="currentColor" stroke-width="4">
+    <circle cx="50" cy="50" r="48" />
+    <line x1="25" x2="75" y1="50" y2="50" />
+    <line x1="25" x2="50" y1="50" y2="25" />
+    <line x1="25" x2="50" y1="50" y2="75" />
+  </g>
+</svg>

src/pages/index.astro

@@ -11,7 +11,7 @@ import portrait from "../images/portrait.jpg";
 import BaseLayout from "../layouts/BaseLayout.astro";
 ---
 
-<BaseLayout>
+<BaseLayout title="kmoschcau.de">
   <main>
     <article class="flex flex-col items-center gap-10">
       <Image

src/pages/skills.astro

@@ -1,219 +1,217 @@
 ---
+import BackIcon from "../icons/back.svg";
 import BaseLayout from "../layouts/BaseLayout.astro";
+import {
+  getDurationInYearsBetween as between,
+  getDurationInYearsFrom as from,
+} from "../duration-utils";
+
+const trStart = new Date(2011, 7, 1);
+
+const trustStart = new Date(2014, 6, 1);
+const migrEnd = new Date(2017, 0, 0);
+
+const cbtStart = new Date(2018, 0, 1);
+
+const pfmStart = new Date(2020, 0, 1);
+
+const cbtEnd = new Date(2023, 7, 0);
+const cbt = [cbtStart, cbtEnd] as const;
+
+const mcB2cStart = new Date(2023, 10, 1);
+const mcB2cEnd = new Date(2024, 5, 0);
+
+const bpStart = new Date(2024, 5, 1);
+const bpEnd = new Date(2025, 1, 0);
+const bp = [bpStart, bpEnd] as const;
+
+const kcStart = new Date(2026, 0, 1);
 ---
 
-<BaseLayout>
-  <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
+<BaseLayout title="kmoschcau.de | Skills">
+  <main class="flex items-center justify-center">
+    <article>
+      <div class="mb-8 flex items-baseline gap-6">
+        <a href="/" title="Zurück" class="text-soft"
+          ><BackIcon class="size-9" /></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>
+        <h1>Skills</h1>
+      </div>
+      <div class="prose prose-zinc dark:prose-invert">
+        <section>
+          <h2>💻 Softwareentwicklung &amp; Technologien</h2>
+          <ul>
+            <li>
+              Webentwicklung – {from(cbtStart)}+ 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>
+              Frontend-Frameworks – {from(cbtStart)}+ 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>
+              Java – {between(...cbt) + from(kcStart)}+ 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>
+              C# - {from(pfmStart)}+ 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>
+              REST-APIs &amp; Backend-Services - {from(cbtStart)}+ Jahre<br />
+              (Schnittstellenkonzeption, REST, SignalR, WebSockets)
+            </li>
+          </ul>
+        </section>
+
+        <section>
+          <h2>🛡️ IT-Sicherheit</h2>
+          <ul>
+            <li>
+              Sichere Anwendungsentwicklung &amp; Design – {from(cbtStart)}+
+              Jahre<br />
+              (OWASP, SSDLC, Threat Modeling, Web App Security)
+            </li>
+            <li>
+              Authentication &amp; Authorization – {from(cbtStart)}+ Jahre<br />
+              (in-App &amp; extern)<br />
+              (OAuth2, OIDC, Keycloak)
+            </li>
+            <li>
+              Observability im Betrieb – {from(cbtStart)}+ Jahre<br />
+              (Log-Analyse und statistische Auswertung, Telemetrie und Alarme)
+            </li>
+            <li>
+              Sicherheits-Analyse und Tests – {between(...cbt)}+ Jahre<br />
+              (statische und Dynamische Code Analyse, manuelles Penetration Testing)<br
+              />
+              (SonarQube, Veracode, Qualys, Zed Attack Proxy)
+            </li>
+          </ul>
+        </section>
+
+        <section>
+          <h2>☁️ Cloud, DevOps &amp; Betrieb</h2>
+          <ul>
+            <li>
+              Public, Private &amp; Clouds – {between(cbtStart, mcB2cEnd)}+
+              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>
+              CI/CD &amp; DevOps – {from(cbtStart)}+ Jahre<br />
+              (Git, GitHub Actions, GitLab, Gitrunner, Azure DevOps, Jenkins)
+            </li>
+            <li>
+              Containerisierung &amp; Images – {from(cbtStart)}+ Jahre<br />
+              (Docker, Docker Compose, Kubernetes, Helm, HashiCorp Packer)
+            </li>
+            <li>
+              Deployment- &amp; Release-Management – {from(cbtStart)}+ Jahre
+            </li>
+          </ul>
+        </section>
+
+        <section>
+          <h2>🗄️ Datenbanken &amp; Persistence</h2>
+          <ul>
+            <li>
+              Relationale Datenbanken – {from(trustStart)}+ Jahre<br />
+              (MySQL, Oracle DB, Microsoft SQL Server, SQLite, PostgreSQL)
+            </li>
+            <li>
+              Datenmodellierung &amp; Performance-Optimierung – {
+                between(...cbt) + between(...bp)
+              }+ Jahre
+            </li>
+            <li>
+              Data Warehousing – {between(trustStart, migrEnd)}+ Jahre
+            </li>
+          </ul>
+        </section>
+
+        <section>
+          <h2>🧱 Architektur &amp; Software Design</h2>
+          <ul>
+            <li>
+              Software-Architektur &amp; Systemdesign – {from(cbtStart)}+ Jahre
+            </li>
+            <li>
+              Modulare Systeme &amp; Multitenancy-Architekturen – {
+                from(cbtStart)
+              }+ Jahre
+            </li>
+            <li>
+              Clean Code, Wartbarkeit &amp; Skalierbarkeit – {from(cbtStart)}+
+              Jahre
+            </li>
+          </ul>
+        </section>
+
+        <section>
+          <h2>🔁 Methoden &amp; Projektarbeit</h2>
+          <ul>
+            <li>
+              Agile Entwicklung (Scrum) – {from(trustStart)}+ Jahre
+            </li>
+            <li>
+              Technische Projektverantwortung – {
+                between(...cbt) + between(...bp) + from(kcStart)
+              }+ Jahre
+            </li>
+            <li>
+              Kundenberatung &amp; technische Abstimmung – {from(mcB2cStart)}+
+              Jahre
+            </li>
+            <li>
+              Code Reviews &amp; technische Qualitätssicherung – {
+                from(cbtStart)
+              }+ Jahre
+            </li>
+          </ul>
+        </section>
+
+        <section>
+          <h2>🧪 Weitere Technologien &amp; Interessen</h2>
+          <ul>
+            <li>
+              Mentoring &amp; Wissensvermittlung im Team – {from(mcB2cStart)}+
+              Jahre
+            </li>
+            <li>
+              Git &amp; GitHub (Open Source, Versionskontrolle) – {
+                from(trStart)
+              }+ 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>
+        </section>
+      </div>
     </article>
   </main>
 </BaseLayout>