Implement new page layouts for Home, Contact, Portfolio, and Trajectory; update header and footer for multilingual support

1 files changed, 62 insertions, 0 deletions

diff --git a/src/layouts/HomePageLayout.astro b/src/layouts/HomePageLayout.astro
new file mode 100644
index 0000000..146eaec
--- /dev/null
+++ b/src/layouts/HomePageLayout.astro
@@ -0,0 +1,62 @@
+---
+import { getCollection } from "astro:content";
+import Layout from "./Layout.astro";
+import { useTranslations } from "../i18n";
+
+const blogCollection = (await getCollection("blog")).sort((a, b) => {
+	return b.data.publishedAt.getTime() - a.data.publishedAt.getTime();
+});
+
+const t = useTranslations(Astro.currentLocale);
+
+const schema = {
+	"@context": "http://schema.org",
+	"@type": "WebSite",
+	id: "https://www.costas.dev/",
+	url: "https://www.costas.dev/",
+	headline: t.homePage.title,
+};
+---
+
+<Layout title={t.homePage.title} description={t.homePage.description}>
+	<script
+		is:inline
+		type="application/ld+json"
+		slot="head-jsonld"
+		set:html={JSON.stringify(schema)}
+	/>
+
+	<h1>{t.homePage.title}</h1>
+	<p>{t.homePage.welcome}</p>
+
+	<h2>{t.homePage.whoAmI}</h2>
+	<p>{t.homePage.whoAmIDesc}</p>
+	<a href="/trajectory">{t.homePage.moreAboutMe}</a>
+
+	<h2>{t.homePage.whatIDo}</h2>
+	<p>{t.homePage.whatIDoDesc}</p>
+	<a href="/portfolio">{t.homePage.myPortfolio}</a>
+
+	<h2>{t.homePage.latestBlogPosts}</h2>
+	<ul>
+		{
+			blogCollection.slice(0, 5).map((p) => {
+				const date = Intl.DateTimeFormat(Astro.currentLocale, {
+					day: "2-digit",
+					month: "short",
+					year: "numeric",
+				}).format(p.data.publishedAt);
+				return (
+					<li>
+						<time datetime={p.data.publishedAt.toISOString()}>
+							{date}
+						</time>
+						<a href={`/blog/${p.id}`}>{p.data.title}</a>
+					</li>
+				);
+			})
+		}
+	</ul>
+	<a href="/blog">{t.homePage.viewAllPosts}</a>
+
+</Layout>