web-portfolio/app/blog/page.tsx

import {getCategorizedArticles} from "@/lib/articles";
import ArticleItemList from "@/components/ArticleListItem";

export default function BlogPage() {
    const articles = getCategorizedArticles()

    return (
        <>
            <section className={"mx-auto w-11/12 md:w-1/2 mt-20 flex flex-col gap-16 mb-20"}>
                <header className={"font-cormorantGaramond font-light text-6xl text-center"}>
                    <h1 className={'text-nord-14'}>Blog & thoughts</h1>
                </header>
                <section className={"md:grid md:grid-cols-2 flex flex-col gap-10"}>
                    {articles != null && Object.keys(articles).map((article) => (
                        <ArticleItemList category={article} articles={articles[article]} key={article}/>
                    ))}
                </section>
            </section>
        </>
    );
}