style: fix linting complaints

.markuplintrc.json

@@ -2,5 +2,8 @@
   "extends": ["markuplint:recommended-static-html"],
   "parser": {
     ".astro$": "@markuplint/astro-parser"
+  },
+  "rules": {
+    "use-list": false
   }
 }

.stylelintignore

@@ -2,11 +2,17 @@
 
 /dist/
 
+*.html
 *.ico
+*.jpg
+*.js
 *.json
 *.md
 *.mjs
+*.mts
 *.png
 *.svg
+*.ts
+*.vim
 *.webp
 *.yaml

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({

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"],
   },
 
   {

src/components/button-link.astro

@@ -1,9 +1,10 @@
 ---
 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 | null | undefined;
+  external?: boolean | "me" | null | undefined;
 }
 
 const { class: className, external, target, rel, ...rest } = Astro.props;
@@ -15,6 +16,6 @@ const { class: className, external, target, rel, ...rest } = Astro.props;
     "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 ?? (external ? "external me nofollow noreferrer" : undefined)}
+  rel={rel ?? getRel(external)}
   {...rest}><slot name="logo" /><slot /></a
 >

src/components/inline-link.astro

@@ -2,10 +2,11 @@
 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 | null | undefined;
+  external?: boolean | "me" | null | undefined;
 }
 
 const { external, target, rel, ...rest } = Astro.props;
@@ -13,7 +14,7 @@ const { external, target, rel, ...rest } = Astro.props;
 
 <a
   target={target ?? (external ? "_blank" : undefined)}
-  rel={rel ?? (external ? "external me nofollow noreferrer" : undefined)}
+  rel={rel ?? getRel(external)}
   {...rest}
   ><slot />{
     external ? (

src/components/inline-svg.astro

@@ -13,8 +13,4 @@ const {
 } = Astro.props;
 ---
 
-<SvgComponent
+<SvgComponent class:list={[className, "inline h-[1em]"]} {role} {...rest} />
-  class:list={[className, "inline h-[1em]"]}
-  {role}
-  {...rest}
-/>

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;
+}

src/pages/index.astro

@@ -1,6 +1,7 @@
 ---
 import { Image } from "astro:assets";
 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";
@@ -22,20 +23,36 @@ 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 flex-col gap-2">
+        <ul class="flex">
           <li>
-            <a href="/skills">Skills</a>
+            <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>
             <ButtonLink
               class="link-matrix"
               href="https://matrix.to/#/@kmoschcau:matrix.org"
               title="Mein Matrix-Konto"
-              external
+              external="me"
             >
               <MatrixLogo
                 class="size-6"
@@ -51,7 +68,7 @@ import BaseLayout from "../layouts/BaseLayout.astro";
               class="link-github"
               href="https://github.com/kmoschcau/"
               title="Mein GitHub-Konto"
-              external
+              external="me"
             >
               <GitHubLogo
                 class="size-6"
@@ -67,7 +84,7 @@ import BaseLayout from "../layouts/BaseLayout.astro";
               class="link-gitlab"
               href="https://gitlab.com/kmoschcau"
               title="Mein GitLab-Konto"
-              external
+              external="me"
             >
               <GitLabLogo
                 class="size-6"
@@ -83,7 +100,7 @@ import BaseLayout from "../layouts/BaseLayout.astro";
               class="link-linked-in"
               href="https://www.linkedin.com/in/kmoschcau/"
               title="Mein LinkedIn-Konto"
-              external
+              external="me"
             >
               <LinkedInLogo
                 class="size-6"
@@ -99,7 +116,7 @@ import BaseLayout from "../layouts/BaseLayout.astro";
               class="link-keyoxide"
               href="https://keyoxide.org/8CE00E9495B5030DA9217208DF16F424177090BB"
               title="Mein Keyoxide-Eintrag"
-              external
+              external="me"
             >
               <KeyoxideLogo
                 class="size-6"

src/pages/skills.astro

@@ -33,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 rounded-full"
+        <a
-          ><ArrowLeftCircle class="size-9" /></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>
@@ -53,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 />
@@ -110,7 +114,7 @@ const kcStart = new Date(2026, 0, 1);
               Jahre<br />
               (<InlineLink
                 href="https://www.credly.com/badges/e06dda2d-a444-448d-809a-31565c3b8c8d/public_url"
-                external
+                external="me"
                 >AWS Certified Solutions Architect – Associate</InlineLink
               >, AWS, GCP, Azure, CloudFormation, HashiCorp Terraform)
             </li>

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;
   }