feat: add a link to blecon.de

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/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";
@@ -25,10 +26,17 @@ import BaseLayout from "../layouts/BaseLayout.astro";
       <section class="text-soft">
         <p>Fachinformatiker für Anwendungsentwicklung</p>
       </section>
-      <nav aria-label="Seitennavigation">
+      <nav aria-label="Seitennavigation" class="page-nav">
-        <ul class="flex gap-2">
+        <ul class="flex">
-          <li class="flex justify-center">
+          <li>
-            <a href="/skills" class="underline font-medium">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>
@@ -39,7 +47,7 @@ import BaseLayout from "../layouts/BaseLayout.astro";
               class="link-matrix"
               href="https://matrix.to/#/@kmoschcau:matrix.org"
               title="Mein Matrix-Konto"
-              external
+              external="me"
             >
               <MatrixLogo
                 class="size-6"
@@ -55,7 +63,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"
@@ -71,7 +79,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"
@@ -87,7 +95,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"
@@ -103,7 +111,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,7 +33,11 @@ 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="/" aria-label="Zurück" title="Zurück" class="text-soft rounded-full"
+        <a
+          href="/"
+          aria-label="Zurück"
+          title="Zurück"
+          class="text-soft rounded-full"
           ><ArrowLeftCircle role="presentation" class="size-9" /></a
         >
         <h1>Skills</h1>
@@ -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;
   }