style: fix linting complaints

feat: add PGP fingerprint
feat: mention astro in web dev frameworks
2026-04-02 18:43:51 +02:00 · 2026-04-02 18:33:53 +02:00 · 2026-04-02 18:28:16 +02:00 · 2026-04-02 18:26:20 +02:00 · 2026-04-02 18:22:44 +02:00 · 2026-04-02 17:54:58 +02:00
18 changed files with 195 additions and 79 deletions
--- a/.markuplintrc.json
+++ b/.markuplintrc.json
@@ -2,5 +2,8 @@
  "extends": ["markuplint:recommended-static-html"],
  "parser": {
    ".astro$": "@markuplint/astro-parser"
+  },
+  "rules": {
+    "use-list": false
  }
 }
--- a/.stylelintignore
+++ b/.stylelintignore
@@ -2,11 +2,17 @@

 /dist/

+*.html
 *.ico
+*.jpg
+*.js
 *.json
 *.md
 *.mjs
+*.mts
 *.png
 *.svg
+*.ts
+*.vim
 *.webp
 *.yaml
--- a/astro.config.mjs
+++ b/astro.config.mjs
@@ -1,6 +1,6 @@
 // @ts-check
-import { defineConfig } from "astro/config";
 import tailwindcss from "@tailwindcss/vite";
+import { defineConfig } from "astro/config";

 // https://astro.build/config
 export default defineConfig({
--- a/eslint.config.mjs
+++ b/eslint.config.mjs
@@ -1,12 +1,12 @@
 import js from "@eslint/js";
 import eslintPluginAstro from "eslint-plugin-astro";
+import jsxA11y from "eslint-plugin-jsx-a11y";
 import eslintPluginPrettierRecommended from "eslint-plugin-prettier/recommended";
 import { defineConfig } from "eslint/config";
-import jsxA11y from "eslint-plugin-jsx-a11y";

 export default defineConfig([
  {
-    ignores: ["./dist/"],
+    ignores: ["./dist/", "**/*.html"],
  },

  {
--- a/package.json
+++ b/package.json
@@ -37,6 +37,7 @@
    "postcss-html": "^1.8.1",
    "prettier": "^3.8.1",
    "prettier-plugin-astro": "^0.14.1",
+    "prettier-plugin-organize-imports": "^4.3.0",
    "prettier-plugin-tailwindcss": "^0.7.2",
    "sharp": "^0.34.5",
    "stylelint": "^17.5.0",
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -72,9 +72,12 @@ importers:
      prettier-plugin-astro:
        specifier: ^0.14.1
        version: 0.14.1
+      prettier-plugin-organize-imports:
+        specifier: ^4.3.0
+        version: 4.3.0(prettier@3.8.1)(typescript@5.9.3)
      prettier-plugin-tailwindcss:
        specifier: ^0.7.2
-        version: 0.7.2(prettier-plugin-astro@0.14.1)(prettier@3.8.1)
+        version: 0.7.2(prettier-plugin-astro@0.14.1)(prettier-plugin-organize-imports@4.3.0(prettier@3.8.1)(typescript@5.9.3))(prettier@3.8.1)
      sharp:
        specifier: ^0.34.5
        version: 0.34.5
@@ -2939,6 +2942,16 @@ packages:
    resolution: {integrity: sha512-RiBETaaP9veVstE4vUwSIcdATj6dKmXljouXc/DDNwBSPTp8FRkLGDSGFClKsAFeeg+13SB0Z1JZvbD76bigJw==}
    engines: {node: ^14.15.0 || >=16.0.0}

+  prettier-plugin-organize-imports@4.3.0:
+    resolution: {integrity: sha512-FxFz0qFhyBsGdIsb697f/EkvHzi5SZOhWAjxcx2dLt+Q532bAlhswcXGYB1yzjZ69kW8UoadFBw7TyNwlq96Iw==}
+    peerDependencies:
+      prettier: '>=2.0'
+      typescript: '>=2.9'
+      vue-tsc: ^2.1.0 || 3
+    peerDependenciesMeta:
+      vue-tsc:
+        optional: true
+
  prettier-plugin-tailwindcss@0.7.2:
    resolution: {integrity: sha512-LkphyK3Fw+q2HdMOoiEHWf93fNtYJwfamoKPl7UwtjFQdei/iIBoX11G6j706FzN3ymX9mPVi97qIY8328vdnA==}
    engines: {node: '>=20.19'}
@@ -6885,11 +6898,17 @@ snapshots:
      prettier: 3.8.1
      sass-formatter: 0.7.9

-  prettier-plugin-tailwindcss@0.7.2(prettier-plugin-astro@0.14.1)(prettier@3.8.1):
+  prettier-plugin-organize-imports@4.3.0(prettier@3.8.1)(typescript@5.9.3):
+    dependencies:
+      prettier: 3.8.1
+      typescript: 5.9.3
+
+  prettier-plugin-tailwindcss@0.7.2(prettier-plugin-astro@0.14.1)(prettier-plugin-organize-imports@4.3.0(prettier@3.8.1)(typescript@5.9.3))(prettier@3.8.1):
    dependencies:
      prettier: 3.8.1
    optionalDependencies:
      prettier-plugin-astro: 0.14.1
+      prettier-plugin-organize-imports: 4.3.0(prettier@3.8.1)(typescript@5.9.3)

  prettier@3.8.1: {}

--- a/prettier.config.mjs
+++ b/prettier.config.mjs
@@ -1,6 +1,10 @@
 /** @type {import("prettier").Config} */
 export default {
-  plugins: ["prettier-plugin-astro", "prettier-plugin-tailwindcss"],
+  plugins: [
+    "prettier-plugin-astro",
+    "prettier-plugin-organize-imports",
+    "prettier-plugin-tailwindcss",
+  ],

  overrides: [
    {
--- a/src/components/button-link.astro
+++ b/src/components/button-link.astro
@@ -0,0 +1,21 @@
+---
+import type { HTMLAttributes } from "astro/types";
+import { getRel } from "../link-utils";
+
+interface Props extends HTMLAttributes<"a"> {
+  /** Whether this link should use defaults for external links. */
+  external?: boolean | "me" | null | undefined;
+}
+
+const { class: className, external, target, rel, ...rest } = Astro.props;
+---
+
+<a
+  class:list={[
+    className,
+    "flex min-w-full items-center justify-center gap-4 rounded px-6 py-2 text-lg outline-offset-2 sm:px-24",
+  ]}
+  target={target ?? (external ? "_blank" : undefined)}
+  rel={rel ?? getRel(external)}
+  {...rest}><slot name="logo" /><slot /></a
+>
--- a/src/components/external-link.astro
+++ b/src/components/external-link.astro
@@ -1,22 +0,0 @@
---
-import type { HTMLAttributes } from "astro/types";
-
-interface Props extends HTMLAttributes<"a"> {
-  cssClass: string;
-  href: string;
-  title: string;
-}
-
-const { cssClass, href, title } = Astro.props;
---
-
-<a
-  class:list={[
-    cssClass,
-    "flex min-w-full items-center justify-center gap-4 rounded px-6 py-2 text-lg sm:px-24",
-  ]}
-  {href}
-  {title}
-  target="_blank"
-  rel="external me noreferrer"><slot name="logo" /><slot /></a
->
--- a/src/components/inline-link.astro
+++ b/src/components/inline-link.astro
@@ -0,0 +1,24 @@
+---
+import type { HTMLAttributes } from "astro/types";
+import ExternalIcon from "../icons/arrow-top-right-on-square.svg";
+import InlineSvg from "./inline-svg.astro";
+import { getRel } from "../link-utils";
+
+interface Props extends HTMLAttributes<"a"> {
+  /** Whether this link should use defaults for external links. */
+  external?: boolean | "me" | null | undefined;
+}
+
+const { external, target, rel, ...rest } = Astro.props;
+---
+
+<a
+  target={target ?? (external ? "_blank" : undefined)}
+  rel={rel ?? getRel(external)}
+  {...rest}
+  ><slot />{
+    external ? (
+      <InlineSvg SvgComponent={ExternalIcon} class="ms-1" />
+    ) : undefined
+  }</a
+>
--- a/src/components/inline-svg.astro
+++ b/src/components/inline-svg.astro
@@ -1,17 +1,16 @@
 ---
-import type { SvgComponent } from "astro/types";
+import type { HTMLAttributes, SvgComponent } from "astro/types";

-interface Props {
+interface Props extends HTMLAttributes<"svg"> {
  SvgComponent: SvgComponent;
-  size?: number;
 }

-const { size = 24, SvgComponent } = Astro.props;
+const {
+  SvgComponent,
+  class: className,
+  role = "presentation",
+  ...rest
+} = Astro.props;
 ---

-<SvgComponent
-  height={size}
-  width={size}
-  fill="currentColor"
-  role="presentation"
-/>
+<SvgComponent class:list={[className, "inline h-[1em]"]} {role} {...rest} />
--- a/src/icons/arrow-left-circle.svg
+++ b/src/icons/arrow-left-circle.svg
@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="size-6">
+  <path stroke-linecap="round" stroke-linejoin="round" d="m11.25 9-3 3m0 0 3 3m-3-3h7.5M21 12a9 9 0 1 1-18 0 9 9 0 0 1 18 0Z" />
+</svg>
--- a/src/icons/arrow-top-right-on-square.svg
+++ b/src/icons/arrow-top-right-on-square.svg
@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor">
+  <path stroke-linecap="round" stroke-linejoin="round" d="M13.5 6H5.25A2.25 2.25 0 0 0 3 8.25v10.5A2.25 2.25 0 0 0 5.25 21h10.5A2.25 2.25 0 0 0 18 18.75V10.5m-10.5 6L21 3m0 0h-5.25M21 3v5.25" />
+</svg>
--- a/src/icons/back.svg
+++ b/src/icons/back.svg
@@ -1,8 +0,0 @@
-<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>
--- a/src/link-utils.ts
+++ b/src/link-utils.ts
@@ -0,0 +1,7 @@
+export function getRel(
+  external: boolean | "me" | null | undefined,
+): string | undefined {
+  return external
+    ? "external nofollow noreferrer".concat(external === "me" ? " me" : "")
+    : undefined;
+}
--- a/src/pages/index.astro
+++ b/src/pages/index.astro
@@ -1,7 +1,7 @@
 ---
 import { Image } from "astro:assets";
-import ExternalLink from "../components/external-link.astro";
-import InlineSvg from "../components/inline-svg.astro";
+import ButtonLink from "../components/button-link.astro";
+import InlineLink from "../components/inline-link.astro";
 import GitHubLogo from "../images/GitHub.svg";
 import GitLabLogo from "../images/GitLab.svg";
 import KeyoxideLogo from "../images/Keyoxide.svg";
@@ -23,63 +23,109 @@ import BaseLayout from "../layouts/BaseLayout.astro";
        height={200}
      />
      <h1>Kai Moschcau</h1>
+      <p class="text-soft">
+        <strong>PGP fingerprint:</strong>
+        <code>0x DF16 F424 1770 90BB</code>
+      </p>
      <section class="text-soft">
-        <p>Fachinformatiker für Anwendungsentwicklung</p>
+        <p><strong>Fachinformatiker</strong> für Anwendungsentwicklung</p>
+        <p><strong>Software Developer &amp; Consultant</strong> @ blecon</p>
      </section>
-      <nav>
+      <nav aria-label="Seitennavigation" class="page-nav">
+        <ul class="flex">
+          <li>
+            <a href="/skills" class="font-medium underline">Skills</a>
+          </li>
+          <li>
+            <InlineLink
+              href="https://blecon.de"
+              external
+              class="font-medium underline">blecon.de</InlineLink
+            >
+          </li>
+        </ul>
+      </nav>
+      <nav aria-label="Externe Links">
        <ul class="flex flex-col gap-2">
          <li>
-            <a href="/skills">Skills</a>
-          </li>
-          <li>
-            <ExternalLink
-              cssClass="link-matrix"
+            <ButtonLink
+              class="link-matrix"
              href="https://matrix.to/#/@kmoschcau:matrix.org"
              title="Mein Matrix-Konto"
+              external="me"
            >
-              <InlineSvg SvgComponent={MatrixLogo} slot="logo" />
+              <MatrixLogo
+                class="size-6"
+                fill="currentColor"
+                role="presentation"
+                slot="logo"
+              />
              <span>@kmoschcau:matrix.org</span>
-            </ExternalLink>
+            </ButtonLink>
          </li>
          <li>
-            <ExternalLink
-              cssClass="link-github"
+            <ButtonLink
+              class="link-github"
              href="https://github.com/kmoschcau/"
              title="Mein GitHub-Konto"
+              external="me"
            >
-              <InlineSvg SvgComponent={GitHubLogo} slot="logo" />
+              <GitHubLogo
+                class="size-6"
+                fill="currentColor"
+                role="presentation"
+                slot="logo"
+              />
              <span>kmoschcau</span>
-            </ExternalLink>
+            </ButtonLink>
          </li>
          <li>
-            <ExternalLink
-              cssClass="link-gitlab"
+            <ButtonLink
+              class="link-gitlab"
              href="https://gitlab.com/kmoschcau"
              title="Mein GitLab-Konto"
+              external="me"
            >
-              <InlineSvg SvgComponent={GitLabLogo} slot="logo" />
+              <GitLabLogo
+                class="size-6"
+                fill="currentColor"
+                role="presentation"
+                slot="logo"
+              />
              <span>kmoschcau</span>
-            </ExternalLink>
+            </ButtonLink>
          </li>
          <li>
-            <ExternalLink
-              cssClass="link-linked-in"
+            <ButtonLink
+              class="link-linked-in"
              href="https://www.linkedin.com/in/kmoschcau/"
              title="Mein LinkedIn-Konto"
+              external="me"
            >
-              <InlineSvg SvgComponent={LinkedInLogo} slot="logo" />
+              <LinkedInLogo
+                class="size-6"
+                fill="currentColor"
+                role="presentation"
+                slot="logo"
+              />
              <span>kmoschcau</span>
-            </ExternalLink>
+            </ButtonLink>
          </li>
          <li>
-            <ExternalLink
-              cssClass="link-keyoxide"
+            <ButtonLink
+              class="link-keyoxide"
              href="https://keyoxide.org/8CE00E9495B5030DA9217208DF16F424177090BB"
              title="Mein Keyoxide-Eintrag"
+              external="me"
            >
-              <InlineSvg SvgComponent={KeyoxideLogo} slot="logo" />
+              <KeyoxideLogo
+                class="size-6"
+                fill="currentColor"
+                role="presentation"
+                slot="logo"
+              />
              <span>Keyoxide</span>
-            </ExternalLink>
+            </ButtonLink>
          </li>
        </ul>
      </nav>
--- a/src/pages/skills.astro
+++ b/src/pages/skills.astro
@@ -1,10 +1,11 @@
 ---
-import BackIcon from "../icons/back.svg";
+import ArrowLeftCircle from "../icons/arrow-left-circle.svg";
 import BaseLayout from "../layouts/BaseLayout.astro";
 import {
  getDurationInYearsBetween as between,
  getDurationInYearsFrom as from,
 } from "../duration-utils";
+import InlineLink from "../components/inline-link.astro";

 const trStart = new Date(2011, 7, 1);

@@ -32,8 +33,12 @@ const kcStart = new Date(2026, 0, 1);
  <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
+          href="/"
+          aria-label="Zurück"
+          title="Zurück"
+          class="text-soft rounded-full"
+          ><ArrowLeftCircle role="presentation" class="size-9" /></a
        >
        <h1>Skills</h1>
      </div>
@@ -52,7 +57,7 @@ const kcStart = new Date(2026, 0, 1);
              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)
+              (Vue 2, Vue 3, Astro, Svelte, SvelteKit, React)
            </li>
            <li>
              Java – {between(...cbt) + from(kcStart)}+ Jahre<br />
@@ -107,9 +112,10 @@ const kcStart = new Date(2026, 0, 1);
            <li>
              Public, Private &amp; Clouds – {between(cbtStart, mcB2cEnd)}+
              Jahre<br />
-              (<a
+              (<InlineLink
                href="https://www.credly.com/badges/e06dda2d-a444-448d-809a-31565c3b8c8d/public_url"
-                >AWS Certified Solutions Architect – Associate</a
+                external="me"
+                >AWS Certified Solutions Architect – Associate</InlineLink
              >, AWS, GCP, Azure, CloudFormation, HashiCorp Terraform)
            </li>
            <li>
--- a/src/styles/global.css
+++ b/src/styles/global.css
@@ -44,6 +44,10 @@
 }

@layer components {
+  .page-nav li:not(:first-child) {
+    @apply ms-2 border-s border-zinc-600 ps-2 dark:border-zinc-400;
+  }
+
  .link-github {
    @apply bg-github hover:bg-github-hover text-white;
  }
Author	SHA1	Message	Date
Kai Moschcau	4aa64a880d	style: fix linting complaints	2026-04-02 18:43:51 +02:00
Kai Moschcau	614a32e0d4	feat: add PGP fingerprint	2026-04-02 18:33:53 +02:00
Kai Moschcau	59525cbde5	feat: mention astro in web dev frameworks	2026-04-02 18:28:16 +02:00
Kai Moschcau	264fe63e9b	feat: expand descriptive paragraph	2026-04-02 18:26:20 +02:00
Kai Moschcau	7d4c8e6cb1	feat: add a link to blecon.de	2026-04-02 18:22:44 +02:00
Kai Moschcau	924af6e200	feat: put link to skills in separate nav	2026-04-02 17:54:58 +02:00
Kai Moschcau	62339b4f33	feat: refactor inline links and use heroicons	2026-04-01 21:03:52 +02:00
Kai Moschcau	d9d87daf7e	feat: make InlineSvg more universal	2026-04-01 20:34:37 +02:00
Kai Moschcau	320035c828	fix: pass through rest props in ButtonLink	2026-04-01 20:12:48 +02:00
Kai Moschcau	92ca1f6feb	refactor: rename ExternalLink to ButtonLink	2026-04-01 20:05:33 +02:00
Kai Moschcau	bfd53b66ec	refactor: ExternalLink component properties	2026-04-01 20:03:20 +02:00
Kai Moschcau	d6aea329fe	style: add prettier-plugin-organize-imports	2026-04-01 19:48:28 +02:00
Kai Moschcau	d5eef87740	feat: set proper rel-attributes to external links	2026-04-01 19:16:12 +02:00
Kai Moschcau	6eb4334691	feat: set up a good looking outline for links	2026-04-01 19:15:40 +02:00