website/src/pages/index.astro
2024-06-25 17:13:28 -06:00

82 lines
2.9 KiB
Plaintext

---
import Layout from "@/layouts/Layout.astro";
import LinkButton from "@/components/link-button";
import { getCollection } from "astro:content";
import PostItem from "@/components/post-item";
import { sortContentByDate } from "@/utils/sorts";
const allPosts = await getCollection("blog", ({ data }) => data.draft !== true);
sortContentByDate(allPosts);
const last3Blogs = allPosts.slice(0, 3);
const allProjects = await getCollection(
"portfolio",
({ data }) => data.draft !== true,
);
sortContentByDate(allProjects);
const last3Projects = allProjects.slice(0, 3);
---
<Layout title="juancmandev" description="Welcome to my domain, stranger.">
<div class="space-y-16">
<section class="flex flex-col items-start gap-5">
<div class="space-y-1">
<h1 class="text-3xl font-bold text-primary">
Welcome to my domain, stranger.
</h1>
<h2 class="text-xl">
I am <span class="font-semibold text-primary"
>juancmandev</span
>.
</h2>
<p class="text-lg font-light">
I like computers, and all stuff related to technology.
</p>
<p class="text-lg font-light">
Take a seat, drink some tea, and enjoy your stay.
</p>
</div>
</section>
<section>
<h2 class="text-3xl">Latest posts</h2>
<ul class="mt-4 flex flex-col gap-4">
{
last3Blogs.map((blogpost: any) => (
<li>
<PostItem
type="blog"
slug={blogpost.slug}
date={blogpost.data.date!}
title={blogpost.data.title!}
/>
</li>
))
}
</ul>
<LinkButton variant="secondary" href="/blog" className="mt-8"
>More posts</LinkButton
>
</section>
<section>
<h2 class="text-3xl">Latest projects</h2>
<ul class="mt-4 flex flex-col gap-4">
{
last3Projects.map((project: any) => (
<li>
<PostItem
type="portfolio"
slug={project.slug}
date={project.data.date!}
title={project.data.title!}
/>
</li>
))
}
</ul>
<LinkButton variant="secondary" href="/portfolio" className="mt-8"
>More projects</LinkButton
>
</section>
</div>
</Layout>