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,179 +1,205 @@
 ---
+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>
+<BaseLayout title="kmoschcau.de | Skills">
-  <a href="/">Back</a>
+  <main class="flex items-center justify-center">
-  <main>
+    <article>
-    <article class="prose prose-zinc dark:prose-invert lg:prose-xl">
+      <div class="mb-8 flex items-baseline gap-6">
-      <h1>Kai Moschcau</h1>
+        <a href="/" title="Zurück" class="text-soft"
-      <h2>Meine Skills und was ich die letzten Jahre getrieben habe</h2>
+          ><BackIcon class="size-9" /></a
-      <p>
+        >
-        Hier siehst du auf einen Blick, wo ich meine Stärken habe und welche
+        <h1>Skills</h1>
-        Technologien und Methoden in Projekten aktiv einsetzt wurden.<br />
+      </div>
-        Die Übersicht zeigt, wie ich mit meinem Know-how deine Projekte voran bringe
+      <div class="prose prose-zinc dark:prose-invert">
-        - von der Entwicklung über Architektur bis hin zur Team- und Kundenarbeit.
+        <section>
-      </p>
+          <h2>💻 Softwareentwicklung &amp; Technologien</h2>
-
-      <h3>💻 Softwareentwicklung &amp; Technologien</h3>
           <ul>
             <li>
-          {/* 2018-… */}
+              Webentwicklung – {from(cbtStart)}+ Jahre<br />
-          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,
+              (HTML, CSS, JavaScript, Typescript, TailwindCSS, daisyUI, SASS, vite,
-          jQuery, drizzle ORM, Mocha, Chai, Jest)
+              WebSocket, jQuery, drizzle ORM, Mocha, Chai, Jest)
             </li>
             <li>
-          {/* 2018-… */}
+              Frontend-Frameworks – {from(cbtStart)}+ Jahre<br />
-          Frontend-Frameworks – 8+ Jahre<br />
+              (Erweitern und Umbauen von statischen Web-App Frontends in reactive
-          (Erweitern und Umbauen von statischen Web-App Frontends in reactive Frontends,
+              Frontends, Neubau von reaktiven Frontends)<br />
-          Neubau von reaktiven Frontends)<br />
               (Vue 2, Vue 3, Svelte, SvelteKit, React)
             </li>
             <li>
-          {/* 2018-2023, 2026 */}
+              Java – {between(...cbt) + from(kcStart)}+ Jahre<br />
-          Java – 6+ Jahre<br />
+              (Enterprise B2B und B2C Web-Anwendungen, Web-APIs, Keycloak-Plugins,
-          (Enterprise B2B und B2C Web-Anwendungen, Web-APIs, Keycloak-Plugins, saubere
+              saubere Architekturen, Web App Security)<br />
-          Architekturen, Web App Security)<br />
+              (Spring Boot, Spring MVC, Spring Security, Hibernate, JPA, Freemarker,
-          (Spring Boot, Spring MVC, Spring Security, Hibernate, JPA, Freemarker, Thymeleaf,
+              Thymeleaf, JSP, REST, JUnit, Mockito, Gradle, Maven)
-          JSP, REST, JUnit, Mockito, Gradle, Maven)
             </li>
             <li>
-          {/* 2020-… */}
+              C# - {from(pfmStart)}+ Jahre<br />
-          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 - {from(cbtStart)}+ Jahre<br />
-          REST-APIs &amp; Backend-Services - 8+ Jahre<br />
               (Schnittstellenkonzeption, REST, SignalR, WebSockets)
             </li>
           </ul>
+        </section>
 
-      <h3>🛡️ IT-Sicherheit</h3>
+        <section>
+          <h2>🛡️ IT-Sicherheit</h2>
           <ul>
             <li>
-          {/* 2018-… */}
+              Sichere Anwendungsentwicklung &amp; Design – {from(cbtStart)}+
-          Sichere Anwendungsentwicklung &amp; Design – 8+ Jahre<br />
+              Jahre<br />
               (OWASP, SSDLC, Threat Modeling, Web App Security)
             </li>
             <li>
-          {/* 2018-… */}
+              Authentication &amp; Authorization – {from(cbtStart)}+ Jahre<br />
-          Authentication &amp; Authorization – 8+ Jahre<br />
               (in-App &amp; extern)<br />
               (OAuth2, OIDC, Keycloak)
             </li>
             <li>
-          {/* 2018-… */}
+              Observability im Betrieb – {from(cbtStart)}+ Jahre<br />
-          Observability im Betrieb – 8+ Jahre<br />
               (Log-Analyse und statistische Auswertung, Telemetrie und Alarme)
             </li>
             <li>
-          {/* 2018-2023 */}
+              Sicherheits-Analyse und Tests – {between(...cbt)}+ Jahre<br />
-          Sicherheits-Analyse und Tests – 5+ Jahre<br />
               (statische und Dynamische Code Analyse, manuelles Penetration Testing)<br
               />
               (SonarQube, Veracode, Qualys, Zed Attack Proxy)
             </li>
           </ul>
+        </section>
 
-      <h3>☁️ Cloud, DevOps &amp; Betrieb</h3>
+        <section>
+          <h2>☁️ Cloud, DevOps &amp; Betrieb</h2>
           <ul>
             <li>
-          {/* 2018-2024 */}
+              Public, Private &amp; Clouds – {between(cbtStart, mcB2cEnd)}+
-          Public, Private &amp; Clouds – 7+ Jahre<br />
+              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 – {from(cbtStart)}+ Jahre<br />
-          CI/CD &amp; DevOps – 8+ Jahre<br />
               (Git, GitHub Actions, GitLab, Gitrunner, Azure DevOps, Jenkins)
             </li>
             <li>
-          {/* 2018-… */}
+              Containerisierung &amp; Images – {from(cbtStart)}+ Jahre<br />
-          Containerisierung &amp; Images – 8+ Jahre<br />
               (Docker, Docker Compose, Kubernetes, Helm, HashiCorp Packer)
             </li>
             <li>
-          {/* 2018-… */}
+              Deployment- &amp; Release-Management – {from(cbtStart)}+ Jahre
-          Deployment- &amp; Release-Management – 8+ Jahre
             </li>
           </ul>
+        </section>
 
-      <h3>🗄️ Datenbanken &amp; Persistence</h3>
+        <section>
+          <h2>🗄️ Datenbanken &amp; Persistence</h2>
           <ul>
             <li>
-          {/* 2015-… */}
+              Relationale Datenbanken – {from(trustStart)}+ Jahre<br />
-          Relationale Datenbanken – 11+ Jahre<br />
               (MySQL, Oracle DB, Microsoft SQL Server, SQLite, PostgreSQL)
             </li>
             <li>
-          {/* 2018-2024… */}
+              Datenmodellierung &amp; Performance-Optimierung – {
-          Datenmodellierung &amp; Performance-Optimierung – 6+ Jahre
+                between(...cbt) + between(...bp)
+              }+ Jahre
             </li>
             <li>
-          {/* 2014-2016 */}
+              Data Warehousing – {between(trustStart, migrEnd)}+ Jahre
-          Data Warehousing – 2+ Jahre
             </li>
           </ul>
+        </section>
 
-      <h3>🧱 Architektur &amp; Software Design</h3>
+        <section>
+          <h2>🧱 Architektur &amp; Software Design</h2>
           <ul>
             <li>
-          {/* 2018-… */}
+              Software-Architektur &amp; Systemdesign – {from(cbtStart)}+ Jahre
-          Software-Architektur &amp; Systemdesign – 8+ Jahre
             </li>
             <li>
-          {/* 2018-… */}
+              Modulare Systeme &amp; Multitenancy-Architekturen – {
-          Modulare Systeme &amp; Multitenancy-Architekturen – 8+ Jahre
+                from(cbtStart)
+              }+ Jahre
             </li>
             <li>
-          {/* 2018-… */}
+              Clean Code, Wartbarkeit &amp; Skalierbarkeit – {from(cbtStart)}+
-          Clean Code, Wartbarkeit &amp; Skalierbarkeit – 8+ Jahre
+              Jahre
             </li>
           </ul>
+        </section>
 
-      <h3>🔁 Methoden &amp; Projektarbeit</h3>
+        <section>
+          <h2>🔁 Methoden &amp; Projektarbeit</h2>
           <ul>
             <li>
-          {/* 2014-… */}
+              Agile Entwicklung (Scrum) – {from(trustStart)}+ Jahre
-          Agile Entwicklung (Scrum) – 12+ Jahre
             </li>
             <li>
-          {/* 2018-2024 */}
+              Technische Projektverantwortung – {
-          Technische Projektverantwortung – 7+ Jahre
+                between(...cbt) + between(...bp) + from(kcStart)
+              }+ Jahre
             </li>
             <li>
-          {/* 2024-… */}
+              Kundenberatung &amp; technische Abstimmung – {from(mcB2cStart)}+
-          Kundenberatung &amp; technische Abstimmung – 2+ Jahre
+              Jahre
             </li>
             <li>
-          {/* 2018-… */}
+              Code Reviews &amp; technische Qualitätssicherung – {
-          Code Reviews &amp; technische Qualitätssicherung – 8+ Jahre
+                from(cbtStart)
+              }+ Jahre
             </li>
           </ul>
+        </section>
 
-      <h3>🧪 Weitere Technologien &amp; Interessen</h3>
+        <section>
+          <h2>🧪 Weitere Technologien &amp; Interessen</h2>
           <ul>
             <li>
-          {/* 2024-… */}
+              Mentoring &amp; Wissensvermittlung im Team – {from(mcB2cStart)}+
-          Mentoring &amp; Wissensvermittlung im Team – 2+ Jahre
+              Jahre
             </li>
             <li>
-          {/* 2014-… */}
+              Git &amp; GitHub (Open Source, Versionskontrolle) – {
-          Git &amp; GitHub (Open Source, Versionskontrolle) – 12+ Jahre
+                from(trStart)
+              }+ Jahre
             </li>
             <li>
-          Betriebssysteme: Linux (Daily Driver privat), Windows (Daily Driver
+              Betriebssysteme: Linux (Daily Driver privat), Windows (Daily
-          Arbeit)
+              Driver Arbeit)
             </li>
             <li>
               Weitere Sprachen, Frameworks und Tools: Ruby, Rust, LaTeX, Lua,
@@ -184,36 +210,8 @@ import BaseLayout from "../layouts/BaseLayout.astro";
               3D-Renderer
             </li>
           </ul>
-
+        </section>
-      <p style="text-align: center">
+      </div>
-        <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>