feat: improved homepage page

coderdiaz · coderdiaz · commit 7febe6d41dbc · 2025-04-18T02:00:56.000-06:00
diff --git a/src/pages/index.astro b/src/pages/index.astro
@@ -1,12 +1,84 @@
-<html lang="en">
-  <head>
-    <meta charset="utf-8" />
-    <link rel="icon" type="image/svg+xml" href="/favicon.svg" />
-    <meta name="viewport" content="width=device-width" />
-    <meta name="generator" content={Astro.generator} />
-    <title>Astro</title>
-  </head>
-  <body>
-    <h1>Astro</h1>
-  </body>
-</html>
+---
+import { getEntry, getCollection, render } from 'astro:content';
+import BaseLayout from '@/layouts/BaseLayout.astro';
+import Container from '@/components/Container.astro';
+import Author from '@/components/ui/Author.astro';
+import { DEFAULT_CONFIGURATION } from '@/lib/constants';
+import WorkExperience from '@/components/ui/WorkExperience.astro';
+import Talk from '@/components/ui/Talk.astro';
+
+const entry = await getEntry('pages', 'homepage');
+
+if (!entry) {
+  throw new Error('Homepage content not found in src/content/pages');
+}
+
+const { Content } = await render(entry);
+
+const links = await getCollection('links');
+const jobs = await getCollection('jobs');
+const talks = await getCollection('talks');
+---
+
+<BaseLayout>
+  <section class="py-6">
+    <Container>
+      <Author {...DEFAULT_CONFIGURATION.author} />
+    </Container>
+  </section>
+  <section class="py-6">
+    <Container>
+      <div class="flex flex-col gap-6">
+        <div class="flex items-center">
+          <span class="text-headings">About</span>
+        </div>
+        <div class="prose dark:prose-invert">
+          <Content />
+        </div>
+      </div>
+    </Container>
+  </section>
+  { links.length > 0 && (
+    <section class="py-8">
+      <Container>
+        <div class="flex flex-col gap-5">
+          <span class="text-headings">Contact</span>
+          <ul class="flex flex-col gap-3">
+            {links.map((link) => (
+              <li class="py-0.5">
+                <div class="flex items-center gap-5">
+                  <span class="min-w-28 text-muted-foreground">{link.data.label}</span>
+                  <a class="text-headings font-medium" rel="noopener noreferrer" target="_blank" href={link.data.url}>{link.data.name}</a>
+                </div>
+              </li>
+            ))}
+          </ul>
+        </div>
+      </Container>
+    </section>
+  )}
+  { jobs.length > 0 && (
+    <section class="py-6">
+      <Container>
+        <div class="flex flex-col gap-5">
+          <span class="text-headings">Work Experience</span>
+        <ul class="flex flex-col gap-8">
+          {jobs.map((job) => <WorkExperience entry={job} />)}
+        </ul>
+      </div>
+      </Container>
+    </section>
+  )}
+  {talks.length > 0 && (
+    <section class="py-6">
+      <Container>
+        <div class="flex flex-col gap-5">
+          <span class="text-headings">Speaking</span>
+        <ul class="flex flex-col gap-8">
+          {talks.map((talk) => <Talk entry={talk} />)}
+        </ul>
+      </div>
+      </Container>
+    </section>
+  )}
+</BaseLayout>
