50 lines
1.5 KiB
TypeScript
50 lines
1.5 KiB
TypeScript
import { getSortedPostsData } from "@/lib/posts";
|
|
import { ProjectCard } from "@/components/project-card";
|
|
import { BlurFade } from "@/components/magicui/blur-fade";
|
|
|
|
const BLUR_FADE_DELAY = 0.04;
|
|
|
|
export default function BlogPage() {
|
|
const posts = getSortedPostsData("blog");
|
|
|
|
return (
|
|
<main className="flex flex-col min-h-[100dvh] space-y-10">
|
|
<section id="blog">
|
|
<div className="mx-auto w-full max-w-6xl space-y-8">
|
|
<div className="space-y-2">
|
|
<h1 className="text-3xl font-bold tracking-tighter sm:text-5xl xl:text-6xl/none">
|
|
Blog
|
|
</h1>
|
|
<p className="text-muted-foreground">
|
|
Musings on technology, research, and life.
|
|
</p>
|
|
</div>
|
|
|
|
<div className="grid grid-cols-1 gap-3 sm:grid-cols-2 lg:grid-cols-3">
|
|
{posts
|
|
.filter((post) => post.title)
|
|
.map((post, id) => (
|
|
<BlurFade
|
|
key={post.title}
|
|
delay={BLUR_FADE_DELAY * 2 + id * 0.05}
|
|
>
|
|
<ProjectCard
|
|
href={post.href}
|
|
key={post.title}
|
|
title={post.title!}
|
|
description={post.excerpt || ""}
|
|
dates={post.date}
|
|
tags={post.tags}
|
|
image={post.image || ""}
|
|
video={post.video}
|
|
links={[]}
|
|
/>
|
|
</BlurFade>
|
|
))}
|
|
</div>
|
|
</div>
|
|
</section>
|
|
</main>
|
|
);
|
|
}
|