From 38c8ce8013c2eef8b17a39283bafac32f9d0913b Mon Sep 17 00:00:00 2001
From: Simon <privat@kovtyk.com>
Date: Wed, 11 Dec 2024 19:18:47 +0100
Subject: [PATCH] perf: insights and accessibility improved

---
 .github/workflows/deploy.yml |  1 +
 src/components/Button.astro  |  5 +++--
 src/components/Header.astro  |  8 ++++----
 src/components/PGP.astro     |  2 +-
 src/layouts/Root.astro       | 11 ++---------
 src/pages/index.astro        |  9 ++++-----
 6 files changed, 15 insertions(+), 21 deletions(-)

diff --git a/.github/workflows/deploy.yml b/.github/workflows/deploy.yml
index 34022b9..3b02a5c 100644
--- a/.github/workflows/deploy.yml
+++ b/.github/workflows/deploy.yml
@@ -31,3 +31,4 @@ jobs:
           strip_components: 1
           source: "dist/"
           target: "/var/www"
+          rm: true
diff --git a/src/components/Button.astro b/src/components/Button.astro
index 544e6fb..89f9ee3 100644
--- a/src/components/Button.astro
+++ b/src/components/Button.astro
@@ -4,9 +4,10 @@ interface Props {
   link?: string;
   target?: string;
   className?: string;
+  ariaLabel?: string;
 }
 
-const { type, link, target, className } = Astro.props;
+const { type, link, target, className, ariaLabel } = Astro.props;
 ---
 { type === "button" &&
   <button class:list={["flex justify-center items-center gap-2 p-2 bg-zinc-300 rounded-xl text-zinc-800 hover:text-zinc-600 transition-colors", className ]}>
@@ -14,7 +15,7 @@ const { type, link, target, className } = Astro.props;
   </button>
 }
 { type === "link" &&
-  <a href={link} target={target} class="flex justify-center items-center p-2 bg-zinc-300 rounded-xl text-zinc-800 hover:text-zinc-600 transition-colors">
+  <a aria-label={ariaLabel} href={link} target={target} class="flex justify-center items-center p-2 bg-zinc-300 rounded-xl text-zinc-800 hover:text-zinc-600 transition-colors">
     <slot />
   </a>
 }
diff --git a/src/components/Header.astro b/src/components/Header.astro
index 4b1b5c9..0b1b49e 100644
--- a/src/components/Header.astro
+++ b/src/components/Header.astro
@@ -3,17 +3,17 @@ import Button from "./Button.astro";
 import Icon from "./Icon.astro";
 ---
 <section class="flex flex-col items-start justify-start">
-  <img alt="Picture of Simon Kovtyk" class="bg-zinc-700 w-72 rounded-3xl mb-12" src="/profile.webp" />
+  <img alt="Picture of Simon Kovtyk" class="bg-zinc-700 w-72 rounded-3xl mb-12" width="512" height="512" src="/profile.webp" />
   <h1 class="text-4xl font-semibold text-zinc-300 mb-4">Simon Kovtyk</h1>
   <p class="text-2xl font-regular text-zinc-400">Software-Developer passionated in CI/CD, Architecture and Dev-Environments</p>
   <div class="flex flex-wrap items-center gap-4 mt-8">
-    <Button type="link" link="https://github.com/simonkovtyk" target="_blank">
+    <Button ariaLabel="Visit my GitHub profile" type="link" link="https://github.com/simonkovtyk" target="_blank">
       <Icon name="github" width={24} height={24} />
     </Button>
-    <Button type="link" link="https://www.npmjs.com/~simonkov" target="_blank">
+    <Button ariaLabel="Visit my npm profile" type="link" link="https://www.npmjs.com/~simonkov" target="_blank">
       <Icon name="npm" width={24} height={24} />
     </Button>
-    <Button type="link" link="https://x.com/simonkovtyk" target="_blank">
+    <Button ariaLabel="Visit my X profile" type="link" link="https://x.com/simonkovtyk" target="_blank">
       <Icon name="twitter-x" width={24} height={24} />
     </Button>
     <div class="flex justify-center items-center gap-4">
diff --git a/src/components/PGP.astro b/src/components/PGP.astro
index 4214d53..1b10113 100644
--- a/src/components/PGP.astro
+++ b/src/components/PGP.astro
@@ -43,7 +43,7 @@ import Icon from "./Icon.astro";
 </script>
 <section class="flex flex-col items-start justify-start mt-24">
   <h2 class="text-2xl font-semibold text-zinc-300 mb-4">Public PGP Key</h2>
-  <textarea readonly class="text-sm outline-none w-full h-72 text-zinc-400 border border-zinc-700 bg-[unset] p-4 rounded-xl text-wrap break-all select-text resize-none pgp-copy-text mb-4">
+  <textarea aria-label="My Public PGP Key" readonly rows="2" cols="20" class="text-sm outline-none w-full h-72 text-zinc-400 border border-zinc-700 bg-[unset] p-4 rounded-xl text-wrap break-all select-text resize-none pgp-copy-text mb-4">
 -----BEGIN PGP PUBLIC KEY BLOCK-----
 
 mQINBGb4E4gBEADDg8IiWYUpBndFowo9kVY6ycqMFbeNrvcwZqsEOpQh4uPiU2QD
diff --git a/src/layouts/Root.astro b/src/layouts/Root.astro
index f1b9ec0..4a532e0 100644
--- a/src/layouts/Root.astro
+++ b/src/layouts/Root.astro
@@ -1,23 +1,16 @@
 ---
 import "../app.css";
-
-interface Props {
-	title: string;
-}
-
-const { title } = Astro.props;
 ---
-
 <!DOCTYPE html>
 <html lang="en">
 	<head>
 		<meta charset="UTF-8" />
 		<meta name="viewport" content="width=device-width" />
-		<title>{title}</title>
     <link rel="manifest" href="manifest.json" />
+    <slot name="head" />
 	</head>
   <body class="bg-zinc-800">
-		<slot />
+		<slot name="body" />
 	</body>
 </html>
 
diff --git a/src/pages/index.astro b/src/pages/index.astro
index 4c4c9d7..99423b0 100644
--- a/src/pages/index.astro
+++ b/src/pages/index.astro
@@ -3,15 +3,14 @@ import Root from "../layouts/Root.astro";
 import Header from "../components/Header.astro";
 import PGP from "../components/PGP.astro";
 ---
-<Root title="Portfolio">
-<main class="w-full flex flex-col items-center my-[max(2rem,5vw)] px-8">
+<Root>
+<title slot="head">Simon Kovtyk</title>
+<meta slot="head" name="description" content="Explore my portfolio as a Software Developer passionate about CI/CD, Architecture, and Development Environments 💻. Discover my work and projects." />
+<main class="w-full flex flex-col items-center my-[max(2rem,5vw)] px-8" slot="body">
   <div class="max-w-[1000px]">
     <Header />
     <PGP />
   </div>
 </main>
 </Root>
-<script>
-  
-</script>