Akshay Kolli
358e9cee4a
All checks were successful
Deploy Website / build-and-deploy (push) Successful in 1m3s
79 lines
3.8 KiB
TypeScript
79 lines
3.8 KiB
TypeScript
import type { Metadata } from 'next';
|
|
import Link from 'next/link';
|
|
import { formatPostDate } from '@/lib/format';
|
|
import { getAllPosts } from '@/lib/mdx';
|
|
|
|
export const metadata: Metadata = {
|
|
title: 'Blog',
|
|
description: 'Essays and notes by Akshay Kolli on GPUs, ML hardware, deep learning, and research.',
|
|
openGraph: {
|
|
title: 'Blog',
|
|
description: 'Essays and notes by Akshay Kolli on GPUs, ML hardware, deep learning, and research.',
|
|
},
|
|
};
|
|
|
|
export default function BlogIndex() {
|
|
const posts = getAllPosts();
|
|
|
|
return (
|
|
<div className="page-frame py-20 sm:py-24">
|
|
<div className="mx-auto max-w-[72rem] space-y-10">
|
|
<header className="space-y-4 border-b border-line pb-10">
|
|
<div className="space-y-4">
|
|
<p className="eyebrow">Writing</p>
|
|
<h1 className="max-w-[40rem] text-balance font-sans text-5xl font-medium leading-[0.96] text-ink sm:text-6xl lg:text-7xl">
|
|
Notes on GPUs, models, and the details underneath.
|
|
</h1>
|
|
<p className="max-w-[34rem] text-[1rem] leading-8 text-muted">
|
|
Hardware quirks, deep learning systems, and research problems
|
|
that needed more than the product page.
|
|
</p>
|
|
</div>
|
|
</header>
|
|
|
|
<div className="divide-y divide-line">
|
|
{posts.map((post) => (
|
|
<article key={post.slug} className="grid gap-3 py-6 md:grid-cols-[8rem_minmax(0,1fr)] md:gap-6">
|
|
<div className="pt-1">
|
|
<time dateTime={post.date} className="block font-mono text-[0.72rem] uppercase text-muted-strong">
|
|
{formatPostDate(post.date)}
|
|
</time>
|
|
</div>
|
|
|
|
<div className="space-y-3">
|
|
<Link href={`/blog/${post.slug}`} className="block">
|
|
<h2 className="max-w-[38rem] font-sans text-[1.8rem] font-medium leading-tight text-ink transition-colors hover:text-accent sm:text-[2.1rem]">
|
|
{post.title}
|
|
</h2>
|
|
</Link>
|
|
|
|
<p className="max-w-[34rem] text-[0.98rem] leading-7 text-muted">
|
|
{post.description}
|
|
</p>
|
|
|
|
<div className="flex flex-wrap items-center gap-x-4 gap-y-2 pt-1 text-[0.76rem] font-mono uppercase text-muted-strong">
|
|
{post.tags?.map((tag) => (
|
|
<span key={tag}>
|
|
{tag}
|
|
</span>
|
|
))}
|
|
<Link href={`/blog/${post.slug}`} className="text-ink transition-colors hover:text-accent">
|
|
Read
|
|
</Link>
|
|
</div>
|
|
</div>
|
|
</article>
|
|
))}
|
|
</div>
|
|
|
|
<section className="grid gap-4 border-t border-line pt-6 md:grid-cols-[8rem_minmax(0,1fr)]">
|
|
<p className="eyebrow md:pt-1">Archive</p>
|
|
<p className="max-w-[34rem] text-[0.96rem] leading-7 text-muted">
|
|
{posts.length} {posts.length === 1 ? 'essay' : 'essays'} published so far. I publish when I have a real question to chase down.
|
|
</p>
|
|
</section>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|