init

app/blog/[slug]/page.tsx

@@ -0,0 +1,23 @@
+import Link from "next/link"
+import { ArrowLeftIcon } from "@heroicons/react/24/solid"
+import { getArticleData } from "@/lib/articles";
+
+const Article = async ({ params }: { params: Promise<{ slug: string }> }) => {
+    const { slug } = await params;
+    const articleData = await getArticleData(slug);
+
+    return (
+        <section className={"mx-auto w-10/12 md:w-1/2 mt-20 flex flex-col gap-5"}>
+            <div className={"flex justify-between font-poppins"}>
+                <Link href={"/blog"} className={"flex flex-row gap-1 place-items-center"}>
+                    <ArrowLeftIcon width={20} />
+                    <p>blog homepage</p>
+                </Link>
+                <p>{articleData.date.toString()}</p>
+            </div>
+            <article className={"article"} dangerouslySetInnerHTML={{ __html: articleData.contentHtml }} />
+        </section>
+    )
+}
+
+export default Article;

app/blog/page.tsx

@@ -0,0 +1,21 @@
+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>Shrimple blog.</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>
+        </>
+    );
+}

app/contact/page.tsx

@@ -0,0 +1,7 @@
+export default function Contact() {
+    return (
+        <div className="flex flex-col items-center justify-center min-h-screen py-2">
+            <h1 className="text-4xl font-bold">Contact page, wip.</h1>
+        </div>
+    )
+}

app/globals.css

@@ -0,0 +1,84 @@
+@import "tailwindcss";
+
+@theme inline {
+    --font-cormorantGaramond: "Cormorant_Garamond", "sans-serif";
+    --font-poppins: "Poppins", "sans-serif";
+
+    /* Nord: Polar Night */
+    --color-nord-0: #2e3440;
+    --color-nord-1: #3b4252;
+    --color-nord-2: #4D535F;
+    --color-nord-3: #434c5e;
+
+    /* Nord: Snow Storm */
+    --color-nord-4: #d8dee9;
+    --color-nord-5: #e5e9f0;
+    --color-nord-6: #eceff4;
+
+    /* Nord: Frost */
+    --color-nord-7: #8fbcbb;
+    --color-nord-8: #88c0d0;
+    --color-nord-9: #81a1c1;
+    --color-nord-10: #5e81ac;
+
+    /* Nord: Aurora */
+    --color-nord-11: #bf616a;
+    --color-nord-12: #d08770;
+    --color-nord-13: #ebcb8b;
+    --color-nord-14: #a3be8c;
+    --color-nord-15: #b48ead;
+
+    /* Optional semantic aliases */
+    --color-polar-night-dark: #2e3440;
+    --color-polar-night: #3b4252;
+    --color-polar-night-light: #434c5e;
+    --color-polar-night-lighter: #4c566a;
+
+    --color-snow-storm-dark: #d8dee9;
+    --color-snow-storm: #e5e9f0;
+    --color-snow-storm-light: #eceff4;
+
+    --color-frost-green: #8fbcbb;
+    --color-frost-cyan: #88c0d0;
+    --color-frost-blue: #81a1c1;
+    --color-frost-deep-blue: #5e81ac;
+
+    --color-aurora-red: #bf616a;
+    --color-aurora-orange: #d08770;
+    --color-aurora-yellow: #ebcb8b;
+    --color-aurora-green: #a3be8c;
+    --color-aurora-purple: #b48ead;
+}
+
+.article {
+    @apply flex flex-col gap-3 font-poppins text-lg tracking-wide mb-20
+}
+
+.article > h1 {
+    @apply text-4xl font-cormorantGaramond text-center tracking-tight;
+}
+
+.article > h2 {
+    @apply text-3xl font-cormorantGaramond text-center tracking-tight;
+}
+
+.article > ol {
+    @apply list-decimal flex flex-col mx-10 gap-2;
+}
+
+.article > ul {
+    @apply list-disc flex flex-col mx-10 gap-2;
+}
+
+.article > pre {
+    @apply bg-neutral-950 text-neutral-50 p-5 overflow-scroll;
+}
+
+.article > blockquote {
+    @apply pl-5 italic border-l-2 border-neutral-600;
+}
+
+.article > p > img {
+    @apply w-1/2 mx-auto;
+}
+

app/layout.tsx

@@ -0,0 +1,38 @@
+import type {Metadata} from "next";
+import {Cormorant_Garamond, Poppins} from "next/font/google";
+import "./globals.css";
+import Header from "@/components/layout/layout-header";
+
+const cormorantGaramond = Cormorant_Garamond({
+    subsets: ['latin'],
+    variable: "--font-cormorantGaramond",
+    weight: ['400']
+})
+
+const poppins = Poppins({
+  subsets: ['latin'],
+  variable: "--font-poppins",
+  weight: ['400', '600']
+})
+
+
+export const metadata: Metadata = {
+    title: "Create Next App",
+    description: "Generated by create next app",
+};
+
+export default function RootLayout({
+                                       children,
+                                   }: Readonly<{
+    children: React.ReactNode;
+}>) {
+    return (
+        <html
+            lang="en"
+            className={`${cormorantGaramond.variable} ${poppins.variable} bg-neutral-100 h-full antialiased`}
+        >
+        <Header />
+        <body className="min-h-full flex flex-col bg-polar-night-lighter text-snow-storm text-shadow-snow-storm-dark">{children}</body>
+        </html>
+    );
+}

app/page.tsx

@@ -0,0 +1,14 @@
+import React from "react";
+
+export default function Home() {
+
+    return (
+        <>
+            <section className={"mx-auto w-11/12 md:w-1/2 mt-20 flex flex-col gap-16 mb-20 color-nord-9"}>
+                <header className={"font-cormorantGaramond font-light text-6xl text-center"}>
+                    <h1>Hello there, world.</h1>
+                </header>
+            </section>
+        </>
+    );
+}