feat: add GitLab and LinkedIn links

.cspell.yaml

@@ -10,6 +10,7 @@ ignorePaths:
 words:
   - dockervolumes
   - github
+  - gitlab
   - grayscale
   - keyoxide
   - kmoschcau

src/images/GitLab.svg

@@ -0,0 +1 @@
+<svg role="img" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><title>GitLab</title><path d="m23.6004 9.5927-.0337-.0862L20.3.9814a.851.851 0 0 0-.3362-.405.8748.8748 0 0 0-.9997.0539.8748.8748 0 0 0-.29.4399l-2.2055 6.748H7.5375l-2.2057-6.748a.8573.8573 0 0 0-.29-.4412.8748.8748 0 0 0-.9997-.0537.8585.8585 0 0 0-.3362.4049L.4332 9.5015l-.0325.0862a6.0657 6.0657 0 0 0 2.0119 7.0105l.0113.0087.03.0213 4.976 3.7264 2.462 1.8633 1.4995 1.1321a1.0085 1.0085 0 0 0 1.2197 0l1.4995-1.1321 2.4619-1.8633 5.006-3.7489.0125-.01a6.0682 6.0682 0 0 0 2.0094-7.003z"/></svg>

src/images/LinkedIn.svg

@@ -0,0 +1,5 @@
+<svg xmlns="http://www.w3.org/2000/svg" height="1em"
+  viewBox="0 0 448 512"><!--! Font Awesome Free 6.4.2 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2023 Fonticons, Inc. -->
+  <path
+    d="M416 32H31.9C14.3 32 0 46.5 0 64.3v383.4C0 465.5 14.3 480 31.9 480H416c17.6 0 32-14.5 32-32.3V64.3c0-17.8-14.4-32.3-32-32.3zM135.4 416H69V202.2h66.5V416zm-33.2-243c-21.3 0-38.5-17.3-38.5-38.5S80.9 96 102.2 96c21.2 0 38.5 17.3 38.5 38.5 0 21.3-17.2 38.5-38.5 38.5zm282.1 243h-66.4V312c0-24.8-.5-56.7-34.5-56.7-34.6 0-39.9 27-39.9 54.9V416h-66.4V202.2h63.7v29.2h.9c8.9-16.8 30.6-34.5 62.9-34.5 67.2 0 79.7 44.3 79.7 101.9V416z" />
+</svg>

src/pages/index.astro

@@ -3,7 +3,9 @@ import { Image } from "astro:assets";
 import ExternalLink from "../components/external-link.astro";
 import InlineSvg from "../components/inline-svg.astro";
 import GitHubLogo from "../images/GitHub.svg";
+import GitLabLogo from "../images/GitLab.svg";
 import KeyoxideLogo from "../images/Keyoxide.svg";
+import LinkedInLogo from "../images/LinkedIn.svg";
 import MatrixLogo from "../images/Matrix-logo.svg";
 import portrait from "../images/portrait.jpg";
 import "../styles/global.css";
@@ -58,6 +60,26 @@ import "../styles/global.css";
                 <span>kmoschcau</span>
               </ExternalLink>
             </li>
+            <li>
+              <ExternalLink
+                cssClass="link-gitlab"
+                href="https://gitlab.com/kmoschcau"
+                title="Mein GitLab-Konto"
+              >
+                <InlineSvg SvgComponent={GitLabLogo} slot="logo" />
+                <span>kmoschcau</span>
+              </ExternalLink>
+            </li>
+            <li>
+              <ExternalLink
+                cssClass="link-linked-in"
+                href="https://www.linkedin.com/in/kmoschcau/"
+                title="Mein LinkedIn-Konto"
+              >
+                <InlineSvg SvgComponent={LinkedInLogo} slot="logo" />
+                <span>kmoschcau</span>
+              </ExternalLink>
+            </li>
             <li>
               <ExternalLink
                 cssClass="link-keyoxide"

src/styles/global.css

@@ -6,14 +6,24 @@
   --link-bg-l: 53.5%;
   --hover-darken: 0.05;
 
+  --color-github: #1f2328;
+  --color-github-hover: oklch(
+    from var(--color-github) calc(l - var(--hover-darken)) c h
+  );
+
+  --color-gitlab: #e24329;
+  --color-gitlab-hover: oklch(
+    from var(--color-gitlab) calc(l - var(--hover-darken)) c h
+  );
+
   --color-keyoxide: #6855c3;
   --color-keyoxide-hover: oklch(
     from var(--color-keyoxide) calc(l - var(--hover-darken)) c h
   );
 
-  --color-github: #1f2328;
-  --color-github-hover: oklch(
-    from var(--color-github) calc(l - var(--hover-darken)) c h
+  --color-linked-in: #0b66c3;
+  --color-linked-in-hover: oklch(
+    from var(--color-linked-in) calc(l - var(--hover-darken)) c h
   );
 
   --color-matrix: oklch(from #0dbd8b var(--link-bg-l) c h);
@@ -37,10 +47,18 @@
     @apply bg-github hover:bg-github-hover text-white;
   }
 
+  .link-gitlab {
+    @apply bg-gitlab hover:bg-gitlab-hover text-black;
+  }
+
   .link-keyoxide {
     @apply bg-keyoxide hover:bg-keyoxide-hover text-white;
   }
 
+  .link-linked-in {
+    @apply bg-linked-in hover:bg-linked-in-hover text-white;
+  }
+
   .link-matrix {
     @apply bg-matrix hover:bg-matrix-hover text-white;
   }