feat: enhance accessibility and language support across components

- Updated various components to include `lang` attributes for improved accessibility and SEO.
- Introduced a new `env.d.ts` file to define environment variables for better type safety.
- Adjusted the print width in `.prettierrc.mjs` for improved code formatting.
- Streamlined the `Header`, `PostElement`, and `SocialLinks` components for better structure and clarity.
- Added language support to blog posts and updated the layout to reflect these changes.

src/pages/blog/[...slug].astro

@@ -24,6 +24,7 @@ const { Content, remarkPluginFrontmatter } = await post.render();
 const date = dayjs(post.data.pubDate.toString()).format("MMMM DD, YYYY");
 const title = `${post.data.title} | Valentin Popov`;
 const description = post.data.description;
+const lang = post.data.lang;
 ---
 
 <style lang="scss">
@@ -34,7 +35,7 @@ const description = post.data.description;
 	}
 </style>
 
-<Layout title={title} description={description}>
+<Layout title={title} description={description} lang={lang}>
 	<article>
 		<section>
 			<h1>{post.data.title}</h1>
@@ -44,7 +45,7 @@ const description = post.data.description;
 			<p>
 				<small>
 					Posted
-					<time datetime={post.data.pubDate.toISOString()}>{date}</time>
+					<time datetime={post.data.pubDate.toISOString()} lang="en">{date}</time>
 					by&nbsp;{post.data.author}
 					<span>&nbsp;•&nbsp;</span>
 					<span>{remarkPluginFrontmatter.minutesRead}</span>

src/pages/blog/index.astro

@@ -4,8 +4,9 @@ import { getCollection } from "astro:content";
 import Layout from "../../layouts/BaseLayout.astro";
 import PostElement from "../../components/PostElement.astro";
 
-const title = "Blog | Valentin Popov";
-const description = "A collection of articles on software development, tech leadership and open-source experiments.";
+const title = "Valentin Popov's Blog | Software Development, Leadership & Open-Source";
+const description = "Explore Valentin Popov's blog on software development, tech leadership, and open-source experiments. Stay updated with in-depth tutorials and expert insights.";
+const lang = "en";
 
 const posts = await getCollection("blog", ({ data }) => {
 	return data.draft !== true;
@@ -25,12 +26,16 @@ const postsByYear = posts.reduce<Record<string, CollectionEntry<"blog">[]>>((acc
 const years = Object.keys(postsByYear).sort((a, b) => Number(b) - Number(a));
 ---
 
-<Layout title={title} description={description}>
+<Layout title={title} description={description} lang={lang}>
+	<section>
+		<h1>Blog posts</h1>
+	</section>
+
 	<section style={{ "margin-top": "3rem" }}>
 		{
 			years.map((year) => (
 				<div>
-					<div style={{ "margin-bottom": "1rem" }}>{year}</div>
+					<h2>{year}</h2>
 					<ul>
 						{postsByYear[year].map((post) => (
 							<PostElement post={post} />