Merge pull request #1 from simonkovtyk/perf/insights

perf: insights and accessibility improved
simonkovtyk · Dec 11, 2024 · e5aeb42 · e5aeb42
2 parents c2886c8 + 38c8ce8
commit e5aeb42
Show file tree

Hide file tree

Showing 6 changed files with 15 additions and 21 deletions.
diff --git 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
@@ -4,17 +4,18 @@ 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 ]}>
     <slot />
   </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
@@ -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
@@ -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
@@ -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
@@ -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>